diff --git a/master/script.js b/master/script.js
index ed1e090e1b54..d54b5e851c7c 100644
--- a/master/script.js
+++ b/master/script.js
@@ -50,24 +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('filterDropdown', function ($document) {
return {
restrict: 'A',
@@ -127,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 },
@@ -321,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) {
@@ -537,6 +506,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) {
let enableHighlight = false;
let enableNight = false;
@@ -569,14 +548,14 @@ function setTheme(theme, store) {
document.getElementById("styleAyu").disabled = !enableAyu;
if (store) {
- try {
- localStorage.setItem('clippy-lint-list-theme', theme);
- } catch (e) { }
+ storeValue("theme", theme);
+ } else {
+ document.getElementById(`theme-choice`).value = theme;
}
}
function handleShortcut(ev) {
- if (ev.ctrlKey || ev.altKey || ev.metaKey) {
+ if (ev.ctrlKey || ev.altKey || ev.metaKey || disableShortcuts) {
return;
}
@@ -601,11 +580,51 @@ function handleShortcut(ev) {
document.addEventListener("keypress", handleShortcut);
document.addEventListener("keydown", handleShortcut);
+function changeSetting(elem) {
+ if (elem.id === "disable-shortcuts") {
+ disableShortcuts = elem.checked;
+ storeValue(elem.id, elem.checked);
+ }
+}
+
+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 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 = localStorage.getItem('clippy-lint-list-theme');
+const theme = loadValue('theme');
if (prefersDark.matches && !theme) {
setTheme("coal", false);
} else {
setTheme(theme, false);
}
+let disableShortcuts = loadValue('disable-shortcuts') === "true";
+document.getElementById("disable-shortcuts").checked = disableShortcuts;
diff --git a/master/style.css b/master/style.css
new file mode 100644
index 000000000000..a9485d511047
--- /dev/null
+++ b/master/style.css
@@ -0,0 +1,398 @@
+blockquote { font-size: 1em; }
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+ display: none !important;
+}
+
+.dropdown-menu {
+ color: var(--fg);
+ background: var(--theme-popup-bg);
+ border: 1px solid var(--theme-popup-border);
+}
+
+.dropdown-menu .divider {
+ background-color: var(--theme-popup-border);
+}
+
+.dropdown-menu .checkbox {
+ display: block;
+ white-space: nowrap;
+ margin: 0;
+}
+.dropdown-menu .checkbox label {
+ padding: 3px 20px;
+ width: 100%;
+}
+
+.dropdown-menu .checkbox input {
+ position: relative;
+ margin: 0 0.5rem 0;
+ padding: 0;
+}
+
+.dropdown-menu .checkbox:hover {
+ background-color: var(--theme-hover);
+}
+
+div.panel div.panel-body button {
+ background: var(--searchbar-bg);
+ color: var(--searchbar-fg);
+ border-color: var(--theme-popup-border);
+}
+
+div.panel div.panel-body button:hover {
+ box-shadow: 0 0 3px var(--searchbar-shadow-color);
+}
+
+div.panel div.panel-body button.open {
+ filter: brightness(90%);
+}
+
+.dropdown-toggle .badge {
+ background-color: #777;
+}
+
+.panel-heading { cursor: pointer; }
+
+.panel-title { display: flex; flex-wrap: wrap;}
+.panel-title .label { display: inline-block; }
+
+.panel-title-name { flex: 1; min-width: 400px;}
+.panel-title-name span { vertical-align: bottom; }
+
+.panel .panel-title-name .anchor { display: none; }
+.panel:hover .panel-title-name .anchor { display: inline;}
+
+.search-control {
+ margin-top: 15px;
+}
+
+@media (min-width: 992px) {
+ .search-control {
+ margin-top: 0;
+ }
+}
+
+@media (min-width: 405px) {
+ #upper-filters {
+ display: flex;
+ flex-wrap: wrap;
+ }
+}
+
+@media (max-width: 430px) {
+ /* Turn the version filter list to the left */
+ #version-filter-selector {
+ right: 0;
+ left: auto;
+ }
+}
+
+@media (max-width: 412px) {
+ #upper-filters,
+ .panel-body .search-control {
+ padding-right: 8px;
+ padding-left: 8px;
+ }
+}
+
+.label {
+ padding-top: 0.3em;
+ padding-bottom: 0.3em;
+}
+
+.label-lint-group {
+ min-width: 8em;
+}
+.label-lint-level {
+ min-width: 4em;
+}
+
+.label-lint-level-allow {
+ background-color: #5cb85c;
+}
+.label-lint-level-warn {
+ background-color: #f0ad4e;
+}
+.label-lint-level-deny {
+ background-color: #d9534f;
+}
+.label-lint-level-none {
+ background-color: #777777;
+ opacity: 0.5;
+}
+
+.label-group-deprecated {
+ opacity: 0.5;
+}
+
+.label-doc-folding {
+ color: #000;
+ background-color: #fff;
+ border: 1px solid var(--theme-popup-border);
+}
+.label-doc-folding:hover {
+ background-color: #e6e6e6;
+}
+
+.lint-doc-md > h3 {
+ border-top: 1px solid var(--theme-popup-border);
+ padding: 10px 15px;
+ margin: 0 -15px;
+ font-size: 18px;
+}
+.lint-doc-md > h3:first-child {
+ border-top: none;
+ padding-top: 0px;
+}
+
+@media (max-width:749px) {
+ .lint-additional-info-container {
+ display: flex;
+ flex-flow: column;
+ }
+ .lint-additional-info-item + .lint-additional-info-item {
+ border-top: 1px solid var(--theme-popup-border);
+ }
+}
+@media (min-width:750px) {
+ .lint-additional-info-container {
+ display: flex;
+ flex-flow: row;
+ }
+ .lint-additional-info-item + .lint-additional-info-item {
+ border-left: 1px solid var(--theme-popup-border);
+ }
+}
+
+.lint-additional-info-item {
+ display: inline-flex;
+ min-width: 200px;
+ flex-grow: 1;
+ padding: 9px 5px 5px 15px;
+}
+
+.label-applicability {
+ background-color: #777777;
+ margin: auto 5px;
+}
+
+.label-version {
+ background-color: #777777;
+ margin: auto 5px;
+ font-family: monospace;
+}
+
+details {
+ border-radius: 4px;
+ padding: .5em .5em 0;
+}
+
+code {
+ white-space: pre !important;
+}
+
+summary {
+ font-weight: bold;
+ margin: -.5em -.5em 0;
+ padding: .5em;
+ display: revert;
+}
+
+details[open] {
+ padding: .5em;
+}
+
+/* Expanding the mdBook theme*/
+.light {
+ --inline-code-bg: #f6f7f6;
+}
+.rust {
+ --inline-code-bg: #f6f7f6;
+}
+.coal {
+ --inline-code-bg: #1d1f21;
+}
+.navy {
+ --inline-code-bg: #1d1f21;
+}
+.ayu {
+ --inline-code-bg: #191f26;
+}
+
+#settings-dropdown {
+ position: absolute;
+ margin: 0.7em;
+ z-index: 10;
+ display: flex;
+}
+
+/* Applying the mdBook theme */
+.settings-icon {
+ text-align: center;
+ width: 2em;
+ height: 2em;
+ line-height: 2em;
+ border: solid 1px var(--icons);
+ border-radius: 5px;
+ user-select: none;
+ cursor: pointer;
+ background: var(--theme-hover);
+}
+.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);
+ overflow: hidden;
+ padding: 9px;
+ width: 207px;
+ position: absolute;
+ top: 28px;
+}
+
+.settings-icon::before {
+ /* Wheel
*/
+ content: url('data:image/svg+xml,');
+ width: 18px;
+ height: 18px;
+ display: block;
+ filter: invert(0.7);
+ padding-left: 4px;
+ padding-top: 3px;
+}
+
+.settings-menu * {
+ font-weight: normal;
+}
+
+.settings-menu label {
+ cursor: pointer;
+}
+
+#settings-dropdown.open .settings-menu {
+ display: block;
+}
+
+#theme-choice {
+ margin-bottom: 10px;
+ background: var(--searchbar-bg);
+ color: var(--searchbar-fg);
+ border-color: var(--theme-popup-border);
+ border-radius: 5px;
+ cursor: pointer;
+ width: 100%;
+ border-width: 1px;
+ padding: 5px;
+}
+
+.alert {
+ color: var(--fg);
+ background: var(--theme-hover);
+ border: 1px solid var(--theme-popup-border);
+}
+.page-header {
+ border-color: var(--theme-popup-border);
+}
+.panel-default > .panel-heading {
+ background: var(--theme-hover);
+ color: var(--fg);
+ border: 1px solid var(--theme-popup-border);
+}
+.panel-default > .panel-heading:hover {
+ filter: brightness(90%);
+}
+.list-group-item {
+ background: 0%;
+ border: 1px solid var(--theme-popup-border);
+}
+.panel, pre, hr {
+ background: var(--bg);
+ border: 1px solid var(--theme-popup-border);
+}
+
+#version-filter-selector .checkbox {
+ display: flex;
+}
+
+#version-filter {
+ min-width: available;
+}
+
+#version-filter li label {
+ padding-right: 0;
+ width: 35%;
+}
+
+.version-filter-input {
+ height: 60%;
+ width: 30%;
+ text-align: center;
+ border: none;
+ border-bottom: 1px solid #000000;
+}
+
+#filter-label, .filter-clear {
+ background: var(--searchbar-bg);
+ color: var(--searchbar-fg);
+ border-color: var(--theme-popup-border);
+ filter: brightness(95%);
+}
+#filter-label:hover, .filter-clear:hover {
+ filter: brightness(90%);
+}
+.filter-input {
+ background: var(--searchbar-bg);
+ color: var(--searchbar-fg);
+ border-color: var(--theme-popup-border);
+}
+
+.filter-input::-webkit-input-placeholder,
+.filter-input::-moz-placeholder {
+ color: var(--searchbar-fg);
+ opacity: 30%;
+}
+
+.expansion-group {
+ margin-top: 15px;
+ padding: 0px 8px;
+ display: flex;
+ flex-wrap: nowrap;
+}
+
+@media (min-width: 992px) {
+ .expansion-group {
+ margin-top: 0;
+ padding: 0px 15px;
+ }
+}
+
+.expansion-control {
+ width: 50%;
+}
+
+:not(pre) > code {
+ color: var(--inline-code-color);
+ background-color: var(--inline-code-bg);
+}
+html {
+ scrollbar-color: var(--scrollbar) var(--bg);
+}
+body {
+ background: var(--bg);
+ color: var(--fg);
+}