Fix mobile style

tumpio · Dec 25, 2020 · aa79c88 · aa79c88
1 parent 9a89851
commit aa79c88
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 32 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -414,8 +414,19 @@
   "test_selected": {
     "message": "Test selected"
   },
-  "selected_rules": {
-    "message": "Selected rules"
+  "zero_selected_rules": {
+    "message": "0 selected rules"
+  },
+  "one_selected_rule": {
+    "message": "1 selected rule"
+  },
+  "multiple_selected_rules": {
+    "message": "$COUNT$ selected rules",
+    "placeholders": {
+      "count": {
+        "content": "$1"
+      }
+    }
   },
   "export_rules": {
     "message": "Export rules"

diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "name": "__MSG_extensionName__",
     "description": "__MSG_extensionDescription__",
     "default_locale": "en",
-    "version": "1.15.5",
+    "version": "1.16.0a",
     "manifest_version": 2,
     "icons": {
         "48": "icons/icon.svg",

diff --git a/src/options/options.css b/src/options/options.css
@@ -269,6 +269,7 @@ body {
     }
 
     rule-list {
+        display: block;
         margin-bottom: 1.3em !important;
     }
 
@@ -282,6 +283,14 @@ body {
         margin: 0;
     }
 
+    .tab-selector {
+        padding: 1em;
+    }
+
+    .tab-selector:hover {
+        opacity: 1;
+    }
+
     .tab-selector:not(.active) > span {
         display: none;
     }
@@ -303,10 +312,6 @@ body {
         z-index: -1;
     }
 
-    #selectedRules .total-selected-count {
-        margin: 0 0.5em;
-    }
-
     .mobile-toolbar {
         display: none;
     }

diff --git a/src/options/options.html b/src/options/options.html
@@ -105,10 +105,7 @@
                             <span class="badge badge-light selected-count">0</span>
                         </button>
                     </div>
-                    <button id="selectedRules" class="btn">
-                        <span class="selected-count">0</span>
-                        <span data-i18n="selected_rules"></span>
-                    </button>
+                    <button id="selectedRules" class="btn" data-i18n="zero_selected_rules"></button>
                 </div>
             </div>
             <div id="tab-settings" class="tab-pane">

diff --git a/src/options/options.js b/src/options/options.js
@@ -271,6 +271,21 @@ function updateToolbar() {
     document.querySelectorAll(".btn-selected-action").forEach((button) => {
         button.disabled = !isSelected;
     });
+    const selectedButton = document.getElementById("selectedRules");
+    selectedButton.disabled = !isSelected;
+    selectedButton.textContent = getSelectedRulesText(count);
+}
+
+function getSelectedRulesText(count) {
+    let text;
+    if (count === 0) {
+        text = browser.i18n.getMessage("zero_selected_rules");
+    } else if (count === 1) {
+        text = browser.i18n.getMessage("one_selected_rule");
+    } else  {
+        text = browser.i18n.getMessage("multiple_selected_rules", count);
+    }
+    return text;
 }
 
 async function fetchLocalisedManual() {

diff --git a/src/options/rule-input.css b/src/options/rule-input.css
@@ -82,18 +82,6 @@ form .row {
     background: #e0e9f7;
 }
 
-:host(.saved:not(.editing)) > .rule-header {
-    border-left: 2px solid green;
-}
-
-:host(.error) > .rule-header {
-    border-left: 2px solid red;
-}
-
-:host(.new:not(.editing)) > .rule-header {
-    border-left: 2px solid orange;
-}
-
 .rule-header-title {
     flex-grow: 1;
     text-overflow: ellipsis;
@@ -229,6 +217,18 @@ form .row {
         cursor: pointer;
     }
 
+    :host(.saved:not(.editing)) > .rule-header {
+        border-left: 2px solid green;
+    }
+
+    :host(.error) > .rule-header {
+        border-left: 2px solid red;
+    }
+
+    :host(.new:not(.editing)) > .rule-header {
+        border-left: 2px solid orange;
+    }
+
     .form-group-pattern {
         display: flex;
         margin: 0;
@@ -272,10 +272,34 @@ form .row {
         margin-bottom: 0.6em !important;
     }
 
-    :host(.editing) .header-info-wrap {
+    :host(.editing) .header-info-wrap,
+    .rule-select {
         display: none !important;
     }
 
+    .information::before {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+        margin: 0 .3em;
+    }
+
+    :host(.saved:not(.editing)) .information::before {
+        background: green;
+        content: "";
+    }
+
+    :host(.error) .information::before {
+        background: red;
+        content: "";
+    }
+
+    :host(.new:not(.editing)) .information::before {
+        background: orange;
+        content: "";
+    }
+
     .rule-header {
         line-height: 1.5;
         flex-direction: column;

diff --git a/src/options/rule-input.js b/src/options/rule-input.js
@@ -47,7 +47,7 @@ export function newRuleInput(
     return input;
 }
 
-const getIsMobile = (() => browser.runtime.getBrowserInfo().then((info) => info.name === "Fennec"))();
+const isMobile = window.matchMedia("(max-width: 35em)");
 
 class RuleInput extends HTMLElement {
     constructor() {
@@ -87,13 +87,11 @@ class RuleInput extends HTMLElement {
             .querySelectorAll(".toggle-edit")
             .forEach((edit) => edit.addEventListener("click", this.toggleEdit.bind(this)));
 
-        getIsMobile.then((isMobile) => {
-            if (isMobile) {
-                this.shadowRoot.getElementById("header").addEventListener("click", this.onHeaderClick.bind(this));
-            } else {
-                this.shadowRoot.getElementById("title").addEventListener("click", this.onHeaderTitleClick.bind(this));
-            }
-        });
+        if (isMobile) {
+            this.shadowRoot.getElementById("header").addEventListener("click", this.onHeaderClick.bind(this));
+        } else {
+            this.shadowRoot.getElementById("title").addEventListener("click", this.onHeaderTitleClick.bind(this));
+        }
     }
 
     focus() {