Add settings for header, version up

annndruha · Mar 9, 2022 · bf2b52d · bf2b52d
1 parent 1702a14
commit bf2b52d
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 15 deletions.
diff --git a/css/header.css b/css/header.css
@@ -38,11 +38,11 @@
 #root_popup {
     top: 40px;
     max-height: 600px;
-    max-width: 1000px;
+    max-width: 700px;
     position:fixed;
     overflow-y:auto;
     background-color: white;
-    border-radius: 10px;
+    border-radius:  1em;
     box-shadow: 0 0 3px black;
 }
 

diff --git a/css/settings.css b/css/settings.css
@@ -106,12 +106,12 @@
     height: 24px;
 }
 
-#save-to-file, #load-from-file, #save-to-cloud, #load-from-cloud, #show-quick, #new-tab, #range-rows, #range-cols {
+.rowhover {
     cursor: pointer;
     border-radius: 1em;
 }
 
-#save-to-file:hover, #load-from-file:hover, #save-to-cloud:hover, #load-from-cloud:hover, #show-quick:hover, #new-tab:hover {
+.rowhover:hover {
     background-color: #eee;
 }
 

diff --git a/js/app.js b/js/app.js
@@ -6,7 +6,7 @@ function initSettingsValues(fromfile = false) {
             chrome.storage.local.set({'version': json['version']}, () => {})
         })
     }
-    chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick'], function (res) {
+    chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick', 'show-header'], function (res) {
         document.getElementById('cols').innerText = res['cols']
         document.getElementById('range-cols').setAttribute('value', res['cols'])
         document.getElementById('rows').innerText = res['rows']
@@ -21,14 +21,18 @@ function initSettingsValues(fromfile = false) {
         } else {
             document.getElementById('checkbox-show-quick').removeAttribute('checked')
         }
