mirror of
https://github.com/MatMoul/quickdial-webext.git
synced 2024-12-23 07:26:11 +00:00
Large change
This commit is contained in:
parent
41c7f0d29a
commit
d9646ccbe1
83
src/html/settings.html
Normal file
83
src/html/settings.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head id="head">
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" type="image/png" href="img/24.png" />
|
||||
<title id="title">Quick Dial Settings</title>
|
||||
<script type="text/javascript" src="/js/settings.js"></script>
|
||||
<style>
|
||||
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
|
||||
h1 { font-size: 11pt; text-decoration: underline; }
|
||||
input[type=number] { width: 60px; }
|
||||
</style>
|
||||
</head>
|
||||
<body id="body">
|
||||
<h1>Page :</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td><span>Background Color :</span></td>
|
||||
<td><input id="BackgroundColor" type="color"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Background Image :</span></td>
|
||||
<td>
|
||||
<button id="BackgroundImageClear">Clear</button>
|
||||
<input id="BackgroundImageFile" type="file">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h1>Grid :</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td><span>Rows x Columns :</span></td>
|
||||
<td>
|
||||
<input id="GridRows" type="number">
|
||||
<input id="GridColumns" type="number">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Margins :</span></td>
|
||||
<td><input id="GridMargins" type="number"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<h1>Grid Cells:</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Default :</td>
|
||||
<td>Hover :</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Margins :</span></td>
|
||||
<td><input id="GridCellsMargins" type="number"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Border Radius:</span></td>
|
||||
<td><input id="GridCellsBorderRadius" type="number"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td><span>Border Color:</span></td>
|
||||
<td><input id="GridCellsBorderColor" type="color"></td>
|
||||
<td><input id="GridCellsBorderColorHover" type="color"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span>Title Color:</span></td>
|
||||
<td><input id="GridCellsTitleColor" type="color"></td>
|
||||
<td><input id="GridCellsTitleColorHover" type="color"></td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
</table>
|
||||
<div style="text-align: right;">
|
||||
<button id="BtnOk">OK</button>
|
||||
<button id="BtnApply">Apply</button>
|
||||
<button id="BtnCancel">Cancel</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
53
src/js/settings.js
Normal file
53
src/js/settings.js
Normal file
@ -0,0 +1,53 @@
|
||||
var BackgroundImage = null;
|
||||
|
||||
window.onload = function(){
|
||||
browser.runtime.getBackgroundPage().then(function(page){
|
||||
app = page.app;
|
||||
BackgroundColor.value = app.settings.backgroundColor;
|
||||
BackgroundImage = app.settings.backgroundImage;
|
||||
GridRows.value = app.settings.grid.rows;
|
||||
GridMargins.value = app.settings.grid.margin;
|
||||
GridColumns.value = app.settings.grid.columns;
|
||||
GridCellsMargins.value = app.settings.grid.cells.margin;
|
||||
GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
|
||||
GridCellsBorderColor.value = app.settings.grid.cells.borderColor;
|
||||
GridCellsBorderColorHover.value = app.settings.grid.cells.borderColorHover;
|
||||
GridCellsTitleColor.value = app.settings.grid.cells.titleColor;
|
||||
GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover;
|
||||
});
|
||||
|
||||
BackgroundImageClear.onclick = function(){
|
||||
BackgroundImage = null;
|
||||
}
|
||||
BackgroundImageFile.onclick = function(){
|
||||
this.value = null;
|
||||
}
|
||||
BackgroundImageFile.onchange = function(){
|
||||
var fileReader = new FileReader();
|
||||
fileReader.onload = function(e){
|
||||
BackgroundImage = 'url(' + e.target.result + ')';
|
||||
}
|
||||
fileReader.readAsDataURL(BackgroundImageFile.files[0]);
|
||||
}
|
||||
|
||||
BtnOk.onclick = function(){
|
||||
BtnApply.onclick();
|
||||
window.frameElement.popup.close();
|
||||
}
|
||||
BtnApply.onclick = function(){
|
||||
app.settings.backgroundColor = BackgroundColor.value;
|
||||
app.settings.backgroundImage = BackgroundImage;
|
||||
app.settings.grid.rows = GridRows.value;
|
||||
app.settings.grid.margin = GridMargins.value;
|
||||
app.settings.grid.columns = GridColumns.value;
|
||||
app.settings.grid.cells.borderRadius = GridCellsBorderRadius.value;
|
||||
app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
|
||||
app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value;
|
||||
app.settings.grid.cells.titleColor = GridCellsTitleColor.value;
|
||||
app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value;
|
||||
app.saveSettings();
|
||||
}
|
||||
BtnCancel.onclick = function(){
|
||||
window.frameElement.popup.close();
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user