rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

container info panel complete

Browse source
This commit is contained in:
Kendall Werts 2020-02-17 11:33:08 -06:00
parent eafbef960c
commit 8e44652242
3 changed files with 90 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/css/popup.css
View file

@ -1106,4 +1106,16 @@ hr {
.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;
}

68
src/js/popup.js
View file

@ -685,21 +685,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;
@ -710,8 +710,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.");
@ -720,13 +720,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());
});
},
@ -735,22 +739,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");

62
src/popup.html
View file

@ -191,26 +191,48 @@
</div>
<div class="hide panel container-info-panel" id="container-info-panel" tabindex="-1">
<div class="columns">
<div class="panel-back-arrow" id="close-container-info-panel">
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
</div>
<div class="column-panel-content">
<div class="panel-header container-info-panel-header">
<span class="usercontext-icon" id="container-info-icon"></span>
<h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
</div>
<div class="select-row clickable container-info-panel-hide container-info-has-tabs" id="container-info-hideorshow">
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/>
<span id="container-info-hideorshow-label">Hide this container</span>
</div>
<div class="select-row clickable container-info-panel-movetabs container-info-has-tabs" id="container-info-movetabs">Move tabs to a new window</div>
<div class="scrollable">
<table id="container-info-table" class="container-info-list">
</table>
</div>
</div>
<div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
<h3 class="title" id="container-info-title">
Personal
</h3>
<button class="btn-return arrow-left" id="close-container-info-panel"></button>
<hr>
<table class="menu">
<tr class="menu-item" id="hide-container">
<td>
<img class="menu-icon" alt="Hide This Container" src="/img/tab-new-16.svg" />
<span class="menu-text">Hide This Container</span>
<span class="menu-arrow">
</span>
</td>
</tr>
<tr class="menu-item" id="move-to-new-window">
<td>
<img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
<span class="menu-text">Move Tabs to a New Window</span>
<span class="menu-arrow">
</span>
</td>
</tr>
<tr class="menu-item" id="always-open">
<td>
<img class="menu-icon" alt="Always Open Site in Container" src="/img/open-in-new-16.svg" />
<span class="menu-text">Always Open Site in Container</span>
<span class="menu-arrow">
</span>
</td>
</tr>
</table>
<hr>
<div class="sub-header">
Open Tabs
</div>
<div class="scrollable">
<table id="container-info-table" class="container-info-list">
</table>
</div>
<div class="bottom-btn" id="manage-container-link">
Manage This Container
</div>
</div>