mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Auto merge of #12656 - SpencerAWill:Add-expand-all-to-the-web-site, r=xFrednet

Browse Source 
Add 'Expand All' & 'Collapse All' to the website

changelog: Add 'Expand All' and 'Collapse All' buttons to the website.
Fixes #12542

Desktop view:
![image](https://github.com/rust-lang/rust-clippy/assets/43732866/554d7782-352c-4705-83f0-1cbc809a3290)

Mobile view:
![image](https://github.com/rust-lang/rust-clippy/assets/43732866/2845fc9a-a9e8-4057-b7dd-a8a1dbf47290)

I did have some slight performance issues with lots of tabs being open. In the future it may be worth it to consider virtual scrolling. I'm not sure if this would allow ctrl+f finding on all the lints since the DOM won't contain the text of all the lints, just those that need to be immediately shown.
This commit is contained in:
bors 2024-07-11 20:04:46 +00:00
commit 86d348df90
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
util/gh-pages/index.html
View File

@ -57,20 +57,17 @@ Otherwise, have a great day =^.^=
background-color: var(--theme-hover);
}
div.panel div.panel-body button.dropdown-toggle {
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.dropdown-toggle:hover {
div.panel div.panel-body button: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);
div.panel div.panel-body button.open {
filter: brightness(90%);
}
@ -96,7 +93,6 @@ Otherwise, have a great day =^.^=
@media (min-width: 992px) {
.search-control {
margin-top: 0;
float: right;
}
}
@ -361,6 +357,24 @@ Otherwise, have a great day =^.^=
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);
@ -405,7 +419,7 @@ Otherwise, have a great day =^.^=
<div class="panel panel-default" ng-show="data">
<div class="panel-body row">
<div id="upper-filters" class="col-12 col-md-6">
<div id="upper-filters" class="col-12 col-md-5">
<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>
@ -524,7 +538,7 @@ Otherwise, have a great day =^.^=
</ul>
</div>
</div>
<div class="col-12 col-md-6 search-control">
<div class="col-12 col-md-5 search-control">
<div class="input-group">
<label class="input-group-addon" id="filter-label" for="search-input">Filter:</label>
<input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input"
@ -537,6 +551,14 @@ Otherwise, have a great day =^.^=
</span>
</div>
</div>
<div class="col-12 col-md-2 btn-group expansion-group">
<button title="Collapse All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, false)">
<span class="glyphicon glyphicon-collapse-up"></span>
</button>
<button title="Expand All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, true)">
<span class="glyphicon glyphicon-collapse-down"></span>
</button>
</div>
</div>
</div>
<!-- The order of the filters should be from most likely to remove a lint to least likely to improve performance. -->

6
util/gh-pages/script.js
View File

@ -469,6 +469,12 @@
$location.path(lint.id);
};
$scope.toggleExpansion = function(lints, isExpanded) {
lints.forEach(lint => {
$scope.open[lint.id] = isExpanded;
});
}
$scope.copyToClipboard = function (lint) {
const clipboard = document.getElementById("clipboard-" + lint.id);
if (clipboard) {