Skip to content

Commit

Permalink
Auto merge of #8070 - CrazyRoka:update-gh-pages-checkbox-styles, r=ca…
Browse files Browse the repository at this point in the history 
…msteffen

Improve styles of filtering options for Clippy's lint list

Partially solves #7958

Updated styles for filtering options. It now uses dropdown menus.

![image](https://user-images.githubusercontent.com/19844144/144608479-cdd9de0b-f101-4d49-a135-0969efb01a11.png)

changelog: none
  • Loading branch information
@bors
bors committed Mar 10, 2022
2 parents 0c483f6 + 296af08 commit 8ae74da
Showing 1 changed file with 211 additions and 71 deletions.
282 changes: 211 additions & 71 deletions util/gh-pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,56 @@
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 {
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.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);
}

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;
}

.panel-heading { cursor: pointer; }

Expand All @@ -38,6 +87,16 @@
.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;
Expand Down Expand Up @@ -143,13 +202,17 @@
--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;
Expand All @@ -160,23 +223,28 @@
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;
overflow: hidden;
}

.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);
}

Expand Down Expand Up @@ -240,17 +308,15 @@

</style>
</head>
<body>
<div id="theme-icon" class="theme-icon">&#128396;</div>
<ul id="theme-menu" class="theme-choice" style="display: none;">
<li id="light">Light</li>
<li id="rust">Rust</li>
<li id="coal">Coal</li>
<li id="navy">Navy</li>
<li id="ayu">Ayu</li>
</ul>

<div class="container" ng-app="clippy" ng-controller="lintList">
<body ng-app="clippy" ng-controller="lintList">
<div theme-dropdown class="theme-dropdown">
<div id="theme-icon" class="theme-icon">&#128396;</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 class="container">
<div class="page-header">
<h1>Clippy Lints</h1>
</div>
Expand All @@ -271,38 +337,62 @@ <h1>Clippy Lints</h1>
</div>

<div class="panel panel-default" ng-show="data">
<div class="panel-body row filter-panel">
<div class="col-md-6 form-inline">
<div class="form-group form-group-lg">
<p class="h4">
Lint levels
<a href="https://doc.rust-lang.org/rustc/lints/levels.html">(?)</a>
</p>
<div class="checkbox" ng-repeat="(level, enabled) in levels">
<label class="text-capitalize">
<input type="checkbox" ng-model="levels[level]" />
{{level}}
</label>
</div>
<div class="panel-body row">
<div class="col-12 col-md-4">
<div class="btn-group" filter-dropdown>
<button type="button" class="btn btn-default dropdown-toggle">
Lint levels <span class="badge">{{selectedValuesCount(levels)}}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="checkbox">
<label ng-click="toggleLevels(true)">
<input type="checkbox" class="invisible" />
All
</label>
</li>
<li class="checkbox">
<label ng-click="toggleLevels(false)">
<input type="checkbox" class="invisible" />
None
</label>
</li>
<li role="separator" class="divider"></li>
<li class="checkbox" ng-repeat="(level, enabled) in levels">
<label class="text-capitalize">
<input type="checkbox" ng-model="levels[level]" />
{{level}}
</label>
</li>
</ul>
</div>
</div>
<div class="col-md-6 form-inline">
<div class="form-group form-group-lg">
<p class="h4">
Lint groups
<a href="https://github.com/rust-lang/rust-clippy/#clippy">(?)</a>
</p>
<div class="checkbox" ng-repeat="(group, enabled) in groups">
<label class="text-capitalize">
<input type="checkbox" ng-model="groups[group]" />
{{group}}
</label>
</div>
<div class="btn-group" filter-dropdown>
<button type="button" class="btn btn-default dropdown-toggle">
Lint groups <span class="badge">{{selectedValuesCount(groups)}}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="checkbox">
<label ng-click="toggleGroups(true)">
<input type="checkbox" class="invisible" />
All
</label>
</li>
<li class="checkbox">
<label ng-click="toggleGroups(false)">
<input type="checkbox" class="invisible" />
None
</label>
</li>
<li role="separator" class="divider"></li>
<li class="checkbox" ng-repeat="(group, enabled) in groups">
<label class="text-capitalize">
<input type="checkbox" ng-model="groups[group]" />
{{group}}
</label>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-body row">
<div class="col-md-12 form-horizontal">
<div class="col-12 col-md-8 search-control">
<div class="input-group">
<label class="input-group-addon" id="filter-label" for="filter-input">Filter:</label>
<input type="text" class="form-control" placeholder="Keywords or search string" id="filter-input" ng-model="search" ng-model-options="{debounce: 50}"/>
Expand Down Expand Up @@ -336,7 +426,7 @@ <h2 class="panel-title">
</h2>
</header>

<div class="list-group lint-docs" ng-class="{collapse: true, in: open[lint.id]}">
<div class="list-group lint-docs" ng-if="open[lint.id]" ng-class="{collapse: true, in: open[lint.id]}">
<div class="list-group-item lint-doc-md" ng-bind-html="lint.docs | markdown"></div>
<div class="lint-additional-info-container">
<!-- Applicability -->
Expand Down Expand Up @@ -365,7 +455,7 @@ <h2 class="panel-title">
</div>

<a href="https://github.com/rust-lang/rust-clippy">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on Github"/>
<img style="position: absolute; top: 0; right: 0; border: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%);" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on Github"/>
</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"></script>
Expand Down Expand Up @@ -429,6 +519,46 @@ <h2 class="panel-title">
);
};
})
.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',
Expand Down Expand Up @@ -462,6 +592,38 @@ <h2 class="panel-title">
suspicious: true,
};
$scope.groups = GROUPS_FILTER_DEFAULT;
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) {
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.selectedValuesCount = function (obj) {
return Object.values(obj).filter(x => x).length;
}
$scope.byGroups = function (lint) {
return $scope.groups[lint.group];
};
Expand Down Expand Up @@ -558,28 +720,6 @@ <h2 class="panel-title">
}
}

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;
Expand Down

0 comments on commit 8ae74da

Please sign in to comment.