diff --git a/src/html/settings.html b/src/html/settings.html index ad9b2a2..3ee25e4 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -36,6 +36,17 @@ Background Color : + + Background Mode : + + + + Background Image : diff --git a/src/js/background.js b/src/js/background.js index 87f8cd1..fedbdf7 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -106,6 +106,7 @@ app.Settings.init = function(callback){ // Load settings and nodes settings: { backgroundColor: '#3c4048', backgroundImage: null, + backgroundMode: 0, grid: { margin: 10, rows: 4, @@ -178,6 +179,7 @@ app.Settings.init = function(callback){ // Load settings and nodes app.Settings.save(); }); } + if(!data.settings.backgroundMode) data.settings.backgroundMode = 0; 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; diff --git a/src/js/dial.js b/src/js/dial.js index b7645af..068c34b 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -253,7 +253,27 @@ dial.initStyles = function(){ document.head.appendChild(dial.Style); dial.styles = {}; dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style; - dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style; + dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; }')].style; + switch(app.settings.backgroundMode){ + case 0: + dial.styles.body.backgroundRepeat = 'no-repeat'; + dial.styles.body.backgroundSize = '100% 100%'; + break; + case 1: + dial.styles.body.backgroundRepeat = 'no-repeat'; + dial.styles.body.backgroundSize = 'cover'; + dial.styles.body.backgroundPosition = 'center'; + break; + case 2: + dial.styles.body.backgroundRepeat = 'no-repeat'; + dial.styles.body.backgroundSize = 'contain'; + dial.styles.body.backgroundPosition = 'center'; + break; + case 3: + dial.styles.body.backgroundRepeat = 'no-repeat'; + dial.styles.body.backgroundPosition = 'center'; + break; + } 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; diff --git a/src/js/settings.js b/src/js/settings.js index d347e89..fbe1511 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -21,6 +21,7 @@ app.init = function(){ app.settings = settings; BackgroundColor.value = app.settings.backgroundColor; BackgroundImage = app.settings.backgroundImage; + BackgroundMode.value = app.settings.backgroundMode; BackgroundPreview.style.backgroundColor = app.settings.backgroundColor; BackgroundPreview.style.backgroundImage = app.settings.backgroundImage; BackgroundPreview.style.backgroundRepeat = 'no-repeat'; @@ -75,6 +76,7 @@ app.init = function(){ BtnApply.onclick = function(){ app.settings.backgroundColor = BackgroundColor.value; app.settings.backgroundImage = BackgroundImage; + app.settings.backgroundMode = +(BackgroundMode.value); app.settings.grid.rows = +(GridRows.value); app.settings.grid.margin = +(GridMargins.value); app.settings.grid.columns = +(GridColumns.value); @@ -83,7 +85,6 @@ app.init = function(){ 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.opacity = +(GridCellsOpacity.value) / 100; app.settings.grid.cells.opacityHover = +(GridCellsOpacityHover.value) / 100; app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value);