diff --git a/themes/dracula/css/style.css b/themes/dracula/css/style.css index 3c6ca73..1ec2d23 100644 --- a/themes/dracula/css/style.css +++ b/themes/dracula/css/style.css @@ -130,6 +130,9 @@ body { font-weight: bold; cursor: default; } +#cover:focus { + outline: 0 !important; +} /* Login form */ diff --git a/themes/dracula/index.html b/themes/dracula/index.html index f99c4ea..71839de 100644 --- a/themes/dracula/index.html +++ b/themes/dracula/index.html @@ -8,7 +8,7 @@ - + @@ -18,9 +18,9 @@ -
+
+
diff --git a/themes/dracula/js/battery.js b/themes/dracula/js/battery.js index 1668f33..792c64f 100644 --- a/themes/dracula/js/battery.js +++ b/themes/dracula/js/battery.js @@ -9,14 +9,15 @@ class Battery { this._info = lightdm.batteryData var level = this._info.level var state = this._info.state + var ac = this._info.ac_status var icon = 0 var charging = "" var blevel = Math.floor(level / 10) * 10 icon = `-${blevel}` - charging = state == "Charging" ? "-charging" : "" + charging = ac == 1 ? "-charging" : "" if (blevel < 10) icon = "-outline" - if (state == "Full" ) { icon = ""; charging = ""} + if (level == 100 && ac == 0) {icon = ""} if (level >= 0) { this._battery.style.visibility = "visible" this._battery.innerHTML = ` ${level}%` diff --git a/themes/dracula/js/layouts.js b/themes/dracula/js/layouts.js new file mode 100644 index 0000000..cbd1133 --- /dev/null +++ b/themes/dracula/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/dracula/js/power.js b/themes/dracula/js/power.js index 5a2269e..9cc5413 100644 --- a/themes/dracula/js/power.js +++ b/themes/dracula/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() { @@ -67,6 +70,9 @@ class Power { this._cover.addEventListener("click", () => { this._cover.classList.add("hide") }) + this._cover.addEventListener("keydown", () => { + this._cover.classList.add("hide") + }) } _setButtons() { diff --git a/themes/gruvbox/js/battery.js b/themes/gruvbox/js/battery.js index 1668f33..792c64f 100644 --- a/themes/gruvbox/js/battery.js +++ b/themes/gruvbox/js/battery.js @@ -9,14 +9,15 @@ class Battery { this._info = lightdm.batteryData var level = this._info.level var state = this._info.state + var ac = this._info.ac_status var icon = 0 var charging = "" var blevel = Math.floor(level / 10) * 10 icon = `-${blevel}` - charging = state == "Charging" ? "-charging" : "" + charging = ac == 1 ? "-charging" : "" if (blevel < 10) icon = "-outline" - if (state == "Full" ) { icon = ""; charging = ""} + if (level == 100 && ac == 0) {icon = ""} if (level >= 0) { this._battery.style.visibility = "visible" this._battery.innerHTML = ` ${level}%` diff --git a/themes/gruvbox/js/power.js b/themes/gruvbox/js/power.js index 94074f7..72e77ad 100644 --- a/themes/gruvbox/js/power.js +++ b/themes/gruvbox/js/power.js @@ -70,6 +70,9 @@ class Power { this._cover.addEventListener("click", () => { this._cover.classList.add("hide") }) + this._cover.addEventListener("keydown", () => { + this._cover.classList.add("hide") + }) } _setButtons() {