Skip to content

Commit

Permalink
Restyle the options panel
Browse files Browse the repository at this point in the history 
In preparation with firefox changes towards Photon, the buttons and
input fields follow the current state of the Photon syle guidlines
  • Loading branch information
@nebulade
nebulade committed Nov 6, 2017
1 parent e74d56f commit 13a3876
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 104 deletions.
84 changes: 63 additions & 21 deletions extension/options.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}
44 changes: 17 additions & 27 deletions extension/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,34 +18,24 @@
<button id="yes">Yes</button><button id="no">No</button>
</div>
</div>
<table border="0" id="sites">
<tr>
<th>Name</th>
<th>Secret Key</th>
<th>Delete</th>
</tr>
</table>
<table border="0">
<tr>
<th>
Name
</th>
<th>
Secret Key
</th>
<th>
Submit
</th>
</tr>
<tr>
<td><input type="text" id="newName"></td>
<td><input type="text" id="newKey"></td>
<td><button id="makeNew">Add</button></td>
</tr>
</table>

<h3>Configured Sites</h3>
<div id="sites" class="list">
</div>

<h3>Add Site</h3>
<div class="list">
<div class="row">
<input type="text" id="newName" placeholder="Name" style="flex-grow: 1;">
<input type="text" id="newKey" placeholder="Secret Key" style="flex-grow: 1;">
<button id="makeNew" class="primary">Add</button>
</div>
</div>

<h3>Extras</h3>
<div id="extras">
Export: <a id="export" download="totp.json"><button>Export</button></a><br>
Import: <input type="file" id="import" accept=".json">
<a id="export" download="totp.json"><button>Export</button></a>
<label class="button" for="import">Import</label><input type="file" id="import" accept=".json" style="display: none;">
</div>
<script src="createRow.js"></script>
<script src="options.js"></script>
Expand Down
105 changes: 49 additions & 56 deletions extension/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand All @@ -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%";
Expand All @@ -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() {
Expand All @@ -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 = "";
}
Expand Down

0 comments on commit 13a3876

Please sign in to comment.