From 2aebed015f5a448e34e0625b4113321089cd6b77 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Sat, 11 Nov 2017 01:11:08 +0100 Subject: [PATCH] Feature: Add stretch mode for back and folder icon --- src/html/settings.html | 16 ++++++++++++++ src/js/background.js | 4 ++++ src/js/dial.js | 48 ++++++++++++++++++++++++------------------ src/js/settings.js | 4 ++++ 4 files changed, 51 insertions(+), 21 deletions(-) diff --git a/src/html/settings.html b/src/html/settings.html index 3ee25e4..18bc4cd 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -82,12 +82,28 @@
Back :
+
+ +
Folder :
+
+ +
diff --git a/src/js/background.js b/src/js/background.js index fedbdf7..29b5fce 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -113,7 +113,9 @@ app.Settings.init = function(callback){ // Load settings and nodes columns: 5, backNode: true, backIcon: 'url(/img/back.png)', + backIconMode: 3, folderIcon: 'url(/img/folder.png)', + folderIconMode: 2, loadingIcon: 'url(/img/throbber.gif)', cells: { margin: 4, @@ -180,6 +182,8 @@ app.Settings.init = function(callback){ // Load settings and nodes }); } if(!data.settings.backgroundMode) data.settings.backgroundMode = 0; + if(!data.settings.grid.backIconMode) data.settings.grid.backIconMode = 3; + if(!data.settings.grid.folderIconMode) data.settings.grid.folderIconMode = 2; if(!data.settings.grid.cells.opacity) data.settings.grid.cells.opacity = 1; if(!data.settings.grid.cells.opacityHover) data.settings.grid.cells.opacityHover = 1; if(!data.settings.grid.cells.borderSize) data.settings.grid.cells.borderSize = 1; diff --git a/src/js/dial.js b/src/js/dial.js index 068c34b..dda69d7 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -248,32 +248,36 @@ dial.initMenus = function(){ document.body.appendChild(dial.ItemMenu); } dial.initStyles = function(){ + function applyImageMode(imageMode, target){ + switch(imageMode){ + case 0: + target.backgroundRepeat = 'no-repeat'; + target.backgroundSize = '100% 100%'; + break; + case 1: + target.backgroundRepeat = 'no-repeat'; + target.backgroundSize = 'cover'; + target.backgroundPosition = 'center'; + break; + case 2: + target.backgroundRepeat = 'no-repeat'; + target.backgroundSize = 'contain'; + target.backgroundPosition = 'center'; + break; + case 3: + target.backgroundRepeat = 'no-repeat'; + target.backgroundPosition = 'center'; + break; + } + } + var oldStyle = dial.Style; dial.Style = document.createElement('style'), StyleSheet; document.head.appendChild(dial.Style); dial.styles = {}; dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style; dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; }')].style; - switch(app.settings.backgroundMode){ - case 0: - dial.styles.body.backgroundRepeat = 'no-repeat'; - dial.styles.body.backgroundSize = '100% 100%'; - break; - case 1: - dial.styles.body.backgroundRepeat = 'no-repeat'; - dial.styles.body.backgroundSize = 'cover'; - dial.styles.body.backgroundPosition = 'center'; - break; - case 2: - dial.styles.body.backgroundRepeat = 'no-repeat'; - dial.styles.body.backgroundSize = 'contain'; - dial.styles.body.backgroundPosition = 'center'; - break; - case 3: - dial.styles.body.backgroundRepeat = 'no-repeat'; - dial.styles.body.backgroundPosition = 'center'; - break; - } + applyImageMode(app.settings.backgroundMode, dial.styles.body); dial.styles.grid = {}; dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style; dial.styles.grid.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style; @@ -289,8 +293,10 @@ dial.initStyles = function(){ dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { font-size: ' + app.settings.grid.cells.titleFontSizeHover + 'pt; color: ' + app.settings.grid.cells.titleColorHover + '; border-top-width: ' + app.settings.grid.cells.titleBorderSizeHover + 'px; 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.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.backIcon + '; }')].style; + applyImageMode(app.settings.grid.backIconMode, dial.styles.grid.linkBack); 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; + applyImageMode(app.settings.grid.folderIconMode, dial.styles.grid.linkFolder); dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style; dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style; if(oldStyle) document.head.removeChild(oldStyle); diff --git a/src/js/settings.js b/src/js/settings.js index fbe1511..7c898d1 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -31,10 +31,12 @@ app.init = function(){ GridMargins.value = app.settings.grid.margin; GridColumns.value = app.settings.grid.columns; GridBackNode.checked = app.settings.grid.backNode; + GridBackMode.value = app.settings.grid.backIconMode; GridBackImage = app.settings.grid.backIcon; GridBackPreview.style.backgroundImage = app.settings.grid.backIcon; GridBackPreview.style.backgroundRepeat = 'no-repeat'; GridBackPreview.style.backgroundPosition = '50% 50%'; + GridFolderMode.value = app.settings.grid.folderIconMode; GridFolderImage = app.settings.grid.folderIcon; GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon; GridFolderPreview.style.backgroundRepeat = 'no-repeat'; @@ -81,7 +83,9 @@ app.init = function(){ app.settings.grid.margin = +(GridMargins.value); app.settings.grid.columns = +(GridColumns.value); app.settings.grid.backNode = GridBackNode.checked; + app.settings.grid.backIconMode = +(GridBackMode.value); app.settings.grid.backIcon = GridBackImage; + app.settings.grid.folderIconMode = +(GridFolderMode.value); app.settings.grid.folderIcon = GridFolderImage; app.settings.grid.cells.margin = +(GridCellsMargins.value); app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);