From 356bf74e8d75cd57e3b978ecf3ef45d72c84aaa3 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 10 Nov 2017 20:34:19 +0100 Subject: [PATCH] Feature: Add border size setting for tiles --- src/html/settings.html | 11 +++++++++++ src/js/background.js | 8 ++++++++ src/js/dial.js | 8 ++++---- src/js/settings.js | 6 ++++++ 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/html/settings.html b/src/html/settings.html index 5441286..b2bcf68 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -12,6 +12,7 @@ input[type=color] { width: 60px; } .hidden { display: none; } .Tab>table { width: 100%; border-collapse: collapse; } + .Tab>div { overflow: auto; } .Tab .TabSpace { width: 100%; border-bottom: solid 1px #505050; } .Tab .TabButton { border: solid 1px #505050; padding: 2px 6px 2px 6px; cursor: default; } .Tab .TabButtonActive { border: solid 1px #505050; border-bottom: none; padding: 2px 6px 2px 6px; cursor: default; } @@ -101,6 +102,11 @@ + + Border Size : + + + Border Radius : @@ -136,6 +142,11 @@ + + Title Border Size : + + + Title Text Color : diff --git a/src/js/background.js b/src/js/background.js index da61ffd..5f1738a 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -123,6 +123,8 @@ app.Settings.init = function(callback){ // Load settings and nodes borderColorHover: '#a9a9a9', borderRadius: 4, borderRadiusHover: 4, + borderSize: 1, + borderSizeHover: 1, title: true, titleHeight: 16, titleFontSize: 10, @@ -131,6 +133,8 @@ app.Settings.init = function(callback){ // Load settings and nodes titleColorHover: '#33ccff', titleBackgroundColor: null, titleBackgroundColorHover: null, + titleBorderSize: 1, + titleBorderSizeHover: 1, previewWidth: 1200, previewHeight: 710 }, @@ -169,6 +173,10 @@ app.Settings.init = function(callback){ // Load settings and nodes app.Settings.save(); }); } + if(!data.settings.grid.cells.borderSize) data.settings.grid.cells.borderSize = 1; + if(!data.settings.grid.cells.borderSizeHover) data.settings.grid.cells.borderSizeHover = 1; + if(!data.settings.grid.cells.titleBorderSize) data.settings.grid.cells.titleBorderSize = 1; + if(!data.settings.grid.cells.titleBorderSizeHover) data.settings.grid.cells.titleBorderSizeHover = 1; app.settings = data.settings; app.node = data.node; if(callback) callback(); diff --git a/src/js/dial.js b/src/js/dial.js index 067c468..1d3ae5b 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -257,14 +257,14 @@ dial.initStyles = function(){ 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; - dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; border: 1px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + 'px; }')].style; + dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; border: ' + app.settings.grid.cells.borderSize + 'px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + '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 + '; 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; + 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: ' + app.settings.grid.cells.titleBorderSize + 'px 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; @@ -364,8 +364,8 @@ dial.updateGridLayout = function(){ dial.styles.grid.cell.width = linkWidth.toString() + 'px'; dial.styles.grid.cell.height = linkHeight.toString() + 'px'; - linkWidth = linkWidth - 2 * (app.settings.grid.cells.margin + 1); - linkHeight = linkHeight - 2 * (app.settings.grid.cells.margin + 1); + linkWidth = linkWidth - 2 * (app.settings.grid.cells.margin + 1) - 2 * app.settings.grid.cells.borderSize; + linkHeight = linkHeight - 2 * (app.settings.grid.cells.margin + 1) - 2 * app.settings.grid.cells.borderSize - app.settings.grid.cells.titleBorderSize; dial.styles.grid.link.width = linkWidth.toString() + 'px'; dial.styles.grid.link.height = linkHeight.toString() + 'px'; diff --git a/src/js/settings.js b/src/js/settings.js index 6d46cb0..2859fe3 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -40,6 +40,8 @@ app.init = function(){ GridFolderPreview.style.backgroundSize = '100% 100%'; GridCellsMargins.value = app.settings.grid.cells.margin; GridCellsMarginsHover.value = app.settings.grid.cells.marginHover; + GridCellsBorderSize.value = app.settings.grid.cells.borderSize; + GridCellsBorderSizeHover.value = app.settings.grid.cells.borderSizeHover; GridCellsBackgroundTransparent.checked = (app.settings.grid.cells.backgroundColor == null); GridCellsBackgroundColor.value = app.settings.grid.cells.backgroundColor; GridCellsBackgroundTransparentHover.checked = (app.settings.grid.cells.backgroundColorHover == null); @@ -51,6 +53,7 @@ app.init = function(){ GridCellsTitle.checked = app.settings.grid.cells.title; GridCellsTitleHeight.value = app.settings.grid.cells.titleHeight; GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize; + GridCellsTitleBorderSize.value = app.settings.grid.cells.titleBorderSize; GridCellsTitleColor.value = app.settings.grid.cells.titleColor; GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover; GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null); @@ -75,6 +78,8 @@ app.init = function(){ app.settings.grid.cells.margin = +(GridCellsMargins.value); //app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value); app.settings.grid.cells.marginHover = +(GridCellsMargins.value); + app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value); + //app.settings.grid.cells.borderSizeHover = +(GridCellsBorderSizeHover.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; @@ -86,6 +91,7 @@ app.init = function(){ app.settings.grid.cells.title = GridCellsTitle.checked; app.settings.grid.cells.titleHeight = GridCellsTitleHeight.value; app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value; + app.settings.grid.cells.titleBorderSize = GridCellsTitleBorderSize.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;