Added Layouts support to dracula theme. Improved performance

themes/dracula/css/style.css

@@ -332,6 +332,10 @@ button {
   background-color: var(--orange);
 }
 
+.button-group .hide {
+  display: none;
+}
+
 /* Auth message */
 
 #auth-message {
@@ -566,8 +570,25 @@ button {
   backdrop-filter: blur(20px);
   border-radius: 2px;
 }
-#system-bar > *:hover {
+#system-bar > *:hover, #system-bar > *:focus {
   background-color: #2828280e;
+  backdrop-filter: blur(50px);
+}
+
+#layouts-list {
+  padding: 0;
+}
+#layouts-button {
+  all: unset;
+  cursor: pointer;
+  padding: 8px;
+}
+#layouts-dropdown {
+  position: absolute;
+  margin: 2px;
+  bottom: 100%;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 /* Animations */

themes/dracula/index.html

@@ -15,7 +15,6 @@
 
   <div id="background">
     <div id="bg-cover"></div>
-    <img src="./assets/dracula.png" alt="">
   </div>
 
   <button id="cover" class="hide">
@@ -102,15 +101,25 @@
 
     </div>
 
-    <button id="panel-button" class="button">
+    <div id="system-bar">
-      <span class="mdi mdi-menu mdi-24px"></span>
+      <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="system-bar">
       <div id="brightness-label"></div>
       <div id="battery-label"></div>
     </div>
 
+    <button id="panel-button" class="button">
+      <span class="mdi mdi-menu mdi-24px"></span>
+    </button>
+
     <div id="sidebar" class="panel hide">
       <h3>Background selector</h3>
       <button id="close-panel-button" class="button">
@@ -138,6 +147,7 @@
   <script src="js/sidebar.js"></script>
   <script src="js/backgrounds.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>

themes/dracula/js/backgrounds.js

@@ -35,6 +35,10 @@ class Backgrounds {
 
 	_updateBackgroundImages() {
 		let img = this._background.querySelector("img")
+		if (!img) {
+			img = document.createElement("img")
+			this._background.appendChild(img)
+		}
 		img.src = this._backgroundPath
 		this._localStorage.setItem("defaultBackgroundImage", String(this._backgroundPath))
 	}

themes/dracula/js/index.js

@@ -20,7 +20,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())
@@ -39,8 +39,10 @@ async function initGreeter() {
 
   time_date = new TimeDate()
 
+  layouts = new Layouts()
+
   backgrounds = new Backgrounds()
-  await backgrounds._init()
+  backgrounds._init()
 
   power = new Power()