Show the currently selected theme.

This commit is contained in:
Eric Huss 2022-11-21 15:27:39 -08:00
parent f64fcbc07d
commit f32bd6f945
4 changed files with 23 additions and 6 deletions

View File

@ -340,6 +340,7 @@ impl HtmlHandlebars {
); );
handlebars.register_helper("previous", Box::new(helpers::navigation::previous)); handlebars.register_helper("previous", Box::new(helpers::navigation::previous));
handlebars.register_helper("next", Box::new(helpers::navigation::next)); 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)); 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 { let default_theme = match html_config.default_theme {
Some(ref theme) => theme.to_lowercase(), Some(ref theme) => theme.to_lowercase(),
None => "light".to_string(), None => "light".to_string(),

View File

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

View File

@ -517,7 +517,7 @@ ul#searchresults span.teaser em {
width: 100%; width: 100%;
border: 0; border: 0;
margin: 0; margin: 0;
padding: 2px 10px; padding: 2px 20px;
line-height: 25px; line-height: 25px;
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
@ -529,3 +529,10 @@ ul#searchresults span.teaser em {
.theme-popup .theme:hover { .theme-popup .theme:hover {
background-color: var(--theme-hover); background-color: var(--theme-hover);
} }
.theme-selected::before {
display: inline-block;
content: "✓";
margin-left: -14px;
width: 14px;
}

View File

@ -121,11 +121,11 @@
<i class="fa fa-paint-brush"></i> <i class="fa fa-paint-brush"></i>
</button> </button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu"> <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="light">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="rust">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="coal">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="navy">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="ayu">Ayu</button></li>
</ul> </ul>
{{#if search_enabled}} {{#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"> <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">