mirror of
https://github.com/MatMoul/quickdial-webext.git
synced 2024-12-23 15:36:12 +00:00
Feature: Add support of default and hover state of all properties
This commit is contained in:
parent
3156068ca7
commit
1592569ada
@ -100,7 +100,7 @@
|
||||
<tr>
|
||||
<td><span>Margins :</span></td>
|
||||
<td><input id="GridCellsMargins" type="number" min="0"></td>
|
||||
<td><input id="GridCellsMarginsHover" type="number" min="0" style="display: none;"></td>
|
||||
<td><input id="GridCellsMarginsHover" type="number" min="0"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Opacity :</span></td>
|
||||
@ -110,7 +110,7 @@
|
||||
<tr>
|
||||
<td><span>Border Size :</span></td>
|
||||
<td><input id="GridCellsBorderSize" type="number" min="0"></td>
|
||||
<td><input id="GridCellsBorderSizeHover" type="number" min="0" style="display: none;"></td>
|
||||
<td><input id="GridCellsBorderSizeHover" type="number" min="0"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Border Radius :</span></td>
|
||||
@ -135,22 +135,22 @@
|
||||
<tr>
|
||||
<td><span>Title :</span></td>
|
||||
<td><input id="GridCellsTitle" type="checkbox"></td>
|
||||
<td></td>
|
||||
<td><input id="GridCellsTitleHover" type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Title Height :</span></td>
|
||||
<td><input id="GridCellsTitleHeight" type="number" min="0"></td>
|
||||
<td></td>
|
||||
<td><input id="GridCellsTitleHeightHover" type="number" min="0"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Title Font Size :</span></td>
|
||||
<td><input id="GridCellsTitleFontSize" type="number" min="0"></td>
|
||||
<td></td>
|
||||
<td><input id="GridCellsTitleFontSizeHover" type="number" min="0"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Title Border Size :</span></td>
|
||||
<td><input id="GridCellsTitleBorderSize" type="number" min="0"></td>
|
||||
<td></td>
|
||||
<td><input id="GridCellsTitleBorderSizeHover" type="number" min="0"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Title Text Color :</span></td>
|
||||
|
||||
@ -128,8 +128,11 @@ app.Settings.init = function(callback){ // Load settings and nodes
|
||||
borderSize: 1,
|
||||
borderSizeHover: 1,
|
||||
title: true,
|
||||
titleHeight: 16,
|
||||
titleHover: true,
|
||||
titleHeight: 15,
|
||||
titleHeightHover: 15,
|
||||
titleFontSize: 10,
|
||||
titleFontSizeHover: 10,
|
||||
titleFont: 'Arial, Verdana, Sans-serif',
|
||||
titleColor: '#ffffff',
|
||||
titleColorHover: '#33ccff',
|
||||
@ -178,9 +181,15 @@ app.Settings.init = function(callback){ // Load settings and nodes
|
||||
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.borderSize) data.settings.grid.cells.borderSize = 1;
|
||||
if(!data.settings.grid.cells.borderSizeHover) data.settings.grid.cells.borderSizeHover = 1;
|
||||
if(!data.settings.grid.cells.borderSizeHover) data.settings.grid.cells.borderSizeHover = data.settings.grid.cells.borderSize;
|
||||
if(!data.settings.grid.cells.titleHover) data.settings.grid.cells.titleHover = data.settings.grid.cells.title;
|
||||
if(!data.settings.grid.cells.titleHeightHover){
|
||||
data.settings.grid.cells.titleHeight -= 1;
|
||||
data.settings.grid.cells.titleHeightHover = data.settings.grid.cells.titleHeight;
|
||||
}
|
||||
if(!data.settings.grid.cells.titleFontSizeHover) data.settings.grid.cells.titleFontSizeHover = data.settings.grid.cells.titleFontSize;
|
||||
if(!data.settings.grid.cells.titleBorderSize) data.settings.grid.cells.titleBorderSize = 1;
|
||||
if(!data.settings.grid.cells.titleBorderSizeHover) data.settings.grid.cells.titleBorderSizeHover = 1;
|
||||
if(!data.settings.grid.cells.titleBorderSizeHover) data.settings.grid.cells.titleBorderSizeHover = data.settings.grid.cells.titleBorderSize;
|
||||
app.settings = data.settings;
|
||||
app.node = data.node;
|
||||
if(callback) callback();
|
||||
|
||||
@ -257,16 +257,16 @@ dial.initStyles = function(){
|
||||
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.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;
|
||||
dial.styles.grid.cellHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td:hover {}')].style;
|
||||
dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; opacity: ' + app.settings.grid.cells.opacity + '; border: ' + app.settings.grid.cells.borderSize + 'px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + '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 + '; 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; opacity: ' + app.settings.grid.cells.opacityHover + '; 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 + '; border-width: ' + app.settings.grid.cells.borderSizeHover + 'px; margin: ' + app.settings.grid.cells.marginHover + 'px; opacity: ' + app.settings.grid.cells.opacityHover + '; 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: ' + app.settings.grid.cells.titleBorderSize + 'px 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;
|
||||
dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { font-size: ' + app.settings.grid.cells.titleFontSizeHover + 'pt; color: ' + app.settings.grid.cells.titleColorHover + '; border-top-width: ' + app.settings.grid.cells.titleBorderSizeHover + 'px; 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;
|
||||
@ -354,23 +354,40 @@ dial.initGrid = function(){
|
||||
return dial.Grid;
|
||||
};
|
||||
dial.updateGridLayout = function(){
|
||||
var fullWidth = dial.Grid.parentElement.offsetWidth - 2 * app.settings.grid.margin;
|
||||
var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * app.settings.grid.margin;
|
||||
var linkWidth = fullWidth / app.settings.grid.columns;
|
||||
var linkHeight = fullHeight / app.settings.grid.rows;
|
||||
if(linkWidth <= linkHeight * 4 / 3) linkHeight = linkWidth / 4 * 3;
|
||||
else linkWidth = linkHeight / 3 * 4;
|
||||
function calc(gridMargin, cellsMargin, borderSize, titleBorderSize){
|
||||
var fullWidth = dial.Grid.parentElement.offsetWidth - 2 * gridMargin;
|
||||
var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * gridMargin;
|
||||
var cellWidth = fullWidth / app.settings.grid.columns;
|
||||
var cellHeight = fullHeight / app.settings.grid.rows;
|
||||
var linkWidth = 0;
|
||||
var linkHeight = 0;
|
||||
if(cellWidth <= cellHeight * 4 / 3) cellHeight = cellWidth / 4 * 3;
|
||||
else cellWidth = cellHeight / 3 * 4;
|
||||
linkWidth = cellWidth - 2 * (cellsMargin + 1) - 2 * borderSize;
|
||||
linkHeight = cellHeight - 2 * (cellsMargin + 1) - 2 * borderSize - titleBorderSize;
|
||||
return {
|
||||
cellWidth: cellWidth,
|
||||
cellHeight: cellHeight,
|
||||
linkWidth: linkWidth,
|
||||
linkHeight: linkHeight
|
||||
};
|
||||
}
|
||||
|
||||
dial.styles.grid.cell.width = linkWidth.toString() + 'px';
|
||||
dial.styles.grid.cell.height = linkHeight.toString() + 'px';
|
||||
var values = calc(app.settings.grid.margin, app.settings.grid.cells.margin, app.settings.grid.cells.borderSize, app.settings.grid.cells.titleBorderSize);
|
||||
dial.styles.grid.cell.width = values.cellWidth.toString() + 'px';
|
||||
dial.styles.grid.cell.height = values.cellHeight.toString() + 'px';
|
||||
dial.styles.grid.link.width = values.linkWidth.toString() + 'px';
|
||||
dial.styles.grid.link.height = values.linkHeight.toString() + 'px';
|
||||
if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (values.linkHeight - app.settings.grid.cells.titleHeight - 1 - app.settings.grid.cells.titleBorderSize).toString() + 'px';
|
||||
else dial.styles.grid.linkPanel.height = values.linkHeight.toString() + 'px';
|
||||
|
||||
linkWidth = linkWidth - 2 * (app.settings.grid.cells.margin + 1) - 2 * app.settings.grid.cells.borderSize;
|
||||
linkHeight = linkHeight - 2 * (app.settings.grid.cells.margin + 1) - 2 * app.settings.grid.cells.borderSize - app.settings.grid.cells.titleBorderSize;
|
||||
|
||||
dial.styles.grid.link.width = linkWidth.toString() + 'px';
|
||||
dial.styles.grid.link.height = linkHeight.toString() + 'px';
|
||||
if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (linkHeight - app.settings.grid.cells.titleHeight - 1).toString() + 'px';
|
||||
else dial.styles.grid.linkPanel.height = linkHeight.toString() + 'px';
|
||||
values = calc(app.settings.grid.margin, app.settings.grid.cells.marginHover, app.settings.grid.cells.borderSizeHover, app.settings.grid.cells.titleBorderSizeHover);
|
||||
dial.styles.grid.cellHover.width = values.cellWidth.toString() + 'px';
|
||||
dial.styles.grid.cellHover.height = values.cellHeight.toString() + 'px';
|
||||
dial.styles.grid.linkHover.width = values.linkWidth.toString() + 'px';
|
||||
dial.styles.grid.linkHover.height = values.linkHeight.toString() + 'px';
|
||||
if(app.settings.grid.cells.titleHover) dial.styles.grid.linkPanelHover.height = (values.linkHeight - app.settings.grid.cells.titleHeightHover - 1 - app.settings.grid.cells.titleBorderSizeHover).toString() + 'px';
|
||||
else dial.styles.grid.linkPanelHover.height = values.linkHeight.toString() + 'px';
|
||||
};
|
||||
dial.populateGrid = function(){
|
||||
populateEmpty = function(link){
|
||||
|
||||
@ -53,9 +53,13 @@ app.init = function(){
|
||||
GridCellsBorderColor.value = app.settings.grid.cells.borderColor;
|
||||
GridCellsBorderColorHover.value = app.settings.grid.cells.borderColorHover;
|
||||
GridCellsTitle.checked = app.settings.grid.cells.title;
|
||||
GridCellsTitleHover.checked = app.settings.grid.cells.titleHover;
|
||||
GridCellsTitleHeight.value = app.settings.grid.cells.titleHeight;
|
||||
GridCellsTitleHeightHover.value = app.settings.grid.cells.titleHeightHover;
|
||||
GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize;
|
||||
GridCellsTitleFontSizeHover.value = app.settings.grid.cells.titleFontSizeHover;
|
||||
GridCellsTitleBorderSize.value = app.settings.grid.cells.titleBorderSize;
|
||||
GridCellsTitleBorderSizeHover.value = app.settings.grid.cells.titleBorderSizeHover;
|
||||
GridCellsTitleColor.value = app.settings.grid.cells.titleColor;
|
||||
GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover;
|
||||
GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null);
|
||||
@ -78,12 +82,12 @@ app.init = function(){
|
||||
app.settings.grid.backIcon = GridBackImage;
|
||||
app.settings.grid.folderIcon = GridFolderImage;
|
||||
app.settings.grid.cells.margin = +(GridCellsMargins.value);
|
||||
//app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
|
||||
app.settings.grid.cells.marginHover = +(GridCellsMargins.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.opacityHover = +(GridCellsOpacityHover.value) / 100;
|
||||
app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value);
|
||||
//app.settings.grid.cells.borderSizeHover = +(GridCellsBorderSizeHover.value);
|
||||
app.settings.grid.cells.borderSizeHover = +(GridCellsBorderSizeHover.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;
|
||||
@ -93,9 +97,13 @@ app.init = function(){
|
||||
app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
|
||||
app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value;
|
||||
app.settings.grid.cells.title = GridCellsTitle.checked;
|
||||
app.settings.grid.cells.titleHover = GridCellsTitleHover.checked;
|
||||
app.settings.grid.cells.titleHeight = GridCellsTitleHeight.value;
|
||||
app.settings.grid.cells.titleHeightHover = GridCellsTitleHeightHover.value;
|
||||
app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value;
|
||||
app.settings.grid.cells.titleFontSizeHover = GridCellsTitleFontSizeHover.value;
|
||||
app.settings.grid.cells.titleBorderSize = GridCellsTitleBorderSize.value;
|
||||
app.settings.grid.cells.titleBorderSizeHover = GridCellsTitleBorderSizeHover.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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user