From 1a608b634f01284f9454bca29bfaea094b572f4f Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Fri, 10 Nov 2017 20:45:52 +0100
Subject: [PATCH] Feature: Add opacity setting for tiles

---
 src/html/settings.html | 5 +++++
 src/js/background.js   | 4 ++++
 src/js/dial.js         | 4 ++--
 src/js/settings.js     | 4 ++++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/html/settings.html b/src/html/settings.html
index b2bcf68..8624f0a 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -102,6 +102,11 @@
 							<td><input id="GridCellsMargins" type="number"></td>
 							<td><input id="GridCellsMarginsHover" type="number" style="display: none;"></td>
 						</tr>
+						<tr>
+							<td><span>Opacity :</span></td>
+							<td><input id="GridCellsOpacity" type="number"></td>
+							<td><input id="GridCellsOpacityHover" type="number"></td>
+						</tr>
 						<tr>
 							<td><span>Border Size :</span></td>
 							<td><input id="GridCellsBorderSize" type="number"></td>
diff --git a/src/js/background.js b/src/js/background.js
index 5f1738a..4e44552 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -117,6 +117,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
 						cells: {
 							margin: 4,
 							marginHover: 4,
+							opacity: 1,
+							opacityHover: 1,
 							backgroundColor: null,
 							backgroundColorHover: null,
 							borderColor: '#333333',
@@ -173,6 +175,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
 				app.Settings.save();
 			});
 		}
+		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.titleBorderSize) data.settings.grid.cells.titleBorderSize = 1;
diff --git a/src/js/dial.js b/src/js/dial.js
index 1d3ae5b..b03189f 100644
--- a/src/js/dial.js
+++ b/src/js/dial.js
@@ -257,9 +257,9 @@ 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: ' + app.settings.grid.cells.borderSize + 'px 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; 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; 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;
diff --git a/src/js/settings.js b/src/js/settings.js
index 2859fe3..0e50091 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;
+		GridCellsOpacity.value = app.settings.grid.cells.opacity * 100;
+		GridCellsOpacityHover.value = app.settings.grid.cells.opacityHover * 100;
 		GridCellsBorderSize.value = app.settings.grid.cells.borderSize;
 		GridCellsBorderSizeHover.value = app.settings.grid.cells.borderSizeHover;
 		GridCellsBackgroundTransparent.checked = (app.settings.grid.cells.backgroundColor == null);
@@ -78,6 +80,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.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);
 		if(GridCellsBackgroundTransparent.checked == true) app.settings.grid.cells.backgroundColor = null;