From 6e00cf8d5beb43bf056c571aa7e6ffc331cd816f Mon Sep 17 00:00:00 2001
From: groovecoder <luke.crouch@gmail.com>
Date: Wed, 11 Jan 2017 23:52:09 -0600
Subject: [PATCH] wip: ui updates to container-info and edit panel

---
 webextension/css/popup.css            | 29 ++++++++++---
 webextension/img/container-newtab.svg | 20 +++++++++
 webextension/js/popup.js              |  1 +
 webextension/popup.html               | 61 +++++++++++++++------------
 4 files changed, 80 insertions(+), 31 deletions(-)
 create mode 100644 webextension/img/container-newtab.svg

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index 30aab9a..6bbec16 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -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;
 }
diff --git a/webextension/img/container-newtab.svg b/webextension/img/container-newtab.svg
new file mode 100644
index 0000000..4739c5c
--- /dev/null
+++ b/webextension/img/container-newtab.svg
@@ -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>
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 6ec8979..aa1e561 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -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>
diff --git a/webextension/popup.html b/webextension/popup.html
index 30fa6ea..471c7c2 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -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">