Merge pull request mozilla#1 from CSCD01/issue-1670-ui

Issue 1670 ui
kurahaupo · Mar 7, 2020 · ace5f50 · ace5f50
2 parents ae1f80b + f2b4262
commit ace5f50
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -951,6 +951,20 @@ span ~ .panel-header-text {
   padding-block-start: 5px;
   padding-inline-end: 5px;
   padding-inline-start: 5px;
+
+}
+
+.edit-container-panel input[type="text"]#edit-container-panel-site-input {
+  inline-size: 80%;
+}
+
+#edit-container-site-link {
+  block-size: 36px;
+  background: #ebebeb;
+}
+
+#edit-container-site-link:hover {
+  background: #e3e3e3;
 }
 
 .edit-container-panel legend {

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -1054,6 +1054,11 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       this._submitForm();
     });
 
+    // Add new site to current container
+    const siteLink = document.querySelector("#edit-container-site-link");
+    Logic.addEnterHandler(siteLink, () => {
+      this._addSite();
+    });
 
   },
 
@@ -1078,6 +1083,12 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     }
   },
 
+  async _addSite() {
+    const formValues = new FormData(this._editForm);
+    console.log(formValues.get("container-id"));
+    console.log(formValues.get("site-name"));
+  },
+
   showAssignedContainers(assignments) {
     const assignmentPanel = document.getElementById("edit-sites-assigned");
     const assignmentKeys = Object.keys(assignments);
@@ -1161,6 +1172,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
     this.showAssignedContainers(assignments);
     document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
+    // Only show ability to add site if it's an existing container
+    document.querySelector("#edit-container-panel-add-site").hidden = !userContextId;
 
     document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
     document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;

diff --git a/src/popup.html b/src/popup.html
@@ -204,6 +204,11 @@ <h3 class="panel-header-text">Edit Containers</h3>
           <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
             <legend>Choose an icon</legend>
           </fieldset>
+          <fieldset id="edit-container-panel-add-site" hidden>
+            <legend>Assign site</legend>
+            <input type="text" name="site-name" id="edit-container-panel-site-input"/>
+            <a class="button secondary" id="edit-container-site-link">Add</a>
+          </fieldset>
         </form>
         <div id="edit-sites-assigned" class="scrollable" hidden>
           <h3>Sites assigned to this container</h3>