Adding a close button on tabs
This commit is contained in:
parent
978c8b0b09
commit
d8bf26c324
2 changed files with 26 additions and 5 deletions
|
@ -161,9 +161,9 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#tab-lst > li {
|
#tab-lst > li {
|
||||||
display: inline;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2px 20px 2px 20px;
|
padding: 2px 0px 2px 20px;
|
||||||
color: #f3f3f3;
|
color: #f3f3f3;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #6c9ec0;
|
background-color: #6c9ec0;
|
||||||
|
@ -171,6 +171,11 @@ body {
|
||||||
border-left: 1px solid #347db0;
|
border-left: 1px solid #347db0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tab-lst > li > span {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
#tab-lst > li > span::selection {
|
#tab-lst > li > span::selection {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
@ -184,13 +189,19 @@ body {
|
||||||
color: #c43434;
|
color: #c43434;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.close-tab {
|
||||||
|
float: right;
|
||||||
|
margin: 3px 3px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Chat
|
* Chat
|
||||||
*/
|
*/
|
||||||
|
|
||||||
#tab-body-wrapper {
|
#tab-body-wrapper {
|
||||||
margin: 2px 1px;
|
margin: 0px 1px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: calc(100% - 20px);
|
height: calc(100% - 20px);
|
||||||
height: -webkit-calc(100% - 20px);
|
height: -webkit-calc(100% - 20px);
|
||||||
|
|
|
@ -31,15 +31,24 @@ Tab.prototype.filterName = function(name) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Tab.prototype.initListElement = function() {
|
Tab.prototype.initListElement = function() {
|
||||||
var inner = document.createElement("span");
|
var inner = document.createElement("span"), close = document.createElement("img");
|
||||||
|
|
||||||
|
close.src = "img/delcontact.png";
|
||||||
|
close.alt = "x";
|
||||||
|
close.title = "Close tab";
|
||||||
|
close.classList.add("close-tab");
|
||||||
inner.innerHTML = this.name;
|
inner.innerHTML = this.name;
|
||||||
this.el_lst = document.createElement("li");
|
this.el_lst = document.createElement("li");
|
||||||
this.el_lst.addEventListener("click", (function(elem) {
|
inner.addEventListener("click", (function(elem) {
|
||||||
return function() {
|
return function() {
|
||||||
elem.show();
|
elem.show();
|
||||||
};
|
};
|
||||||
})(this), false);
|
})(this), false);
|
||||||
|
close.addEventListener("click", (function(elem) {
|
||||||
|
return function() {
|
||||||
|
elem.close();
|
||||||
|
};
|
||||||
|
})(this), false);
|
||||||
this.el_lst.addEventListener("dblclick", (function(elem) {
|
this.el_lst.addEventListener("dblclick", (function(elem) {
|
||||||
return function() {
|
return function() {
|
||||||
elem.close();
|
elem.close();
|
||||||
|
@ -47,6 +56,7 @@ Tab.prototype.initListElement = function() {
|
||||||
})(this), false);
|
})(this), false);
|
||||||
|
|
||||||
this.el_lst.appendChild(inner);
|
this.el_lst.appendChild(inner);
|
||||||
|
this.el_lst.appendChild(close);
|
||||||
this.wr_lst.appendChild(this.el_lst);
|
this.wr_lst.appendChild(this.el_lst);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Reference in a new issue