mirror of
https://github.com/MatMoul/quickdial-webext.git
synced 2024-12-23 07:26:11 +00:00
Add folder and back icon settings
This commit is contained in:
parent
a079a43e69
commit
92b328cee0
1
TODO
1
TODO
@ -1,4 +1,3 @@
|
||||
Add custom icon settings (back and folder)
|
||||
Add custom image (thumbnails)
|
||||
Add custom background color settings (node)
|
||||
Create style for popup
|
||||
|
@ -62,6 +62,22 @@
|
||||
<td><input id="GridMargins" type="number"></td>
|
||||
</tr>
|
||||
</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 class="hidden">
|
||||
<table>
|
||||
|
@ -35,14 +35,19 @@ core.Settings.load = function(callback){ // Load settings
|
||||
titleColor: '#ffffff',
|
||||
titleColorHover: '#33ccff',
|
||||
backPanel: true,
|
||||
backIcon: 'img/back.png',
|
||||
folderIcon: 'img/folder.png',
|
||||
loadingIcon: 'img/throbber.gif'
|
||||
backIcon: '/img/back.png',
|
||||
folderIcon: '/img/folder.png',
|
||||
loadingIcon: '/img/throbber.gif'
|
||||
},
|
||||
root: 'Quick Dial',
|
||||
node: {}
|
||||
}
|
||||
}).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;
|
||||
if(callback) callback();
|
||||
});
|
||||
|
@ -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.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.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.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.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: ' + 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.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;
|
||||
}
|
||||
|
@ -1,4 +1,6 @@
|
||||
var BackgroundImage = null;
|
||||
var GridBackImage = null;
|
||||
var GridFolderImage = null;
|
||||
|
||||
window.onload = function(){
|
||||
browser.runtime.getBackgroundPage().then(function(page){
|
||||
@ -12,6 +14,14 @@ 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;
|
||||
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;
|
||||
GridCellsMarginsHover.value = app.settings.grid.cells.marginHover;
|
||||
GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
|
||||
@ -35,6 +45,8 @@ window.onload = function(){
|
||||
app.settings.grid.rows = +(GridRows.value);
|
||||
app.settings.grid.margin = +(GridMargins.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.marginHover = +(GridCellsMarginsHover.value);
|
||||
app.settings.grid.cells.marginHover = +(GridCellsMargins.value);
|
||||
@ -89,4 +101,38 @@ window.onload = function(){
|
||||
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]);
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user