mirror of
https://github.com/rust-lang/rust-clippy
synced 2024-11-10 07:04:18 +00:00
Unify theme and settings menus
This commit is contained in:
Guillaume Gomez
parent
7c5209121d
commit
934e98d591
3 changed files with 72 additions and 98 deletions
|
|
@ -26,27 +26,15 @@ Otherwise, have a great day =^.^=
|
|||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body ng-app="clippy" ng-controller="lintList">
|
||||
<div id="settings">
|
||||
<div theme-dropdown class="theme-dropdown">
|
||||
<div class="menu-container">
|
||||
<div id="theme-icon" class="theme-icon">🖌</div>
|
||||
<ul id="theme-menu" class="theme-choice">
|
||||
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div settings-dropdown class="settings-dropdown">
|
||||
<div class="menu-container">
|
||||
<div id="settings-icon" class="settings-icon"></div>
|
||||
<ul id="settings-menu" class="settings-choice">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" id="disable-shortcuts" onchange="changeSetting(this)">
|
||||
<span>Disable keyboard shortcuts</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="settings-dropdown">
|
||||
<div class="settings-icon" tabindex="-1"></div>
|
||||
<div class="settings-menu" tabindex="-1">
|
||||
<div class="setting-radio-name">Theme</div>
|
||||
<select id="theme-choice" onchange="setTheme(this.value, true)"></select>
|
||||
<label>
|
||||
<input type="checkbox" id="disable-shortcuts" onchange="changeSetting(this)">
|
||||
<span>Disable keyboard shortcuts</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -50,42 +50,6 @@
|
|||
);
|
||||
};
|
||||
})
|
||||
.directive('themeDropdown', function ($document) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function ($scope, $element, $attr) {
|
||||
$element.bind('click', function () {
|
||||
$element.toggleClass('open');
|
||||
$element.addClass('open-recent');
|
||||
});
|
||||
|
||||
$document.bind('click', function () {
|
||||
if (!$element.hasClass('open-recent')) {
|
||||
$element.removeClass('open');
|
||||
}
|
||||
$element.removeClass('open-recent');
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
.directive('settingsDropdown', function ($document) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function ($scope, $element, $attr) {
|
||||
$element.bind('click', function () {
|
||||
$element.toggleClass('open');
|
||||
$element.addClass('open-recent');
|
||||
});
|
||||
|
||||
$document.bind('click', function () {
|
||||
if (!$element.hasClass('open-recent')) {
|
||||
$element.removeClass('open');
|
||||
}
|
||||
$element.removeClass('open-recent');
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
.directive('filterDropdown', function ($document) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
|
|
@ -145,15 +109,6 @@
|
|||
...GROUPS_FILTER_DEFAULT
|
||||
};
|
||||
|
||||
const THEMES_DEFAULT = {
|
||||
light: "Light",
|
||||
rust: "Rust",
|
||||
coal: "Coal",
|
||||
navy: "Navy",
|
||||
ayu: "Ayu"
|
||||
};
|
||||
$scope.themes = THEMES_DEFAULT;
|
||||
|
||||
$scope.versionFilters = {
|
||||
"≥": {enabled: false, minorVersion: null },
|
||||
"≤": {enabled: false, minorVersion: null },
|
||||
|
|
@ -339,10 +294,6 @@
|
|||
$location.path($scope.search);
|
||||
}
|
||||
|
||||
$scope.selectTheme = function (theme) {
|
||||
setTheme(theme, true);
|
||||
}
|
||||
|
||||
$scope.toggleLevels = function (value) {
|
||||
const levels = $scope.levels;
|
||||
for (const key in levels) {
|
||||
|
|
@ -598,6 +549,8 @@ function setTheme(theme, store) {
|
|||
|
||||
if (store) {
|
||||
storeValue("theme", theme);
|
||||
} else {
|
||||
document.getElementById(`theme-choice`).value = theme;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -634,6 +587,48 @@ function changeSetting(elem) {
|
|||
}
|
||||
}
|
||||
|
||||
function onEachLazy(lazyArray, func) {
|
||||
const arr = Array.prototype.slice.call(lazyArray);
|
||||
for (const el of arr) {
|
||||
func(el);
|
||||
}
|
||||
}
|
||||
|
||||
function handleBlur(event) {
|
||||
const parent = document.getElementById("settings-dropdown");
|
||||
if (!parent.contains(document.activeElement) &&
|
||||
!parent.contains(event.relatedTarget)
|
||||
) {
|
||||
parent.classList.remove("open");
|
||||
}
|
||||
}
|
||||
|
||||
function generateSettings() {
|
||||
const THEMES = ["Ayu", "Coal", "Light", "Navy", "Rust"];
|
||||
const themesElem = document.getElementById("theme-choice");
|
||||
let children = '';
|
||||
|
||||
for (const theme of THEMES) {
|
||||
const id = theme.toLowerCase();
|
||||
children += `<option value="${id}">${theme}</option>`;
|
||||
}
|
||||
themesElem.innerHTML = children;
|
||||
themesElem.onblur = handleBlur;
|
||||
|
||||
const settings = document.getElementById("settings-dropdown");
|
||||
const settingsButton = settings.querySelector(".settings-icon")
|
||||
settingsButton.onclick = () => settings.classList.toggle("open");
|
||||
settingsButton.onblur = handleBlur;
|
||||
const settingsMenu = settings.querySelector(".settings-menu");
|
||||
settingsMenu.onblur = handleBlur;
|
||||
onEachLazy(
|
||||
settingsMenu.querySelectorAll("input"),
|
||||
el => el.onblur = handleBlur,
|
||||
);
|
||||
}
|
||||
|
||||
generateSettings();
|
||||
|
||||
// loading the theme after the initial load
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const theme = loadValue('theme');
|
||||
|
|
|
|||
|
|
@ -220,20 +220,15 @@ details[open] {
|
|||
--inline-code-bg: #191f26;
|
||||
}
|
||||
|
||||
#settings {
|
||||
#settings-dropdown {
|
||||
position: absolute;
|
||||
margin: 0.7em;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
/* Applying the mdBook theme */
|
||||
.theme-icon, .settings-icon {
|
||||
.settings-icon {
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
|
|
@ -242,24 +237,20 @@ details[open] {
|
|||
border-radius: 5px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.theme-icon:hover, .settings-icon:hover {
|
||||
background: var(--theme-hover);
|
||||
}
|
||||
.theme-choice, .settings-choice {
|
||||
.settings-menu {
|
||||
display: none;
|
||||
list-style: none;
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
border-radius: 5px;
|
||||
color: var(--fg);
|
||||
background: var(--theme-popup-bg);
|
||||
padding: 0 0;
|
||||
overflow: hidden;
|
||||
padding: 9px;
|
||||
width: 207px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.settings-dropdown {
|
||||
margin-left: 4px;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.settings-icon::before {
|
||||
|
|
@ -285,28 +276,28 @@ L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.649
|
|||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.settings-choice {
|
||||
padding: 4px;
|
||||
width: 212px;
|
||||
.settings-menu * {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.settings-choice label {
|
||||
.settings-menu label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-dropdown.open .theme-choice, .settings-dropdown.open .settings-choice {
|
||||
#settings-dropdown.open .settings-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.theme-choice > li {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.8em;
|
||||
user-select: none;
|
||||
#theme-choice {
|
||||
margin-bottom: 10px;
|
||||
background: var(--searchbar-bg);
|
||||
color: var(--searchbar-fg);
|
||||
border-color: var(--theme-popup-border);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-choice > li:hover {
|
||||
background: var(--theme-hover);
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
|
|
|||
Loading…
Reference in a new issue