Add detach button to UI

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

View file

@ -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;

View file

@ -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);
});