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

Add folder and back icon settings

Browse Source
This commit is contained in:
MatMoul 2017-10-06 21:07:49 +02:00
parent a079a43e69
commit 92b328cee0
5 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO
View File

@ -1,4 +1,3 @@
Add custom icon settings (back and folder)
Add custom image (thumbnails) Add custom image (thumbnails)
Add custom background color settings (node) Add custom background color settings (node)
Create style for popup Create style for popup

16
src/html/settings.html
View File

@ -62,6 +62,22 @@
<td><input id="GridMargins" type="number"></td> <td><input id="GridMargins" type="number"></td>
</tr> </tr>
</table> </table>
<table>
<tr>
<td>
<div>Back :</div>
<button id="GridBackImageReset">Reset</button>
<input id="GridBackImageFile" type="file" style="width:220px;">
<div id="GridBackPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
</td>
<td>
<div>Folder :</div>
<button id="GridFolderImageReset">Reset</button>
<input id="GridFolderImageFile" type="file" style="width:220px;">
<div id="GridFolderPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
</td>
</tr>
</table>
</div> </div>
<div class="hidden"> <div class="hidden">
<table> <table>

11
src/js/background.js
View File

@ -35,14 +35,19 @@ core.Settings.load = function(callback){ // Load settings
titleColor: '#ffffff', titleColor: '#ffffff',
titleColorHover: '#33ccff', titleColorHover: '#33ccff',
backPanel: true, backPanel: true,
backIcon: 'img/back.png', backIcon: '/img/back.png',
folderIcon: 'img/folder.png', folderIcon: '/img/folder.png',
loadingIcon: 'img/throbber.gif' loadingIcon: '/img/throbber.gif'
}, },
root: 'Quick Dial', root: 'Quick Dial',
node: {} node: {}
} }
}).then(function(obj){ }).then(function(obj){
if(obj.grid.cells.backIcon == 'img/back.png'){
obj.grid.cells.backIcon = 'url(/img/back.png)';
obj.grid.cells.folderIcon = 'url(/img/folder.png)';
obj.grid.cells.loadingIcon = 'url(/img/throbber.gif)';
}
app.settings = obj; app.settings = obj;
if(callback) callback(); if(callback) callback();
}); });

4
src/js/dial.js
View File

@ -101,8 +101,8 @@ dial.initStyles = function(){
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: 1px solid ' + app.settings.grid.cells.borderColor + '; }')].style;
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; 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;
dial.styles.grid.linkEmpty = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Empty { display: none; }')].style; 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: url("' + app.settings.grid.cells.backIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style; dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.cells.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: url("' + app.settings.grid.cells.folderIcon + '"); background-repeat: no-repeat; background-size: 100% 100%; }')].style; dial.styles.grid.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: ' + app.settings.grid.cells.folderIcon + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style; dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style; dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style;
} }

46
src/js/settings.js
View File

@ -1,4 +1,6 @@
var BackgroundImage = null; var BackgroundImage = null;
var GridBackImage = null;
var GridFolderImage = null;
window.onload = function(){ window.onload = function(){
browser.runtime.getBackgroundPage().then(function(page){ browser.runtime.getBackgroundPage().then(function(page){
@ -12,6 +14,14 @@ window.onload = function(){
GridRows.value = app.settings.grid.rows; GridRows.value = app.settings.grid.rows;
GridMargins.value = app.settings.grid.margin; GridMargins.value = app.settings.grid.margin;
GridColumns.value = app.settings.grid.columns; GridColumns.value = app.settings.grid.columns;
GridBackImage = app.settings.grid.cells.backIcon;
GridBackPreview.style.backgroundImage = app.settings.grid.cells.backIcon;
GridBackPreview.style.backgroundRepeat = 'no-repeat';
GridBackPreview.style.backgroundPosition = '50% 50%';
GridFolderImage = app.settings.grid.cells.folderIcon;
GridFolderPreview.style.backgroundImage = app.settings.grid.cells.folderIcon;
GridFolderPreview.style.backgroundRepeat = 'no-repeat';
GridFolderPreview.style.backgroundSize = '100% 100%';
GridCellsMargins.value = app.settings.grid.cells.margin; GridCellsMargins.value = app.settings.grid.cells.margin;
GridCellsMarginsHover.value = app.settings.grid.cells.marginHover; GridCellsMarginsHover.value = app.settings.grid.cells.marginHover;
GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius; GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
@ -35,6 +45,8 @@ window.onload = function(){
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);
app.settings.grid.cells.backIcon = GridBackImage;
app.settings.grid.cells.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.marginHover = +(GridCellsMargins.value);
@ -89,4 +101,38 @@ window.onload = function(){
fileReader.readAsDataURL(BackgroundImageFile.files[0]); fileReader.readAsDataURL(BackgroundImageFile.files[0]);
} }
GridBackImageReset.onclick = function(){
GridBackImage = 'url(/img/back.png)';
GridBackPreview.style.backgroundImage = GridBackImage;
}
GridBackImageFile.onclick = function(){
this.value = null;
}
GridBackImageFile.onchange = function(){
var fileReader = new FileReader();
fileReader.onload = function(e){
GridBackImage = 'url(' + e.target.result + ')';
GridBackImageFile.value = null;
GridBackPreview.style.backgroundImage = GridBackImage;
}
fileReader.readAsDataURL(GridBackImageFile.files[0]);
}
GridFolderImageReset.onclick = function(){
GridFolderImage = 'url(/img/folder.png)';
GridFolderPreview.style.backgroundImage = GridFolderImage;
}
GridFolderImageFile.onclick = function(){
this.value = null;
}
GridFolderImageFile.onchange = function(){
var fileReader = new FileReader();
fileReader.onload = function(e){
GridFolderImage = 'url(' + e.target.result + ')';
GridFolderImageFile.value = null;
GridFolderPreview.style.backgroundImage = GridFolderImage;
}
fileReader.readAsDataURL(GridFolderImageFile.files[0]);
}
} }