Merge pull request #1935 from ehuss/theme-dropdown-rendering-changes

Show the currently selected theme

Author: Dylan-DPC

src/renderer/html_handlebars/hbs_renderer.rs

@@ -340,6 +340,7 @@ impl HtmlHandlebars {
         );
         handlebars.register_helper("previous", Box::new(helpers::navigation::previous));
         handlebars.register_helper("next", Box::new(helpers::navigation::next));
+        // TODO: remove theme_option in 0.5, it is not needed.
         handlebars.register_helper("theme_option", Box::new(helpers::theme::theme_option));
     }
 
@@ -630,6 +631,7 @@ fn make_data(
         );
     }
 
+    // TODO: remove default_theme in 0.5, it is not needed.
     let default_theme = match html_config.default_theme {
         Some(ref theme) => theme.to_lowercase(),
         None => "light".to_string(),

src/theme/book.js

@@ -300,6 +300,13 @@ function playground_text(playground) {
         themePopup.querySelector("button#" + get_theme()).focus();
     }
 
+    function updateThemeSelected() {
+        themePopup.querySelectorAll('.theme-selected').forEach(function (el) {
+            el.classList.remove('theme-selected');
+        });
+        themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected');
+    }
+
     function hideThemes() {
         themePopup.style.display = 'none';
         themeToggleButton.setAttribute('aria-expanded', false);
@@ -355,6 +362,7 @@ function playground_text(playground) {
 
         html.classList.remove(previousTheme);
         html.classList.add(theme);
+        updateThemeSelected();
     }
 
     // Set theme

src/theme/css/chrome.css

@@ -507,6 +507,8 @@ ul#searchresults span.teaser em {
     padding: 0;
     list-style: none;
     display: none;
+    /* Don't let the children's background extend past the rounded corners. */
+    overflow: hidden;
 }
 .theme-popup .default {
     color: var(--icons);
@@ -515,7 +517,7 @@ ul#searchresults span.teaser em {
     width: 100%;
     border: 0;
     margin: 0;
-    padding: 2px 10px;
+    padding: 2px 20px;
     line-height: 25px;
     white-space: nowrap;
     text-align: left;
@@ -527,8 +529,10 @@ ul#searchresults span.teaser em {
 .theme-popup .theme:hover {
     background-color: var(--theme-hover);
 }
-.theme-popup .theme:hover:first-child,
-.theme-popup .theme:hover:last-child {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
+
+.theme-selected::before {
+    display: inline-block;
+    content: "✓";
+    margin-left: -14px;
+    width: 14px;
 }

src/theme/index.hbs

@@ -121,11 +121,11 @@
                             <i class="fa fa-paint-brush"></i>
                         </button>
                         <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
-                            <li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                         </ul>
                         {{#if search_enabled}}
                         <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">