Skip to content

Commit a71f199

Browse files
CrazyRokaCrazyRoka
committed
Updated styles for checkboxes
1 parent 40fd785 commit a71f199

File tree

1 file changed

+96
-27
lines changed

1 file changed

+96
-27
lines changed

‎util/gh-pages/index.html‎

Lines changed: 96 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,34 @@
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 .checkbox {
29+
width: 100%;;
30+
display: block;
31+
padding: 3px 20px;
32+
clear: both;
33+
font-weight: 400;
34+
line-height: 1.42857143;
35+
color: #333;
36+
white-space: nowrap;
37+
margin: 0;
38+
}
39+
40+
.dropdown-menu .checkbox label {
41+
padding-left: 0;
42+
width: 100%;
43+
}
44+
45+
.dropdown-menu .checkbox input {
46+
position: relative;
47+
margin: 0;
48+
padding: 0;
49+
}
50+
51+
.dropdown-menu .checkbox:hover {
52+
color: #262626;
53+
text-decoration: none;
54+
background-color: #f5f5f5;
55+
}
2956

3057
.panel-heading { cursor: pointer; }
3158

@@ -250,7 +277,7 @@
250277
<li id="ayu">Ayu</li>
251278
</ul>
252279

253-
<div class="container" ng-app="clippy" ng-controller="lintList">
280+
<div class="container" ng-app="clippy" ng-controller="lintList" ng-click="toggleDropdown(undefined, $event)">
254281
<div class="page-header">
255282
<h1>Clippy Lints</h1>
256283
</div>
@@ -272,32 +299,54 @@ <h1>Clippy Lints</h1>
272299

273300
<div class="panel panel-default" ng-show="data">
274301
<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>
302+
<div class="col-md-12 form-horizontal">
303+
<div class="btn-group" ng-class="{ open: selectedDropdown == 'levels' }" ng-click="toggleDropdown('levels', $event)">
304+
<button type="button" class="btn btn-default dropdown-toggle">
305+
Lint levels <span class="caret"></span>
306+
</button>
307+
<ul class="dropdown-menu">
308+
<li class="checkbox">
309+
<label ng-click="toggleLevels(true)">
310+
All
311+
</label>
312+
</li>
313+
<li class="checkbox">
314+
<label ng-click="toggleLevels(false)">
315+
None
316+
</label>
317+
</li>
318+
<li role="separator" class="divider"></li>
319+
<li class="checkbox" ng-repeat="(level, enabled) in levels">
320+
<label class="text-capitalize">
321+
<input type="checkbox" ng-model="levels[level]" />
322+
{{level}}
323+
</label>
324+
</li>
325+
</ul>
287326
</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>
327+
<div class="btn-group" ng-class="{ open: selectedDropdown == 'groups' }" ng-click="toggleDropdown('groups', $event)">
328+
<button type="button" class="btn btn-default dropdown-toggle">
329+
Lint groups <span class="caret"></span>
330+
</button>
331+
<ul class="dropdown-menu">
332+
<li class="checkbox">
333+
<label ng-click="toggleGroups(true)">
334+
All
335+
</label>
336+
</li>
337+
<li class="checkbox">
338+
<label ng-click="toggleGroups(false)">
339+
None
340+
</label>
341+
</li>
342+
<li role="separator" class="divider"></li>
343+
<li class="checkbox" ng-repeat="(group, enabled) in groups">
344+
<label class="text-capitalize">
345+
<input type="checkbox" ng-model="groups[group]" />
346+
{{group}}
347+
</label>
348+
</li>
349+
</ul>
301350
</div>
302351
</div>
303352
</div>
@@ -462,6 +511,26 @@ <h2 class="panel-title">
462511
suspicious: true,
463512
};
464513
$scope.groups = GROUPS_FILTER_DEFAULT;
514+
$scope.toggleDropdown = function (name, $event) {
515+
$scope.selectedDropdown = name;
516+
$event.stopPropagation();
517+
}
518+
$scope.toggleLevels = function (value) {
519+
const levels = $scope.levels;
520+
for (const key in levels) {
521+
if (levels.hasOwnProperty(key)) {
522+
levels[key] = value;
523+
}
524+
}
525+
};
526+
$scope.toggleGroups = function (value) {
527+
const groups = $scope.groups;
528+
for (const key in groups) {
529+
if (groups.hasOwnProperty(key)) {
530+
groups[key] = value;
531+
}
532+
}
533+
};
465534
$scope.byGroups = function (lint) {
466535
return $scope.groups[lint.group];
467536
};

0 commit comments

Comments
 (0)