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;