Cleaned options page, save button no longer needed

This commit is contained in:
Joe Jarvis 2017-04-09 18:31:09 -04:00
parent 3b1faa217f
commit 582936eab4
5 changed files with 42 additions and 12 deletions

View file

@ -1,6 +1,6 @@
browser.idle.onStateChanged.addListener((state) => {
if (state === 'idle') {
browser.storage.local.get('days').then((res) => {
if (state === "idle") {
browser.storage.local.get("days").then((res) => {
var days = parseInt(res.days) || 0;
if (days !== 0) {
var end = new Date();

View file

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "History Cleaner",
"version": "1.2.1",
"version": "1.2.2",
"description": "Deletes history older than a specified amount of days.",
"applications": {
"gecko": {
@ -21,6 +21,7 @@
"idle"
],
"options_ui": {
"page": "options.html"
"page": "options.html",
"browser_style": true
}
}

24
extension/options.css Normal file
View file

@ -0,0 +1,24 @@
body, input {
font-size: 1.25rem;
}
#box {
align-items: center;
display: flex;
float: left;
}
#labels {
float: left;
width: 50%;
}
#settings {
float: right;
width: 50%;
}
span {
line-height: 30px;
}
input {
height: 30px;
text-align: right;
width: 100%;
}

View file

@ -2,12 +2,17 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="options.css">
</head>
<body>
<form>
<label>Number of days to keep history (set to 0 to disable): <input id="days" type="number" min="0"></label>
<input id="submit" type="submit" value="Save">
</form>
<div id="box">
<div id="labels">
<span>Number of days to keep history (set to 0 to disable)</span>
</div>
<div id="settings">
<input id="days" type="number" min="0">
</div>
</div>
<script src="options.js"></script>
</body>
</html>

View file

@ -1,11 +1,11 @@
function saveOptions(e) {
function updateDays(e) {
browser.storage.local.set({days: document.querySelector("#days").value});
e.preventDefault();
}
function restoreOptions() {
browser.storage.local.get('days').then((res) => {
browser.storage.local.get().then((res) => {
document.querySelector("#days").value = res.days || 0;
});
}
document.addEventListener('DOMContentLoaded', restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
document.addEventListener("DOMContentLoaded", restoreOptions);
document.getElementById("days").addEventListener("input", updateDays);