open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

OptionsUI: restructure html, make it userstylable

Browse Source
This commit is contained in:
tophf 2017-03-28 03:42:07 +03:00
parent 0c6b74d999
commit 4dd8066ca4
4 changed files with 118 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_locales/en/messages.json
View File

@ -496,6 +496,12 @@
"optionsActions": { "optionsActions": {
"message": "Actions" "message": "Actions"
}, },
"optionsSave": {
"message": "Save"
},
"optionsSaved": {
"message": "Options saved."
},
"optionsOpenManager": { "optionsOpenManager": {
"message": "Open styles manager" "message": "Open styles manager"
}, },

88
options/index.css
View File

@ -1,22 +1,102 @@
body { body {
margin: 10px; margin: 0;
font-family: "Helvetica Neue",Helvetica,sans-serif; font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
display: flex;
flex-direction: column;
}
body > * {
padding: 1em 1rem 1em 44px;
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse;
} }
td {
padding: 2px 0;
}
td:last-child { td:last-child {
text-align: right; text-align: right;
} }
input[type=number], a {
text-decoration-skip: ink;
}
button { button {
text-align: center;
width: 80px; 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%; font-size: 90%;
color: #999; 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 }
}

47
options/index.html
View File

@ -3,13 +3,16 @@
<head> <head>
<title>Stylus Options</title> <title>Stylus Options</title>
<link rel="stylesheet" href="index.css"> <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> </head>
<body> <body>
<h1 i18n-text="optionsCustomize"></h1> <div id="ui">
<table> <h1 i18n-text="optionsCustomize"></h1>
<tbody> <table>
<tr> <tr>
<td i18n-text="optionsBadgeNormal"></td> <td i18n-text="optionsBadgeNormal"></td>
<td><input type="color" id="badgeNormal"></td> <td><input type="color" id="badgeNormal"></td>
@ -26,16 +29,16 @@
<td i18n-text="optionsUpdateInterval"><sup>1</sup></td> <td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
<td><input type="number" min="0" id="updateInterval"></td> <td><input type="number" min="0" id="updateInterval"></td>
</tr> </tr>
</tbody> </table>
</table> <div id="save">
<div> <button id="save-button" i18n-text="optionsSave"></button>
<button id="save">Save</button> <div id="save-status" i18n-text="optionsSaved"></div>
<span id="status"></span> </div>
</div> </div>
<h1 i18n-text="optionsActions"></h1> <div id="actions">
<table> <h1 i18n-text="optionsActions"></h1>
<tbody> <table>
<tr> <tr>
<td i18n-text="optionsOpenManager"><sup>2</sup></td> <td i18n-text="optionsOpenManager"><sup>2</sup></td>
<td><button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button></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> <button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
</td> </td>
</tr> </tr>
</tbody> </table>
</table> </div>
<div class="notes">
<hr> <div id="notes">
1: <span i18n-text="optionsUpdateIntervalNote"></span> <ol>
<br> <li i18n-text="optionsUpdateIntervalNote"></li>
2: <span i18n-text="optionsOpenManagerNote"></span>, <a href="#" data-cmd="open-keyboard">chrome://extensions/configureCommands</a> <li><a data-cmd="open-keyboard"
i18n-text="optionsOpenManagerNote"
href="chrome://extensions/configureCommands"></a>
</li>
</ol>
</div> </div>
<script src="/messaging.js"></script>
<script src="/dom.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

8
options/index.js
View File

@ -21,10 +21,7 @@ function save() {
'updateInterval', 'updateInterval',
Math.max(0, Number($('#updateInterval').value)) Math.max(0, Number($('#updateInterval').value))
); );
// display notification animateElement($('#save-status'), {className: 'fadeinout'});
const status = $('#status');
status.textContent = 'Options saved.';
setTimeout(() => (status.textContent = ''), 750);
}); });
} }
@ -47,8 +44,7 @@ onDOMready().then(restore);
$('#save').onclick = save; $('#save').onclick = save;
// overwrite the default URL if browser is Opera // overwrite the default URL if browser is Opera
$('[data-cmd="open-keyboard"]').textContent = $('[data-cmd="open-keyboard"]').href = configureCommands.url;
configureCommands.url;
// actions // actions
document.onclick = e => { document.onclick = e => {