Implement option to place the button bar at the top of the interface

Moustachauve · Feb 21, 2024 · 377674e · 377674e
1 parent 186558e
commit 377674e
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 6 deletions.
diff --git a/interface/lib/options/options.js b/interface/lib/options/options.js
@@ -16,6 +16,7 @@ export class Options {
     this.exportFormat = ExportFormats.Ask;
     this.extraInfo = ExtraInfos.Nothing;
     this.theme = Themes.Auto;
+    this.buttonBarTop = false;
     this.adsEnabled = true;
   }
 }
diff --git a/interface/lib/optionsHandler.js b/interface/lib/optionsHandler.js
@@ -221,6 +221,22 @@ export class OptionsHandler extends EventEmitter {
     return false;
   }
 
+  /**
+   * Gets whether the button bar is displayed at the top of the page or not.
+   * @return {boolean} True if the button bar is on the top, otherwise false.
+   */
+  getButtonBarTop() {
+    return this.options.buttonBarTop;
+  }
+  /**
+   * Sets whether the button bar is displayed at the top of the page or not.
+   * @param {boolean} buttonBarTop True if the button bar is on the top, otherwise false.
+   */
+  setButtonBarTop(buttonBarTop) {
+    this.options.buttonBarTop = buttonBarTop;
+    this.saveOptions();
+  }
+
   /**
    * Gets whether ads are enabled or not.
    * @return {boolean} True if ads are enabled, otherwise false.

diff --git a/interface/options/options.html b/interface/options/options.html
@@ -102,6 +102,18 @@
           automatically.
         </div>
       </div>
+
+      <div class="input-container">
+        <label for="button-bar-top">Place Button Bar on Top</label>
+        <label class="switch">
+          <input type="checkbox" id="button-bar-top" aria-describedby="button-bar-top-hint" />
+          <span class="slider"></span>
+        </label>
+        <div class="hint" id="button-bar-top-hint">
+          When enabled, the main button bar will be placed at the top of the
+          interface instead of the bottom.
+        </div>
+      </div>
 
       <div class="input-container">
         <label for="ads-enabled">Show Ads</label>

diff --git a/interface/options/options.js b/interface/options/options.js
@@ -21,6 +21,7 @@ document.addEventListener('DOMContentLoaded', async (event) => {
   const exportFormatInput = document.getElementById('export-format');
   const extraInfoInput = document.getElementById('extra-info');
   const themeInput = document.getElementById('theme');
+  const buttonBarTopInput = document.getElementById('button-bar-top');
   const adsEnabledInput = document.getElementById('ads-enabled');
 
   await optionHandler.loadOptions();
@@ -41,6 +42,7 @@ document.addEventListener('DOMContentLoaded', async (event) => {
     exportFormatInput.value = optionHandler.getExportFormat();
     extraInfoInput.value = optionHandler.getExtraInfo();
     themeInput.value = optionHandler.getTheme();
+    buttonBarTopInput.checked = optionHandler.getButtonBarTop();
     adsEnabledInput.checked = optionHandler.getAdsEnabled();
 
     if (!browserDetector.isSafari()) {
@@ -92,6 +94,12 @@ document.addEventListener('DOMContentLoaded', async (event) => {
       optionHandler.setTheme(themeInput.value);
       themeHandler.updateTheme();
     });
+    buttonBarTopInput.addEventListener('change', (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      optionHandler.setButtonBarTop(buttonBarTopInput.checked);
+    });
     adsEnabledInput.addEventListener('change', (event) => {
       if (!event.isTrusted) {
         return;

diff --git a/interface/options/style.css b/interface/options/style.css
@@ -54,6 +54,7 @@ a:hover {
 
 .input-container {
   min-height: 2em;
+  margin-top: 5px;
 }
 
 .input-container input,
@@ -101,7 +102,7 @@ a:hover {
   color: var(--secondary-text-color);
   font-size: 0.8em;
   padding: 1em;
-  padding-top: 2px;
+  padding-top: 4px;
 }
 
 .notice {

diff --git a/interface/popup-mobile/style.css b/interface/popup-mobile/style.css
@@ -521,6 +521,12 @@ label {
   user-select: none;
   overflow: hidden;
 }
+
+.button-bar-top .panel-section-footer {
+  border-top: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
 .panel-section-footer-button {
   flex: 1 1;
   font-size: 18px;
@@ -564,6 +570,10 @@ label {
   padding: 0 25px;
 }
 
+.button-bar-top #notification-container {
+  bottom: 30px;
+}
+
 #notification {
   position: relative;
   display: inline-block;
@@ -760,6 +770,17 @@ label {
   border-right: solid 15px transparent;
 }
 
+.button-bar-top #export-menu {
+  top: 142px;
+  bottom: auto;
+}
+.button-bar-top #export-menu:after {
+  top: auto;
+  bottom: 100%;
+  border-top: none;
+  border-bottom: solid 10px var(--menu-surface-color);
+}
+
 #export-menu button {
   background-color: var(--menu-surface-color);
   color: var(--primary-text-color);

diff --git a/interface/popup/cookie-list.js b/interface/popup/cookie-list.js
@@ -1064,6 +1064,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
   async function initWindow(_tab) {
     await optionHandler.loadOptions();
     themeHandler.updateTheme();
+    moveButtonBar();
     handleAd();
     handleAnimationsEnabled();
     optionHandler.on('optionsChanged', onOptionsChanged);
@@ -1331,6 +1332,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
    */
   function onOptionsChanged(oldOptions) {
     handleAnimationsEnabled();
+    moveButtonBar();
     if (oldOptions.advancedCookies != optionHandler.getCookieAdvanced()) {
       document.querySelector('#advanced-toggle-all').checked =
         optionHandler.getCookieAdvanced();
@@ -1341,4 +1343,21 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
       showCookiesForTab();
     }
   }
