Added Layouts support to gruvbox theme

3 years ago · b80fa11caf
5 changed files with 121 additions and 8 deletions
--- 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;
--- a/themes/gruvbox/index.html
+++ b/themes/gruvbox/index.html
@ -7,15 +7,15 @@
  <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="../_vendor/js/mock.js"></script>-->

  <title>Gruvbox theme</title>
 </head>
 <body>
  <div id="background"></div>
-  <div id="cover" class="hide">
+  <button id="cover" class="hide">
    <div id="message"></div>
-  </div>
+  </button>
  <div id="screen">
    <div id="login-form">
      <div id="login-form-box">
@ -49,8 +49,8 @@
          <ul id="sessions-dropdown" class="dropdown hide">
            <li><button>Awesome</button></li>
            <li><button>Ubuntu</button></li>
-          </div>
-        </ul>
+          </ul>
+        </div>
        <div id="users-list">
          <button id="users-button" class="button">
            <span class="mdi mdi-chevron-down mdi-24px"></span>
@ -73,6 +73,16 @@
    </div>

    <div id="system-status" class="label-bar">
+      <div id="layouts-list">
+        <button id="layouts-button" class="">
+          LATAM
+        </button>
+        <ul id="layouts-dropdown" class="dropdown hide">
+          <li><button>Latam</button></li>
+          <li><button>English</button></li>
+        </ul>
+      </div>
+
      <div id="brightness-label"></div>
      <div id="battery-label"></div>
    </div>
@ -97,6 +107,7 @@
  <script src="js/accounts.js"></script>
  <script src="js/sessions.js"></script>
  <script src="js/time-date.js"></script>
+  <script src="js/layouts.js"></script>
  <script src="js/power.js"></script>
  <script src="js/battery.js"></script>
  <script src="js/brightness.js"></script>
--- 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()
--- a/themes/gruvbox/js/layouts.js
+++ 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()
+	}
+}
--- 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() {