diff --git a/src/css/popup.css b/src/css/popup.css index 3865801..8b9545d 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -1007,3 +1007,133 @@ span ~ .panel-header-text { .amo-rate-cta { background: #0f1126; } + +body { + font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + color: #000000; + font-size: 13px; + letter-spacing: -0.1px; + width: 320px; + /* remove in prodcution*/ +} + +h3.title { + width: 100%; + color: #000000; + font-size: 13px; + letter-spacing: -0.1px; + font-weight: bold; + line-height: 40px; + text-align: center; + height: 40px; +} + +.menu { + width: 100%; + border-style: none; +} + +.menu-item { + height: 24px; + line-height: 24px; + width: 100%; + cursor: pointer; +} + +.menu-item:hover { + background: #1296F8; + color: #FFFFFF; +} + +.hover-highlight { + +} + +.menu-text { + line-height: 24px; +} + +.menu-icon { + float: left; + text-align: center; + width: 40px; + display: block; + height: 24px; + padding: 0 8px 0 16px; +} + +.menu-right-float { + float: right; + text-align: right; + width: 60px; + display: inline-block; + height: 24px; +} + +.container-count { + opacity: 0.6; + padding: 0 6px 0 0; + text-align: right; +} + +.menu-arrow { + float: right; + text-align: center; + width: 18px; + display: inline-block; + height: 24px; + padding: 6px 12px 6px 0; +} + +.menu-arrow img { + padding: 2 2 2 2; + height: 12px; + width: 12px; +} + +hr { + display: block; + border: 0; + border-top: 1px solid #e3e3e3; + padding: 0 0 6px 0; + margin: 6px 0 0 0; +} + +.sub-header { + height: 24px; + color: #737373; + line-height: 24px; + padding: 0 16px 0 16px; +} + +.identities-list { + margin: 0 0 41px 0; +} + +.bottom-btn { + height: 41px; + line-height: 41px; + background-color: #e3e3e3; + padding: 0 16px 0 16px; + border: solid 1px #d9d9d9; + cursor: pointer; + position: fixed; + bottom: 0px; + width: 100%; +} + +.menu-panel { + justify-content: flex-start; +} + +.btn-return.arrow-left { + position: absolute; + border: 0; + left: 15px; + top: 15px; + width: 1.2rem; + height: 1.2rem; + background-color: rgba(255, 255, 255, 1); + background-image: url("/img/arrow-icon-left.svg"); + cursor: pointer; +} diff --git a/src/js/popup.js b/src/js/popup.js index f00459b..3694616 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -741,21 +741,21 @@ Logic.registerPanel(P_CONTAINER_INFO, { Utils.addEnterHandler(closeContEl, () => { Logic.showPreviousPanel(); }); - const hideContEl = document.querySelector("#container-info-hideorshow"); - hideContEl.setAttribute("tabindex", "0"); - Utils.addEnterHandler(hideContEl, async () => { - const identity = Logic.currentIdentity(); - try { - browser.runtime.sendMessage({ - method: identity.hasHiddenTabs ? "showTabs" : "hideTabs", - windowId: browser.windows.WINDOW_ID_CURRENT, - cookieStoreId: Logic.currentCookieStoreId() - }); - window.close(); - } catch (e) { - window.close(); - } - }); + // const hideContEl = document.querySelector("#container-info-hideorshow"); + // hideContEl.setAttribute("tabindex", "0"); + // Utils.addEnterHandler(hideContEl, async () => { + // const identity = Logic.currentIdentity(); + // try { + // browser.runtime.sendMessage({ + // method: identity.hasHiddenTabs ? "showTabs" : "hideTabs", + // windowId: browser.windows.WINDOW_ID_CURRENT, + // cookieStoreId: Logic.currentCookieStoreId() + // }); + // window.close(); + // } catch (e) { + // window.close(); + // } + // }); // Check if the user has incompatible add-ons installed let incompatible = false; @@ -766,8 +766,8 @@ Logic.registerPanel(P_CONTAINER_INFO, { } catch (e) { throw new Error("Could not check for incompatible add-ons."); } - const moveTabsEl = document.querySelector("#container-info-movetabs"); - moveTabsEl.setAttribute("tabindex","0"); + // const moveTabsEl = document.querySelector("#container-info-movetabs"); + // moveTabsEl.setAttribute("tabindex","0"); const numTabs = await Logic.numTabs(); if (incompatible) { Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs."); @@ -776,13 +776,17 @@ Logic.registerPanel(P_CONTAINER_INFO, { Logic._disableMoveTabs("Cannot move a tab from a single-tab window."); return; } - Utils.addEnterHandler(moveTabsEl, async () => { - await browser.runtime.sendMessage({ - method: "moveTabsToWindow", - windowId: browser.windows.WINDOW_ID_CURRENT, - cookieStoreId: Logic.currentIdentity().cookieStoreId, - }); - window.close(); + // Utils.addEnterHandler(moveTabsEl, async () => { + // await browser.runtime.sendMessage({ + // method: "moveTabsToWindow", + // windowId: browser.windows.WINDOW_ID_CURRENT, + // cookieStoreId: Logic.currentIdentity().cookieStoreId, + // }); + // window.close(); + // }); + const manageContainer = document.querySelector("#manage-container-link"); + Utils.addEnterHandler(manageContainer, async () => { + Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity()); }); }, @@ -791,22 +795,22 @@ Logic.registerPanel(P_CONTAINER_INFO, { const identity = Logic.currentIdentity(); // Populating the panel: name and icon - document.getElementById("container-info-name").textContent = identity.name; + document.getElementById("container-info-title").textContent = identity.name; - const icon = document.getElementById("container-info-icon"); - icon.setAttribute("data-identity-icon", identity.icon); - icon.setAttribute("data-identity-color", identity.color); + // const icon = document.getElementById("container-info-icon"); + // icon.setAttribute("data-identity-icon", identity.icon); + // icon.setAttribute("data-identity-color", identity.color); // Show or not the has-tabs section. for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : ""; } - const hideShowIcon = document.getElementById("container-info-hideorshow-icon"); - hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC; + // const hideShowIcon = document.getElementById("container-info-hideorshow-icon"); + // hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC; - const hideShowLabel = document.getElementById("container-info-hideorshow-label"); - hideShowLabel.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container"; + // const hideShowLabel = document.getElementById("container-info-hideorshow-label"); + // hideShowLabel.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container"; // Let's remove all the previous tabs. const table = document.getElementById("container-info-table"); diff --git a/src/popup.html b/src/popup.html index 726f6bb..0365444 100644 --- a/src/popup.html +++ b/src/popup.html @@ -146,26 +146,48 @@ -
-
-
- Panel Back Arrow -
-
-
- -

-
-
- Hide Container icon - Hide this container -
-
Move tabs to a new window
-
- -
-
-
+