Merge pull request #7 from juleshwar/master

Moving the settings page as a popup
hormesiel · Nov 4, 2020 · 0d82bf1 · 0d82bf1
2 parents 842565e + 088095c
commit 0d82bf1
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 68 deletions.
diff --git a/build.sh b/build.sh
@@ -9,15 +9,15 @@ mkdir $builddir
 
 # Copy main files
 cp $srcdir/manifest.json $builddir
-cp -r $srcdir/res/ $builddir
+cp -r $srcdir/res $builddir
 cp -r $srcdir/_locales $builddir
 
 # Copy settings files
 mkdir $builddir/settings
 cp $srcdir/settings/index.html $builddir/settings/
 
 # Copy libs files
-cp -r libs/ $builddir
+cp -r libs $builddir
 
 # Compile code
 node node_modules/rollup/dist/bin/rollup -c $1 # '$1' equals '--watch' when provided
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -4,10 +4,6 @@
     "message": "Fast Scroll is a tiny but very handy extension that allows you to scroll through web pages way faster"
   },
 
-  "Settings_title": {
-    "description": "Page's title",
-    "message": "Settings"
-  },
   "Settings_IgnoredUrls_label": {
     "description": "Label for the text area that allows to specify a list of URL globs where not to run the extension",
     "message": "Disable the extension on these URLs"

diff --git a/src/_locales/fr/messages.json b/src/_locales/fr/messages.json
@@ -4,10 +4,6 @@
     "message": "Fast Scroll est une petite extension bien pratique qui vous permet de faire défiler les pages web beaucoup plus rapidement"
   },
 
-  "Settings_title": {
-    "description": "Titre de la page",
-    "message": "Paramètres"
-  },
   "Settings_IgnoredUrls_label": {
     "description": "Libellé pour la zone de texte qui permet d'indiquer une liste d'URLs où l'extension ne doit pas être lancée",
     "message": "Désactiver l'extension sur ces URLs"

diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Fast Scroll",
-  "version": "3.1",
+  "version": "4.0",
 
   "default_locale": "en",
   "description": "__MSG_meta_description__",
@@ -15,13 +15,15 @@
       "js": ["index.js"]
     }
   ],
+  "browser_action": {
+    "default_popup": "settings/index.html"
+  },
   "homepage_url": "https://github.com/flawyte/fast-scroll",
   "icons": {
     "16": "res/icon16.png",
     "48": "res/icon48.png",
     "128": "res/icon128.png"
   },
-  "options_page": "settings/index.html",
   "permissions": [
     "storage"
   ]

diff --git a/src/settings/index.html b/src/settings/index.html
@@ -10,55 +10,55 @@
     <script src='index.js'></script>
   </head>
 
-  <body class='matter-body1'>
-    <div id='PageContent'>
-      <h1 class='matter-h3'></h1>
-
-      <!-- Scroll speed multiplier -->
-      <label class='matter-textfield-filled'>
+  <body id='ExtensionBody' class='matter-body1'>
+    <div id='ExtensionContent' class='flex-column'>
+      <div id='UserSettings' class='scroll-gradient'>
+        <!-- Scroll speed multiplier -->
+        <label class='matter-textfield-filled'>
           <input id='scrollSpeedMultiplier' placeholder=' ' type='number' min='1' disabled />
           <span id='scrollSpeedMultiplierLabel'>Textfield</span>
-      </label>
+        </label>
 
-      <!-- Trigger key -->
-      <div class='flex-column'>
-        <div class='flex-column matter-textfield-filled matter-select-filled'>
-          <select id='triggerKey' disabled>
-            <option id='triggerKeyAltLeftOptionLabel' value='AltLeft'></option>
-            <option id='triggerKeyControlLeftOptionLabel' value='ControlLeft'></option>
-            <option id='triggerKeyShiftLeftOptionLabel' value='ShiftLeft'></option>
-          </select>
-          <label id='triggerKeyLabel'></label>
+        <!-- Trigger key -->
+        <div class='flex-column'>
+          <div class='flex-column matter-textfield-filled matter-select-filled'>
+            <select id='triggerKey' disabled>
+              <option id='triggerKeyAltLeftOptionLabel' value='AltLeft'></option>
+              <option id='triggerKeyControlLeftOptionLabel' value='ControlLeft'></option>
+              <option id='triggerKeyShiftLeftOptionLabel' value='ShiftLeft'></option>
+            </select>
+            <label id='triggerKeyLabel'></label>
+          </div>
+          <p id='triggerKeyWarning' class='WarningMessage'></p>
         </div>
-        <p id='triggerKeyWarning' class='WarningMessage'></p>
-      </div>
 
