Add new settings menu
This commit is contained in:
Guillaume Gomez
parent
b7e7975ded
commit
7c5209121d
@ -26,12 +26,29 @@ Otherwise, have a great day =^.^=
|
|||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body ng-app="clippy" ng-controller="lintList">
|
<body ng-app="clippy" ng-controller="lintList">
|
||||||
|
<div id="settings">
|
||||||
<div theme-dropdown class="theme-dropdown">
|
<div theme-dropdown class="theme-dropdown">
|
||||||
|
<div class="menu-container">
|
||||||
<div id="theme-icon" class="theme-icon">🖌</div>
|
<div id="theme-icon" class="theme-icon">🖌</div>
|
||||||
<ul id="theme-menu" class="theme-choice">
|
<ul id="theme-menu" class="theme-choice">
|
||||||
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
|
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
|
|||||||
@ -68,6 +68,24 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
.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) {
|
.directive('filterDropdown', function ($document) {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
@ -537,6 +555,16 @@ function getQueryVariable(variable) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function storeValue(settingName, value) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(`clippy-lint-list-${settingName}`, value);
|
||||||
|
} catch (e) { }
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadValue(settingName) {
|
||||||
|
return localStorage.getItem(`clippy-lint-list-${settingName}`);
|
||||||
|
}
|
||||||
|
|
||||||
function setTheme(theme, store) {
|
function setTheme(theme, store) {
|
||||||
let enableHighlight = false;
|
let enableHighlight = false;
|
||||||
let enableNight = false;
|
let enableNight = false;
|
||||||
@ -569,14 +597,12 @@ function setTheme(theme, store) {
|
|||||||
document.getElementById("styleAyu").disabled = !enableAyu;
|
document.getElementById("styleAyu").disabled = !enableAyu;
|
||||||
|
|
||||||
if (store) {
|
if (store) {
|
||||||
try {
|
storeValue("theme", theme);
|
||||||
localStorage.setItem('clippy-lint-list-theme', theme);
|
|
||||||
} catch (e) { }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleShortcut(ev) {
|
function handleShortcut(ev) {
|
||||||
if (ev.ctrlKey || ev.altKey || ev.metaKey) {
|
if (ev.ctrlKey || ev.altKey || ev.metaKey || disableShortcuts) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -601,11 +627,20 @@ function handleShortcut(ev) {
|
|||||||
document.addEventListener("keypress", handleShortcut);
|
document.addEventListener("keypress", handleShortcut);
|
||||||
document.addEventListener("keydown", handleShortcut);
|
document.addEventListener("keydown", handleShortcut);
|
||||||
|
|
||||||
|
function changeSetting(elem) {
|
||||||
|
if (elem.id === "disable-shortcuts") {
|
||||||
|
disableShortcuts = elem.checked;
|
||||||
|
storeValue(elem.id, elem.checked);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// loading the theme after the initial load
|
// loading the theme after the initial load
|
||||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||||
const theme = localStorage.getItem('clippy-lint-list-theme');
|
const theme = loadValue('theme');
|
||||||
if (prefersDark.matches && !theme) {
|
if (prefersDark.matches && !theme) {
|
||||||
setTheme("coal", false);
|
setTheme("coal", false);
|
||||||
} else {
|
} else {
|
||||||
setTheme(theme, false);
|
setTheme(theme, false);
|
||||||
}
|
}
|
||||||
|
let disableShortcuts = loadValue('disable-shortcuts') === "true";
|
||||||
|
document.getElementById("disable-shortcuts").checked = disableShortcuts;
|
||||||
|
|||||||
@ -220,14 +220,20 @@ details[open] {
|
|||||||
--inline-code-bg: #191f26;
|
--inline-code-bg: #191f26;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-dropdown {
|
#settings {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0.7em;
|
margin: 0.7em;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-container {
|
||||||
|
position: relative;
|
||||||
|
width: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Applying the mdBook theme */
|
/* Applying the mdBook theme */
|
||||||
.theme-icon {
|
.theme-icon, .settings-icon {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
@ -237,10 +243,10 @@ details[open] {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.theme-icon:hover {
|
.theme-icon:hover, .settings-icon:hover {
|
||||||
background: var(--theme-hover);
|
background: var(--theme-hover);
|
||||||
}
|
}
|
||||||
.theme-choice {
|
.theme-choice, .settings-choice {
|
||||||
display: none;
|
display: none;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
border: 1px solid var(--theme-popup-border);
|
border: 1px solid var(--theme-popup-border);
|
||||||
@ -249,9 +255,46 @@ details[open] {
|
|||||||
background: var(--theme-popup-bg);
|
background: var(--theme-popup-bg);
|
||||||
padding: 0 0;
|
padding: 0 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-dropdown.open .theme-choice {
|
.settings-dropdown {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-icon::before {
|
||||||
|
/* Wheel <https://www.svgrepo.com/svg/384069/settings-cog-gear> */
|
||||||
|
content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 12 12" \
|
||||||
|
enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
|
||||||
|
<path d="M10.25,6c0-0.1243286-0.0261841-0.241333-0.0366211-0.362915l1.6077881-1.5545654l\
|
||||||
|
-1.25-2.1650391 c0,0-1.2674561,0.3625488-2.1323853,0.6099854c-0.2034912-0.1431885-0.421875\
|
||||||
|
-0.2639771-0.6494751-0.3701782L7.25,0h-2.5 c0,0-0.3214111,1.2857666-0.5393066,2.1572876\
|
||||||
|
C3.9830933,2.2634888,3.7647095,2.3842773,3.5612183,2.5274658L1.428833,1.9174805 \
|
||||||
|
l-1.25,2.1650391c0,0,0.9641113,0.9321899,1.6077881,1.5545654C1.7761841,5.758667,\
|
||||||
|
1.75,5.8756714,1.75,6 s0.0261841,0.241333,0.0366211,0.362915L0.178833,7.9174805l1.25,\
|
||||||
|
2.1650391l2.1323853-0.6099854 c0.2034912,0.1432495,0.421875,0.2639771,0.6494751,0.3701782\
|
||||||
|
L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.6494751\
|
||||||
|
-0.3701782l2.1323853,0.6099854l1.25-2.1650391L10.2133789,6.362915 C10.2238159,6.241333,\
|
||||||
|
10.25,6.1243286,10.25,6z M6,7.5C5.1715698,7.5,4.5,6.8284302,4.5,6S5.1715698,4.5,6,4.5S7.5\
|
||||||
|
,5.1715698,7.5,6 S6.8284302,7.5,6,7.5z" fill="black"/></svg>');
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: block;
|
||||||
|
filter: invert(0.7);
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-choice {
|
||||||
|
padding: 4px;
|
||||||
|
width: 212px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-choice label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dropdown.open .theme-choice, .settings-dropdown.open .settings-choice {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user