fix word count widget and change popup options

fix document metrics widget add raise button setting to popup options release v0.4.3
waymondrang · Sep 19, 2022 · 3634437 · 3634437
1 parent ee12eee
commit 3634437
Show file tree

Hide file tree

Showing 22 changed files with 420 additions and 321 deletions.
diff --git a/readme.md b/readme.md
@@ -8,7 +8,9 @@ Customize the document background to a darker shade or any color in the extensio
 
 With the invert option, document content (excluding images) will appear inverted. This option is recommended for users who want a darker document background without needing to change the font color.
 
-To temporarily toggle dark mode on/off, click on the button at the bottom left of the page. The global toggle in the options menu can be used to disable/enable the extension.
+To temporarily toggle dark mode on/off, click on the button at the bottom left of the page. This toggle may block other elements, such as the persistent word count widget. When this occurs, use the raise button settings in the options menu.
+
+The global toggle in the options menu can be used to disable/enable the extension.
 
 Available on [Firefox Add-Ons](https://addons.mozilla.org/en-US/firefox/addon/docsafterdark/), [Chrome Web Store](https://chrome.google.com/webstore/detail/docsafterdark/pihphjfnfjmdbhakhjifipfdgbpenobg), [Edge Add-Ons](https://microsoftedge.microsoft.com/addons/detail/docsafterdark/bbpgjhhjjphjmabmohnkkpmelbfpgfna), and [Opera](https://addons.opera.com/en/extensions/details/docsafterdark/).
 

diff --git a/releases/dad_v0.4.3_chrome.zip b/releases/dad_v0.4.3_chrome.zip
diff --git a/releases/dad_v0.4.3_firefox.zip b/releases/dad_v0.4.3_firefox.zip
diff --git a/releases/dad_v0.4.3_opera.zip b/releases/dad_v0.4.3_opera.zip
diff --git a/src/chrome/docs.css b/src/chrome/docs.css
@@ -346,7 +346,8 @@ body,
 .docs-gm .goog-zippy-expanded.docs-sidebar-tile-header,
 .docs-gm .docs-tiled-sidebar-header,
 .docs-gm .docs-tiled-sidebar,
-.docs-gm .docs-sidebar-tile-controls {
+.docs-gm .docs-sidebar-tile-controls,
+.kix-documentmetrics-widget {
   background-color: var(--secondary-background-color) !important;
 }
 
@@ -972,7 +973,8 @@ img.kix-smart-summary-onboarding-promo-content-illustration,
 .docs-gm .docos-anchoreddocoview:hover,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active:hover,
-.kix-dropdown-item-selection-bubble {
+.kix-dropdown-item-selection-bubble,
+.kix-documentmetrics-widget {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 

diff --git a/src/chrome/manifest.json b/src/chrome/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "DocsAfterDark",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "description": "Modern, dark mode for Google Docs",
     "author": "Raymond Wang",
     "manifest_version": 3,

diff --git a/src/chrome/popup.css b/src/chrome/popup.css
@@ -1,124 +1,124 @@
 :root {
-    --primary-background-color: #1b1b1b;
-    --secondary-background-color: #262626;
-    --menu-background: #1b1b1bf0;
-    --hover-background-color: #333333;
-    --input-background-color: #404040;
+  --primary-background-color: #1b1b1b;
+  --secondary-background-color: #262626;
+  --menu-background: #1b1b1bf0;
+  --hover-background-color: #333333;
+  --input-background-color: #404040;
 
-    /* buttons */
-    --button-background-color: #4d4d4d;
-    --button-background-color-hover: #2196F3;
-    --button-background-color-focus: #2196F3;
-    --button-two-background-color: #262626;
-    --button-two-background-color-hover: #333333;
+  /* buttons */
+  --button-background-color: #4d4d4d;
+  --button-background-color-hover: #2196f3;
+  --button-background-color-focus: #2196f3;
+  --button-two-background-color: #262626;
+  --button-two-background-color-hover: #333333;
 
-    --enabled-background-color: #808080;
-    --selection-background-color: #999999;
+  --enabled-background-color: #808080;
+  --selection-background-color: #999999;
 
-    --primary-border-color: #4d4d4d;
-    --secondary-border-color: #404040;
+  --primary-border-color: #4d4d4d;
+  --secondary-border-color: #404040;
 
-    --primary-text-color: #f2f2f2;
-    --secondary-text-color: #cccccc;
-    --tertiary-text-color: #999999;
-    --disabled-text: #666666;
-    --accent-text: #64B5F6;
+  --primary-text-color: #f2f2f2;
+  --secondary-text-color: #cccccc;
+  --tertiary-text-color: #999999;
+  --disabled-text: #666666;
+  --accent-text: #64b5f6;
 }
 
 body {
-    background-color: var(--primary-background-color);
+  background-color: var(--primary-background-color);
 }
 
 body {
-    color: var(--primary-text-color);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 14px;
-    width: 300px;
+  color: var(--primary-text-color);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  width: 300px;
+  padding-bottom: 1em;
 }
 
 #main {
-    margin: 0 auto;
-    padding: 0 12px;
+  margin: 0 auto;
+  padding: 0 12px;
 }
 
 .menu_bar_label {
-    color: #999999;
-    margin-bottom: 8px;
+  color: #999999;
+  margin-bottom: 8px;
 }
 
 .menu_bar {
-    display: flex;
-    flex-direction: row;
-    border: 1px solid var(--primary-border-color);
-    width: fit-content;
-    border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  border: 1px solid var(--primary-border-color);
+  width: fit-content;
+  border-radius: 4px;
 }
 
 #on_off {
-    margin-bottom: 18px;
+  margin-bottom: 18px;
 }
 
 button {
-    background-color: transparent;
-    color: var(--primary-text-color);
-    border: none;
-    padding: 4px 8px;
-    cursor: pointer;
-    /* transition: background-color 0.1s ease-out; */
-    /* border-radius: 4px; */
+  background-color: transparent;
+  color: var(--primary-text-color);
+  border: none;
+  padding: 4px 8px;
+  cursor: pointer;
+  /* transition: background-color 0.1s ease-out; */
+  /* border-radius: 4px; */
 }
 
 button:disabled {
-    opacity: 0.25;
-    cursor: not-allowed;
+  opacity: 0.25;
+  cursor: not-allowed;
 }
 
 input {
-    background-color: var(--input-background-color);
-    border: 1px solid var(--primary-border-color);
-    border-radius: 4px;
-    margin: 8px 0;
-    padding: 4px 8px;
-    color: var(--primary-text-color);
-    width: 100%;
-    box-sizing: border-box;
+  background-color: var(--input-background-color);
+  border: 1px solid var(--primary-border-color);
+  border-radius: 4px;
+  margin: 8px 0;
+  padding: 4px 8px;
+  color: var(--primary-text-color);
+  width: 100%;
+  box-sizing: border-box;
 }
 
-input[type=checkbox] {
-    width: fit-content;
-    margin: 0;
-    margin-right: 4px;
+input[type="checkbox"] {
+  width: fit-content;
+  margin: 0;
+  margin-right: 4px;
 }
 
 #invert_container {
-    margin-top: 12px;
-    display: flex;
-    align-items: center;
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
 }
 
 label {
-    font-family: inherit;
+  font-family: inherit;
 }
 
 button:hover {
-    background-color: var(--hover-background-color);
+  background-color: var(--hover-background-color);
 }
 
 button.selected {
-    background-color: var(--button-background-color-focus);
-    border-radius: 4px;
+  background-color: var(--button-background-color-focus);
+  border-radius: 4px;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 #save_custom {
-    background-color: var(--hover-background-color);
-    border-radius: 4px;
-
+  background-color: var(--hover-background-color);
+  border-radius: 4px;
 }
 
 #save_custom:hover {
-    background-color: var(--button-background-color-focus);
-}
+  background-color: var(--button-background-color-focus);
+}
diff --git a/src/chrome/popup.html b/src/chrome/popup.html
@@ -52,6 +52,8 @@
             <input type="checkbox" id="invert" name="invert"><label for="invert">Invert</label>
         </div>
         <p id="description"></p>
