From 6c3fd782500e0c5562d8866ea27742e2242e2e9c Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 22:17:01 +0200 Subject: [PATCH] Add custom background color settings (node) --- TODO | 1 - src/html/settings.html | 26 +++++++++++++++++++++++--- src/js/background.js | 12 +++++++++++- src/js/dial.js | 5 +++++ src/js/settings.js | 20 ++++++++++++++++++-- 5 files changed, 57 insertions(+), 7 deletions(-) diff --git a/TODO b/TODO index 4aa31db..9ce38f4 100644 --- a/TODO +++ b/TODO @@ -1,5 +1,4 @@ Add custom image (thumbnails) -Add custom background color settings (node) Create style for popup Preserve ratio on capture in a new tab Need a best solution to update folder and bookmark when it are updated from Firefox diff --git a/src/html/settings.html b/src/html/settings.html index d325308..d883f7e 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -92,12 +92,22 @@ - Border Radius: + Border Radius : - Border Color: + Background Transparent : + + + + + Background Color : + + + + + Border Color : @@ -117,10 +127,20 @@ - Title Color: + Title Text Color : + + Title Background Transparent : + + + + + Title Background Color : + + + diff --git a/src/js/background.js b/src/js/background.js index d09e106..ac7801e 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -13,6 +13,7 @@ core.init = function(){ // Init module core.Settings = {}; // Settings helper object core.Settings.load = function(callback){ // Load settings browser.storage.local.get({ + version: 2, backgroundColor: '#3c4048', backgroundImage: null, grid: { @@ -27,6 +28,8 @@ core.Settings.load = function(callback){ // Load settings marginHover: 4, ratioX: 4, ratioY: 3, + backgroundColor: null, + backgroundColorHover: null, borderColor: '#333333', borderColorHover: '#a9a9a9', borderRadius: 4, @@ -37,16 +40,23 @@ core.Settings.load = function(callback){ // Load settings titleFont: 'Arial, Verdana, Sans-serif', titleColor: '#ffffff', titleColorHover: '#33ccff', + titleBackgroundColor: null, + titleBackgroundColorHover: null, backPanel: true }, root: 'Quick Dial', node: {} } }).then(function(obj){ - if(!obj.grid.backIcon){ // Upgrade Data Version + if(!obj.version){ // Upgrade Data Version + obj.version = 2; obj.grid.backIcon = 'url(/img/back.png)'; obj.grid.folderIcon = 'url(/img/folder.png)'; obj.grid.loadingIcon = 'url(/img/throbber.gif)'; + obj.grid.cells.backgroundColor = null; + obj.grid.cells.backgroundColorHover = null; + obj.grid.cells.titleBackgroundColor = null; + obj.grid.cells.titleBackgroundColorHover = null; delete obj.grid.cells.backIcon; delete obj.grid.cells.folderIcon; delete obj.grid.cells.loadingIcon; diff --git a/src/js/dial.js b/src/js/dial.js index 56d4494..94b3671 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -98,8 +98,13 @@ dial.initStyles = function(){ //dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style; dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; margin: ' + app.settings.grid.cells.marginHover + 'px; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style; dial.styles.grid.linkPanel = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:first-child { background-repeat: no-repeat; }')].style; + if(app.settings.grid.cells.backgroundColor) dial.styles.grid.linkPanel.backgroundColor = app.settings.grid.cells.backgroundColor; + dial.styles.grid.linkPanelHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:first-child { }')].style; + if(app.settings.grid.cells.backgroundColorHover) dial.styles.grid.linkPanelHover.backgroundColor = app.settings.grid.cells.backgroundColorHover; dial.styles.grid.linkTitle = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:last-child { height: ' + app.settings.grid.cells.titleHeight + 'px; font-size: ' + app.settings.grid.cells.titleFontSize + 'pt; font-family: ' + app.settings.grid.cells.titleFont + 'pt; text-align: center; overflow: hidden; color: ' + app.settings.grid.cells.titleColor + '; border-top: 1px solid ' + app.settings.grid.cells.borderColor + '; }')].style; + if(app.settings.grid.cells.titleBackgroundColor) dial.styles.grid.linkTitle.backgroundColor = app.settings.grid.cells.titleBackgroundColor; dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { color: ' + app.settings.grid.cells.titleColorHover + '; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style; + if(app.settings.grid.cells.titleBackgroundColorHover) dial.styles.grid.linkTitleHover.backgroundColor = app.settings.grid.cells.titleBackgroundColorHover; dial.styles.grid.linkEmpty = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Empty { display: none; }')].style; dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.backIcon + '; background-repeat: no-repeat; background-position: center center; }')].style; dial.styles.grid.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: ' + app.settings.grid.folderIcon + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style; diff --git a/src/js/settings.js b/src/js/settings.js index ba02adb..8ddfaa4 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -14,16 +14,20 @@ window.onload = function(){ GridRows.value = app.settings.grid.rows; GridMargins.value = app.settings.grid.margin; GridColumns.value = app.settings.grid.columns; - GridBackImage = app.settings.grid.cells.backIcon; + GridBackImage = app.settings.grid.backIcon; GridBackPreview.style.backgroundImage = app.settings.grid.backIcon; GridBackPreview.style.backgroundRepeat = 'no-repeat'; GridBackPreview.style.backgroundPosition = '50% 50%'; - GridFolderImage = app.settings.grid.cells.folderIcon; + GridFolderImage = app.settings.grid.folderIcon; GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon; GridFolderPreview.style.backgroundRepeat = 'no-repeat'; GridFolderPreview.style.backgroundSize = '100% 100%'; GridCellsMargins.value = app.settings.grid.cells.margin; GridCellsMarginsHover.value = app.settings.grid.cells.marginHover; + GridCellsBackgroundTransparent.checked = (app.settings.grid.cells.backgroundColor == null); + GridCellsBackgroundColor.value = app.settings.grid.cells.backgroundColor; + GridCellsBackgroundTransparentHover.checked = (app.settings.grid.cells.backgroundColorHover == null); + GridCellsBackgroundColorHover.value = app.settings.grid.cells.backgroundColorHover; GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius; GridCellsBorderRadiusHover.value = app.settings.grid.cells.borderRadiusHover; GridCellsBorderColor.value = app.settings.grid.cells.borderColor; @@ -33,6 +37,10 @@ window.onload = function(){ GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize; GridCellsTitleColor.value = app.settings.grid.cells.titleColor; GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover; + GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null); + GridCellsTitleBackgroundColor.value = app.settings.grid.cells.titleBackgroundColor; + GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover; + GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null); }); BtnOk.onclick = function(){ @@ -50,6 +58,10 @@ window.onload = function(){ app.settings.grid.cells.margin = +(GridCellsMargins.value); //app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value); app.settings.grid.cells.marginHover = +(GridCellsMargins.value); + if(GridCellsBackgroundTransparent.checked == true) app.settings.grid.cells.backgroundColor = null; + else app.settings.grid.cells.backgroundColor = GridCellsBackgroundColor.value; + if(GridCellsBackgroundTransparentHover.checked == true) app.settings.grid.cells.backgroundColorHover = null; + else app.settings.grid.cells.backgroundColorHover = GridCellsBackgroundColorHover.value; app.settings.grid.cells.borderRadius = +(GridCellsBorderRadius.value); app.settings.grid.cells.borderRadiusHover = +(GridCellsBorderRadiusHover.value); app.settings.grid.cells.borderColor = GridCellsBorderColor.value; @@ -59,6 +71,10 @@ window.onload = function(){ app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value; app.settings.grid.cells.titleColor = GridCellsTitleColor.value; app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value; + if(GridCellsTitleBackgroundTransparent.checked == true) app.settings.grid.cells.titleBackgroundColor = null; + else app.settings.grid.cells.titleBackgroundColor = GridCellsTitleBackgroundColor.value; + if(GridCellsTitleBackgroundTransparentHover.checked == true) app.settings.grid.cells.titleBackgroundColorHover = null; + else app.settings.grid.cells.titleBackgroundColorHover = GridCellsTitleBackgroundColorHover.value; app.saveSettings(); } BtnCancel.onclick = function(){