From 5f69e9f7cb8679b70fd50e4820fb4b0921dc4e4a Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 20:15:58 +0200 Subject: [PATCH 1/9] Update TODO --- TODO | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/TODO b/TODO index 00adff5..bdff933 100644 --- a/TODO +++ b/TODO @@ -1,4 +1,7 @@ -Config Page +Add custom icon settings (back and folder) +Add custom image (thumbnails) +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 Improve screenshot result -Add favicon support -Need a solution to update folder and bookmark when it are updated from Firefox \ No newline at end of file +Add favicon support \ No newline at end of file From a079a43e69bd9e4c48e0d9de1fe4990375ef28dc Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 20:17:11 +0200 Subject: [PATCH 2/9] Update TODO --- TODO | 1 + 1 file changed, 1 insertion(+) diff --git a/TODO b/TODO index bdff933..256528e 100644 --- a/TODO +++ b/TODO @@ -1,5 +1,6 @@ Add custom icon settings (back and folder) 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 From 92b328cee0ba43c88c50a745e20e119f54f2ca31 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 21:07:49 +0200 Subject: [PATCH 3/9] Add folder and back icon settings --- TODO | 1 - src/html/settings.html | 16 +++++++++++++++ src/js/background.js | 11 +++++++--- src/js/dial.js | 4 ++-- src/js/settings.js | 46 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 72 insertions(+), 6 deletions(-) diff --git a/TODO b/TODO index 256528e..4aa31db 100644 --- a/TODO +++ b/TODO @@ -1,4 +1,3 @@ -Add custom icon settings (back and folder) Add custom image (thumbnails) Add custom background color settings (node) Create style for popup diff --git a/src/html/settings.html b/src/html/settings.html index 0055d8e..d325308 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -62,6 +62,22 @@ + + + + + +
+
Back :
+ + +
+ 		+
Folder :
+ + +
+
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(){ From 32f96816dd7da38408ced895a0148211d98c8400 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 22:32:13 +0200 Subject: [PATCH 6/9] Update TODO --- TODO | 1 + 1 file changed, 1 insertion(+) diff --git a/TODO b/TODO index 9ce38f4..01b92a0 100644 --- a/TODO +++ b/TODO @@ -1,3 +1,4 @@ +Add node settings popup Add custom image (thumbnails) Create style for popup Preserve ratio on capture in a new tab From 4348e38b3ac4c4e309b7dba614e739837e65a680 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 22:46:15 +0200 Subject: [PATCH 7/9] Add back node option --- src/html/settings.html | 4 ++++ src/js/background.js | 6 ++++-- src/js/dial.js | 6 +++--- src/js/settings.js | 2 ++ 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/html/settings.html b/src/html/settings.html index d883f7e..2ae5b62 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -61,6 +61,10 @@ Margins : + + Back Button : + + diff --git a/src/js/background.js b/src/js/background.js index ac7801e..01b8bb1 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -20,6 +20,7 @@ core.Settings.load = function(callback){ // Load settings margin: 10, rows: 4, columns: 5, + backNode: true, backIcon: 'url(/img/back.png)', folderIcon: 'url(/img/folder.png)', loadingIcon: 'url(/img/throbber.gif)', @@ -41,8 +42,7 @@ core.Settings.load = function(callback){ // Load settings titleColor: '#ffffff', titleColorHover: '#33ccff', titleBackgroundColor: null, - titleBackgroundColorHover: null, - backPanel: true + titleBackgroundColorHover: null }, root: 'Quick Dial', node: {} @@ -50,6 +50,7 @@ core.Settings.load = function(callback){ // Load settings }).then(function(obj){ if(!obj.version){ // Upgrade Data Version obj.version = 2; + obj.grid.backNode = true; obj.grid.backIcon = 'url(/img/back.png)'; obj.grid.folderIcon = 'url(/img/folder.png)'; obj.grid.loadingIcon = 'url(/img/throbber.gif)'; @@ -60,6 +61,7 @@ core.Settings.load = function(callback){ // Load settings delete obj.grid.cells.backIcon; delete obj.grid.cells.folderIcon; delete obj.grid.cells.loadingIcon; + delete obj.grid.cells.backPanel; } app.settings = obj; if(callback) callback(); diff --git a/src/js/dial.js b/src/js/dial.js index 94b3671..c8f939f 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -202,7 +202,7 @@ dial.initGrid = function(name, settings, container){ function dragstart_handler(ev) { var index = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.getAttribute('gridindex')); - if(settings.cells.backPanel && dial.path) index -= dial.page; + if(settings.backNode && dial.path) index -= dial.page; console.log(index); ev.dataTransfer.setData("text/plain", index); } @@ -220,7 +220,7 @@ dial.initGrid = function(name, settings, container){ } else{ EndIndex =(dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.getAttribute('gridindex')); } - if(settings.cells.backPanel && dial.path) EndIndex -= dial.page; + if(settings.backNode && dial.path) EndIndex -= dial.page; app.setNodeIndex(dial.Node, StartIndex, EndIndex); } link.draggable = true; @@ -307,7 +307,7 @@ dial.populateGrid = function(grid, settings, node){ var linkItem = 0; var allCells = settings.rows * settings.columns; var maxCells = allCells; - if(settings.cells.backPanel && dial.path){ + if(settings.backNode && dial.path){ populateBack(grid.getLink(linkItem)); linkItem++; maxCells -= 1; diff --git a/src/js/settings.js b/src/js/settings.js index 8ddfaa4..f39ed89 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -14,6 +14,7 @@ window.onload = function(){ GridRows.value = app.settings.grid.rows; GridMargins.value = app.settings.grid.margin; GridColumns.value = app.settings.grid.columns; + GridBackNode.checked = app.settings.grid.backNode; GridBackImage = app.settings.grid.backIcon; GridBackPreview.style.backgroundImage = app.settings.grid.backIcon; GridBackPreview.style.backgroundRepeat = 'no-repeat'; @@ -53,6 +54,7 @@ window.onload = function(){ app.settings.grid.rows = +(GridRows.value); app.settings.grid.margin = +(GridMargins.value); app.settings.grid.columns = +(GridColumns.value); + app.settings.grid.backNode = GridBackNode.checked; app.settings.grid.backIcon = GridBackImage; app.settings.grid.folderIcon = GridFolderImage; app.settings.grid.cells.margin = +(GridCellsMargins.value); From 38aafe2bf56a9fa3a8cbd35dbb711f731d07ff12 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 23:05:06 +0200 Subject: [PATCH 8/9] Data version --- src/js/background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/background.js b/src/js/background.js index 01b8bb1..5093113 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -48,7 +48,7 @@ core.Settings.load = function(callback){ // Load settings node: {} } }).then(function(obj){ - if(!obj.version){ // Upgrade Data Version + if(obj.grid.cells.backIcon){ // Upgrade Data Version obj.version = 2; obj.grid.backNode = true; obj.grid.backIcon = 'url(/img/back.png)'; From 6450b5ad864868678b704df9ab3c90c22e8b1e30 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 6 Oct 2017 23:31:50 +0200 Subject: [PATCH 9/9] Version 0.0.3 --- src/manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/manifest.json b/src/manifest.json index 2cc89c6..15c809a 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Quick Dial", - "version": "0.0.2", + "version": "0.0.3", "author": "MatMoul", "homepage_url": "https://github.com/MatMoul/quickdial-webext", "developer": {