Skip to content

Commit 8ae74da

Browse files
borsbors
committed
Auto merge of #8070 - CrazyRoka:update-gh-pages-checkbox-styles, r=camsteffen
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
2 parents 0c483f6 + 296af08 commit 8ae74da

File tree

1 file changed

+211
-71
lines changed

1 file changed

+211
-71
lines changed

‎util/gh-pages/index.html

Lines changed: 211 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,56 @@
2525
blockquote { font-size: 1em; }
2626
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
2727

28-
.form-inline .checkbox { margin-right: 0.6em }
28+
.dropdown-menu {
29+
color: var(--fg);
30+
background: var(--theme-popup-bg);
31+
border: 1px solid var(--theme-popup-border);
32+
}
33+
34+
.dropdown-menu .divider {
35+
background-color: var(--theme-popup-border);
36+
}
37+
38+
.dropdown-menu .checkbox {
39+
display: block;
40+
white-space: nowrap;
41+
margin: 0;
42+
}
43+
.dropdown-menu .checkbox label {
44+
padding: 3px 20px;
45+
width: 100%;
46+
}
47+
48+
.dropdown-menu .checkbox input {
49+
position: relative;
50+
margin: 0 0.5rem 0;
51+
padding: 0;
52+
}
53+
54+
.dropdown-menu .checkbox:hover {
55+
background-color: var(--theme-hover);
56+
}
57+
58+
div.panel div.panel-body button.dropdown-toggle {
59+
background: var(--searchbar-bg);
60+
color: var(--searchbar-fg);
61+
border-color: var(--theme-popup-border);
62+
}
63+
64+
div.panel div.panel-body button.dropdown-toggle:hover {
65+
box-shadow: 0 0 3px var(--searchbar-shadow-color);
66+
}
67+
68+
div.panel div.panel-body .open button.dropdown-toggle {
69+
background: var(--searchbar-bg);
70+
color: var(--searchbar-fg);
71+
border-color: var(--theme-popup-border);
72+
filter: brightness(90%);
73+
}
74+
75+
.dropdown-toggle .badge {
76+
background-color: #777;
77+
}
2978

3079
.panel-heading { cursor: pointer; }
3180

@@ -38,6 +87,16 @@
3887
.panel .panel-title-name .anchor { display: none; }
3988
.panel:hover .panel-title-name .anchor { display: inline;}
4089

90+
.search-control {
91+
margin-top: 15px;
92+
}
93+
94+
@media (min-width: 992px) {
95+
.search-control {
96+
margin-top: 0;
97+
}
98+
}
99+
41100
.label {
42101
padding-top: 0.3em;
43102
padding-bottom: 0.3em;
@@ -143,13 +202,17 @@
143202
--inline-code-bg: #191f26;
144203
}
145204

