Browse Source

feat(menu): change palette icon to moon + add option to hide search

- a static moon icon is currently commonly used by popular sites such as Facebook and Reddit to represent a light/dark chooser
- fix automatic light/dark theming when the chooser is hidden with `show_day_night` set to `false`
- add boolean `show_search` option to `main_menu` in `params.toml` to hide search button from main (still accessible from the standard / keyboard shortcut)
George Cushen 4 years ago
parent
commit
c4ce9f5bd3

+ 3 - 2
wowchemy/assets/js/academic.js

@@ -336,9 +336,10 @@
   * Change Theme Mode (0: Day, 1: Night, 2: Auto).
   * --------------------------------------------------------------------------- */
 
+  // TODO: import theme functions from load-theme.js to avoid duplication.
   function canChangeTheme() {
-    // If the theme changer component is present, then user is allowed to change the theme variation.
-    return $('.js-theme-selector').length;
+    // If var is set, then user is allowed to change the theme variation.
+    return Boolean(window.wcDarkLightEnabled);
   }
 
   function getThemeMode() {

+ 1 - 1
wowchemy/assets/js/load-theme.js

@@ -5,7 +5,7 @@
 
   function canChangeTheme() {
     // If var is set, then user is allowed to change the theme variation.
-    return Boolean(window.staDarkLightChooser);
+    return Boolean(window.wcDarkLightEnabled);
   }
 
   function initThemeVariation() {

+ 1 - 1
wowchemy/layouts/_default/baseof.html

@@ -11,7 +11,7 @@
   {{/* Load day/night theme. */}}
   {{/* Initialise default theme. */}}
   {{ if site.Params.day_night }}
-    <script>window.staDarkLightChooser = true;</script>
+    <script>window.wcDarkLightEnabled = true;</script>
   {{ end }}
   {{ if eq (.Scratch.Get "light") true }}
     <script>const isSiteThemeDark = false;</script>

+ 4 - 3
wowchemy/layouts/partials/navbar.html

@@ -139,7 +139,8 @@
     </div><!-- /.navbar-collapse -->
 
     <ul class="nav-icons navbar-nav flex-row ml-auto d-flex pl-md-2">
-      {{ if site.Params.search.engine }}
+      {{ $show_search := site.Params.main_menu.show_search | default true }}
+      {{ if and site.Params.search.engine $show_search }}
       <li class="nav-item">
         <a class="nav-link js-search" href="#" aria-label="{{ i18n "search" }}"><i class="fas fa-search" aria-hidden="true"></i></a>
       </li>
@@ -148,8 +149,8 @@
       {{ $show_day_night := site.Params.main_menu.show_day_night | default true }}
       {{ if and site.Params.day_night $show_day_night }}
       <li class="nav-item dropdown theme-dropdown">
-        <a href="#" class="nav-link js-theme-selector" data-toggle="dropdown" aria-haspopup="true">
-          <i class="fas fa-palette" aria-hidden="true"></i>
+        <a href="#" class="nav-link" data-toggle="dropdown" aria-haspopup="true">
+          <i class="fas fa-moon" aria-hidden="true"></i>
         </a>
         <div class="dropdown-menu">
           <a href="#" class="dropdown-item js-set-theme-light">