+        <p class="menu_bar_label">Toggle Button Settings</p>
+        <input type="checkbox" id="raise_button" name="raise_button"><label for="raise_button">Raise Button</label>
     </div>
     <script src="popup.js"></script>
 </body>

diff --git a/src/chrome/popup.js b/src/chrome/popup.js
@@ -2,6 +2,7 @@ var bg_selected, on_selected;
 const custom_input = document.querySelector("#custom_input");
 const custom_save = document.querySelector("#save_custom");
 const description = document.querySelector("#description");
+const raise_button = document.querySelector("#raise_button");
 const invert = document.querySelector("#invert");
 
 var descriptions = {
@@ -55,18 +56,26 @@ invert.addEventListener("click", function (e) {
     chrome.storage.local.set({ "invert": this.checked });
 })
 
+raise_button.addEventListener("click", function (e) {
+    chrome.storage.local.set({ "raise_button": this.checked });
+})
+
 try {
-    chrome.storage.local.get(["doc_bg", "custom_bg", "invert", "on"], function (data) {
-        var option = data.doc_bg;
-        var custom = data.custom_bg;
-        var inverted = data.invert;
-        var on = data.on;
+    chrome.storage.local.get(["doc_bg", "custom_bg", "invert", "on", "raise_button"], function (data) {
+        let option = data.doc_bg;
+        let custom = data.custom_bg;
+        let inverted = data.invert;
+        let button_raised = data.raise_button;
+        let on = data.on;
+
+        console.log(raise_button);
+
         if (on == null) {
             chrome.storage.local.set({ "on": true });
             on = true;
         }
         if (!option) {
-            var option = "default";
+            let option = "default";
             chrome.storage.local.set({ "doc_bg": "default" });
         }
         var selected_option = document.querySelector(`#${option}`);
@@ -81,8 +90,11 @@ try {
         if (inverted) {
             invert.checked = true;
         }
-        var on_off;
-        on_off = on ? document.querySelector("#on") : document.querySelector("#off");
+        if (button_raised) {
+            raise_button.checked = true;
+        }
+
+        let on_off = on ? document.querySelector("#on") : document.querySelector("#off");
         on_selected = on_off;
         on_off.classList.add("selected");
     })