205+
.theme-dropdown {
206+
position: absolute;
207+
margin: 0.7em;
208+
z-index: 10;
209+
}
210+
146211
/* Applying the mdBook theme */
147212
.theme-icon {
148-
position: absolute;
149213
text-align: center;
150214
width: 2em;
151215
height: 2em;
152-
margin: 0.7em;
153216
line-height: 2em;
154217
border: solid 1px var(--icons);
155218
border-radius: 5px;
@@ -160,23 +223,28 @@
160223
background: var(--theme-hover);
161224
}
162225
.theme-choice {
163-
position: absolute;
164-
margin-top: calc(2em + 0.7em);
165-
margin-left: 0.7em;
226+
display: none;
166227
list-style: none;
167228
border: 1px solid var(--theme-popup-border);
168229
border-radius: 5px;
169230
color: var(--fg);
170231
background: var(--theme-popup-bg);
171232
padding: 0 0;
233+
overflow: hidden;
172234
}
235+
236+
.theme-dropdown.open .theme-choice {
237+
display: block;
238+
}
239+
173240
.theme-choice > li {
174241
padding: 5px 10px;
175242
font-size: 0.8em;
176243
user-select: none;
177244
cursor: pointer;
178245
}
179-
.theme-choice > li:hover {
246+
247+
.theme-choice>li:hover {
180248
background: var(--theme-hover);
181249
}
182250

@@ -240,17 +308,15 @@
240308

241309
</style>
242310
</head>
243-
<body>
244-
<div id="theme-icon" class="theme-icon">&#128396;</div>
245-
<ul id="theme-menu" class="theme-choice" style="display: none;">
246-
<li id="light">Light</li>
247-
<li id="rust">Rust</li>
248-
<li id="coal">Coal</li>
249-
<li id="navy">Navy</li>
250-
<li id="ayu">Ayu</li>
251-
</ul>
252-
253-
<div class="container" ng-app="clippy" ng-controller="lintList">
311+
<body ng-app="clippy" ng-controller="lintList">
312+
<div theme-dropdown class="theme-dropdown">
313+
<div id="theme-icon" class="theme-icon">&#128396;</div>
314+
<ul id="theme-menu" class="theme-choice">
315+
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
316+
</ul>
317+
</div>
318+
319+
<div class="container">
254320
<div class="page-header">
255321
<h1>Clippy Lints</h1>
256322
</div>
@@ -271,38 +337,62 @@ <h1>Clippy Lints</h1>
271337
</div>
272338

273339
<div class="panel panel-default" ng-show="data">
274-
<div class="panel-body row filter-panel">
275-
<div class="col-md-6 form-inline">
276-
<div class="form-group form-group-lg">
277-
<p class="h4">
278-
Lint levels
279-
<a href="https://doc.rust-lang.org/rustc/lints/levels.html">(?)</a>
280-
</p>
281-
<div class="checkbox" ng-repeat="(level, enabled) in levels">
282-
<label class="text-capitalize">
283-
<input type="checkbox" ng-model="levels[level]" />
284-
{{level}}
285-
</label>
286-
</div>
340+
<div class="panel-body row">
341+
<div class="col-12 col-md-4">
342+
<div class="btn-group" filter-dropdown>
343+
<button type="button" class="btn btn-default dropdown-toggle">
344+
Lint levels <span class="badge">{{selectedValuesCount(levels)}}</span> <span class="caret"></span>
345+
</button>
346+
<ul class="dropdown-menu">
347+
<li class="checkbox">
348+
<label ng-click="toggleLevels(true)">
349+
<input type="checkbox" class="invisible" />
350+
All
351+
</label>
352+
</li>
353+
<li class="checkbox">
354+
<label ng-click="toggleLevels(false)">
355+
<input type="checkbox" class="invisible" />
356+
None
357+
</label>
358+
</li>
359+
<li role="separator" class="divider"></li>
360+
<li class="checkbox" ng-repeat="(level, enabled) in levels">
361+
<label class="text-capitalize">
362+
<input type="checkbox" ng-model="levels[level]" />
363+
{{level}}
364+
</label>
365+
</li>
366+
</ul>
287367
</div>
288-
</div>
289-
<div class="col-md-6 form-inline">
290-
<div class="form-group form-group-lg">
291-
<p class="h4">
292-
Lint groups
293-
<a href="https://github.com/rust-lang/rust-clippy/#clippy">(?)</a>
294-
</p>
295-
<div class="checkbox" ng-repeat="(group, enabled) in groups">
296-
<label class="text-capitalize">
297-
<input type="checkbox" ng-model="groups[group]" />
298-
{{group}}
299-
</label>
300-
</div>
368+
<div class="btn-group" filter-dropdown>
369+
<button type="button" class="btn btn-default dropdown-toggle">
370+
Lint groups <span class="badge">{{selectedValuesCount(groups)}}</span> <span class="caret"></span>
371+
</button>
372+
<ul class="dropdown-menu">
373+
<li class="checkbox">
374+
<label ng-click="toggleGroups(true)">
375+
<input type="checkbox" class="invisible" />
376+
All
377+
</label>
378+
</li>
379+
<li class="checkbox">
380+
<label ng-click="toggleGroups(false)">
381+
<input type="checkbox" class="invisible" />
382+
None
383+
</label>
384+
</li>
385+
<li role="separator" class="divider"></li>
386+
<li class="checkbox" ng-repeat="(group, enabled) in groups">
387+
<label class="text-capitalize">
388+
<input type="checkbox" ng-model="groups[group]" />
389+
{{group}}
390+
</label>
391+
</li>
392+
</ul>
301393
</div>
302394
</div>
303-
</div>
304-
<div class="panel-body row">
305-
<div class="col-md-12 form-horizontal">
395+
<div class="col-12 col-md-8 search-control">
306396
<div class="input-group">
307397
<label class="input-group-addon" id="filter-label" for="filter-input">Filter:</label>
308398
<input type="text" class="form-control" placeholder="Keywords or search string" id="filter-input" ng-model="search" ng-model-options="{debounce: 50}"/>
@@ -336,7 +426,7 @@ <h2 class="panel-title">
336426
</h2>
337427
</header>
338428

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

367457
<a href="https://github.com/rust-lang/rust-clippy">
368-
<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"/>
458+
<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"/>
369459
</a>
370460

371461
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"></script>
@@ -429,6 +519,46 @@ <h2 class="panel-title">
429519
);
430520
};
431521
})
522+
.directive('themeDropdown', function ($document) {
523+
return {
524+
restrict: 'A',
525+
link: function ($scope, $element, $attr) {
526+
$element.bind('click', function () {
527+
$element.toggleClass('open');
528+
$element.addClass('open-recent');
529+
});
530+
531+
$document.bind('click', function () {
532+
if (!$element.hasClass('open-recent')) {
533+
$element.removeClass('open');
534+
}
535+
$element.removeClass('open-recent');
536+
})
537+
}
538+
}
539+
})
540+
.directive('filterDropdown', function ($document) {
541+
return {
542+
restrict: 'A',
543+
link: function ($scope, $element, $attr) {
544+
$element.bind('click', function (event) {
545+
if (event.target.closest('button')) {
546+
$element.toggleClass('open');
547+
} else {
548+
$element.addClass('open');
549+
}
550+
$element.addClass('open-recent');
551+
});
552+
553+
$document.bind('click', function () {
554+
if (!$element.hasClass('open-recent')) {
555+
$element.removeClass('open');
556+
}
557+
$element.removeClass('open-recent');
558+
})
559+
}
560+
}
561+
})
432562
.directive('onFinishRender', function ($timeout) {
433563
return {
434564
restrict: 'A',
@@ -462,6 +592,38 @@ <h2 class="panel-title">
462592
suspicious: true,
463593
};
464594
$scope.groups = GROUPS_FILTER_DEFAULT;
595+
const THEMES_DEFAULT = {
596+
light: "Light",
597+
rust: "Rust",
598+
coal: "Coal",
599+
navy: "Navy",
600+
ayu: "Ayu"
601+
};
602+
$scope.themes = THEMES_DEFAULT;
603+
604+
$scope.selectTheme = function (theme) {
605+
setTheme(theme, true);
606+
}
607+
608+
$scope.toggleLevels = function (value) {
609+
const levels = $scope.levels;
610+
for (const key in levels) {
611+
if (levels.hasOwnProperty(key)) {
612+
levels[key] = value;
613+
}
614+
}
615+
};
616+
$scope.toggleGroups = function (value) {
617+
const groups = $scope.groups;
618+
for (const key in groups) {
619+
if (groups.hasOwnProperty(key)) {
620+
groups[key] = value;
621+
}
622+
}
623+
};
624+
$scope.selectedValuesCount = function (obj) {
625+
return Object.values(obj).filter(x => x).length;
626+
}
465627
$scope.byGroups = function (lint) {
466628
return $scope.groups[lint.group];
467629
};
@@ -558,28 +720,6 @@ <h2 class="panel-title">
558720
}
559721
}
560722

561-
function setupListeners() {
562-
let themeIcon = document.getElementById("theme-icon");
563-
let themeMenu = document.getElementById("theme-menu");
564-
themeIcon.addEventListener("click", function(e) {
565-
if (themeMenu.style.display == "none") {
566-
themeMenu.style.display = "block";
567-
} else {
568-
themeMenu.style.display = "none";
569-
}
570-
});
571-
572-
let children = themeMenu.children;
573-
for (let index = 0; index < children.length; index++) {
574-
let child = children[index];
575-
child.addEventListener("click", function(e) {
576-
setTheme(child.id, true);
577-
});
578-
}
579-
}
580-
581-
setupListeners();
582-
583723
function setTheme(theme, store) {
584724
let enableHighlight = false;
585725
let enableNight = false;

0 commit comments

Comments
 (0)