rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

for #55: edit-containers-panel with live list

Browse source
This commit is contained in:
groovecoder 2017-01-10 13:22:07 -06:00
parent 5ca4403070
commit 962cd623b8
3 changed files with 55 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webextension/css/popup.css
View file

@ -175,12 +175,12 @@ table {
cursor: pointer;
}
.edit-panel-footer {
.edit-containers-panel-footer {
background: #248aeb;
color: #ffffff;
justify-content: center;
}
.edit-panel-footer a {
.edit-containers-panel-footer a {
color: #ffffff;
}

48
webextension/js/popup.js
View file

@ -128,7 +128,53 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
});
document.querySelector("#edit-containers-link").addEventListener("click", () => {
showPanel("#edit-panel");
browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
let fragment = document.createDocumentFragment();
identities.forEach(identity => {
let tr = document.createElement("tr");
fragment.appendChild(tr);
tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
tr.innerHTML = `
<td>
<div class="userContext-icon"
data-identity-icon="${identity.image}"
data-identity-color="${identity.color}">
</div>
</td>
<td>${identity.name}</td>
<td class="edit-container">
<img
title="Edit ${identity.name} container"
data-identity-cookie-store-id="${identity.userContextId}"
id="edit-${identity.userContextId}-container-icon"
src="/img/container-edit.svg"
class="icon edit-container-icon" />
</td>
<td class="remove-container" >
<img
title="Remove ${identity.name} container"
data-identity-cookie-store-id="${identity.userContextId}"
id="delete-${identity.userContextId}-container-icon"
class="icon delete-container-icon"
src="/img/container-delete.svg"
/>
</td>
<td>&gt;</td>`;
tr.addEventListener("click", e => {
if (e.target.matches(".edit-container-icon")) {
console.log(`clicked to edit ${identity.userContextId} container`);
} else if (e.target.matches(".delete-container-icon")) {
console.log(`clicked to delete ${identity.userContextId} container`);
}
});
});
document.querySelector("#edit-identities-list").innerHTML = "";
document.querySelector("#edit-identities-list").appendChild(fragment);
});
showPanel("#edit-containers-panel");
});
document.querySelector("#exit-edit-mode-link").addEventListener("click", () => {

10
webextension/popup.html
View file

@ -41,22 +41,24 @@
<a id="edit-containers-link">Edit Containers</a>
</div>
<div class="small-2 columns add-container">
&plus;
<a id="add-container-link">
<img alt="Create new container icon" title="Create new container" src="/img/container-add.svg" class="icon" />
</a>
</div>
</div>
</div>
<div class="panel edit-panel hide" id="edit-panel">
<div class="panel edit-containers-panel hide" id="edit-containers-panel">
<div class="row panel-header">
<div class="small-12 columns">
<h3 class="panel-header-text">Edit Containers</h3>
</div>
</div>
<table class="unstriped hover">
<tbody class="edit-identities-list"></tbody>
<tbody id="edit-identities-list"></tbody>
</table>
<div class="row panel-footer edit-panel-footer">
<div class="row panel-footer edit-containers-panel-footer">
<a id="exit-edit-mode-link">&lt; Exit Edit Mode</a>
</div>
</div>