ollien/spectabular
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add detach button to UI

Browse source
This commit is contained in:
Nick Krichevsky 2015-03-05 22:03:05 -05:00
parent 197efc8918
commit 820fa46f58
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
popup.css
View file

@ -49,7 +49,7 @@ li.tab > span.tabName{
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; white-space: nowrap;
padding-left:45px; padding-left:45px;
padding-right: 23px; padding-right: 43px;
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@ -138,14 +138,24 @@ i.pin{
color:#3F3F3F; color:#3F3F3F;
} }
i.pin.pinned{ i.pin.pinned{
color:#1565C0; color:#3484DD;
} }
i.pin:hover,i.pin.fakeHover{ i.pin:hover,i.pin.fakeHover{
color:#1565C0; color:#3484DD;
} }
i.pin.pinned:hover,i.pin.pinned.fakeHover{ i.pin.pinned:hover,i.pin.pinned.fakeHover{
color:#000; 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{ input#search{
font-family: FontAwesome; font-family: FontAwesome;
margin-top: 2px; margin-top: 2px;

10
popup.js
View file

@ -153,6 +153,7 @@ function setupTabs(tabs,callback){
var textSpan = document.createElement("span"); var textSpan = document.createElement("span");
var closeButton = document.createElement("i"); var closeButton = document.createElement("i");
var pinButton = document.createElement("i"); var pinButton = document.createElement("i");
var detachButton = document.createElement("i");
li.setAttribute('tabId', currentTab.id); li.setAttribute('tabId', currentTab.id);
closeButton.classList.add("fa"); closeButton.classList.add("fa");
closeButton.classList.add("fa-remove"); closeButton.classList.add("fa-remove");
@ -163,7 +164,13 @@ function setupTabs(tabs,callback){
pinButton.classList.add("fa-thumb-tack"); pinButton.classList.add("fa-thumb-tack");
pinButton.classList.add("pin"); pinButton.classList.add("pin");
pinButton.classList.add("noselect"); 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){ if (currentTab.pinned){
pinButton.classList.add("pinned"); pinButton.classList.add("pinned");
pinnedTabs.push(li); pinnedTabs.push(li);
@ -276,6 +283,7 @@ function setupTabs(tabs,callback){
}); });
li.appendChild(textSpan); li.appendChild(textSpan);
textSpan.appendChild(pinButton); textSpan.appendChild(pinButton);
textSpan.appendChild(detachButton);
textSpan.appendChild(closeButton); textSpan.appendChild(closeButton);
tabElements.push(li); tabElements.push(li);
}); });