+        if (res['show-header']) {
+            document.getElementById('checkbox-show-header').setAttribute('checked', '')
+        } else {
+            document.getElementById('checkbox-show-header').removeAttribute('checked')
+        }
         makeGrid(parseInt(res['cols']), parseInt(res['rows']), fromfile)
     })
 }
 
 $(window).on('ready', () => { // load change
     initSettingsValues()
     beautyfyView()
-    createBookmarks()
 })
 
 $(window).on('resize', () => {

diff --git a/js/background.js b/js/background.js
@@ -15,7 +15,7 @@ chrome.runtime.onInstalled.addListener(() => {
             initSettingsValues(true)
         }
         else {
-            const json = JSON.parse("{\"10\":{\"0\":{\"link\":\"https://drive.google.com/drive/u/0/my-drive\"}},\"11\":{\"0\":{\"link\":\"https://twitter.com/\"}},\"12\":{\"0\":{\"link\":\"https://youtube.com/\"}},\"13\":{\"0\":{\"link\":\"https://www.instagram.com/\"}},\"14\":{\"0\":{\"link\":\"https://www.spotify.com/\"}},\"15\":{\"0\":{\"link\":\"https://mail.yandex.ru/touch\"}},\"20\":{\"0\":{\"link\":\"https://www.facebook.com/\"}},\"21\":{\"0\":{\"link\":\"https://www.amazon.com/\"}},\"22\":{\"0\":{\"link\":\"https://www.pinterest.com/\"}},\"23\":{\"0\":{\"link\":\"https://www.imdb.com/\"}},\"24\":{\"0\":{\"link\":\"https://github.com/Annndruha/pulchra-bookmarks\"}},\"25\":{\"0\":{\"link\":\"mail.ximc.ru\"}},\"00\":{\"0\":{\"link\":\"http://www.google.com/\"}},\"01\":{\"0\":{\"link\":\"https://wikipedia.org/\"}},\"02\":{\"0\":{\"link\":\"https://translate.google.com/\"}},\"03\":{\"0\":{\"link\":\"https://netflix.com\"}},\"04\":{\"0\":{\"link\":\"https://www.reddit.com/\"}},\"05\":{\"0\":{\"link\":\"https://mail.google.com/mail\"}},\"cols\":5,\"new-tab\":false,\"rows\":3,\"show-quick\":true,\"version\":\"0.4.0\"}")
+            const json = JSON.parse("{\"10\":{\"0\":{\"link\":\"https://drive.google.com/drive/u/0/my-drive\"}},\"11\":{\"0\":{\"link\":\"https://twitter.com/\"}},\"12\":{\"0\":{\"link\":\"https://youtube.com/\"}},\"13\":{\"0\":{\"link\":\"https://www.instagram.com/\"}},\"14\":{\"0\":{\"link\":\"https://www.spotify.com/\"}},\"15\":{\"0\":{\"link\":\"https://mail.yandex.ru/touch\"}},\"20\":{\"0\":{\"link\":\"https://www.facebook.com/\"}},\"21\":{\"0\":{\"link\":\"https://www.amazon.com/\"}},\"22\":{\"0\":{\"link\":\"https://www.pinterest.com/\"}},\"23\":{\"0\":{\"link\":\"https://www.imdb.com/\"}},\"24\":{\"0\":{\"link\":\"https://github.com/Annndruha/pulchra-bookmarks\"}},\"25\":{\"0\":{\"link\":\"mail.ximc.ru\"}},\"00\":{\"0\":{\"link\":\"http://www.google.com/\"}},\"01\":{\"0\":{\"link\":\"https://wikipedia.org/\"}},\"02\":{\"0\":{\"link\":\"https://translate.google.com/\"}},\"03\":{\"0\":{\"link\":\"https://netflix.com\"}},\"04\":{\"0\":{\"link\":\"https://www.reddit.com/\"}},\"05\":{\"0\":{\"link\":\"https://mail.google.com/mail\"}},\"cols\":5,\"new-tab\":false,\"rows\":3,\"show-header\":true,\"show-quick\":true,\"version\":\"0.6.0\"}")
             chrome.storage.local.clear()
             chrome.storage.local.set(json, () => {})
         }

diff --git a/js/bookmarks.js b/js/bookmarks.js
@@ -191,6 +191,7 @@ function makeGrid(cols, rows, fromfile=false) {
 
         beautyfyView()
         updateBottomMenu(cols)
+        updateHeaderMenu()
         loadAllIcons()
 }
 

diff --git a/js/header.js b/js/header.js
@@ -1,3 +1,16 @@
+function updateHeaderMenu() {
+    deleteHeaderMenu()
+    chrome.storage.local.get(['show-header'], function (res) {
+        if (res['show-header']) {
+            createBookmarks()
+        }
+    })
+}
+
+function deleteHeaderMenu() {
+    $('#bookmarks').empty()
+}
+
 function createBookmarks() {
     chrome.bookmarks.getTree((bookmarkTreeNodes) => {
         let root = bookmarkTreeNodes[0]["children"][0]["children"]

diff --git a/js/settings.js b/js/settings.js
@@ -33,7 +33,7 @@ $('#close-settings-button, .cancel-overlay').on('click', function (e) {
     closeSettings()
 })
 
-$('#checkbox-new-tab, #checkbox-show-quick').on('click', () => {}, true) // Super important string with true
+$('#checkbox-new-tab, #checkbox-show-quick, #checkbox-show-header').on('click', () => {}, true) // Super important string with true
 
 $('#new-tab').on('click', (e) => {
     e.stopPropagation()
@@ -62,4 +62,19 @@ $('#show-quick').on('click', (e) => {
         }
         updateBottomMenu(res['cols'])
     })
+})
+
+$('#show-header').on('click', (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    chrome.storage.local.get(['show-header'], function (res) {
+        if (res['show-header']) {
+            chrome.storage.local.set({['show-header']: false}, () => {})
+            document.getElementById('checkbox-show-header').removeAttribute('checked')
+        } else {
+            chrome.storage.local.set({['show-header']: true}, () => {})
+            document.getElementById('checkbox-show-header').setAttribute('checked', '')
+        }
+        updateHeaderMenu()
+    })
 })
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Pulchra bookmarks",
   "description": "Pulchra bookmarks extension",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "manifest_version": 3,
   "minimum_chrome_version": "96",
   "chrome_url_overrides": {

diff --git a/newtab.html b/newtab.html
@@ -72,7 +72,7 @@
                 <label id="cols" for="range-cols">N</label>
             </div>
         </div>
-        <div class="row" id="new-tab">
+        <div class="row rowhover" id="new-tab">
             <div class="item-left">
                 <span>Open in new tab</span>
             </div>
@@ -83,7 +83,7 @@
                 </label>
             </div>
         </div>
-        <div class="row" id="show-quick">
+        <div class="row rowhover" id="show-quick">
             <div class="item-left">
                 <span>Show quick access</span>
             </div>
@@ -94,15 +94,15 @@
                 </label>
             </div>
         </div>
-        <div class="row" id="save-to-file">
+        <div class="row rowhover" id="save-to-file">
             <div class="item-left">
                 <span>Save to file</span>
             </div>
             <div class="item-right">
                 <img class="settings-icon" src="images/icons/file_download.svg" alt="">
             </div>
         </div>
-        <div class="row" id="load-from-file">
+        <div class="row rowhover" id="load-from-file">
             <div class="item-left" id="load-text">
                 <span>Load from file</span>
             </div>
@@ -115,15 +115,26 @@
                 </div>
             </div>
         </div>
-        <div class="row" id="save-to-cloud">
+        <div class="row rowhover" id="show-header">
+            <div class="item-left">
+                <span>Show bookmarks bar</span>
+            </div>
+            <div class="item-right">
+                <label class="switch">
+                    <input type="checkbox" id="checkbox-show-header">
+                    <span class="slider round"></span>
+                </label>
+            </div>
+        </div>
+        <div class="row rowhover" id="save-to-cloud">
             <div class="item-left">
                 <span>Save to cloud</span>
             </div>
             <div class="item-right">
                 <img id="icon-cloud-save" class="settings-icon" src="images/icons/cloud_download.svg" alt="">
             </div>
         </div>
-        <div class="row" id="load-from-cloud">
+        <div class="row rowhover" id="load-from-cloud">
             <div class="item-left" id="load-text-cloud">
                 <span>Load from cloud</span>
             </div>