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

Issue 1670 ui

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 {

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;

src/popup.html

@@ -204,6 +204,11 @@
           <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>