From 85e211a14bd2d381be0cb51871a29f5821429abf Mon Sep 17 00:00:00 2001 From: luke crouch Date: Thu, 2 Feb 2017 12:59:23 -0600 Subject: [PATCH] for #94, for #95: more ui updates (#129) * for #94, for #95: more ui updates * fix #95: fix "name" input; inset the panel shadow --- webextension/css/popup.css | 50 ++++++++++++++++++++++++++++ webextension/img/container-arrow.svg | 9 +++++ webextension/js/popup.js | 10 +++--- webextension/popup.html | 34 +++++++++---------- 4 files changed, 80 insertions(+), 23 deletions(-) create mode 100644 webextension/img/container-arrow.svg diff --git a/webextension/css/popup.css b/webextension/css/popup.css index d8d8e58..fcbd883 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -22,11 +22,16 @@ table { .panel-back-arrow { background: #ebebeb; + box-shadow: inset -2px 0 2px -2px black; display: flex; justify-content: center; text-align: center; } +.back-arrow-img { + transform: scaleX(-1); +} + .onboarding { align-items: center; display: flex; @@ -269,6 +274,11 @@ table.unstriped tbody tr { --identity-icon: url("/img/usercontext.svg#circle"); } +.show-tabs-img { + block-size: 12px; + inline-size: 12px; +} + .container-info-panel-header { align-items: center; block-size: 33px; @@ -302,6 +312,20 @@ table.unstriped tbody tr { padding-inline-start: 20px; } +.container-info-tab-row { + display: block; + margin-block-end: 8px; +} + +.container-info-tab-title { + font-size: 12px; + max-inline-size: 13em; + overflow: hidden; + padding-inline-start: 7px; + text-overflow: ellipsis; + white-space: nowrap; +} + .clickable { cursor: pointer; } @@ -319,6 +343,32 @@ table.unstriped tbody tr { justify-content: center; } +.exit-edit-mode-link::before { + background: url('/img/container-arrow.svg') no-repeat; + block-size: 16px; + content: ""; + display: block; + filter: grayscale(100%) brightness(5); + float: left; + inline-size: 16px; + margin-inline-end: 5px; + transform: scaleX(-1); +} + +.exit-edit-mode-link { + float: left; +} + +.delete-container-confirm { + padding-inline-end: 20px; + padding-inline-start: 20px; +} + +.delete-container-confirm-title { + color: #000; + font-size: 16px; +} + .choose-color-icon { padding-inline-end: 7px; padding-inline-start: 17px; diff --git a/webextension/img/container-arrow.svg b/webextension/img/container-arrow.svg new file mode 100644 index 0000000..2a4e2ba --- /dev/null +++ b/webextension/img/container-arrow.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/webextension/js/popup.js b/webextension/js/popup.js index d494a20..9e26b65 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -233,7 +233,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, { ${identity.name} - >`; + `; tr.addEventListener("click", e => { if (e.target.matches(".open-newtab")) { @@ -250,7 +250,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, { }).catch(() => { window.close(); }); - } else if (e.target.matches(".info")) { + } else if (e.target.matches(".show-tabs")) { Logic.showPanel(P_CONTAINER_INFO, identity); } }); @@ -322,7 +322,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { hideShowLabel.innerText = identity.hasHiddenTabs ? "Show these container tabs" : "Hide these container tabs"; // Let's remove all the previous tabs. - for (let trTab of document.getElementsByClassName("container-info-tab")) { // eslint-disable-line prefer-const + for (let trTab of document.getElementsByClassName("container-info-tab-row")) { // eslint-disable-line prefer-const trTab.remove(); } @@ -339,10 +339,10 @@ Logic.registerPanel(P_CONTAINER_INFO, { for (let tab of tabs) { // eslint-disable-line prefer-const const tr = document.createElement("tr"); fragment.appendChild(tr); - tr.classList.add("container-info-tab"); + tr.classList.add("container-info-tab-row"); tr.innerHTML = ` - ${tab.title}`; + ${tab.title}`; // On click, we activate this tab. But only if this tab is active. if (tab.active) { diff --git a/webextension/popup.html b/webextension/popup.html index 2342d03..087fb99 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -62,7 +62,9 @@
-
«
+
+ Panel Back Arrow +
@@ -96,7 +98,7 @@
- < Exit Edit Mode + Exit Edit Mode
@@ -109,25 +111,21 @@
-
- « +
+ Panel Back Arrow
-

- +

+ Name -

-

-

- Choose a color -
-

-

-

- Choose an icon -
-

+
+
+ Choose a color +
+
+ Choose an icon +
@@ -149,7 +147,7 @@

-

Remove This Container

+

Remove This Container

If you remove this container now, container tabs will be closed. Are you sure you want to remove this Container?