Feature: Add support of default and hover state of all properties

src/html/settings.html

@@ -100,7 +100,7 @@
 						<tr>
 							<td><span>Margins :</span></td>
 							<td><input id="GridCellsMargins" type="number" min="0"></td>
-							<td><input id="GridCellsMarginsHover" type="number" min="0" style="display: none;"></td>
+							<td><input id="GridCellsMarginsHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Opacity :</span></td>
@@ -110,7 +110,7 @@
 						<tr>
 							<td><span>Border Size :</span></td>
 							<td><input id="GridCellsBorderSize" type="number" min="0"></td>
-							<td><input id="GridCellsBorderSizeHover" type="number" min="0" style="display: none;"></td>
+							<td><input id="GridCellsBorderSizeHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Border Radius :</span></td>
@@ -135,22 +135,22 @@
 						<tr>
 							<td><span>Title :</span></td>
 							<td><input id="GridCellsTitle" type="checkbox"></td>
-							<td></td>
+							<td><input id="GridCellsTitleHover" type="checkbox"></td>
 						</tr>
 						<tr>
 							<td><span>Title Height :</span></td>
 							<td><input id="GridCellsTitleHeight" type="number" min="0"></td>
-							<td></td>
+							<td><input id="GridCellsTitleHeightHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Title Font Size :</span></td>
 							<td><input id="GridCellsTitleFontSize" type="number" min="0"></td>
-							<td></td>
+							<td><input id="GridCellsTitleFontSizeHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Title Border Size :</span></td>
 							<td><input id="GridCellsTitleBorderSize" type="number" min="0"></td>
-							<td></td>
+							<td><input id="GridCellsTitleBorderSizeHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Title Text Color :</span></td>

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();

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 + '; 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.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.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;
+	function calc(gridMargin, cellsMargin, borderSize, titleBorderSize){
-	var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * app.settings.grid.margin;
+		var fullWidth = dial.Grid.parentElement.offsetWidth - 2 * gridMargin;
-	var linkWidth = fullWidth / app.settings.grid.columns;
+		var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * gridMargin;
-	var linkHeight = fullHeight / app.settings.grid.rows;
+		var cellWidth = fullWidth / app.settings.grid.columns;
-	if(linkWidth <= linkHeight * 4 / 3) linkHeight = linkWidth / 4 * 3;
+		var cellHeight = fullHeight / app.settings.grid.rows;
-	else linkWidth = linkHeight / 3 * 4;
+		var linkWidth = 0;
-	
+		var linkHeight = 0;
-	dial.styles.grid.cell.width = linkWidth.toString() + 'px';
+		if(cellWidth <= cellHeight * 4 / 3) cellHeight = cellWidth / 4 * 3;
-	dial.styles.grid.cell.height = linkHeight.toString() + 'px';
+		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;
+	var values = calc(app.settings.grid.margin, app.settings.grid.cells.margin, app.settings.grid.cells.borderSize, app.settings.grid.cells.titleBorderSize);
-	linkHeight = linkHeight - 2 * (app.settings.grid.cells.margin + 1) - 2 * 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 = linkWidth.toString() + 'px';
+	dial.styles.grid.link.width = values.linkWidth.toString() + 'px';
-	dial.styles.grid.link.height = linkHeight.toString() + 'px';
+	dial.styles.grid.link.height = values.linkHeight.toString() + 'px';
-	if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (linkHeight - app.settings.grid.cells.titleHeight - 1).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 = linkHeight.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){

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 = +(GridCellsMarginsHover.value);
-		app.settings.grid.cells.marginHover = +(GridCellsMargins.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;