From 99c2127cc8222a4b1762720a40502aab2ab89258 Mon Sep 17 00:00:00 2001 From: Lucien Cartier-Tilet Date: Fri, 22 May 2020 01:51:55 +0200 Subject: [PATCH] Fixes #7 Fontawesome was removed from the source code and is a dependency no longer needed by websites running with OWB --- web/dart/navbar.dart | 66 ++++++++++++++++++++++++++++++-------------- web/style/style.scss | 13 +++++++++ 2 files changed, 59 insertions(+), 20 deletions(-) diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart index b32d299..8bc82d3 100644 --- a/web/dart/navbar.dart +++ b/web/dart/navbar.dart @@ -1,10 +1,40 @@ import 'dart:html'; +import 'dart:svg'; + +// Icons from https://materialdesignicons.com/ +final icons = { + 'home': SvgElement.svg(''), + + 'pages': SvgElement.svg(''), + + 'toc': SvgElement.svg( ''), + + 'share': SvgElement.svg( ''), + + 'twitter': SvgElement.svg( ''), + + 'reddit': SvgElement.svg( ''), + + 'email': SvgElement.svg( ''), + + 'linkedin': SvgElement.svg( ''), + + 'facebook': SvgElement.svg( ''), + + 'theme': SvgElement.svg( ''), + + 'sun': SvgElement.svg( ''), + + 'lightbulb': SvgElement.svg( ''), + + 'moon': SvgElement.svg( ''), +}; String getPageTitle() => querySelector('title').text; -Element makeIcon(List classes, [String id]) { - final icon = Element.tag('i')..classes.addAll(classes); - icon.attributes['id'] = id ?? ''; +Element makeIcon(SvgElement elem) { + final icon = elem + ..classes.add('nav-icon'); return icon; } @@ -14,7 +44,7 @@ Future makeToc() async { ..classes.addAll(['nav-item', 'has-dropdown']) ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' - ..append(makeIcon(['fas', 'fa-list-ol'], 'tocBtn'))); + ..append(makeIcon(icons['toc']))); } Future makePages() async { @@ -24,7 +54,7 @@ Future makePages() async { return Element.li() ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' - ..append(makeIcon(['fas', 'fa-flag']))) + ..append(makeIcon(icons['pages']))) ..classes.addAll(['nav-item', 'has-dropdown']) ..append(pages); } @@ -44,23 +74,23 @@ Future makeShare() async { ..classes.addAll(['nav-item', 'has-dropdown']) ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' - ..append(makeIcon(['fas', 'fa-share-alt']))) + ..append(makeIcon(icons['share']))) ..append(Element.ul() ..classes.add('dropdown') ..attributes['id'] = 'drop-share' ..append(makeShareLink( - makeIcon(['fab', 'fa-twitter-square']), + makeIcon(icons['twitter']), 'https://twitter.com/share?text=${getPageTitle()}' '&url=${window.location.href}')) - ..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']), + ..append(makeShareLink(makeIcon(icons['reddit']), 'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}')) - ..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']), + ..append(makeShareLink(makeIcon(icons['email']), 'mailto:?subject=${getPageTitle}&body=${window.location.href}')) ..append(makeShareLink( - makeIcon(['fab', 'fa-linkedin']), + makeIcon(icons['linkedin']), 'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}' '&title=${getPageTitle()}')) - ..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']), + ..append(makeShareLink(makeIcon(icons['facebook']), 'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}'))); } @@ -81,17 +111,13 @@ Future makeThemeChanger() async { ..append(Element.span() ..classes.add('fa-stack') ..style.verticalAlign = 'top' - ..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x']) - ..style.fontSize = '0.9em') - ..append(makeIcon(['fas', 'fa-moon', 'fa-stack-1x'])))) + ..append(makeIcon(icons['theme'])))) ..append(Element.ul() ..classes.add('dropdown') ..attributes['id'] = 'theme-dropdown' - ..append(makeThemeItem('lightBtn', makeIcon(['fas', 'fa-sun']), 'Clair')) - ..append( - makeThemeItem('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre')) - ..append( - makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir'))); + ..append(makeThemeItem('lightBtn', makeIcon(icons['sun']), 'Clair')) + ..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb']), 'Sombre')) + ..append(makeThemeItem('blackBtn', makeIcon(icons['moon']), 'Noir'))); } Future makeHome() async { @@ -101,7 +127,7 @@ Future makeHome() async { 'afterBegin', Element.a() ..attributes['href'] = '/' - ..append(makeIcon(['fas', 'fa-home']))); + ..append(makeIcon(icons['home']))); } // Add a navbar atop of the HTML body, containing two buttons: diff --git a/web/style/style.scss b/web/style/style.scss index 78832bb..0f02019 100644 --- a/web/style/style.scss +++ b/web/style/style.scss @@ -77,6 +77,10 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); background: $bg-nav; } + .navbar svg { + fill: $dark; + } + .status { background: $gradient-accent3-light-left; color: $dark; @@ -151,6 +155,10 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); background: $bg-nav; } + .navbar svg { + fill: $light; + } + .status { background: $gradient-accent2-dark-left; color: $light; @@ -566,6 +574,11 @@ img { max-width: 100%; } +.nav-icon { + max-width: 20px; + max-height: 20px; +} + .figure { padding: 0; }