-      <!-- Mode -->
-      <div class='flex-column'>
-        <!-- Matter doesn't offer out of the box CSS for <select> elements so I built one, which means `matter-select-filled*` rules come from our own `./index.css` file, not from matter's file -->
-        <!-- Add `matter-textfield-filled` class to inherit matter theme colors -->
-        <div class='flex-column matter-textfield-filled matter-select-filled'>
-          <select id='mode' disabled>
-            <option id='modeOnTriggerKeyPressed' value='OnTriggerKeyPressed'></option>
-            <option id='modeAlways' value='Always'></option>
-          </select>
-          <label id='modeLabel'></label>
+        <!-- Mode -->
+        <div class='flex-column'>
+          <!-- Matter doesn't offer out of the box CSS for <select> elements so I built one, which means `matter-select-filled*` rules come from our own `./index.css` file, not from matter's file -->
+          <!-- Add `matter-textfield-filled` class to inherit matter theme colors -->
+          <div class='flex-column matter-textfield-filled matter-select-filled'>
+            <select id='mode' disabled>
+              <option id='modeOnTriggerKeyPressed' value='OnTriggerKeyPressed'></option>
+              <option id='modeAlways' value='Always'></option>
+            </select>
+            <label id='modeLabel'></label>
+          </div>
+          <p id='modeDescription'></p>
+          <p id='modeWarning' class='WarningMessage'></p>
         </div>
-        <p id='modeDescription'></p>
-        <p id='modeWarning' class='WarningMessage'></p>
-      </div>
 
-      <!-- Ignored URLs -->
-      <label class='matter-textfield-filled'>
-        <textarea id='ignoredUrls' placeholder='www.example.com
-*.foo.com
-my-website.com/some/page
-' disabled>
-        </textarea>
-        <span id='ignoredUrlsLabel'></span>
-      </label>
+        <!-- Ignored URLs -->
+        <label class='matter-textfield-filled'>
+          <!-- source: https://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea -->
+          <textarea id='ignoredUrls' placeholder='www.example.com&#10;*.foo.com&#10;my-website.com/some/page' disabled>
+          </textarea>
+          <span id='ignoredUrlsLabel'></span>
+        </label>
+      </div>
 
-      <button id='saveButton' class='matter-button-contained' disabled></button>
+      <div class='save-button-container flex-column'>
+        <button id='saveButton' class='matter-button-contained' disabled></button>
+      </div>
     </div>
   </body>
 

diff --git a/src/settings/index.scss b/src/settings/index.scss
@@ -81,30 +81,52 @@ p {
   }
 }
 
+//
+// Page Body
+//
+
+#ExtensionBody {
+  margin: 0;
+  margin: 1rem 1rem 0 1rem;
+}
+
 //
 // Page content
 //
 
-#PageContent {
+#ExtensionContent {
+  position: relative;
+  width: 350px;
+  max-width: 350px;
+}
+
+#UserSettings {
   margin: auto;
-  max-width: 400px;
+  height: 500px;
+  padding-right: 10px;
+  overflow-x: hidden;
+  margin-bottom: 4rem;
 
   > * {
     width: 100%;
 
     & ~ * {
-      margin-top: 2rem;
+      margin-top: 1.5rem;
     }
   }
 }
 
-//
-// Page title
-//
-
-h1 {
-  margin-bottom: 1rem;
-  text-align: center;
+// source: https://css-scroll-shadows.now.sh/?bgColor=ffffff&shadowColor=858585&pxSize=8
+.scroll-gradient {
+  background:
+    linear-gradient(#ffffff 33%, rgba(255,255,255, 0)),
+    linear-gradient(rgba(255,255,255, 0), #ffffff 66%) 0 100%,
+    radial-gradient(farthest-side at 50% 0, rgba(133,133,133, 0.5), rgba(0,0,0,0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(133,133,133, 0.5), rgba(0,0,0,0)) 0 100%;
+  background-color: #ffffff;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+  background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
 }
 
 //
@@ -130,6 +152,7 @@ select#mode {
 textarea {
   max-height: 350px; // Auto-size max
   min-height: 150px;
+  resize: none;
 
   /* Only show placeholder text when textarea is focused and its label is floating, otherwise the label and the
   placeholder would overlap when unfocused */
@@ -141,12 +164,24 @@ textarea {
   }
 }
 
+#ignoredUrlsLabel {
+  /* .matter-textarea-filled gives span 48px line-height which is undesirable for the extension popup */
+  line-height: inherit;
+}
+
 //
 // Save button
 //
 
 button {
   height: 2.5rem !important; // !important required to override matter value
-  margin-bottom: 2rem;
   text-transform: uppercase;
 }
+
+.save-button-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 4rem;
+  justify-content: center;
+}
diff --git a/src/settings/index.ts b/src/settings/index.ts
@@ -83,10 +83,6 @@ function getFormValues(): Settings {
 }
 
 function loadLocalizedStrings() {
-  // title
-  const title = document.querySelector('h1');
-  title.innerHTML = i18n.getMessage('Settings_title');
-
   // scroll speeed multiplier
   const scrollSpeedMultiplierLabel = document.getElementById('scrollSpeedMultiplierLabel');
   scrollSpeedMultiplierLabel.innerHTML = i18n.getMessage('Settings_ScrollSpeedMultiplier_label');