tyler.durden
/
cockpit-navigator
mirror of https://github.com/45Drives/cockpit-navigator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

resize theme toggle and add icon

This commit is contained in:
joshuaboud 2021-05-27 13:32:53 -03:00
parent 09e56e58fb
commit f04785d4d0
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
3 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
navigator/navigator.css
View File

@ -36,6 +36,10 @@
margin-right: 1em; margin-right: 1em;
} }
.horizontal-spacer-sm {
margin-right: 0.25em;
}
.vertical-spacer { .vertical-spacer {
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -189,15 +193,15 @@
.nav-toggle { .nav-toggle {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0.5em; bottom: 1.5em;
margin-right: 1.9em; margin-right: 1.9em;
} }
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 60px; width: 30px;
height: 34px; height: 17px;
} }
.switch input { .switch input {
@ -221,10 +225,10 @@
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 26px; height: 13px;
width: 26px; width: 13px;
left: 4px; left: 2px;
bottom: 4px; bottom: 2px;
background-color: white; background-color: white;
-webkit-transition: 0.4s; -webkit-transition: 0.4s;
transition: 0.4s; transition: 0.4s;
@ -239,13 +243,13 @@ input:focus + .slider {
} }
input:checked + .slider:before { input:checked + .slider:before {
-webkit-transform: translateX(26px); -webkit-transform: translateX(13px);
-ms-transform: translateX(26px); -ms-transform: translateX(13px);
transform: translateX(26px); transform: translateX(13px);
} }
.slider.round { .slider.round {
border-radius: 34px; border-radius: 17px;
} }
.slider.round:before { .slider.round:before {

17
navigator/navigator.html
View File

@ -78,13 +78,6 @@
</div> </div>
</div> </div>
<div class="nav-info-column-properties" id="nav-info-column-properties"></div> <div class="nav-info-column-properties" id="nav-info-column-properties"></div>
<div class="nav-toggle">
<label class="switch">
<input type="checkbox" id="toggle-theme">
<span class="slider round"></span>
</label>
<div class="vertical-spacer"></div>
</div>
</div> </div>
<div class="nav-hidden" id="nav-edit-properties"> <div class="nav-hidden" id="nav-edit-properties">
<div class="nav-info-column-filename"></div> <div class="nav-info-column-filename"></div>
@ -129,6 +122,16 @@
<button class="pf-c-button pf-m-primary" id="nav-apply-edit-btn">Apply</button> <button class="pf-c-button pf-m-primary" id="nav-apply-edit-btn">Apply</button>
</div> </div>
</div> </div>
<div class="nav-toggle">
<div class="nav-btn-group">
<i class="fas fa-sun" id="houston-theme-icon"></i>
<div class="horizontal-spacer-sm"></div>
<label class="switch">
<input type="checkbox" id="toggle-theme">
<span class="slider round"></span>
</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

10
navigator/navigator.js
View File

@ -39,12 +39,17 @@ function format_permissions(/*int*/ mode) {
function set_last_theme_state() { function set_last_theme_state() {
var toggle_switch = document.getElementById("toggle-theme"); var toggle_switch = document.getElementById("toggle-theme");
var state = localStorage.getItem("houston-theme-state"); var state = localStorage.getItem("houston-theme-state");
var icon = document.getElementById("houston-theme-icon");
if (state === "light") { if (state === "light") {
toggle_switch.checked = false; toggle_switch.checked = false;
document.documentElement.setAttribute("data-theme", "light"); document.documentElement.setAttribute("data-theme", "light");
icon.classList.remove("fa-moon");
icon.classList.add("fa-sun");
} else if (state === "dark") { } else if (state === "dark") {
toggle_switch.checked = true; toggle_switch.checked = true;
document.documentElement.setAttribute("data-theme", "dark"); document.documentElement.setAttribute("data-theme", "dark");
icon.classList.remove("fa-sun");
icon.classList.add("fa-moon");
} else { } else {
toggle_switch.checked = false; toggle_switch.checked = false;
state = "light"; state = "light";
@ -53,11 +58,16 @@ function set_last_theme_state() {
} }
function switch_theme(/*event*/ e) { function switch_theme(/*event*/ e) {
var icon = document.getElementById("houston-theme-icon");
var state = ""; var state = "";
if (e.target.checked) { if (e.target.checked) {
state = "dark"; state = "dark";
icon.classList.remove("fa-sun");
icon.classList.add("fa-moon");
} else { } else {
state = "light"; state = "light";
icon.classList.remove("fa-moon");
icon.classList.add("fa-sun");
} }
document.documentElement.setAttribute("data-theme", state); document.documentElement.setAttribute("data-theme", state);
localStorage.setItem("houston-theme-state", state); localStorage.setItem("houston-theme-state", state);