OptionsUI: restructure html, make it userstylable
This commit is contained in:
tophf
parent
0c6b74d999
commit
4dd8066ca4
|
|
@ -496,6 +496,12 @@
|
|||
"optionsActions": {
|
||||
"message": "Actions"
|
||||
},
|
||||
"optionsSave": {
|
||||
"message": "Save"
|
||||
},
|
||||
"optionsSaved": {
|
||||
"message": "Options saved."
|
||||
},
|
||||
"optionsOpenManager": {
|
||||
"message": "Open styles manager"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,22 +1,102 @@
|
|||
body {
|
||||
margin: 10px;
|
||||
font-family: "Helvetica Neue",Helvetica,sans-serif;
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > * {
|
||||
padding: 1em 1rem 1em 44px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input[type=number],
|
||||
a {
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
button {
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.notes {
|
||||
h1:not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
#actions {
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
#save {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#save-status {
|
||||
margin-top: .5ex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#save-status.fadeinout {
|
||||
visibility: visible;
|
||||
animation: fadeinout 1s ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
#notes {
|
||||
background-color: #f4f4f4;
|
||||
margin-top: .5em;
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#notes ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#notes li:not(last-child) {
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
width: 80px;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
#notes a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#notes a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
@keyframes fadeinout {
|
||||
0% { opacity: 0 }
|
||||
10% { opacity: 1 }
|
||||
25% { opacity: 1 }
|
||||
100% { opacity: 0 }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,16 @@
|
|||
<head>
|
||||
<title>Stylus Options</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script src="../localization.js"></script>
|
||||
<script src="/localization.js"></script>
|
||||
<script src="/apply.js"></script>
|
||||
<script src="/messaging.js"></script>
|
||||
<script src="/dom.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 i18n-text="optionsCustomize"></h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<div id="ui">
|
||||
<h1 i18n-text="optionsCustomize"></h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td i18n-text="optionsBadgeNormal"></td>
|
||||
<td><input type="color" id="badgeNormal"></td>
|
||||
|
|
@ -26,16 +29,16 @@
|
|||
<td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
|
||||
<td><input type="number" min="0" id="updateInterval"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<button id="save">Save</button>
|
||||
<span id="status"></span>
|
||||
</table>
|
||||
<div id="save">
|
||||
<button id="save-button" i18n-text="optionsSave"></button>
|
||||
<div id="save-status" i18n-text="optionsSaved"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 i18n-text="optionsActions"></h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<div id="actions">
|
||||
<h1 i18n-text="optionsActions"></h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td i18n-text="optionsOpenManager"><sup>2</sup></td>
|
||||
<td><button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button></td>
|
||||
|
|
@ -47,17 +50,19 @@
|
|||
<button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="notes">
|
||||
<hr>
|
||||
1: <span i18n-text="optionsUpdateIntervalNote"></span>
|
||||
<br>
|
||||
2: <span i18n-text="optionsOpenManagerNote"></span>, <a href="#" data-cmd="open-keyboard">chrome://extensions/configureCommands</a>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="notes">
|
||||
<ol>
|
||||
<li i18n-text="optionsUpdateIntervalNote"></li>
|
||||
<li><a data-cmd="open-keyboard"
|
||||
i18n-text="optionsOpenManagerNote"
|
||||
href="chrome://extensions/configureCommands"></a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<script src="/messaging.js"></script>
|
||||
<script src="/dom.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,7 @@ function save() {
|
|||
'updateInterval',
|
||||
Math.max(0, Number($('#updateInterval').value))
|
||||
);
|
||||
// display notification
|
||||
const status = $('#status');
|
||||
status.textContent = 'Options saved.';
|
||||
setTimeout(() => (status.textContent = ''), 750);
|
||||
animateElement($('#save-status'), {className: 'fadeinout'});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -47,8 +44,7 @@ onDOMready().then(restore);
|
|||
$('#save').onclick = save;
|
||||
|
||||
// overwrite the default URL if browser is Opera
|
||||
$('[data-cmd="open-keyboard"]').textContent =
|
||||
configureCommands.url;
|
||||
$('[data-cmd="open-keyboard"]').href = configureCommands.url;
|
||||
|
||||
// actions
|
||||
document.onclick = e => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user