m/quickdial-webext
1
0
Fork 0
mirror of https://github.com/MatMoul/quickdial-webext.git synced 2024-12-23 15:36:12 +00:00
Code Releases Activity

Feature: Add stretch mode for background

Browse Source
This commit is contained in:
MatMoul 2017-11-11 00:44:56 +01:00
parent 5e07132316
commit 07dfa858e8
4 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/html/settings.html
View File

@ -36,6 +36,17 @@
<td><span>Background Color :</span></td> <td><span>Background Color :</span></td>
<td><input id="BackgroundColor" type="color"></td> <td><input id="BackgroundColor" type="color"></td>
</tr> </tr>
<tr>
<td><span>Background Mode :</span></td>
<td>
<select id="BackgroundMode">
<option value="0">Stretch</option>
<option value="1">Cover</option>
<option value="2">Contain</option>
<option value="3">Center</option>
</select>
</td>
</tr>
<tr> <tr>
<td><span>Background Image :</span></td> <td><span>Background Image :</span></td>
<td> <td>

2
src/js/background.js
View File

@ -106,6 +106,7 @@ app.Settings.init = function(callback){ // Load settings and nodes
settings: { settings: {
backgroundColor: '#3c4048', backgroundColor: '#3c4048',
backgroundImage: null, backgroundImage: null,
backgroundMode: 0,
grid: { grid: {
margin: 10, margin: 10,
rows: 4, rows: 4,
@ -178,6 +179,7 @@ app.Settings.init = function(callback){ // Load settings and nodes
app.Settings.save(); 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.opacity) data.settings.grid.cells.opacity = 1;
if(!data.settings.grid.cells.opacityHover) data.settings.grid.cells.opacityHover = 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.borderSize) data.settings.grid.cells.borderSize = 1;

22
src/js/dial.js
View File

@ -253,7 +253,27 @@ dial.initStyles = function(){
document.head.appendChild(dial.Style); document.head.appendChild(dial.Style);
dial.styles = {}; dial.styles = {};
dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style; 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 = {};
dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style; 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.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;

3
src/js/settings.js
View File

@ -21,6 +21,7 @@ app.init = function(){
app.settings = settings; app.settings = settings;
BackgroundColor.value = app.settings.backgroundColor; BackgroundColor.value = app.settings.backgroundColor;
BackgroundImage = app.settings.backgroundImage; BackgroundImage = app.settings.backgroundImage;
BackgroundMode.value = app.settings.backgroundMode;
BackgroundPreview.style.backgroundColor = app.settings.backgroundColor; BackgroundPreview.style.backgroundColor = app.settings.backgroundColor;
BackgroundPreview.style.backgroundImage = app.settings.backgroundImage; BackgroundPreview.style.backgroundImage = app.settings.backgroundImage;
BackgroundPreview.style.backgroundRepeat = 'no-repeat'; BackgroundPreview.style.backgroundRepeat = 'no-repeat';
@ -75,6 +76,7 @@ app.init = function(){
BtnApply.onclick = function(){ BtnApply.onclick = function(){
app.settings.backgroundColor = BackgroundColor.value; app.settings.backgroundColor = BackgroundColor.value;
app.settings.backgroundImage = BackgroundImage; app.settings.backgroundImage = BackgroundImage;
app.settings.backgroundMode = +(BackgroundMode.value);
app.settings.grid.rows = +(GridRows.value); app.settings.grid.rows = +(GridRows.value);
app.settings.grid.margin = +(GridMargins.value); app.settings.grid.margin = +(GridMargins.value);
app.settings.grid.columns = +(GridColumns.value); app.settings.grid.columns = +(GridColumns.value);
@ -83,7 +85,6 @@ app.init = function(){
app.settings.grid.folderIcon = GridFolderImage; app.settings.grid.folderIcon = GridFolderImage;
app.settings.grid.cells.margin = +(GridCellsMargins.value); 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.opacity = +(GridCellsOpacity.value) / 100; app.settings.grid.cells.opacity = +(GridCellsOpacity.value) / 100;
app.settings.grid.cells.opacityHover = +(GridCellsOpacityHover.value) / 100; app.settings.grid.cells.opacityHover = +(GridCellsOpacityHover.value) / 100;
app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value); app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value);