Relocate theme toggle beside language picker

brentvollebregt · Apr 6, 2024 · 04342b8 · 04342b8
1 parent 08a7f69
commit 04342b8
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 32 deletions.
diff --git a/auto_py_to_exe/ui.py b/auto_py_to_exe/ui.py
@@ -179,14 +179,14 @@ def start(open_mode):
     try:
         chrome_available = __can_use_chrome()
         if open_mode == UIOpenMode.CHROME and chrome_available:
-            eel.start("index.html", size=(650, 701), port=0)
+            eel.start("index.html", size=(650, 672), port=0)
         elif open_mode == UIOpenMode.USER_DEFAULT or (open_mode == UIOpenMode.CHROME and not chrome_available):
-            eel.start("index.html", size=(650, 701), port=0, mode="user default")
+            eel.start("index.html", size=(650, 672), port=0, mode="user default")
         else:
             port = utils.get_port()
             print("Server starting at http://localhost:" + str(port) + "/index.html")
             eel.start(
-                "index.html", size=(650, 701), host="localhost", port=port, mode=None, close_callback=lambda x, y: None
+                "index.html", size=(650, 672), host="localhost", port=port, mode=None, close_callback=lambda x, y: None
             )
     except (SystemExit, KeyboardInterrupt):
         pass  # This is what the bottle server raises
diff --git a/auto_py_to_exe/web/css/main.css b/auto_py_to_exe/web/css/main.css
@@ -2,7 +2,7 @@
 
 #header {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: auto 1fr;
   margin-top: 18px;
 }
 
@@ -49,12 +49,6 @@
   text-align: right;
 }
 
-#header .extra-links #theme img {
-  height: 20px;
-  user-select: none;
-  cursor: pointer;
-}
-
 #header .extra-links a {
   filter: grayscale(1);
   transition: filter 0.3s;
@@ -79,11 +73,29 @@
   margin-top: 4px;
 }
 
-#header .extra-links #language-selection {
+#header .ui-config {
   margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: flex-end;
+}
+
+#header .ui-config [for='language-selection'] {
+  line-height: 0;
+}
+
+#header .ui-config #language-selection {
   padding: 0 6px;
 }
 
+#header .ui-config #theme-toggle {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  height: 18px;
+}
+
 #language-selection {
   max-width: 200px;
 }

diff --git a/auto_py_to_exe/web/index.html b/auto_py_to_exe/web/index.html
@@ -51,28 +51,32 @@
           <a href="https://github.com/brentvollebregt/auto-py-to-exe" target="_blank"><img src="/favicon.ico" /></a>
           <a href="https://github.com/brentvollebregt/auto-py-to-exe" target="_blank"><h1>Auto Py to Exe</h1></a>
         </div>
-        <div class="extra-links">
-          <span id="theme">
-            <img src="img/sun.svg" id="on-dark-theme-button" style="display: none" />
-            <img src="img/moon.svg" id="on-light-theme-button" style="display: inline" />
-          </span>
-          <a href="https://github.com/brentvollebregt/auto-py-to-exe" target="_blank">
-            <span>GitHub</span>
-            <img src="https://github.githubassets.com/favicons/favicon.png" alt="GitHub favicon" />
-          </a>
-          <a
-            href="https://nitratine.net/blog/post/issues-when-using-auto-py-to-exe/?utm_source=auto_py_to_exe&utm_medium=application_link&utm_campaign=auto_py_to_exe_help&utm_content=top"
-            target="_blank"
-          >
-            <span data-i18n="ui.links.helpPost">Help Post</span>
-            <img src="https://nitratine.net/static/img/favicon-384x384.png" alt="Nitratine favicon" />
-          </a>
-          <span>
+        <div>
+          <div class="extra-links">
+            <a href="https://github.com/brentvollebregt/auto-py-to-exe" target="_blank">
+              <span>GitHub</span>
+              <img src="https://github.githubassets.com/favicons/favicon.png" alt="GitHub favicon" />
+            </a>
+            <a
+              href="https://nitratine.net/blog/post/issues-when-using-auto-py-to-exe/?utm_source=auto_py_to_exe&utm_medium=application_link&utm_campaign=auto_py_to_exe_help&utm_content=top"
+              target="_blank"
+            >
+              <span data-i18n="ui.links.helpPost">Help Post</span>
+              <img src="https://nitratine.net/static/img/favicon-384x384.png" alt="Nitratine favicon" />
+            </a>
+          </div>
+
+          <div class="ui-config">
             <label for="language-selection">
               <small data-i18n="ui.title.language">Language</small><small>:</small>
             </label>
             <select id="language-selection"></select>
-          </span>
+
+            <span id="theme-toggle">
+              <img src="img/sun.svg" id="on-dark-theme-button" style="display: none" />
+              <img src="img/moon.svg" id="on-light-theme-button" style="display: inline" />
+            </span>
+          </div>
         </div>
       </div>
 

diff --git a/auto_py_to_exe/web/js/interface.js b/auto_py_to_exe/web/js/interface.js
@@ -454,9 +454,7 @@ const _toggleTheme = () => {
 
 // Check if user's default color scheme is dark
 const setupTheme = () => {
-  const toggleButton = document.querySelector('span#theme');
-
-  toggleButton.addEventListener('click', _toggleTheme);
+  document.getElementById('theme-toggle').addEventListener('click', _toggleTheme);
 
   if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
     _toggleTheme();