access options page from popup

aetiss · May 4, 2020 · dae29d1 · dae29d1
1 parent 1d234eb
commit dae29d1
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 6 deletions.
diff --git a/browserAction/index.html b/browserAction/index.html
@@ -26,6 +26,7 @@
       Searching...
     </div>
     <div class="more-info">
+      <a href="#" id="optionsPage" target="_blank">Settings >></a>
       <a href="https://www.merriam-webster.com/">More >></a>
     </div>
     <script src="util.js"></script>

diff --git a/browserAction/script.js b/browserAction/script.js
@@ -1,5 +1,10 @@
 const LocalStorage = window.browser.storage.local;
 
+window.onload = function(){
+  let optionsLink = browser.runtime.getURL('options/options.html');
+  document.getElementById('optionsPage').setAttribute('href', optionsLink);
+};
+
 // api call here
 function getDefinition(keyword, handleDefinition) {
   const apiKey = config.API_KEY;

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Dictionary Browser Extension",
+    "homepage_url": "https://github.com/aetiss/dictionary_browser_extension",
     "version": "1.1",
     "description": "Basic English Dictionary lookup addon/extension for Firefox providing meaning of word thats double-clicked selected on a webpage.",
     "icons": {
@@ -33,6 +34,9 @@
             "description": "search dictionary for selected keyword"
         }
     },
+    "web_accessible_resources": [
+        "options/options.html"
+    ],
     "options_ui": {
         "page": "options/options.html",
         "browser_style": false,

diff --git a/options/options.css b/options/options.css
@@ -1,5 +1,11 @@
 * {
   font-family: 'Fira Sans', sans-serif;
+  margin: 0px;
+  padding: 0px;
+}
+
+body {
+  background: #eef2f7;
 }
 
 .container {
@@ -9,6 +15,111 @@
   margin-left: -480px;
   width: 960px;
   padding: 24px;
-  border-radius: 4px;
-  background-color: gray;
-}
+  border-radius: 6px;
+  background: white;
+  box-shadow:
+  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
+  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
+  0 12.5px 10px rgba(0, 0, 0, 0.06),
+  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
+  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
+  0 100px 80px rgba(0, 0, 0, 0.12);
+}
+
+.header-img {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.header-text {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 22px;
+}
+
+.btn {
+  height: 40px;
+  padding: 12px;
+  margin: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  text-transform: uppercase;
+  border: 0px;
+  border-radius: 3px;
+  background: #3D4C53;
+  color: white;
+  box-shadow: 0px 4px 8px rgba(0,0,0,.3);
+  transition: .3s;
+  font-size: 15px;
+}
+
+.btn:hover {
+  background: #3D4C99;
+  box-shadow: 0px 4px 8px rgba(0,0,0,.5);
+  transition: .3s;
+}
+
+/* Radio Buttons */
+/* The container */
+.radio-container {
+  display: inline-block;
+  position: relative;
+  padding-left: 40px;
+  cursor: pointer;
+  font-size: 17px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default radio button */
+.radio-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+/* Create a custom radio button */
+.checkmark {
+  margin-left: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+  border-radius: 50%;
+}
+
+/* On mouse-over, add a grey background color */
+.radio-container:hover input ~ .checkmark {
+  background-color: #3D4C99;
+}
+
+/* When the radio button is checked, add a blue background */
+.radio-container input:checked ~ .checkmark {
+  background-color: #3D4C53;
+}
+
+/* Create the indicator (the dot/circle - hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the indicator (dot/circle) when checked */
+.radio-container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the indicator (dot/circle) */
+.radio-container .checkmark:after {
+  top: 6px;
+  left: 6px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: white;
+}
diff --git a/options/options.html b/options/options.html
@@ -11,12 +11,39 @@
   </head>
   <body>
     <div class="container">
+      <div>
+        <img
+          class="header-img"
+          src="../assets/icon_book_64.png"
+          alt="english dictionary extension"
+        />
+        <div class="header-text">
+          English Dictionary Options Page
+        </div>
+      </div>
+      <br />
       <form>
-        <label>Keyboard shortcut</label>
+        <label style="font-size: 17px;">Keyboard Shortcut:</label>
+        <br />
         <input id="shortcut" type="text" />
-        <button id="update">Update keyboard shortcut</button>
-        <button id="reset">Reset keyboard shortcut</button>
+        <button id="update" class="btn">Update Keyboard Shortcut</button>
+        <button id="reset" class="btn">Reset Keyboard Shortcut</button>
       </form>
+      <br />
+      <div class="switch-container">
+        Choose Theme:
+        <label class="radio-container"
+          >Light
+          <input type="radio" name="theme" value="light" checked="checked" />
+          <span class="checkmark"></span>
+        </label>
+        <label class="radio-container"
+          >Dark
+          <input type="radio" name="theme" value="dark" />
+          <span class="checkmark"></span>
+        </label>
+      </div>
+      <br />
     </div>
     <script src="options.js"></script>
   </body>