Andrea Marchesini
GitHub
commit
d8abc4a3cc
6 changed files with 373 additions and 64 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -3,3 +3,4 @@ node_modules
|
|||
README.html
|
||||
*.xpi
|
||||
*.swp
|
||||
.vimrc
|
||||
|
|
|
|||
4
index.js
4
index.js
|
|
@ -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 = "";
|
||||
|
|
|
|||
|
|
@ -1,13 +1,32 @@
|
|||
body {
|
||||
background: #FAFAFA;
|
||||
min-inline-size: 200px;
|
||||
max-inline-size: 400px;
|
||||
inline-size: 264px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #248aeb;
|
||||
}
|
||||
|
||||
.panel {
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.panel-row {
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.panel-back-arrow {
|
||||
background: #ebebeb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.onboarding {
|
||||
margin: 16px;
|
||||
min-block-size: 480px;
|
||||
|
|
@ -35,17 +54,29 @@ table {
|
|||
padding: .5em;
|
||||
}
|
||||
|
||||
.header-column {
|
||||
padding: 0;
|
||||
.panel-header {
|
||||
block-size: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel-header-text {
|
||||
font-weight: lighter;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.panel-header-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
max-inline-size: 16px;
|
||||
block-size: 16px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.container-panel > table.unstriped tbody tr {
|
||||
table.unstriped tbody tr {
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
background-color: #fefefe;
|
||||
cursor: pointer;
|
||||
|
|
@ -58,12 +89,15 @@ table {
|
|||
background-size: contain;
|
||||
filter: url('/img/filters.svg#fill');
|
||||
fill: var(--identity-icon-color);
|
||||
inline-size: 32px;
|
||||
block-size: 32px;
|
||||
inline-size: 20px;
|
||||
block-size: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.userContext-icon:hover {
|
||||
background-image: url('/img/container-add.svg');
|
||||
.container-panel-row:hover .userContext-icon {
|
||||
background-image: url('/img/container-newtab.svg');
|
||||
filter: url('/img/filters.svg#fill');
|
||||
fill: 'gray';
|
||||
}
|
||||
|
||||
|
|
@ -71,9 +105,33 @@ table {
|
|||
background: #DCDBDC;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
align-items: center;
|
||||
background: #efefef;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
block-size: 54px;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.footer-columns {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-button {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: #ebebeb;
|
||||
}
|
||||
|
||||
.edit-containers-text {
|
||||
text-align: center;
|
||||
padding: .5em;
|
||||
border-inline-end: solid 1px #d8d8d8;
|
||||
}
|
||||
|
||||
.edit-containers-text a {
|
||||
|
|
@ -140,6 +198,48 @@ table {
|
|||
--identity-icon: url("/img/usercontext.svg#circle");
|
||||
}
|
||||
|
||||
.container-info-has-tabs {
|
||||
.container-info-panel-header {
|
||||
block-size: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-block-end: 1px solid #ebebeb;
|
||||
margin-block-end: 10px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.container-info-panel-hide {
|
||||
margin-bottom: 8px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.container-info-panel-hideorshow-icon {
|
||||
margin-inline-end: 7px;
|
||||
}
|
||||
|
||||
.container-info-panel-movetabs {
|
||||
border-block-end: 1px solid #ebebeb;
|
||||
margin-block-end: 10px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.choose-color-icon {
|
||||
padding-inline-start: 17px;
|
||||
padding-inline-end: 7px;
|
||||
}
|
||||
|
|
|
|||
19
webextension/img/container-newtab.svg
Normal file
19
webextension/img/container-newtab.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#979797;}
|
||||
</style>
|
||||
<title>icon-newtab</title>
|
||||
<g id="Visual-Spec">
|
||||
<g id="Normal-Panel-Hover" transform="translate(-80.000000, -246.000000)">
|
||||
<g id="Panel" transform="translate(58.000000, 170.000000)">
|
||||
<g id="icon-newtab" transform="translate(21.000000, 75.000000)">
|
||||
<path id="Fill-1" class="st0" d="M15.3,11.7h-3.6v3.7h-1.4v-3.7H6.7v-1.6h3.6V6.6h1.4v3.5h3.6C15.3,10.1,15.3,11.7,15.3,11.7z
|
||||
M11,3c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S15.4,3,11,3L11,3z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 883 B |
|
|
@ -2,6 +2,13 @@
|
|||
const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
|
||||
const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
|
||||
|
||||
function showPanel(panelSelector) {
|
||||
for (let panelElement of document.querySelectorAll(".panel")) {
|
||||
panelElement.classList.add("hide");
|
||||
}
|
||||
document.querySelector(panelSelector).classList.remove("hide");
|
||||
}
|
||||
|
||||
function showContainerTabsPanel(identity) {
|
||||
// Populating the panel: name and icon
|
||||
document.getElementById("container-info-name").innerText = identity.name;
|
||||
|
|
@ -16,6 +23,9 @@ function showContainerTabsPanel(identity) {
|
|||
trHasTabs.setAttribute("data-user-context-id", identity.userContextId);
|
||||
}
|
||||
|
||||
let hideOrShowRow = document.querySelector("#container-info-hideorshow");
|
||||
hideOrShowRow.setAttribute("data-user-context-id", identity.userContextId);
|
||||
|
||||
const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
|
||||
hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
|
||||
|
||||
|
|
@ -32,12 +42,14 @@ function showContainerTabsPanel(identity) {
|
|||
method: "getTabs",
|
||||
userContextId: identity.userContextId,
|
||||
}).then(tabs => {
|
||||
console.log('browser.runtime.sendMessage getTabs, tabs: ', tabs);
|
||||
// For each one, let's create a new line.
|
||||
let fragment = document.createDocumentFragment();
|
||||
for (const tab of tabs) {
|
||||
let tr = document.createElement("tr");
|
||||
fragment.appendChild(tr);
|
||||
tr.classList.add("container-info-tab");
|
||||
tr.classList.add("clickable");
|
||||
tr.innerHTML = `
|
||||
<td><img class="icon" src="${tab.favicon}" /></td>
|
||||
<td>${tab.title}</td>`;
|
||||
|
|
@ -64,38 +76,33 @@ function showContainerTabsPanel(identity) {
|
|||
}
|
||||
|
||||
if (localStorage.getItem("onboarded2")) {
|
||||
for (let element of document.querySelectorAll(".onboarding")) {
|
||||
element.classList.add("hide");
|
||||
}
|
||||
document.querySelector("#container-panel").classList.remove("hide");
|
||||
showPanel("#container-panel");
|
||||
} else if (localStorage.getItem("onboarded1")) {
|
||||
document.querySelector(".onboarding-panel-1").classList.add("hide");
|
||||
document.querySelector("#container-panel").classList.add("hide");
|
||||
showPanel(".onboarding-panel-2");
|
||||
} else {
|
||||
document.querySelector(".onboarding-panel-2").classList.add("hide");
|
||||
document.querySelector("#container-panel").classList.add("hide");
|
||||
showPanel(".onboarding-panel-1");
|
||||
}
|
||||
|
||||
document.querySelector("#onboarding-next-button").addEventListener("click", () => {
|
||||
localStorage.setItem("onboarded1", true);
|
||||
document.querySelector(".onboarding-panel-2").classList.remove("hide");
|
||||
document.querySelector(".onboarding-panel-1").classList.add("hide");
|
||||
document.querySelector("#container-panel").classList.add("hide");
|
||||
showPanel(".onboarding-panel-2");
|
||||
});
|
||||
|
||||
document.querySelector("#onboarding-done-button").addEventListener("click", () => {
|
||||
localStorage.setItem("onboarded2", true);
|
||||
document.querySelector(".onboarding-panel-1").classList.add("hide");
|
||||
document.querySelector(".onboarding-panel-2").classList.add("hide");
|
||||
document.querySelector("#container-panel").classList.remove("hide");
|
||||
showPanel("#container-panel");
|
||||
});
|
||||
|
||||
browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
|
||||
console.log('queryIdentities');
|
||||
let fragment = document.createDocumentFragment();
|
||||
|
||||
identities.forEach(identity => {
|
||||
console.log('identities.forEach');
|
||||
let tr = document.createElement("tr");
|
||||
fragment.appendChild(tr);
|
||||
tr.classList.add("container-panel-row");
|
||||
tr.classList.add("clickable");
|
||||
tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
|
|
@ -129,13 +136,98 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
|
|||
document.querySelector(".identities-list").appendChild(fragment);
|
||||
});
|
||||
|
||||
document.querySelector("#edit-containers-link").addEventListener("click", () => {
|
||||
browser.runtime.sendMessage({
|
||||
method: "openTab",
|
||||
url: "about:preferences#containers"
|
||||
}).then(() => {
|
||||
window.close();
|
||||
function showEditContainersPanel() {
|
||||
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.classList.add("clickable");
|
||||
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>`;
|
||||
|
||||
tr.addEventListener("click", e => {
|
||||
if (e.target.matches(".edit-container-icon")) {
|
||||
showEditContainerPanel(identity);
|
||||
} else if (e.target.matches(".delete-container-icon")) {
|
||||
showDeleteContainerPanel(identity);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector("#edit-identities-list").innerHTML = "";
|
||||
document.querySelector("#edit-identities-list").appendChild(fragment);
|
||||
});
|
||||
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");
|
||||
});
|
||||
|
||||
document.querySelector("#edit-containers-link").addEventListener("click", () => {
|
||||
showEditContainersPanel();
|
||||
});
|
||||
|
||||
document.querySelector("#exit-edit-mode-link").addEventListener("click", () => {
|
||||
showPanel("#container-panel");
|
||||
});
|
||||
|
||||
document.querySelector("#edit-container-panel-back-arrow").addEventListener("click", () => {
|
||||
showEditContainersPanel();
|
||||
});
|
||||
|
||||
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", () => {
|
||||
|
|
|
|||
|
|
@ -6,63 +6,158 @@
|
|||
<link rel="stylesheet" href="/css/popup.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1">
|
||||
|
||||
<div class="panel onboarding onboarding-panel-1 hide" id="onboarding-panel-1">
|
||||
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
|
||||
<h3>A better way to manage all the things you do online</h3>
|
||||
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
|
||||
<p class="spacing" ><a href="#">Learn more</a></p>
|
||||
<a href="#" id="onboarding-next-button" class="button expanded">Next</a>
|
||||
</div>
|
||||
<div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2">
|
||||
|
||||
|
||||
<div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
|
||||
<img alt="How Containers Work" src="/img/onboarding-2.png" />
|
||||
<h3>Put containers to work for you.</h3>
|
||||
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
|
||||
<a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="panel container-panel" id="container-panel">
|
||||
<div class="row popup-bumper">
|
||||
<div class="small-2 columns header-column">
|
||||
<img alt="Containers icon" class="icon" src="/img/container-site-d-24.png">
|
||||
<div class="row panel-header">
|
||||
<div class="small-10 columns">
|
||||
<h3 class="panel-header-text">Containers</h3>
|
||||
</div>
|
||||
<div class="small-8 columns">
|
||||
<h4>Containers</h4>
|
||||
</div>
|
||||
<div class="small-2 columns header-column">
|
||||
<div class="small-2 columns panel-header-button">
|
||||
<a id="sort-containers-link"><img alt="Sort Containers" title="Sort Containers" class="icon" src="/img/container-sort.svg"></a>
|
||||
</div>
|
||||
</div>
|
||||
<table class="unstriped hover">
|
||||
<table class="unstriped">
|
||||
<tbody class="identities-list"></tbody>
|
||||
</table>
|
||||
<div class="row popup-bumper edit-identities">
|
||||
<div class="small-12 columns edit-containers-text">
|
||||
<a id="edit-containers-link" href="about:preferences#containers">Edit Containers</a>
|
||||
<div class="row panel-footer edit-identities">
|
||||
<div class="small-10 columns edit-containers-text">
|
||||
<a id="edit-containers-link">Edit Containers</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>
|
||||
|
||||
|
||||
<div class="hide panel container-info-panel" id="container-info-panel">
|
||||
<div class="row popup-bumper">
|
||||
<div class="small-1 columns" id="close-container-info-panel"><</div>
|
||||
<div class="small-11 columns">
|
||||
<table id="container-info-table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="userContext-icon" id="container-info-icon"
|
||||
data-identity-icon="" data-identity-color=""></div></td>
|
||||
<td id="container-info-name"></td>
|
||||
</tr>
|
||||
<tr class="container-info-has-tabs" id="container-info-hideorshow">
|
||||
<td>
|
||||
<img class="icon" id="container-info-hideorshow-icon" src="" />
|
||||
</td>
|
||||
<td id="container-info-hideorshow-label"></td>
|
||||
</tr>
|
||||
<tr class="container-info-has-tabs" id="container-info-movetabs">
|
||||
<td colspan="2">Open all tabs in new window</td>
|
||||
</tr>
|
||||
<div class="row">
|
||||
<div class="small-2 columns panel-back-arrow clickable" id="close-container-info-panel">«</div>
|
||||
<div class="small-10 columns">
|
||||
<div class="row container-info-panel-header">
|
||||
<span class="userContext-icon" id="container-info-icon" data-identity-icon="" data-identity-color=""></span>
|
||||
<h3 id="container-info-name" class="panel-header-text"></h3>
|
||||
</div>
|
||||
<div class="row container-info-panel-hide clickable" id="container-info-hideorshow" data-user-context-id="">
|
||||
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/><span id="container-info-hideorshow-label">Hide this container</span><br/>
|
||||
</div>
|
||||
<div class="row container-info-panel-movetabs clickable" id="container-info-movetabs">
|
||||
Move tabs to a new window
|
||||
</div>
|
||||
<table class="unstriped" id="container-info-table">
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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">
|
||||
<tbody id="edit-identities-list"></tbody>
|
||||
</table>
|
||||
<div class="row panel-footer edit-containers-panel-footer">
|
||||
<div class="small-10 columns edit-containers-exit-text">
|
||||
<a id="exit-edit-mode-link">< 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>
|
||||
|
||||
|
||||
<div class="panel edit-container-panel hide" id="edit-container-panel">
|
||||
<div class="row">
|
||||
<div class="small-2 columns panel-back-arrow" id="edit-container-panel-back-arrow">
|
||||
«
|
||||
</div>
|
||||
<div class="small-10 columns">
|
||||
<form>
|
||||
<p>
|
||||
<label>Name</label>
|
||||
<input type="text" name="container-name" id="edit-container-panel-name-input"/>
|
||||
</p>
|
||||
<p>
|
||||
<label>Choose a color</label>
|
||||
<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>
|
||||
<input type="text" />
|
||||
</p>
|
||||
</form>
|
||||
<div class="row">
|
||||
<div class="small-6 columns footer-columns">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">«</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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue