From b80fa11cafcc4544333e0e0f39b3339bc1206034 Mon Sep 17 00:00:00 2001 From: JezerM Date: Fri, 13 Aug 2021 23:19:33 -0600 Subject: [PATCH] Added Layouts support to gruvbox theme --- themes/gruvbox/css/style.css | 24 ++++++++++- themes/gruvbox/index.html | 21 +++++++--- themes/gruvbox/js/index.js | 4 +- themes/gruvbox/js/layouts.js | 77 ++++++++++++++++++++++++++++++++++++ themes/gruvbox/js/power.js | 3 ++ 5 files changed, 121 insertions(+), 8 deletions(-) create mode 100644 themes/gruvbox/js/layouts.js diff --git a/themes/gruvbox/css/style.css b/themes/gruvbox/css/style.css index 9a5fd43..37a9411 100644 --- a/themes/gruvbox/css/style.css +++ b/themes/gruvbox/css/style.css @@ -62,7 +62,7 @@ html { font-family: system-ui; font-size: var(--base-font-size); text-rendering: optimizeSpeed; - image-rendering: pixelated; + /*image-rendering: pixelated;*/ } html > * { @@ -128,6 +128,7 @@ button { display: flex; align-items: center; justify-content: center; + cursor: pointer; background-color: #282828aa; backdrop-filter: blur(5px); @@ -138,6 +139,9 @@ button { font-weight: bold; cursor: default; } +#cover:focus { + outline: 0 !important; +} #screen { width: 100%; @@ -286,6 +290,7 @@ input:focus, input:focus-visible { } .label-bar > * { + background-color: transparent; padding: 8px; transition: var(--animation-duration); border-radius: 5px; @@ -297,11 +302,25 @@ input:focus, input:focus-visible { display: none; } -.label-bar > *:hover { +.label-bar > *:hover, .label-bar > *:focus-within { background: #3c3836aa; backdrop-filter: blur(10px); } +#layouts-list { + padding: 0; +} +#layouts-button { + all: unset; + cursor: pointer; + padding: 8px; +} +#layouts-dropdown { + position: absolute; + margin: 2px; +} + + #system-status { top: 0; right: 0; @@ -314,6 +333,7 @@ input:focus, input:focus-visible { #system-power > * { background: transparent; font-size: 2em; + cursor: pointer; } #system-power > *:hover, #system-power > *:focus { background: #3c3836aa; diff --git a/themes/gruvbox/index.html b/themes/gruvbox/index.html index 33f5f1d..9b47c83 100644 --- a/themes/gruvbox/index.html +++ b/themes/gruvbox/index.html @@ -7,15 +7,15 @@ - + Gruvbox theme
-
+
+
@@ -49,8 +49,8 @@
- + +
+
+ + +
+
@@ -97,6 +107,7 @@ + diff --git a/themes/gruvbox/js/index.js b/themes/gruvbox/js/index.js index 37d0705..b5449c3 100644 --- a/themes/gruvbox/js/index.js +++ b/themes/gruvbox/js/index.js @@ -21,7 +21,7 @@ async function wait(ms) { async function initGreeter() { if (greeter_config.greeter.debug_mode) { - debug = new Debug() + //debug = new Debug() } lightdm.authentication_complete?.connect(() => authentication_done()) @@ -38,6 +38,8 @@ async function initGreeter() { time_date = new TimeDate() + layouts = new Layouts() + power = new Power() battery = new Battery() diff --git a/themes/gruvbox/js/layouts.js b/themes/gruvbox/js/layouts.js new file mode 100644 index 0000000..cbd1133 --- /dev/null +++ b/themes/gruvbox/js/layouts.js @@ -0,0 +1,77 @@ +class Layouts { + constructor() { + this._layoutList = document.querySelector("#layouts-list") + this._dropdown = document.querySelector("#layouts-dropdown") + this._button = document.querySelector("#layouts-button") + this._layouts = [] + + this.layout = {} + + this._init() + } + + _setDefault() { + let name = this.layout.name + let description = this.layout.description + let short = this.layout.short_description + this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : "") + //this._button.name = description + } + + _setLayoutList() { + let dropdown = this._dropdown + dropdown.innerHTML = "" + for (let i = 0; i < this._layouts.length; i++) { + let name = this._layouts[i].name + let description = this._layouts[i].description + let short = this._layouts[i].short_description + let li = document.createElement("li") + let button = document.createElement("button") + button.innerHTML = name + (short ? ` (${short})` : "") + button.name = description + button.addEventListener("click", () => { + this.layout = this._layouts[i] + this._setDefault() + lightdm.layout = this.layout + }) + li.appendChild(button) + dropdown.appendChild(li) + } + } + + _setKeydown() { + let dropdown = this._dropdown + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + dropdown.classList.add("hide") + this._button.focus() + } + }) + } + + _setButton() { + let dropdown = this._dropdown + document.querySelector("#screen").addEventListener("click", (ev) => { + if (ev.target == this._button || ev.target.parentElement == this._button) { + dropdown.classList.toggle("hide") + } else + if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { + dropdown.classList.add("hide") + } + }) + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if (!dropdown.contains(document.activeElement) && document.activeElement != this._button) { + dropdown.classList.add("hide") + } + }) + } + + _init() { + this.layout = lightdm.layout + this._layouts = greeter_config.layouts + this._setDefault() + this._setLayoutList() + this._setButton() + this._setKeydown() + } +} diff --git a/themes/gruvbox/js/power.js b/themes/gruvbox/js/power.js index d70e3b3..94074f7 100644 --- a/themes/gruvbox/js/power.js +++ b/themes/gruvbox/js/power.js @@ -12,6 +12,9 @@ class Power { _show_message(text) { this._covermsg.innerHTML = text this._cover.classList.remove("hide") + wait(500).then(() => { + this._cover.focus() + }) } async _do_shutdown() {