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

wip: ui updates to container-info and edit panel

Browse source
This commit is contained in:
groovecoder 2017-01-11 23:52:09 -06:00
parent b41ca7411c
commit 6e00cf8d5b
4 changed files with 80 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
webextension/css/popup.css
View file

@ -1,5 +1,4 @@
body {
background: #FAFAFA;
min-inline-size: 200px;
max-inline-size: 400px;
inline-size: 264px;
@ -90,12 +89,15 @@ table {
background-size: contain;
filter: url('/img/filters.svg#fill');
fill: var(--identity-icon-color);
inline-size: 32px;
block-size: 32px;
inline-size: 20px;
block-size: 20px;
padding-left: 20px;
padding-right: 10px;
}
.userContext-icon:hover {
background-image: url('/img/container-add.svg');
.container-panel-row:hover .userContext-icon {
background-image: url('/img/container-newtab.svg');
filter: url('/img/filters.svg#fill');
fill: 'gray';
}
@ -196,6 +198,23 @@ table {
--identity-icon: url("/img/usercontext.svg#circle");
}
.container-info-panel-header {
block-size: 33px;
display: flex;
align-items: center;
border-bottom: 1px solid #ebebeb;
margin-bottom: 10px;
}
.container-info-panel-hide {
margin-bottom: 8px;
}
.container-info-panel-movetabs {
border-bottom: 1px solid #ebebeb;
margin-bottom: 10px;
}
.container-info-has-tabs {
cursor: pointer;
}

20
webextension/img/container-newtab.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#979797;}
</style>
<title>icon-newtab</title>
<desc>Created with Sketch.</desc>
<g id="Visual-Spec">
<g id="Normal-Panel-Hover" transform="translate(-80.000000, -246.000000)">
<g id="Panel" transform="translate(58.000000, 170.000000)">
<g id="icon-newtab" transform="translate(21.000000, 75.000000)">
<path id="Fill-1" class="st0" d="M15.3,11.7h-3.6v3.7h-1.4v-3.7H6.7v-1.6h3.6V6.6h1.4v3.5h3.6C15.3,10.1,15.3,11.7,15.3,11.7z
M11,3c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S15.4,3,11,3L11,3z"/>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 917 B

1
webextension/js/popup.js
View file

@ -94,6 +94,7 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
identities.forEach(identity => {
let tr = document.createElement("tr");
fragment.appendChild(tr);
tr.className = "container-panel-row";
tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
tr.innerHTML = `
<td>

61
webextension/popup.html
View file

@ -33,7 +33,7 @@
<a id="sort-containers-link"><img alt="Sort Containers" title="Sort Containers" class="icon" src="/img/container-sort.svg"></a>
</div>
</div>
<table class="unstriped hover">
<table class="unstriped">
<tbody class="identities-list"></tbody>
</table>
<div class="row panel-footer edit-identities">
@ -49,13 +49,46 @@
</div>
<div class="hide panel container-info-panel" id="container-info-panel">
<div class="row">
<div class="small-2 columns panel-back-arrow" id="close-container-info-panel">&laquo;</div>
<div class="small-10 columns">
<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>
</div>
<div class="small-10 columns">
<h3 id="container-info-name" class="panel-header-text"></h3>
</div>
</div>
<div class="row container-info-panel-hide" id="container-info-hideorshow">
<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/>
</div>
<div class="row container-info-panel-movetabs" id="container-info-movetabs">
Move tabs to a new window
</div>
<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>
</div>
</div>
</div>
<div class="panel edit-containers-panel hide" id="edit-containers-panel">
<div class="row panel-header">
<div class="small-12 columns">
<h3 class="panel-header-text">Edit Containers</h3>
</div>
</div>
<table class="unstriped hover">
<table class="unstriped">
<tbody id="edit-identities-list"></tbody>
</table>
<div class="row panel-footer edit-containers-panel-footer">
@ -64,30 +97,6 @@
</div>
<div class="hide panel container-info-panel" id="container-info-panel">
<div class="row popup-bumper">
<div class="small-1 columns" id="close-container-info-panel">&lt;</div>
<div class="small-11 columns">
<table id="container-info-table">
<tr>
<td>
<div class="userContext-icon" id="container-info-icon"
data-identity-icon="" data-identity-color=""></div></td>
<td id="container-info-name"></td>
</tr>
<tr class="container-info-has-tabs" id="container-info-hideorshow">
<td>
<img class="icon" id="container-info-hideorshow-icon" src="" />
</td>
<td id="container-info-hideorshow-label"></td>
</tr>
<tr class="container-info-has-tabs" id="container-info-movetabs">
<td colspan="2">Open all tabs in new window</td>
</tr>
</div>
</div>
</div>
<div class="panel edit-container-panel hide" id="edit-container-panel">
<div class="row">
<div class="small-2 columns panel-back-arrow" id="edit-container-panel-back-arrow">