Skip to content

Commit 7c52091

Browse files
GuillaumeGomezGuillaumeGomez
committed
Add new settings menu
1 parent b7e7975 commit 7c52091

File tree

3 files changed

+110
-15
lines changed

3 files changed

+110
-15
lines changed

‎util/gh-pages/index.html‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,28 @@
2626
<link rel="stylesheet" href="style.css">
2727
</head>
2828
<body ng-app="clippy" ng-controller="lintList">
29-
<div theme-dropdown class="theme-dropdown">
30-
<div id="theme-icon" class="theme-icon">&#128396;</div>
31-
<ul id="theme-menu" class="theme-choice">
32-
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
33-
</ul>
29+
<div id="settings">
30+
<div theme-dropdown class="theme-dropdown">
31+
<div class="menu-container">
32+
<div id="theme-icon" class="theme-icon">&#128396;</div>
33+
<ul id="theme-menu" class="theme-choice">
34+
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
35+
</ul>
36+
</div>
37+
</div>
38+
<div settings-dropdown class="settings-dropdown">
39+
<div class="menu-container">
40+
<div id="settings-icon" class="settings-icon"></div>
41+
<ul id="settings-menu" class="settings-choice">
42+
<li>
43+
<label>
44+
<input type="checkbox" id="disable-shortcuts" onchange="changeSetting(this)">
45+
<span>Disable keyboard shortcuts</span>
46+
</label>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
3451
</div>
3552

3653
<div class="container">

‎util/gh-pages/script.js‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,24 @@
6868
}
6969
}
7070
})
71+
.directive('settingsDropdown', function ($document) {
72+
return {
73+
restrict: 'A',
74+
link: function ($scope, $element, $attr) {
75+
$element.bind('click', function () {
76+
$element.toggleClass('open');
77+
$element.addClass('open-recent');
78+
});
79+
80+
$document.bind('click', function () {
81+
if (!$element.hasClass('open-recent')) {
82+
$element.removeClass('open');
83+
}
84+
$element.removeClass('open-recent');
85+
})
86+
}
87+
}
88+
})
7189
.directive('filterDropdown', function ($document) {
7290
return {
7391
restrict: 'A',
@@ -537,6 +555,16 @@ function getQueryVariable(variable) {
537555
}
538556
}
539557

558+
function storeValue(settingName, value) {
559+
try {
560+
localStorage.setItem(`clippy-lint-list-${settingName}`, value);
561+
} catch (e) { }
562+
}
563+
564+
function loadValue(settingName) {
565+
return localStorage.getItem(`clippy-lint-list-${settingName}`);
566+
}
567+
540568
function setTheme(theme, store) {
541569
let enableHighlight = false;
542570
let enableNight = false;
@@ -569,14 +597,12 @@ function setTheme(theme, store) {
569597
document.getElementById("styleAyu").disabled = !enableAyu;
570598

571599
if (store) {
572-
try {
573-
localStorage.setItem('clippy-lint-list-theme', theme);
574-
} catch (e) { }
600+
storeValue("theme", theme);
575601
}
576602
}
577603

578604
function handleShortcut(ev) {
579-
if (ev.ctrlKey || ev.altKey || ev.metaKey) {
605+
if (ev.ctrlKey || ev.altKey || ev.metaKey || disableShortcuts) {
580606
return;
581607
}
582608

@@ -601,11 +627,20 @@ function handleShortcut(ev) {
601627
document.addEventListener("keypress", handleShortcut);
602628
document.addEventListener("keydown", handleShortcut);
603629

630+
function changeSetting(elem) {
631+
if (elem.id === "disable-shortcuts") {
632+
disableShortcuts = elem.checked;
633+
storeValue(elem.id, elem.checked);
634+
}
635+
}
636+
604637
// loading the theme after the initial load
605638
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
606-
const theme = localStorage.getItem('clippy-lint-list-theme');
639+
const theme = loadValue('theme');
607640
if (prefersDark.matches && !theme) {
608641
setTheme("coal", false);
609642
} else {
610643
setTheme(theme, false);
611644
}
645+
let disableShortcuts = loadValue('disable-shortcuts') === "true";
646+
document.getElementById("disable-shortcuts").checked = disableShortcuts;

‎util/gh-pages/style.css‎

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -220,14 +220,20 @@ details[open] {
220220
--inline-code-bg: #191f26;
221221
}
222222

223-
.theme-dropdown {
223+
#settings {
224224
position: absolute;
225225
margin: 0.7em;
226226
z-index: 10;
227+
display: flex;
228+
}
229+
230+
.menu-container {
231+
position: relative;
232+
width: 28px;
227233
}
228234

229235
/* Applying the mdBook theme */
230-
.theme-icon {
236+
.theme-icon, .settings-icon {
231237
text-align: center;
232238
width: 2em;
233239
height: 2em;
@@ -237,10 +243,10 @@ details[open] {
237243
user-select: none;
238244
cursor: pointer;
239245
}
240-
.theme-icon:hover {
246+
.theme-icon:hover, .settings-icon:hover {
241247
background: var(--theme-hover);
242248
}
243-
.theme-choice {
249+
.theme-choice, .settings-choice {
244250
display: none;
245251
list-style: none;
246252
border: 1px solid var(--theme-popup-border);
@@ -249,9 +255,46 @@ details[open] {
249255
background: var(--theme-popup-bg);
250256
padding: 0 0;
251257
overflow: hidden;
258+
position: absolute;
259+
}
260+
261+
.settings-dropdown {
262+
margin-left: 4px;
263+
}
264+
265+
.settings-icon::before {
266+
/* Wheel <https://www.svgrepo.com/svg/384069/settings-cog-gear> */
267+
content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 12 12" \
268+
enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
269+
<path d="M10.25,6c0-0.1243286-0.0261841-0.241333-0.0366211-0.362915l1.6077881-1.5545654l\
270+
-1.25-2.1650391 c0,0-1.2674561,0.3625488-2.1323853,0.6099854c-0.2034912-0.1431885-0.421875\
271+
-0.2639771-0.6494751-0.3701782L7.25,0h-2.5 c0,0-0.3214111,1.2857666-0.5393066,2.1572876\
272+
C3.9830933,2.2634888,3.7647095,2.3842773,3.5612183,2.5274658L1.428833,1.9174805 \
273+
l-1.25,2.1650391c0,0,0.9641113,0.9321899,1.6077881,1.5545654C1.7761841,5.758667,\
274+
1.75,5.8756714,1.75,6 s0.0261841,0.241333,0.0366211,0.362915L0.178833,7.9174805l1.25,\
275+
2.1650391l2.1323853-0.6099854 c0.2034912,0.1432495,0.421875,0.2639771,0.6494751,0.3701782\
276+
L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.6494751\
277+
-0.3701782l2.1323853,0.6099854l1.25-2.1650391L10.2133789,6.362915 C10.2238159,6.241333,\
278+
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\
279+
,5.1715698,7.5,6 S6.8284302,7.5,6,7.5z" fill="black"/></svg>');
280+
width: 18px;
281+
height: 18px;
282+
display: block;
283+
filter: invert(0.7);
284+
padding-left: 4px;
285+
padding-top: 3px;
286+
}
287+
288+
.settings-choice {
289+
padding: 4px;
290+
width: 212px;
291+
}
292+
293+
.settings-choice label {
294+
cursor: pointer;
252295
}
253296

254-
.theme-dropdown.open .theme-choice {
297+
.theme-dropdown.open .theme-choice, .settings-dropdown.open .settings-choice {
255298
display: block;
256299
}
257300

0 commit comments

Comments
 (0)