Fixed battery icon and other things

4 years ago · 9bdc01483f
7 changed files with 98 additions and 7 deletions
--- 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 */

--- a/themes/dracula/index.html
+++ b/themes/dracula/index.html
@ -8,7 +8,7 @@
  <link rel="stylesheet" href="css/style.css" class="style">
  <link rel="stylesheet" href="../../_vendor/material-icons/css/materialdesignicons.min.css" onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'" class="style">

-  <script src="../_vendor/js/mock.js"></script>
+  <!--<script src="..//js/mock.js"></script>-->

 </head>
 <body>
@ -18,9 +18,9 @@
    <img src="./assets/dracula.png" alt="">
  </div>

-  <div id="cover" class="hide">
+  <button id="cover" class="hide">
    <div id="message"></div>
-  </div>
+  </button>

  <div id="screen">

--- 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 = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%`
--- a/themes/dracula/js/layouts.js
+++ 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()
+	}
+}
--- 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() {
--- 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 = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%`
--- 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() {