From a71f1997d861ac7235c918e6d4c35987359080b3 Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Fri, 3 Dec 2021 15:05:55 +0200 Subject: [PATCH 01/10] Updated styles for checkboxes --- util/gh-pages/index.html | 123 ++++++++++++++++++++++++++++++--------- 1 file changed, 96 insertions(+), 27 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index f175700a3..e96d13dc6 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -25,7 +25,34 @@ Otherwise, have a great day =^.^= blockquote { font-size: 1em; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } - .form-inline .checkbox { margin-right: 0.6em } + .dropdown-menu .checkbox { + width: 100%;; + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.42857143; + color: #333; + white-space: nowrap; + margin: 0; + } + + .dropdown-menu .checkbox label { + padding-left: 0; + width: 100%; + } + + .dropdown-menu .checkbox input { + position: relative; + margin: 0; + padding: 0; + } + + .dropdown-menu .checkbox:hover { + color: #262626; + text-decoration: none; + background-color: #f5f5f5; + } .panel-heading { cursor: pointer; } @@ -250,7 +277,7 @@ Otherwise, have a great day =^.^=
  • Ayu
    • -
    +

    Clippy Lints

    @@ -272,32 +299,54 @@ Otherwise, have a great day =^.^=
    -
    -
    -

    - Lint levels - (?) -

    -
    - -
    +
    +
    + +
      +
    • + +
      • +
    • + +
      • + +
    • + +
      • +
    -
    -
    -
    -

    - Lint groups - (?) -

    -
    - -
    +
    + +
      +
    • + +
      • +
    • + +
      • + +
    • + +
      • +
    @@ -462,6 +511,26 @@ Otherwise, have a great day =^.^= suspicious: true, }; $scope.groups = GROUPS_FILTER_DEFAULT; + $scope.toggleDropdown = function (name, $event) { + $scope.selectedDropdown = name; + $event.stopPropagation(); + } + $scope.toggleLevels = function (value) { + const levels = $scope.levels; + for (const key in levels) { + if (levels.hasOwnProperty(key)) { + levels[key] = value; + } + } + }; + $scope.toggleGroups = function (value) { + const groups = $scope.groups; + for (const key in groups) { + if (groups.hasOwnProperty(key)) { + groups[key] = value; + } + } + }; $scope.byGroups = function (lint) { return $scope.groups[lint.group]; }; From 0f655db00d50f53ddd078a40d7df23a08b7b34cc Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Sat, 4 Dec 2021 19:47:07 +0200 Subject: [PATCH 02/10] Added badge to display selected elemenets count --- util/gh-pages/index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index e96d13dc6..3bf1bbd10 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -302,7 +302,7 @@ Otherwise, have a great day =^.^=
    • @@ -326,7 +326,7 @@ Otherwise, have a great day =^.^=
    • @@ -531,6 +531,9 @@ Otherwise, have a great day =^.^= } } }; + $scope.selectedValuesCount = function (obj) { + return Object.values(obj).filter(x => x).length; + } $scope.byGroups = function (lint) { return $scope.groups[lint.group]; }; From cb113d3a41e658fb1b2066ca13ca7814365106ce Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Sun, 5 Dec 2021 20:10:56 +0200 Subject: [PATCH 03/10] Updated badge --- util/gh-pages/index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index 3bf1bbd10..e6ff7c370 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -54,6 +54,10 @@ Otherwise, have a great day =^.^= background-color: #f5f5f5; } + .dropdown-toggle .badge { + background-color: #777; + } + .panel-heading { cursor: pointer; } .panel-title { display: flex; flex-wrap: wrap;} @@ -302,7 +306,7 @@ Otherwise, have a great day =^.^=
      • @@ -326,7 +330,7 @@ Otherwise, have a great day =^.^=
      • From f71039ae69e9114732bf1cca8e79f8dd939ccbce Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Sun, 5 Dec 2021 21:43:39 +0200 Subject: [PATCH 04/10] Fixed styles on all themes --- util/gh-pages/index.html | 46 ++++++++++++++++++++++++++++++---------- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index e6ff7c370..f1e652d2a 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -25,14 +25,23 @@ Otherwise, have a great day =^.^= 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 { - width: 100%;; + width: 100%; display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; - color: #333; white-space: nowrap; margin: 0; } @@ -44,14 +53,23 @@ Otherwise, have a great day =^.^= .dropdown-menu .checkbox input { position: relative; - margin: 0; + margin: 0 0.5rem 0; padding: 0; + vertical-align: middle; } .dropdown-menu .checkbox:hover { - color: #262626; - text-decoration: none; - background-color: #f5f5f5; + background-color: var(--theme-hover); + } + + div.panel div.panel-body button.dropdown-toggle { + background: var(--searchbar-bg); + color: var(--searchbar-fg); + border-color: var(--theme-popup-border); + } + + div.panel div.panel-body button.dropdown-toggle:hover { + box-shadow: 0 0 3px var(--searchbar-shadow-color); } .dropdown-toggle .badge { @@ -271,7 +289,7 @@ Otherwise, have a great day =^.^= - +
        🖌
        -
        +

        Clippy Lints

        @@ -304,7 +322,8 @@ Otherwise, have a great day =^.^=
        -
        +
        @@ -328,7 +347,8 @@ Otherwise, have a great day =^.^=
      -
      +
      @@ -516,7 +536,11 @@ Otherwise, have a great day =^.^= }; $scope.groups = GROUPS_FILTER_DEFAULT; $scope.toggleDropdown = function (name, $event) { - $scope.selectedDropdown = name; + if (name === $scope.selectedDropdown && $event.path.find(x => x.tagName === 'BUTTON')) { + $scope.selectedDropdown = undefined; + } else { + $scope.selectedDropdown = name; + } $event.stopPropagation(); } $scope.toggleLevels = function (value) { From e895d2b52a91ef20b8993a534ba5bc93b870eec7 Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Mon, 6 Dec 2021 11:47:20 +0200 Subject: [PATCH 05/10] Fixed error in Firefox and selected button style --- util/gh-pages/index.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index f1e652d2a..e73b0d95c 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -72,6 +72,13 @@ Otherwise, have a great day =^.^= box-shadow: 0 0 3px var(--searchbar-shadow-color); } + div.panel div.panel-body .open button.dropdown-toggle { + background: var(--searchbar-bg); + color: var(--searchbar-fg); + border-color: var(--theme-popup-border); + filter: brightness(90%); + } + .dropdown-toggle .badge { background-color: #777; } @@ -536,7 +543,8 @@ Otherwise, have a great day =^.^= }; $scope.groups = GROUPS_FILTER_DEFAULT; $scope.toggleDropdown = function (name, $event) { - if (name === $scope.selectedDropdown && $event.path.find(x => x.tagName === 'BUTTON')) { + const target = $event.target; + if (name === $scope.selectedDropdown && target.closest('button')) { $scope.selectedDropdown = undefined; } else { $scope.selectedDropdown = name; From 76e95e28c239a6a4b631bfc2e50e4603da22387d Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Tue, 7 Dec 2021 00:31:58 +0200 Subject: [PATCH 06/10] Fixed theme selector and repositioned search input --- util/gh-pages/index.html | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index e73b0d95c..b79cb64aa 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -35,7 +35,7 @@ Otherwise, have a great day =^.^= background-color: var(--theme-popup-border); } - .dropdown-menu .checkbox { + .dropdown-menu .checkbox { width: 100%; display: block; padding: 3px 20px; @@ -46,12 +46,12 @@ Otherwise, have a great day =^.^= margin: 0; } - .dropdown-menu .checkbox label { + .dropdown-menu .checkbox label { padding-left: 0; width: 100%; } - .dropdown-menu .checkbox input { + .dropdown-menu .checkbox input { position: relative; margin: 0 0.5rem 0; padding: 0; @@ -94,6 +94,16 @@ Otherwise, have a great day =^.^= .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; + } + } + .label { padding-top: 0.3em; padding-bottom: 0.3em; @@ -225,6 +235,7 @@ Otherwise, have a great day =^.^= color: var(--fg); background: var(--theme-popup-bg); padding: 0 0; + z-index: 10; } .theme-choice > li { padding: 5px 10px; @@ -327,8 +338,8 @@ Otherwise, have a great day =^.^=
      -
      -
      +
      +
    -
    -
    -
    +
    From dcfb756b97789b327f38c201d7f8ba34a91368ee Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Tue, 7 Dec 2021 18:42:07 +0200 Subject: [PATCH 07/10] Fixed overlapping "Fork me" logo --- util/gh-pages/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index b79cb64aa..f3aeb07a0 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -454,7 +454,7 @@ Otherwise, have a great day =^.^=
    - Fork me on Github + Fork me on Github From bb531320ebe6c3ac6798bee4201f33741aed8fdc Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Tue, 7 Dec 2021 19:41:49 +0200 Subject: [PATCH 08/10] Improved performance by adding ng-if --- util/gh-pages/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index f3aeb07a0..88b5c9c3f 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -425,7 +425,7 @@ Otherwise, have a great day =^.^= -
    +
      From 4161a67c1bf0215523738e419b996ed5d2ea8f97 Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Thu, 9 Dec 2021 13:49:07 +0200 Subject: [PATCH 09/10] Added dropdown directive to theme-selector --- util/gh-pages/index.html | 133 +++++++++++++++++++++++---------------- 1 file changed, 79 insertions(+), 54 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index 88b5c9c3f..13f280799 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -38,7 +38,6 @@ Otherwise, have a great day =^.^= .dropdown-menu .checkbox { width: 100%; display: block; - padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; @@ -47,8 +46,8 @@ Otherwise, have a great day =^.^= } .dropdown-menu .checkbox label { - padding-left: 0; - width: 100%; + padding: 3px 20px; + width: 100%; } .dropdown-menu .checkbox input { @@ -209,13 +208,17 @@ Otherwise, have a great day =^.^= --inline-code-bg: #191f26; } + .theme-dropdown { + position: absolute; + margin: 0.7em; + z-index: 10; + } + /* Applying the mdBook theme */ .theme-icon { - position: absolute; text-align: center; width: 2em; height: 2em; - margin: 0.7em; line-height: 2em; border: solid 1px var(--icons); border-radius: 5px; @@ -226,24 +229,28 @@ Otherwise, have a great day =^.^= background: var(--theme-hover); } .theme-choice { - position: absolute; - margin-top: calc(2em + 0.7em); - margin-left: 0.7em; + 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; - z-index: 10; + overflow: hidden; } - .theme-choice > li { + + .theme-dropdown.open .theme-choice { + display: block; + } + + .theme-choice>li { padding: 5px 10px; font-size: 0.8em; user-select: none; cursor: pointer; } - .theme-choice > li:hover { + + .theme-choice>li:hover { background: var(--theme-hover); } @@ -307,15 +314,13 @@ Otherwise, have a great day =^.^= - -
      🖌
      - + +
      +
      🖌
      +
        +
      • {{name}}
        • +
      +
      @@ -340,8 +345,7 @@ Otherwise, have a great day =^.^=
      -
      +
      @@ -365,8 +369,7 @@ Otherwise, have a great day =^.^=
    -
    +
    @@ -518,6 +521,46 @@ Otherwise, have a great day =^.^= ); }; }) + .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', + link: function ($scope, $element, $attr) { + $element.bind('click', function (event) { + if (event.target.closest('button')) { + $element.toggleClass('open'); + } else { + $element.addClass('open'); + } + $element.addClass('open-recent'); + }); + + $document.bind('click', function () { + if (!$element.hasClass('open-recent')) { + $element.removeClass('open'); + } + $element.removeClass('open-recent'); + }) + } + } + }) .directive('onFinishRender', function ($timeout) { return { restrict: 'A', @@ -551,15 +594,19 @@ Otherwise, have a great day =^.^= suspicious: true, }; $scope.groups = GROUPS_FILTER_DEFAULT; - $scope.toggleDropdown = function (name, $event) { - const target = $event.target; - if (name === $scope.selectedDropdown && target.closest('button')) { - $scope.selectedDropdown = undefined; - } else { - $scope.selectedDropdown = name; - } - $event.stopPropagation(); + const THEMES_DEFAULT = { + light: "Light", + rust: "Rust", + coal: "Coal", + navy: "Navy", + ayu: "Ayu" + }; + $scope.themes = THEMES_DEFAULT; + + $scope.selectTheme = function (theme) { + setTheme(theme, true); } + $scope.toggleLevels = function (value) { const levels = $scope.levels; for (const key in levels) { @@ -670,28 +717,6 @@ Otherwise, have a great day =^.^= } } - function setupListeners() { - let themeIcon = document.getElementById("theme-icon"); - let themeMenu = document.getElementById("theme-menu"); - themeIcon.addEventListener("click", function(e) { - if (themeMenu.style.display == "none") { - themeMenu.style.display = "block"; - } else { - themeMenu.style.display = "none"; - } - }); - - let children = themeMenu.children; - for (let index = 0; index < children.length; index++) { - let child = children[index]; - child.addEventListener("click", function(e) { - setTheme(child.id, true); - }); - } - } - - setupListeners(); - function setTheme(theme, store) { let enableHighlight = false; let enableNight = false; From 296af08b3c4ee2cd74b53e71279c8d2be254031e Mon Sep 17 00:00:00 2001 From: CrazyRoka Date: Thu, 16 Dec 2021 18:59:04 +0200 Subject: [PATCH 10/10] Removed unused styles and labels in dropdowns --- util/gh-pages/index.html | 104 +++++++++++++++++++-------------------- 1 file changed, 51 insertions(+), 53 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index 13f280799..dcc0978fe 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -36,28 +36,22 @@ Otherwise, have a great day =^.^= } .dropdown-menu .checkbox { - width: 100%; display: block; - clear: both; - font-weight: 400; - line-height: 1.42857143; white-space: nowrap; margin: 0; - } - - .dropdown-menu .checkbox label { + } + .dropdown-menu .checkbox label { padding: 3px 20px; width: 100%; - } + } - .dropdown-menu .checkbox input { - position: relative; - margin: 0 0.5rem 0; - padding: 0; - vertical-align: middle; - } + .dropdown-menu .checkbox input { + position: relative; + margin: 0 0.5rem 0; + padding: 0; + } - .dropdown-menu .checkbox:hover { + .dropdown-menu .checkbox:hover { background-color: var(--theme-hover); } @@ -243,7 +237,7 @@ Otherwise, have a great day =^.^= display: block; } - .theme-choice>li { + .theme-choice > li { padding: 5px 10px; font-size: 0.8em; user-select: none; @@ -352,11 +346,13 @@ Otherwise, have a great day =^.^=
      • @@ -376,11 +372,13 @@ Otherwise, have a great day =^.^=
        • @@ -428,7 +426,7 @@ Otherwise, have a great day =^.^= -
          +
          @@ -521,46 +519,46 @@ Otherwise, have a great day =^.^= ); }; }) - .directive('themeDropdown', function ($document) { - return { - restrict: 'A', - link: function ($scope, $element, $attr) { - $element.bind('click', function () { - $element.toggleClass('open'); - $element.addClass('open-recent'); - }); + .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'); - }) + $document.bind('click', function () { + if (!$element.hasClass('open-recent')) { + $element.removeClass('open'); } - } - }) - .directive('filterDropdown', function ($document) { - return { - restrict: 'A', - link: function ($scope, $element, $attr) { - $element.bind('click', function (event) { - if (event.target.closest('button')) { - $element.toggleClass('open'); - } else { - $element.addClass('open'); - } - $element.addClass('open-recent'); - }); + $element.removeClass('open-recent'); + }) + } + } + }) + .directive('filterDropdown', function ($document) { + return { + restrict: 'A', + link: function ($scope, $element, $attr) { + $element.bind('click', function (event) { + if (event.target.closest('button')) { + $element.toggleClass('open'); + } else { + $element.addClass('open'); + } + $element.addClass('open-recent'); + }); - $document.bind('click', function () { - if (!$element.hasClass('open-recent')) { - $element.removeClass('open'); - } - $element.removeClass('open-recent'); - }) + $document.bind('click', function () { + if (!$element.hasClass('open-recent')) { + $element.removeClass('open'); } - } - }) + $element.removeClass('open-recent'); + }) + } + } + }) .directive('onFinishRender', function ($timeout) { return { restrict: 'A',