for #55: more UI spec; start edit-container-panel

webextension/css/popup.css

@@ -9,6 +9,10 @@ table {
   margin-block-end: 0;
 }
 
+.button {
+  background: #248aeb;
+}
+
 .panel {
   height: 100%;
 }
@@ -17,6 +21,13 @@ table {
   height: 100%;
 }
 
+.panel-back-arrow {
+  background: #ebebeb;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
 .onboarding {
   margin: 16px;
   min-block-size: 480px;
@@ -102,6 +113,20 @@ table {
   width: 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;
   border-right: solid 1px #d8d8d8;

webextension/js/popup.js

@@ -127,7 +127,7 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
   document.querySelector(".identities-list").appendChild(fragment);
 });
 
-document.querySelector("#edit-containers-link").addEventListener("click", () => {
+function showEditContainersPanel() {
   browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
     let fragment = document.createDocumentFragment();
 
@@ -159,12 +159,11 @@ document.querySelector("#edit-containers-link").addEventListener("click", () =>
             class="icon delete-container-icon"
             src="/img/container-delete.svg"
           />
-        </td>
-        <td>&gt;</td>`;
+        </td>`;
 
       tr.addEventListener("click", e => {
         if (e.target.matches(".edit-container-icon")) {
-          console.log(`clicked to edit ${identity.userContextId} container`);
+          showPanel("#edit-container-panel");
         } else if (e.target.matches(".delete-container-icon")) {
           console.log(`clicked to delete ${identity.userContextId} container`);
         }
@@ -175,12 +174,28 @@ document.querySelector("#edit-containers-link").addEventListener("click", () =>
     document.querySelector("#edit-identities-list").appendChild(fragment);
   });
   showPanel("#edit-containers-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("#sort-containers-link").addEventListener("click", () => {
   browser.runtime.sendMessage({
     method: "sortTabs"

webextension/popup.html

@@ -88,6 +88,37 @@
     </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">
+        &laquo;
+      </div>
+      <div class="small-10 columns">
+        <form>
+          <p>
+            <label>Name</label>
+            <input type="text" />
+          </p>
+          <p>
+            <label>Choose a color</label>
+            <input type="text" />
+          </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 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>
 
   <script src="js/popup.js"></script>
 </body>