Feature: Add border size setting for tiles

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 @@
 							<td><input id="GridCellsMargins" type="number"></td>
 							<td><input id="GridCellsMarginsHover" type="number" style="display: none;"></td>
 						</tr>
+						<tr>
+							<td><span>Border Size :</span></td>
+							<td><input id="GridCellsBorderSize" type="number"></td>
+							<td><input id="GridCellsBorderSizeHover" type="number" style="display: none;"></td>
+						</tr>
 						<tr>
 							<td><span>Border Radius :</span></td>
 							<td><input id="GridCellsBorderRadius" type="number"></td>
@@ -136,6 +142,11 @@
 							<td><input id="GridCellsTitleFontSize" type="number"></td>
 							<td></td>
 						</tr>
+						<tr>
+							<td><span>Title Border Size :</span></td>
+							<td><input id="GridCellsTitleBorderSize" type="number"></td>
+							<td></td>
+						</tr>
 						<tr>
 							<td><span>Title Text Color :</span></td>
 							<td><input id="GridCellsTitleColor" type="color"></td>

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

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);
+	linkWidth = linkWidth - 2 * (app.settings.grid.cells.margin + 1) - 2 * app.settings.grid.cells.borderSize;
-	linkHeight = linkHeight - 2 * (app.settings.grid.cells.margin + 1);
+	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';

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;