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

Add custom background color settings (node)

Browse Source
This commit is contained in:
MatMoul 2017-10-06 22:17:01 +02:00
parent 4faf78eb84
commit 6c3fd78250
5 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO
View File

@ -1,5 +1,4 @@
Add custom image (thumbnails)
Add custom background color settings (node)
Create style for popup
Preserve ratio on capture in a new tab
Need a best solution to update folder and bookmark when it are updated from Firefox

22
src/html/settings.html
View File

@ -96,6 +96,16 @@
<td><input id="GridCellsBorderRadius" type="number"></td>
<td><input id="GridCellsBorderRadiusHover" type="number"></td>
</tr>
<tr>
<td><span>Background Transparent :</span></td>
<td><input id="GridCellsBackgroundTransparent" type="checkbox"></td>
<td><input id="GridCellsBackgroundTransparentHover" type="checkbox"></td>
</tr>
<tr>
<td><span>Background Color :</span></td>
<td><input id="GridCellsBackgroundColor" type="color"></td>
<td><input id="GridCellsBackgroundColorHover" type="color"></td>
</tr>
<tr>
<td><span>Border Color :</span></td>
<td><input id="GridCellsBorderColor" type="color"></td>
@ -117,10 +127,20 @@
<td></td>
</tr>
<tr>
<td><span>Title Color:</span></td>
<td><span>Title Text Color :</span></td>
<td><input id="GridCellsTitleColor" type="color"></td>
<td><input id="GridCellsTitleColorHover" type="color"></td>
</tr>
<tr>
<td><span>Title Background Transparent :</span></td>
<td><input id="GridCellsTitleBackgroundTransparent" type="checkbox"></td>
<td><input id="GridCellsTitleBackgroundTransparentHover" type="checkbox"></td>
</tr>
<tr>
<td><span>Title Background Color :</span></td>
<td><input id="GridCellsTitleBackgroundColor" type="color"></td>
<td><input id="GridCellsTitleBackgroundColorHover" type="color"></td>
</tr>
</table>
</div>
</div>

12
src/js/background.js
View File

@ -13,6 +13,7 @@ core.init = function(){ // Init module
core.Settings = {}; // Settings helper object
core.Settings.load = function(callback){ // Load settings
browser.storage.local.get({
version: 2,
backgroundColor: '#3c4048',
backgroundImage: null,
grid: {
@ -27,6 +28,8 @@ core.Settings.load = function(callback){ // Load settings
marginHover: 4,
ratioX: 4,
ratioY: 3,
backgroundColor: null,
backgroundColorHover: null,
borderColor: '#333333',
borderColorHover: '#a9a9a9',
borderRadius: 4,
@ -37,16 +40,23 @@ core.Settings.load = function(callback){ // Load settings
titleFont: 'Arial, Verdana, Sans-serif',
titleColor: '#ffffff',
titleColorHover: '#33ccff',
titleBackgroundColor: null,
titleBackgroundColorHover: null,
backPanel: true
},
root: 'Quick Dial',
node: {}
}
}).then(function(obj){
if(!obj.grid.backIcon){ // Upgrade Data Version
if(!obj.version){ // Upgrade Data Version
obj.version = 2;
obj.grid.backIcon = 'url(/img/back.png)';
obj.grid.folderIcon = 'url(/img/folder.png)';
obj.grid.loadingIcon = 'url(/img/throbber.gif)';
obj.grid.cells.backgroundColor = null;
obj.grid.cells.backgroundColorHover = null;
obj.grid.cells.titleBackgroundColor = null;
obj.grid.cells.titleBackgroundColorHover = null;
delete obj.grid.cells.backIcon;
delete obj.grid.cells.folderIcon;
delete obj.grid.cells.loadingIcon;

5
src/js/dial.js
View File

@ -98,8 +98,13 @@ dial.initStyles = function(){
//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;
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;
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;
dial.styles.grid.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: ' + app.settings.grid.folderIcon + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;

20
src/js/settings.js
View File

@ -14,16 +14,20 @@ window.onload = function(){
GridRows.value = app.settings.grid.rows;
GridMargins.value = app.settings.grid.margin;
GridColumns.value = app.settings.grid.columns;
GridBackImage = app.settings.grid.cells.backIcon;
GridBackImage = app.settings.grid.backIcon;
GridBackPreview.style.backgroundImage = app.settings.grid.backIcon;
GridBackPreview.style.backgroundRepeat = 'no-repeat';
GridBackPreview.style.backgroundPosition = '50% 50%';
GridFolderImage = app.settings.grid.cells.folderIcon;
GridFolderImage = app.settings.grid.folderIcon;
GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon;
GridFolderPreview.style.backgroundRepeat = 'no-repeat';
GridFolderPreview.style.backgroundSize = '100% 100%';
GridCellsMargins.value = app.settings.grid.cells.margin;
GridCellsMarginsHover.value = app.settings.grid.cells.marginHover;
GridCellsBackgroundTransparent.checked = (app.settings.grid.cells.backgroundColor == null);
GridCellsBackgroundColor.value = app.settings.grid.cells.backgroundColor;
GridCellsBackgroundTransparentHover.checked = (app.settings.grid.cells.backgroundColorHover == null);
GridCellsBackgroundColorHover.value = app.settings.grid.cells.backgroundColorHover;
GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
GridCellsBorderRadiusHover.value = app.settings.grid.cells.borderRadiusHover;
GridCellsBorderColor.value = app.settings.grid.cells.borderColor;
@ -33,6 +37,10 @@ window.onload = function(){
GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize;
GridCellsTitleColor.value = app.settings.grid.cells.titleColor;
GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover;
GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null);
GridCellsTitleBackgroundColor.value = app.settings.grid.cells.titleBackgroundColor;
GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover;
GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null);
});
BtnOk.onclick = function(){
@ -50,6 +58,10 @@ window.onload = function(){
app.settings.grid.cells.margin = +(GridCellsMargins.value);
//app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
app.settings.grid.cells.marginHover = +(GridCellsMargins.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;
else app.settings.grid.cells.backgroundColorHover = GridCellsBackgroundColorHover.value;
app.settings.grid.cells.borderRadius = +(GridCellsBorderRadius.value);
app.settings.grid.cells.borderRadiusHover = +(GridCellsBorderRadiusHover.value);
app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
@ -59,6 +71,10 @@ window.onload = function(){
app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.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;
else app.settings.grid.cells.titleBackgroundColor = GridCellsTitleBackgroundColor.value;
if(GridCellsTitleBackgroundTransparentHover.checked == true) app.settings.grid.cells.titleBackgroundColorHover = null;
else app.settings.grid.cells.titleBackgroundColorHover = GridCellsTitleBackgroundColorHover.value;
app.saveSettings();
}
BtnCancel.onclick = function(){