misc menu changes WIP

This commit is contained in:
Alex Adam 2018-02-22 23:12:35 +02:00
parent bad1190a37
commit d2e62949fb
3 changed files with 39 additions and 47 deletions

View file

@ -4,13 +4,10 @@
"description": "Extension name"
},
"includeStyle": {
"message": "Include Style"
},
"styleLabel": {
"message": "Custom Style:"
"message": "Include Original Style"
},
"applyStyle": {
"message": "Apply"
"message": "Apply Custom Style"
},
"editStyles": {
"message": "Edit Styles ..."

View file

@ -24,13 +24,22 @@
font-weight: bold;
padding: 5px 0;
font-family: sans-serif;
padding-top: 10px;
padding-left: 5px;
}
.optionContainer {
font-family: sans-serif;
font-size: 14px;
padding: 6px 0;
padding-left: 3px;
}
button {
font-family: sans-serif;
font-size: 14px;
width: 100%;
padding: 4px 0;
padding: 6px 0;
padding-left: 8px;
border: none;
background-color: white;
@ -82,29 +91,11 @@
}
}
#styleLabel {
padding: 5px 0;
font-family: sans-serif;
font-size: 15px;
padding: 7px 0;
background-color: white;
}
#styleLabel:disabled {
color: gray;
}
#allStylesList {
display: inline-block;
width: 100%;
padding: 3px;
}
#includeStyle {
font-family: sans-serif;
font-size: 14px;
padding: 0;
padding-bottom: 8px;
border-bottom: dashed 1px #ccc;
background-color: white;
text-align: left;
}
@ -116,8 +107,15 @@
outline: none;
}
#includeStyleCheck {
input[type="checkbox"] {
outline: none;
font-family: sans-serif;
font-size: 14px;
}
#applyStyle, #includeStyle {
outline: none;
font-family: sans-serif;
font-size: 14px;
}
.shortcut {
font-size: 10px;
@ -130,17 +128,13 @@
<div class="menu-holder">
<div id="menuTitle"></div>
<hr/>
<div><input type="checkbox" name="button" id="includeStyleCheck"></input><span id="includeStyle"></span></div>
<div id="customStyles">
<div id="styleLabel"></div>
<div>
<select id="allStylesList"></select>
</div>
<div class="">
<button id="applyStyle" type="button" name="button" style="display:inline-block;width:47%;border-right:solid 1px black;"></button>
<button id="editStyles" type="button" name="button" style="display:inline-block;width:47%;"></button>
<div class="optionContainer">
<input type="checkbox" name="button" id="includeStyleCheck"></input><span id="includeStyle"></span>
</div>
<div class="optionContainer">
<input type="checkbox" name="button" id="applyStyleCheck"></input><span id="applyStyle"></span>
</div>
<button id="editStyles" type="button" name="button"></button>
<hr/>
<button id="savePage" type="button" name="button">
<div id="savePageLabel"></div>

View file

@ -5,7 +5,7 @@ var appliedStyles = [];
// create menu labels
document.getElementById('menuTitle').innerHTML = chrome.i18n.getMessage('extName');
document.getElementById('includeStyle').innerHTML = chrome.i18n.getMessage('includeStyle');
document.getElementById('styleLabel').innerHTML = chrome.i18n.getMessage('styleLabel');
// document.getElementById('styleLabel').innerHTML = chrome.i18n.getMessage('styleLabel');
document.getElementById('applyStyle').innerHTML = chrome.i18n.getMessage('applyStyle');
document.getElementById('editStyles').innerHTML = chrome.i18n.getMessage('editStyles');
document.getElementById('savePageLabel').innerHTML = chrome.i18n.getMessage('savePage');
@ -26,7 +26,7 @@ function createStyleList(styles) {
return;
}
var existingStyles = document.getElementById('allStylesList');
var existingStyles = {} //document.getElementById('allStylesList');
var foundMatchingUrl = false;
while (existingStyles.hasChildNodes() && existingStyles.childElementCount > 1) {
@ -78,7 +78,7 @@ function createStyleList(styles) {
function createIncludeStyle(data) {
var includeStyleCheck = document.getElementById('includeStyleCheck');
includeStyleCheck.checked = data;
document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
// document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
}
getIncludeStyle(createIncludeStyle);
@ -86,17 +86,18 @@ getIncludeStyle(createIncludeStyle);
document.getElementById('includeStyleCheck').onclick = function () {
var includeStyleCheck = document.getElementById('includeStyleCheck');
setIncludeStyle(includeStyleCheck.checked);
document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
// document.getElementById('customStyles').style.display = !includeStyleCheck.checked ? 'none' : 'block';
}
document.getElementById('allStylesList').onchange = function () {
var newValue = this.value;
newValue = newValue.replace('option_', '');
newValue = parseInt(newValue);
currentStyle = allStyles[newValue];
setCurrentStyle(currentStyle);
}
// document.getElementById('allStylesList').onchange = function () {
// var newValue = this.value;
// newValue = newValue.replace('option_', '');
// newValue = parseInt(newValue);
// currentStyle = allStyles[newValue];
// setCurrentStyle(currentStyle);
// }
// FIXME
document.getElementById("applyStyle").onclick = function() {
chrome.tabs.query({
currentWindow: true,