Skip to content

Commit

Permalink
Auto merge of #7030 - xFrednet:6877-clippy-going-dark, r=llogiq
Browse files Browse the repository at this point in the history 
Clippy going dark: Adding a dark theme to Clippy's lint list

This PR adds the MdBook color themes to the lint list of Clippy. Well at least an adaption of these themes.

<details>
<summary>Here are some beautiful screenshots:</summary>

**light theme**
![image](https://user-images.githubusercontent.com/17087237/113510593-e31fb280-955b-11eb-8ab1-8b5bcf287475.png)

**Rust theme**
![image](https://user-images.githubusercontent.com/17087237/113510734-79ec6f00-955c-11eb-981c-8ebe890acf79.png)

**Coal theme**
![image](https://user-images.githubusercontent.com/17087237/113510752-8ec90280-955c-11eb-8f5c-c87ca07c35c2.png)

**Navy theme**
![image](https://user-images.githubusercontent.com/17087237/113510675-3f82d200-955c-11eb-8992-8c784abe19ea.png)

**Ayu theme**
![image](https://user-images.githubusercontent.com/17087237/113510700-588b8300-955c-11eb-83e0-a8f770e9f913.png)

</details>

The theme is also stored in the browser to ensure that the next session applies the theme and doesn't burn your eyes out.

cc: `@matthiaskrgr`

---

Closes #6877

changelog: [Clippy's lint list](https://rust-lang.github.io/rust-clippy/master/index.html) now supports themes
  • Loading branch information
@bors
bors committed Apr 4, 2021
2 parents 86fb0e8 + e25b106 commit 6bb608c
Showing 1 changed file with 188 additions and 4 deletions.
192 changes: 188 additions & 4 deletions util/gh-pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,20 @@

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css"/>

<!-- This stylesheet is linked to a specific version to ensure that the link stays static even if mdbook does some refactoring. -->
<!-- gitcdn is used to get the css file as a stylesheet content type. It's open source and published under the GLP-3.0 License -->
<link rel="stylesheet" href="https://gitcdn.xyz/cdn/rust-lang/mdBook/v0.4.7/src/theme/css/variables.css"/>
<link id="styleHighlight" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/highlight.css" disabled="true">
<link id="styleNight" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/tomorrow-night.css">
<link id="styleAyu" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/ayu-highlight.css" disabled="true">
<style>
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 }

.panel-heading { cursor: pointer; }
.panel-heading:hover { background-color: #eee; }

.panel-title { display: flex; }
.panel-title .label { display: inline-block; }
Expand All @@ -24,10 +30,134 @@
.panel-title-name span { vertical-align: bottom; }

.panel .panel-title-name .anchor { display: none; }
.panel:hover .panel-title-name .anchor { display: inline; color: #fff; }
.panel:hover .panel-title-name .anchor { display: inline;}

</style>
<style>
/* Expanding the mdBoom theme*/
.light {
--inline-code-bg: #f6f7f6;
}
.rust {
--inline-code-bg: #f6f7f6;
}
.coal {
--inline-code-bg: #1d1f21;
}
.navy {
--inline-code-bg: #1d1f21;
}
.ayu {
--inline-code-bg: #191f26;
}

/* 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;
user-select: none;
cursor: pointer;
}
.theme-icon:hover {
background: var(--theme-hover);
}
.theme-choice {
position: absolute;
margin-top: calc(2em + 0.7em);
margin-left: 0.7em;
list-style: none;
border: 1px solid var(--theme-popup-border);
border-radius: 5px;
color: var(--fg);
background: var(--theme-popup-bg);
padding: 0 0;
}
.theme-choice > li {
padding: 5px 10px;
font-size: 0.8em;
user-select: none;
cursor: pointer;
}
.theme-choice > li:hover {
background: var(--theme-hover);
}

.alert {
color: var(--fg);
background: var(--theme-hover);
border: 1px solid var(--theme-popup-border);
}
.page-header {
border-color: var(--theme-popup-border);
}
.panel-default > .panel-heading {
background: var(--theme-hover);
color: var(--fg);
border: 1px solid var(--theme-popup-border);
}
.panel-default > .panel-heading:hover {
filter: brightness(90%);
}
.list-group-item {
background: 0%;
border: 1px solid var(--theme-popup-border);
}
.panel, pre, hr {
background: var(--bg);
border: 1px solid var(--theme-popup-border);
}

#filter-label, #filter-clear {
background: var(--searchbar-bg);
color: var(--searchbar-fg);
border-color: var(--theme-popup-border);
filter: brightness(95%);
}
#filter-label:hover, #filter-clear:hover {
filter: brightness(90%);
}
#filter-input {
background: var(--searchbar-bg);
color: var(--searchbar-fg);
border-color: var(--theme-popup-border);
}

#filter-input::-webkit-input-placeholder,
#filter-input::-moz-placeholder {
color: var(--searchbar-fg);
opacity: 30%;
}

p > code {
color: var(--inline-code-color);
background-color: var(--inline-code-bg);
}
html {
scrollbar-color: var(--scrollbar) var(--bg);
}
body {
background: var(--bg);
color: var(--fg);
}

</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">
<div class="page-header">
<h1>ALL the Clippy Lints</h1>
Expand All @@ -49,7 +179,7 @@ <h1>ALL the Clippy Lints</h1>
</div>

<div class="panel panel-default" ng-show="data">
<div class="panel-body row">
<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</p>
Expand Down Expand Up @@ -79,7 +209,7 @@ <h1>ALL the Clippy Lints</h1>
<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}"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="search = ''">
<button id="filter-clear" class="btn" type="button" ng-click="search = ''">
Clear
</button>
</span>
Expand Down Expand Up @@ -320,6 +450,60 @@ <h4 class="list-group-item-heading">
}
}
}

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;
let enableAyu = false;

if (theme == "ayu") {
enableAyu = true;
} else if (theme == "coal" || theme == "navy") {
enableNight = true;
} else if (theme == "rust") {
enableHighlight = true;
} else {
enableHighlight = true;
// this makes sure that an unknown theme request gets set to a known one
theme = "light";
}
document.getElementsByTagName("body")[0].className = theme;

document.getElementById("styleHighlight").disabled = !enableHighlight;
document.getElementById("styleNight").disabled = !enableNight;
document.getElementById("styleAyu").disabled = !enableAyu;

if (store) {
try {
localStorage.setItem('clippy-lint-list-theme', theme);
} catch (e) { }
}
}

// loading the theme after the initial load
setTheme(localStorage.getItem('clippy-lint-list-theme'), false);
</script>
</body>
</html>

0 comments on commit 6bb608c

Please sign in to comment.