From 820fa46f58404a2b2da28b48b8d96e256f177c30 Mon Sep 17 00:00:00 2001
From: Nick Krichevsky <njk828@gmail.com>
Date: Thu, 5 Mar 2015 22:03:05 -0500
Subject: [PATCH] Add detach button to UI

---
 popup.css | 16 +++++++++++++---
 popup.js  | 10 +++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/popup.css b/popup.css
index 9bfb378..65baa99 100644
--- a/popup.css
+++ b/popup.css
@@ -49,7 +49,7 @@ li.tab > span.tabName{
 	overflow-x: hidden;
 	white-space: nowrap;
 	padding-left:45px;
-	padding-right: 23px;
+	padding-right: 43px;
 	max-width: 100%;
 	box-sizing: border-box;
 	position: relative;
@@ -138,14 +138,24 @@ i.pin{
 	color:#3F3F3F;
 }
 i.pin.pinned{
-	color:#1565C0;
+	color:#3484DD;
 }
 i.pin:hover,i.pin.fakeHover{
-	color:#1565C0;
+	color:#3484DD;
 }
 i.pin.pinned:hover,i.pin.pinned.fakeHover{
 	color:#000;
 }
+i.detach{
+	position:absolute;
+	top:1px;
+	right: 27px;
+	font-size: 14px;
+	color:#3F3F3F;
+}
+i.detach:hover,i.detach.fakeHover{
+	color:#3484DD;
+}
 input#search{
 	font-family: FontAwesome;
 	margin-top: 2px;
diff --git a/popup.js b/popup.js
index b1d794f..50a1d37 100644
--- a/popup.js
+++ b/popup.js
@@ -153,6 +153,7 @@ function setupTabs(tabs,callback){
 		var textSpan = document.createElement("span");
 		var closeButton = document.createElement("i");
 		var pinButton = document.createElement("i");
+		var detachButton = document.createElement("i");
 		li.setAttribute('tabId', currentTab.id);
 		closeButton.classList.add("fa");
 		closeButton.classList.add("fa-remove");
@@ -163,7 +164,13 @@ function setupTabs(tabs,callback){
 		pinButton.classList.add("fa-thumb-tack");
 		pinButton.classList.add("pin");
 		pinButton.classList.add("noselect");
-		closeButton.classList.add("pointer");
+		pinButton.classList.add("pointer");
+		detachButton.classList.add("fa");
+		detachButton.classList.add("fa-external-link-square");
+		detachButton.classList.add("detach");
+		detachButton.classList.add("noselect");
+		detachButton.classList.add("pointer");
+		
 		if (currentTab.pinned){
 			pinButton.classList.add("pinned");
 			pinnedTabs.push(li);
@@ -276,6 +283,7 @@ function setupTabs(tabs,callback){
 		});
 		li.appendChild(textSpan);
 		textSpan.appendChild(pinButton);
+		textSpan.appendChild(detachButton);
 		textSpan.appendChild(closeButton);
 		tabElements.push(li);
 	});