Merge pull request #602 from jonathanKingston/edit-restyle

Edit restyle
2017-06-20 10:18:46 -05:00 · 2017-06-20 10:18:46 -05:00 · 13cd601212
commit 13cd601212
parent 6533c74d0a bc847b53f5
4 changed files with 118 additions and 51 deletions
--- a/webextension/background.js
+++ b/webextension/background.js
@ -339,7 +339,7 @@ const backgroundLogic = {

  createOrUpdateContainer(options) {
    let donePromise;
-    if (options.userContextId) {
+    if (options.userContextId !== "new") {
      donePromise = browser.contextualIdentities.update(
        this.cookieStoreId(options.userContextId),
        options.params
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@ -91,6 +91,10 @@ table {
  opacity: 0;
 }

+[hidden] {
+  display: none !important;
+}
+
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
  mask-image: linear-gradient(to left, transparent, black 1em);
@ -114,6 +118,11 @@ table {
  --identity-icon-color: #51cd00;
 }

+[data-identity-color="grey"] {
+  /* Only used for the edit panel */
+  --identity-icon-color: #616161;
+}
+
 [data-identity-color="yellow"] {
  --identity-tab-color: #ffcb00;
  --identity-icon-color: #ffcb00;
@ -757,55 +766,88 @@ span ~ .panel-header-text {
 #edit-sites-assigned h3 {
  font-size: 14px;
  font-weight: normal;
-  padding-block-end: 5px;
+  padding-block-end: 6px;
+  padding-block-start: 6px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
 }

-#edit-sites-assigned table td {
+.assigned-sites-list > div {
  display: flex;
-  padding-inline-end: 16px;
-  padding-inline-start: 16px;
+  padding-block-end: 6px;
+  padding-block-start: 6px;
 }

-#edit-sites-assigned .delete-assignment {
+.assigned-sites-list > div > .icon {
+  margin-inline-end: 10px;
+}
+
+.assigned-sites-list > div > .delete-assignment {
  display: none;
 }

-#edit-sites-assigned tr:hover > td > .delete-assignment {
+.assigned-sites-list > div:hover > .delete-assignment {
  display: block;
 }

-.column-panel-content form span {
-  align-items: center;
-  block-size: 44px;
-  display: flex;
-  flex: 0 0 25%;
-  justify-content: center;
+.assigned-sites-list > div > .hostname {
+  flex: 1;
 }

-.edit-container-panel label {
+.radio-choice > .radio-container {
+  align-items: center;
+  block-size: 29px;
+  display: flex;
+  flex: 0 0 calc(100% / 8);
+}
+
+.radio-choice > .radio-container > label {
+  background: none;
+  block-size: 23px;
+  border: 0;
+  filter: none;
+  inline-size: 23px;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.radio-choice > .radio-container > label::before {
+  background-color: unset;
  background-image: var(--identity-icon);
-  background-size: 26px 26px;
-  block-size: 34px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  block-size: 23px;
+  border: none;
+  content: "";
+  display: block;
  fill: var(--identity-icon-color);
  filter: url('/img/filters.svg#fill');
-  flex: 0 0 34px;
+  inline-size: 23px;
  position: relative;
 }

-.edit-container-panel label::before {
-  opacity: 0 !important;
-}
-
-.edit-container-panel [type="radio"] {
+.radio-choice > .radio-container > [type="radio"] {
+  -moz-appearance: none;
  display: inline;
  opacity: 0;
 }

-.edit-container-panel [type="radio"]:checked + label {
-  outline: 2px solid grey;
-  -moz-outline-radius: 50px;
+.radio-choice > .radio-container > [type="radio"]:checked + label {
+  background: #d3d3d3;
+  border-radius: 100%;
+}
+
+/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
+.radio-choice > .radio-container > [type="radio"]:focus + label {
+  outline: 1px solid #1f9ffc;
+  -moz-outline-radius: 100%;
 }

 .edit-container-panel fieldset {
@ -842,5 +884,5 @@ span ~ .panel-header-text {
 .edit-container-panel legend {
  flex: 1 0;
  font-size: 14px !important;
-  padding-block-end: 5px;
+  padding-block-end: 6px;
 }
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@ -7,6 +7,7 @@ const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";

 const DEFAULT_COLOR = "blue";
 const DEFAULT_ICON = "circle";
+const NEW_CONTAINER_ID = "new";

 // List of panels
 const P_ONBOARDING_1     = "onboarding1";
@ -750,10 +751,30 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
    this.initializeRadioButtons();

    Logic.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => {
+      const formValues = new FormData(this._editForm);
+      if (formValues.get("container-id") !== NEW_CONTAINER_ID) {
+        this._submitForm();
+      } else {
+        Logic.showPreviousPanel();
+      }
+    });
+
+    Logic.addEnterHandler(document.querySelector("#edit-container-cancel-link"), () => {
+      Logic.showPreviousPanel();
+    });
+
+    this._editForm = document.getElementById("edit-container-panel-form");
+    const editLink = document.querySelector("#edit-container-ok-link");
+    Logic.addEnterHandler(editLink, () => {
      this._submitForm();
    });
-    this._editForm = document.getElementById("edit-container-panel-form");
-    this._editForm.addEventListener("submit", this._submitForm.bind(this));
+    editLink.addEventListener("submit", () => {
+      this._submitForm();
+    });
+    this._editForm.addEventListener("submit", () => {
+      this._submitForm();
+    });
+

  },

@ -762,7 +783,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
    return browser.runtime.sendMessage({
      method: "createOrUpdateContainer",
      message: {
-        userContextId: Logic.currentUserContextId() || false,
+        userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
        params: {
          name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
          icon: formValues.get("container-icon") || DEFAULT_ICON,
@ -783,7 +804,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
    const assignmentKeys = Object.keys(assignments);
    assignmentPanel.hidden = !(assignmentKeys.length > 0);
    if (assignments) {
-      const tableElement = assignmentPanel.querySelector("table > tbody");
+      const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
      /* Remove previous assignment list,
         after removing one we rerender the list */
      while (tableElement.firstChild) {
@ -791,18 +812,19 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
      }
      assignmentKeys.forEach((siteKey) => {
        const site = assignments[siteKey];
-        const trElement = document.createElement("tr");
+        const trElement = document.createElement("div");
        /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
           This is pending a better solution for favicons from web extensions */
        const assumedUrl = `https://${site.hostname}`;
        trElement.innerHTML = escaped`
-        <td><img class="icon" src="${assumedUrl}/favicon.ico"></td>
-        <td title="${site.hostname}" class="truncate-text">${site.hostname}
-          <img
-            class="pop-button-image delete-assignment"
-            src="/img/container-delete.svg"
-          />
-        </td>`;
+        <img class="icon" src="${assumedUrl}/favicon.ico">
+        <div title="${site.hostname}" class="truncate-text hostname">
+          ${site.hostname}
+        </div>
+        <img
+          class="pop-button-image delete-assignment"
+          src="/img/container-delete.svg"
+        />`;
        const deleteButton = trElement.querySelector(".delete-assignment");
        Logic.addEnterHandler(deleteButton, () => {
          const userContextId = Logic.currentUserContextId();
@ -830,7 +852,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
    const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
    const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
    colors.forEach((containerColor) => {
-      const templateInstance = document.createElement("span");
+      const templateInstance = document.createElement("div");
+      templateInstance.classList.add("radio-container");
      // eslint-disable-next-line no-unsanitized/property
      templateInstance.innerHTML = colorRadioTemplate(containerColor);
      colorRadioFieldset.appendChild(templateInstance);
@ -843,7 +866,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
    const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle"];
    const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
    icons.forEach((containerIcon) => {
-      const templateInstance = document.createElement("span");
+      const templateInstance = document.createElement("div");
+      templateInstance.classList.add("radio-container");
      // eslint-disable-next-line no-unsanitized/property
      templateInstance.innerHTML = iconRadioTemplate(containerIcon);
      iconRadioFieldset.appendChild(templateInstance);
@ -857,8 +881,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
    const userContextId = Logic.currentUserContextId();
    const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
    this.showAssignedContainers(assignments);
+    document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;

    document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
+    document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
    [...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
      colorInput.checked = colorInput.value === identity.color;
    });
--- a/webextension/popup.html
+++ b/webextension/popup.html
@ -115,27 +115,26 @@
      </div>
      <div class="column-panel-content">
        <form id="edit-container-panel-form">
+          <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
          <fieldset>
            <legend>Name</legend>
            <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
          </fieldset>
-          <fieldset id="edit-container-panel-choose-color">
+          <fieldset id="edit-container-panel-choose-color" class="radio-choice">
            <legend>Choose a color</legend>
          </fieldset>
-          <fieldset id="edit-container-panel-choose-icon">
+          <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
            <legend>Choose an icon</legend>
          </fieldset>
        </form>
        <div id="edit-sites-assigned" class="scrollable" hidden>
-          <table id="container-assignement-table" class="container-info-list">
-            <thead>
-              <th colspan="3">
-                <h3>Sites assigned to this container</h3>
-              </th>
-            </thead>
-            <tbody>
-            </tbody>
-          </table>
+          <h3>Sites assigned to this container</h3>
+          <div class="assigned-sites-list">
+          </div>
+        </div>
+        <div class="panel-footer">
+          <a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
+          <a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
        </div>
      </div>
    </div>