+
+  /**
+   * Moves the button bar to the top or bottom depending on the user preference
+   */
+  function moveButtonBar() {
+    const siblingElement = optionHandler.getButtonBarTop()
+      ? document.getElementById('pageTitle').nextSibling
+      : document.body.lastChild;
+    document.querySelectorAll('.button-bar').forEach((bar) => {
+      siblingElement.parentNode.insertBefore(bar, siblingElement);
+      if (optionHandler.getButtonBarTop()) {
+        document.body.classList.add('button-bar-top');
+      } else {
+        document.body.classList.remove('button-bar-top');
+      }
+    });
+  }
 })();
diff --git a/interface/popup/style.css b/interface/popup/style.css
@@ -468,11 +468,6 @@ label {
   margin: 0;
 }
 
-.panel-section-footer-button {
-  font-size: 14px;
-  line-height: 14px;
-}
-
 .button-bar {
   display: none;
   z-index: 5;
@@ -567,7 +562,15 @@ body,
   user-select: none;
   overflow: hidden;
 }
+
+.button-bar-top .panel-section-footer {
+  border-top: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
 .panel-section-footer-button {
+  font-size: 14px;
+  line-height: 14px;
   flex: 1 1;
   padding: 12px;
   text-align: center;
@@ -643,6 +646,10 @@ body,
   padding: 0 25px;
 }
 
+.button-bar-top #notification-container {
+  bottom: 15px;
+}
+
 #notification {
   position: relative;
   display: inline-block;
@@ -853,6 +860,17 @@ body,
   border-right: solid 10px transparent;
 }
 
+.button-bar-top #export-menu {
+  top: 92px;
+  bottom: auto;
+}
+.button-bar-top #export-menu:after {
+  top: auto;
+  bottom: 100%;
+  border-top: none;
+  border-bottom: solid 10px var(--menu-surface-color);
+}
+
 #export-menu h3 {
   margin-top: 0;
   margin-left: 2px;