From 13a3876d56ebc38047c8b11503adb1204ca517e4 Mon Sep 17 00:00:00 2001 From: Johannes Zellner Date: Mon, 6 Nov 2017 01:29:24 +0100 Subject: [PATCH] Restyle the options panel In preparation with firefox changes towards Photon, the buttons and input fields follow the current state of the Photon syle guidlines --- extension/options.css | 84 ++++++++++++++++++++++++--------- extension/options.html | 44 +++++++---------- extension/options.js | 105 +++++++++++++++++++---------------------- 3 files changed, 129 insertions(+), 104 deletions(-) diff --git a/extension/options.css b/extension/options.css index 36f900a..ffe48ff 100644 --- a/extension/options.css +++ b/extension/options.css @@ -1,27 +1,6 @@ body { - font-size: 1.25rem; background-color: #F9F9FA } -#form, #sites { - padding: 0.3125rem; -} -input { - margin-left: 0.625rem; - margin-right: 0.625rem; -} -table { - border-collapse: collapse; - border: 1px solid #c1c1c1; - margin-top: 0.625rem; - margin-bottom: 0.625rem; - width: 100%; -} -td { - text-align: center; -} -table input { - width: 100%; -} #changeKey, #deleteSite { position: fixed; left: 0; @@ -39,3 +18,66 @@ table input { .subHidden { text-align: center; } + +h3 { + margin-top: 40px; +} + +.list { + display: flex; + flex-direction: column; + width: 100%; +} +.row { + display: flex; + flex-grow: 1; +} + +/* http://design.firefox.com/photon/components/buttons.html */ +button, .button { + display: inline-block; + min-width: 100px; + text-align: center; + height: 32px; + padding: 8px; + margin: 5px; + font-size: 13px; + color: rgba(12, 12, 13, 1); + background-color: rgba(12, 12, 13, 0.1); + border: none; + border-radius: 2px; +} +button:hover, .button:hover { + background-color: rgba(12, 12, 13, 0.2); +} +button:active, .button:active { + background-color: rgba(12, 12, 13, 0.3); +} + +button.primary { + color: #ffffff; + background-color: #0060df; +} +button.primary:hover { + background-color: #003eaa; +} +button.primary:active { + background-color: #002275; +} + +/* http://design.firefox.com/photon/components/input-fields.html */ +input { + height: 32px; + border-style: solid; + border-radius: 2px; + border-width: 1px; + border-color: rgba(12, 12, 13, 0.3); + margin: 5px; + padding-left: 10px; +} +input:hover { + border-color: rgba(12, 12, 13, 0.5); +} +input:focus { + border-color: rgba(12, 12, 13, 0.5); +} \ No newline at end of file diff --git a/extension/options.html b/extension/options.html index 33d3f3b..2144a60 100644 --- a/extension/options.html +++ b/extension/options.html @@ -18,34 +18,24 @@ - - - - - - -
NameSecret KeyDelete
- - - - - - - - - - - -
- Name - - Secret Key - - Submit -
+ +

Configured Sites

+
+
+ +

Add Site

+
+
+ + + +
+
+ +

Extras

- Export:
- Import: + +
diff --git a/extension/options.js b/extension/options.js index 7a21617..3f3f7e0 100644 --- a/extension/options.js +++ b/extension/options.js @@ -13,10 +13,42 @@ const newKey = document.getElementById("newKey"); const makeNew = document.getElementById("makeNew"); const exportButton = document.getElementById("export"); const importButton = document.getElementById("import"); + +// UI helper +function createSiteRow(siteInfo, index) { + var row = document.createElement('div'); + row.className = 'row'; + row.id = index; + sites.appendChild(row); + + var elem = document.createElement('input'); + elem.style['flex-grow'] = 1; + elem.type = 'text'; + elem.value = siteInfo.name; + elem.addEventListener('change', changeName.bind(null, index)); + row.appendChild(elem); + + elem = document.createElement('button'); + elem.innerText = 'Change Secret Key'; + elem.addEventListener('click', modifySite.bind(null, index)); + row.appendChild(elem); + + elem = document.createElement('button'); + elem.innerText = 'Delete'; + elem.addEventListener('click', deleteKey.bind(null, index)); + row.appendChild(elem); +} + +function removeSiteRow(index) { + // use index+1 as the first is an empty text node + sites.removeChild(sites.childNodes[index+1]); +} + async function exportSettings() { var res = await browser.storage.local.get(); exportButton.href = "data:text/json;charset=utf-8," + JSON.stringify(res); } + function importSettings() { var reader = new FileReader(); reader.addEventListener("load", () => { @@ -30,53 +62,28 @@ function importSettings() { var file = this.files[0]; reader.readAsText(file); } + async function restoreOptions() { exportSettings(); var res = await browser.storage.local.get("otp_list"); - for (var item of res.otp_list) { - createRow([ - { - element: "input", - type: "text", - text: item.name, - listener: ["change", changeName] - }, - { - element: "button", - text: "Change Key", - listener: ["click", modifySite] - }, - { - element: "button", - text: "Delete", - listener: ["click", deleteKey] - } - ], sites); - } -} -function getRowIndex(element) { - return [...sites.children[0].children].indexOf(element.parentNode.parentNode) - 1; + res.otp_list.forEach(createSiteRow); } -async function changeName() { + +async function changeName(index, event) { + console.log(arguments) var res = await browser.storage.local.get("otp_list"); - var index = getRowIndex(this); - console.log(index); - if (index > -1) { - res.otp_list[index].name = this.value; - browser.storage.local.set(res); - } + res.otp_list[index].name = event.target.value; + browser.storage.local.set(res); } -async function modifySite() { +async function modifySite(index) { var res = await browser.storage.local.get("otp_list"); - var index = getRowIndex(this); keyname.innerText = res.otp_list[index].name; submitChange.dataset.index = index; key.focus(); changeKey.style.width = "100%"; } -async function deleteKey() { +async function deleteKey(index) { var res = await browser.storage.local.get("otp_list"); - var index = getRowIndex(this); sitename.innerText = res.otp_list[index].name; yes.dataset.index = index; deleteSite.style.width = "100%"; @@ -87,9 +94,9 @@ function closeOverlays() { } async function removeSite() { var res = await browser.storage.local.get("otp_list"); - res.otp_list.splice(this.dataset.index, 1) + res.otp_list.splice(this.dataset.index, 1); browser.storage.local.set(res); - sites.deleteRow(parseInt(this.dataset.index) + 1) + removeSiteRow(parseInt(this.dataset.index)); closeOverlays(); } async function submitKeyChange() { @@ -101,29 +108,15 @@ async function submitKeyChange() { } async function addSite() { var res = await browser.storage.local.get("otp_list"); - res.otp_list.push({ + var site = { name: newName.value, key: newKey.value.replace(/\s/g, "") - }); + }; + res.otp_list.push(site); browser.storage.local.set(res); - createRow([ - { - element: "input", - type: "text", - text: newName.value, - listener: ["change", changeName] - }, - { - element: "button", - text: "Change Key", - listener: ["click", modifySite] - }, - { - element: "button", - text: "Delete", - listener: ["click", deleteKey] - } - ], sites); + + createSiteRow(site, res.otp_list.length-1); + newName.value = ""; newKey.value = ""; }