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

for #55: edit-container-panel colors; delete-container-panel

Browse source
This commit is contained in:
groovecoder 2017-01-12 15:52:28 -06:00
parent 729218b36c
commit faaa3008a8
4 changed files with 86 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.js
View file

@ -12,6 +12,8 @@ const webExtension = require("sdk/webextension");
const windows = require("sdk/windows");
const windowUtils = require("sdk/window/utils");
const IDENTITY_COLORS = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"];
let ContainerService = {
_identitiesState: {},
@ -132,7 +134,7 @@ let ContainerService = {
color = "green";
} else if (identity.color === "#ee5195") {
color = "pink";
} else if (["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"].indexOf(identity.color) !== -1) {
} else if (IDENTITY_COLORS.indexOf(identity.color) !== -1) {
color = identity.color;
} else {
color = "";

16
webextension/css/popup.css
View file

@ -76,7 +76,7 @@ table {
block-size: 16px;
}
.container-panel > table.unstriped tbody tr {
table.unstriped tbody tr {
border-bottom: 1px solid #f1f1f1;
background-color: #fefefe;
cursor: pointer;
@ -226,12 +226,20 @@ table {
cursor: pointer;
}
.edit-containers-panel-footer {
.edit-containers-panel-footer a {
color: #ffffff;
}
.edit-containers-exit-text {
display: flex;
align-items: center;
background: #248aeb;
block-size: 100%;
color: #ffffff;
justify-content: center;
}
.edit-containers-panel-footer a {
color: #ffffff;
.choose-color-icon {
padding-inline-start: 17px;
padding-inline-end: 7px;
}

28
webextension/js/popup.js
View file

@ -173,9 +173,9 @@ function showEditContainersPanel() {
tr.addEventListener("click", e => {
if (e.target.matches(".edit-container-icon")) {
showPanel("#edit-container-panel");
showEditContainerPanel(identity);
} else if (e.target.matches(".delete-container-icon")) {
console.log(`clicked to delete ${identity.userContextId} container`);
showDeleteContainerPanel(identity);
}
});
});
@ -186,6 +186,22 @@ function showEditContainersPanel() {
showPanel("#edit-containers-panel");
}
function showEditContainerPanel(identity) {
document.querySelector("#edit-container-panel-name-input").value = identity.name;
showPanel("#edit-container-panel");
}
function showDeleteContainerPanel(identity) {
// Populating the panel: name and icon
document.getElementById("delete-container-name").innerText = identity.name;
let icon = document.getElementById("delete-container-icon");
icon.setAttribute("data-identity-icon", identity.image);
icon.setAttribute("data-identity-color", identity.color);
showPanel("#delete-container-panel");
}
document.querySelector("#add-container-link").addEventListener("click", () => {
showPanel("#edit-container-panel");
});
@ -206,6 +222,14 @@ document.querySelector("#edit-container-cancel-link").addEventListener("click",
showEditContainersPanel();
});
document.querySelector("#delete-container-panel-back-arrow").addEventListener("click", () => {
showEditContainersPanel();
});
document.querySelector("#delete-container-cancel-link").addEventListener("click", () => {
showEditContainersPanel();
});
document.querySelector("#sort-containers-link").addEventListener("click", () => {
browser.runtime.sendMessage({
method: "sortTabs"

49
webextension/popup.html
View file

@ -80,7 +80,14 @@
<tbody id="edit-identities-list"></tbody>
</table>
<div class="row panel-footer edit-containers-panel-footer">
<a id="exit-edit-mode-link">&lt; Exit Edit Mode</a>
<div class="small-10 columns edit-containers-exit-text">
<a id="exit-edit-mode-link">&lt; Exit Edit Mode</a>
</div>
<div class="small-2 columns add-container">
<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>
@ -94,11 +101,20 @@
<form>
<p>
<label>Name</label>
<input type="text" />
<input type="text" name="container-name" id="edit-container-panel-name-input"/>
</p>
<p>
<label>Choose a color</label>
<input type="text" />
<div id="edit-container-panel-choose-color">
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="blue"></span>
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="turquoise"></span>
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="green"></span>
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="yellow"></span>
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="orange"></span>
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="red"></span>
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="pink"></span>
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="purple"></span>
</div>
</p>
<p>
<label>Choose an icon</label>
@ -107,7 +123,7 @@
</form>
<div class="row">
<div class="small-6 columns footer-columns">
<a class="button expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
<a class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
</div>
<div class="small-6 columns footer-columns">
<a class="button expanded footer-button">OK</a>
@ -117,6 +133,31 @@
</div>
</div>
<div class="hide panel delete-container-panel" id="delete-container-panel">
<div class="row">
<div class="small-2 columns panel-back-arrow clickable" id="close-delete-container-panel">&laquo;</div>
<div class="small-10 columns">
<div class="row container-info-panel-header">
<span class="userContext-icon" id="delete-container-icon" data-identity-icon="" data-identity-color=""></span>
<h3 id="delete-container-name" class="panel-header-text"></h3>
</div>
<div class="row delete-container-confirm">
<h4>Remove This Container</h4>
<p>If you remove this container now, <span id="delete-container-tab-count"></span> container tabs will be closed. Are you sure you want to remove this Container?</p>
</div>
<div class="row">
<div class="small-6 columns footer-columns">
<a class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
</div>
<div class="small-6 columns footer-columns">
<a class="button expanded footer-button">OK</a>
</div>
</div>
</div>
</div>
</div>
<script src="js/popup.js"></script>
</body>
</html>