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

for #55: UI updates to container-info-panel

Browse source
This commit is contained in:
groovecoder 2017-01-12 10:40:33 -06:00
parent 297dccb4e8
commit 729218b36c
4 changed files with 31 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
webextension/css/popup.css
View file

@ -131,7 +131,7 @@ table {
.edit-containers-text { .edit-containers-text {
text-align: center; text-align: center;
border-right: solid 1px #d8d8d8; border-inline-end: solid 1px #d8d8d8;
} }
.edit-containers-text a { .edit-containers-text a {
@ -202,20 +202,27 @@ table {
block-size: 33px; block-size: 33px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid #ebebeb; border-block-end: 1px solid #ebebeb;
margin-bottom: 10px; margin-block-end: 10px;
padding: 0 20px;
} }
.container-info-panel-hide { .container-info-panel-hide {
margin-bottom: 8px; margin-bottom: 8px;
padding: 0 20px;
}
.container-info-panel-hideorshow-icon {
margin-inline-end: 7px;
} }
.container-info-panel-movetabs { .container-info-panel-movetabs {
border-bottom: 1px solid #ebebeb; border-block-end: 1px solid #ebebeb;
margin-bottom: 10px; margin-block-end: 10px;
padding: 0 20px;
} }
.container-info-has-tabs { .clickable {
cursor: pointer; cursor: pointer;
} }

1
webextension/img/container-newtab.svg
View file

@ -6,7 +6,6 @@
.st0{fill:#979797;} .st0{fill:#979797;}
</style> </style>
<title>icon-newtab</title> <title>icon-newtab</title>
<desc>Created with Sketch.</desc>
<g id="Visual-Spec"> <g id="Visual-Spec">
<g id="Normal-Panel-Hover" transform="translate(-80.000000, -246.000000)"> <g id="Normal-Panel-Hover" transform="translate(-80.000000, -246.000000)">
<g id="Panel" transform="translate(58.000000, 170.000000)"> <g id="Panel" transform="translate(58.000000, 170.000000)">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 917 B

After

Width:  |  Height:  |  Size: 883 B

11
webextension/js/popup.js
View file

@ -23,6 +23,9 @@ function showContainerTabsPanel(identity) {
trHasTabs.setAttribute("data-user-context-id", identity.userContextId); trHasTabs.setAttribute("data-user-context-id", identity.userContextId);
} }
let hideOrShowRow = document.querySelector("#container-info-hideorshow");
hideOrShowRow.setAttribute("data-user-context-id", identity.userContextId);
const hideShowIcon = document.getElementById("container-info-hideorshow-icon"); const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC; hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
@ -39,12 +42,14 @@ function showContainerTabsPanel(identity) {
method: "getTabs", method: "getTabs",
userContextId: identity.userContextId, userContextId: identity.userContextId,
}).then(tabs => { }).then(tabs => {
console.log('browser.runtime.sendMessage getTabs, tabs: ', tabs);
// For each one, let's create a new line. // For each one, let's create a new line.
let fragment = document.createDocumentFragment(); let fragment = document.createDocumentFragment();
for (const tab of tabs) { for (const tab of tabs) {
let tr = document.createElement("tr"); let tr = document.createElement("tr");
fragment.appendChild(tr); fragment.appendChild(tr);
tr.classList.add("container-info-tab"); tr.classList.add("container-info-tab");
tr.classList.add("clickable");
tr.innerHTML = ` tr.innerHTML = `
<td><img class="icon" src="${tab.favicon}" /></td> <td><img class="icon" src="${tab.favicon}" /></td>
<td>${tab.title}</td>`; <td>${tab.title}</td>`;
@ -89,12 +94,15 @@ document.querySelector("#onboarding-done-button").addEventListener("click", () =
}); });
browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
console.log('queryIdentities');
let fragment = document.createDocumentFragment(); let fragment = document.createDocumentFragment();
identities.forEach(identity => { identities.forEach(identity => {
console.log('identities.forEach');
let tr = document.createElement("tr"); let tr = document.createElement("tr");
fragment.appendChild(tr); fragment.appendChild(tr);
tr.className = "container-panel-row"; tr.classList.add("container-panel-row");
tr.classList.add("clickable");
tr.setAttribute("data-identity-cookie-store-id", identity.userContextId); tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
tr.innerHTML = ` tr.innerHTML = `
<td> <td>
@ -136,6 +144,7 @@ function showEditContainersPanel() {
let tr = document.createElement("tr"); let tr = document.createElement("tr");
fragment.appendChild(tr); fragment.appendChild(tr);
tr.setAttribute("data-identity-cookie-store-id", identity.userContextId); tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
tr.classList.add("clickable");
tr.innerHTML = ` tr.innerHTML = `
<td> <td>
<div class="userContext-icon" <div class="userContext-icon"

28
webextension/popup.html
View file

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1"> <div class="panel onboarding onboarding-panel-1 hide" id="onboarding-panel-1">
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" /> <img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3>A better way to manage all the things you do online</h3> <h3>A better way to manage all the things you do online</h3>
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p> <p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
@ -16,7 +16,7 @@
</div> </div>
<div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2"> <div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
<img alt="How Containers Work" src="/img/onboarding-2.png" /> <img alt="How Containers Work" src="/img/onboarding-2.png" />
<h3>Put containers to work for you.</h3> <h3>Put containers to work for you.</h3>
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p> <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
@ -51,31 +51,19 @@
<div class="hide panel container-info-panel" id="container-info-panel"> <div class="hide panel container-info-panel" id="container-info-panel">
<div class="row"> <div class="row">
<div class="small-2 columns panel-back-arrow" id="close-container-info-panel">&laquo;</div> <div class="small-2 columns panel-back-arrow clickable" id="close-container-info-panel">&laquo;</div>
<div class="small-10 columns"> <div class="small-10 columns">
<div class="row container-info-panel-header"> <div class="row container-info-panel-header">
<div class="small-2 columns"> <span class="userContext-icon" id="container-info-icon" data-identity-icon="" data-identity-color=""></span>
<span class="userContext-icon" id="container-info-icon" data-identity-icon="" data-identity-color=""></span> <h3 id="container-info-name" class="panel-header-text"></h3>
</div>
<div class="small-10 columns">
<h3 id="container-info-name" class="panel-header-text"></h3>
</div>
</div> </div>
<div class="row container-info-panel-hide" id="container-info-hideorshow"> <div class="row container-info-panel-hide clickable" id="container-info-hideorshow" data-user-context-id="">
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon"/><span id="container-info-hideorshow-label">Hide this container</span><br/> <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><br/>
</div> </div>
<div class="row container-info-panel-movetabs" id="container-info-movetabs"> <div class="row container-info-panel-movetabs clickable" id="container-info-movetabs">
Move tabs to a new window Move tabs to a new window
</div> </div>
<table class="unstriped" id="container-info-table"> <table class="unstriped" id="container-info-table">
<!--
<tr class="container-info-has-tabs" id="container-info-hideorshow">
<td id=""></td>
</tr>
<tr class="container-info-has-tabs" id="container-info-movetabs">
<td colspan="2">Open all tabs in new window</td>
</tr>
__>
</table> </table>
</div> </div>
</div> </div>