From 1592569adae422fb86fe6e699e8046029bf84e4f Mon Sep 17 00:00:00 2001 From: MatMoul Date: Fri, 10 Nov 2017 21:56:36 +0100 Subject: [PATCH] Feature: Add support of default and hover state of all properties --- src/html/settings.html | 12 ++++----- src/js/background.js | 15 +++++++++--- src/js/dial.js | 55 +++++++++++++++++++++++++++--------------- src/js/settings.js | 14 ++++++++--- 4 files changed, 65 insertions(+), 31 deletions(-) diff --git a/src/html/settings.html b/src/html/settings.html index 7ec0ebf..ad9b2a2 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -100,7 +100,7 @@ Margins : - + Opacity : @@ -110,7 +110,7 @@ Border Size : - + Border Radius : @@ -135,22 +135,22 @@ Title : - + Title Height : - + Title Font Size : - + Title Border Size : - + Title Text Color : diff --git a/src/js/background.js b/src/js/background.js index 4e44552..ce0ff51 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -128,8 +128,11 @@ app.Settings.init = function(callback){ // Load settings and nodes borderSize: 1, borderSizeHover: 1, title: true, - titleHeight: 16, + titleHover: true, + titleHeight: 15, + titleHeightHover: 15, titleFontSize: 10, + titleFontSizeHover: 10, titleFont: 'Arial, Verdana, Sans-serif', titleColor: '#ffffff', titleColorHover: '#33ccff', @@ -178,9 +181,15 @@ app.Settings.init = function(callback){ // Load settings and nodes 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; - if(!data.settings.grid.cells.borderSizeHover) data.settings.grid.cells.borderSizeHover = 1; + if(!data.settings.grid.cells.borderSizeHover) data.settings.grid.cells.borderSizeHover = data.settings.grid.cells.borderSize; + if(!data.settings.grid.cells.titleHover) data.settings.grid.cells.titleHover = data.settings.grid.cells.title; + if(!data.settings.grid.cells.titleHeightHover){ + data.settings.grid.cells.titleHeight -= 1; + data.settings.grid.cells.titleHeightHover = data.settings.grid.cells.titleHeight; + } + if(!data.settings.grid.cells.titleFontSizeHover) data.settings.grid.cells.titleFontSizeHover = data.settings.grid.cells.titleFontSize; if(!data.settings.grid.cells.titleBorderSize) data.settings.grid.cells.titleBorderSize = 1; - if(!data.settings.grid.cells.titleBorderSizeHover) data.settings.grid.cells.titleBorderSizeHover = 1; + if(!data.settings.grid.cells.titleBorderSizeHover) data.settings.grid.cells.titleBorderSizeHover = data.settings.grid.cells.titleBorderSize; app.settings = data.settings; app.node = data.node; if(callback) callback(); diff --git a/src/js/dial.js b/src/js/dial.js index b03189f..2d5c09b 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -257,16 +257,16 @@ 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.cellHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td:hover {}')].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; opacity: ' + app.settings.grid.cells.opacity + '; 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; opacity: ' + app.settings.grid.cells.opacityHover + '; 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 + '; border-width: ' + app.settings.grid.cells.borderSizeHover + 'px; margin: ' + app.settings.grid.cells.marginHover + 'px; opacity: ' + app.settings.grid.cells.opacityHover + '; 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: ' + 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; + 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; @@ -354,23 +354,40 @@ dial.initGrid = function(){ return dial.Grid; }; dial.updateGridLayout = function(){ - var fullWidth = dial.Grid.parentElement.offsetWidth - 2 * app.settings.grid.margin; - var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * app.settings.grid.margin; - var linkWidth = fullWidth / app.settings.grid.columns; - var linkHeight = fullHeight / app.settings.grid.rows; - if(linkWidth <= linkHeight * 4 / 3) linkHeight = linkWidth / 4 * 3; - else linkWidth = linkHeight / 3 * 4; - - dial.styles.grid.cell.width = linkWidth.toString() + 'px'; - dial.styles.grid.cell.height = linkHeight.toString() + 'px'; + function calc(gridMargin, cellsMargin, borderSize, titleBorderSize){ + var fullWidth = dial.Grid.parentElement.offsetWidth - 2 * gridMargin; + var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * gridMargin; + var cellWidth = fullWidth / app.settings.grid.columns; + var cellHeight = fullHeight / app.settings.grid.rows; + var linkWidth = 0; + var linkHeight = 0; + if(cellWidth <= cellHeight * 4 / 3) cellHeight = cellWidth / 4 * 3; + else cellWidth = cellHeight / 3 * 4; + linkWidth = cellWidth - 2 * (cellsMargin + 1) - 2 * borderSize; + linkHeight = cellHeight - 2 * (cellsMargin + 1) - 2 * borderSize - titleBorderSize; + return { + cellWidth: cellWidth, + cellHeight: cellHeight, + linkWidth: linkWidth, + linkHeight: linkHeight + }; + } - 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'; - if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (linkHeight - app.settings.grid.cells.titleHeight - 1).toString() + 'px'; - else dial.styles.grid.linkPanel.height = linkHeight.toString() + 'px'; + var values = calc(app.settings.grid.margin, app.settings.grid.cells.margin, app.settings.grid.cells.borderSize, app.settings.grid.cells.titleBorderSize); + dial.styles.grid.cell.width = values.cellWidth.toString() + 'px'; + dial.styles.grid.cell.height = values.cellHeight.toString() + 'px'; + dial.styles.grid.link.width = values.linkWidth.toString() + 'px'; + dial.styles.grid.link.height = values.linkHeight.toString() + 'px'; + if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (values.linkHeight - app.settings.grid.cells.titleHeight - 1 - app.settings.grid.cells.titleBorderSize).toString() + 'px'; + else dial.styles.grid.linkPanel.height = values.linkHeight.toString() + 'px'; + + values = calc(app.settings.grid.margin, app.settings.grid.cells.marginHover, app.settings.grid.cells.borderSizeHover, app.settings.grid.cells.titleBorderSizeHover); + dial.styles.grid.cellHover.width = values.cellWidth.toString() + 'px'; + dial.styles.grid.cellHover.height = values.cellHeight.toString() + 'px'; + dial.styles.grid.linkHover.width = values.linkWidth.toString() + 'px'; + dial.styles.grid.linkHover.height = values.linkHeight.toString() + 'px'; + if(app.settings.grid.cells.titleHover) dial.styles.grid.linkPanelHover.height = (values.linkHeight - app.settings.grid.cells.titleHeightHover - 1 - app.settings.grid.cells.titleBorderSizeHover).toString() + 'px'; + else dial.styles.grid.linkPanelHover.height = values.linkHeight.toString() + 'px'; }; dial.populateGrid = function(){ populateEmpty = function(link){ diff --git a/src/js/settings.js b/src/js/settings.js index 0e50091..d347e89 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -53,9 +53,13 @@ app.init = function(){ GridCellsBorderColor.value = app.settings.grid.cells.borderColor; GridCellsBorderColorHover.value = app.settings.grid.cells.borderColorHover; GridCellsTitle.checked = app.settings.grid.cells.title; + GridCellsTitleHover.checked = app.settings.grid.cells.titleHover; GridCellsTitleHeight.value = app.settings.grid.cells.titleHeight; + GridCellsTitleHeightHover.value = app.settings.grid.cells.titleHeightHover; GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize; + GridCellsTitleFontSizeHover.value = app.settings.grid.cells.titleFontSizeHover; GridCellsTitleBorderSize.value = app.settings.grid.cells.titleBorderSize; + GridCellsTitleBorderSizeHover.value = app.settings.grid.cells.titleBorderSizeHover; GridCellsTitleColor.value = app.settings.grid.cells.titleColor; GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover; GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null); @@ -78,12 +82,12 @@ app.init = function(){ app.settings.grid.backIcon = GridBackImage; app.settings.grid.folderIcon = GridFolderImage; 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.marginHover = +(GridCellsMarginsHover.value); + //app.settings.grid.cells.marginHover = +(GridCellsMargins.value); app.settings.grid.cells.opacity = +(GridCellsOpacity.value) / 100; app.settings.grid.cells.opacityHover = +(GridCellsOpacityHover.value) / 100; app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value); - //app.settings.grid.cells.borderSizeHover = +(GridCellsBorderSizeHover.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; @@ -93,9 +97,13 @@ app.init = function(){ app.settings.grid.cells.borderColor = GridCellsBorderColor.value; app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value; app.settings.grid.cells.title = GridCellsTitle.checked; + app.settings.grid.cells.titleHover = GridCellsTitleHover.checked; app.settings.grid.cells.titleHeight = GridCellsTitleHeight.value; + app.settings.grid.cells.titleHeightHover = GridCellsTitleHeightHover.value; app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value; + app.settings.grid.cells.titleFontSizeHover = GridCellsTitleFontSizeHover.value; app.settings.grid.cells.titleBorderSize = GridCellsTitleBorderSize.value; + app.settings.grid.cells.titleBorderSizeHover = GridCellsTitleBorderSizeHover.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;