Added close button again

This commit is contained in:
Mattias Erming 2014-07-09 19:11:07 +02:00
parent 33d3f8f386
commit e946633c18
3 changed files with 52 additions and 2 deletions

View file

@ -162,6 +162,12 @@ button {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
#sidebar .chan:hover .badge {
opacity: 0;
}
#sidebar .chan:hover .close {
opacity: .2;
}
#sidebar .badge { #sidebar .badge {
background: rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .06);
border-radius: 3px; border-radius: 3px;
@ -171,7 +177,7 @@ button {
padding: 3px 6px; padding: 3px 6px;
position: absolute; position: absolute;
right: 10px; right: 10px;
transition: all .1s; transition: all .2s;
} }
#sidebar .badge.highlight { #sidebar .badge.highlight {
background: #fff; background: #fff;
@ -180,6 +186,24 @@ button {
#sidebar .badge:empty { #sidebar .badge:empty {
display: none; display: none;
} }
#sidebar .close {
background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBkPSJtMTIuODcyLDEuNTYyYzAuMTk1MDAxLDAuMTk0IDAuMTk1MDAxLDAuNTEzIDAsMC43MDdsLTMuODg5LDMuODkxYy0wLjE5MywwLjE5NCAtMC4xOTMsMC41MTMgMCwwLjcwOGwzLjg4NywzLjg5MmMwLjE5NSwwLjE5NCAwLjE5NSwwLjUxMyAwLDAuNzA3bC0xLjQxNTk5OSwxLjQxM2MtMC4xOTMwMDEsMC4xOTQgLTAuNTEyLDAuMTk0IC0wLjcwNzAwMSwwbC0zLjg4NSwtMy44OTJjLTAuMTk0LC0wLjE5NCAtMC41MTMsLTAuMTk0IC0wLjcwNywwbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUgLTAuNTEzLDAuMTk1IC0wLjcwNywwbC0xLjQxNCwtMS40MTU5OTljLTAuMTk0LC0wLjE5MzAwMSAtMC4xOTQsLTAuNTEyIDAsLTAuNzA3MDAxbDMuODksLTMuODg5YzAuMTk0LC0wLjE5NCAwLjE5NCwtMC41MTMgMCwtMC43MDhsLTMuODg3LC0zLjg5MWMtMC4xOTQsLTAuMTk1IC0wLjE5NCwtMC41MTMgMCwtMC43MDdsMS40MTUsLTEuNDE0YzAuMTk0LC0wLjE5NCAwLjUxMywtMC4xOTQgMC43MDcsMGwzLjg4NSwzLjg5MWMwLjE5NCwwLjE5NSAwLjUxMywwLjE5NSAwLjcwNywwLjAwMWwzLjg4OCwtMy44OWMwLjE5NSwtMC4xOTMgMC41MTQsLTAuMTkzIDAuNzA3LDBsMS40MTUsMS40MTV6Ii8+DQogPC9nPg0KPC9zdmc+);
background-size: 50%;
background-position: 5px 6px;
border-radius: 3px;
height: 18px;
margin-top: 1px;
margin-right: 10px;
opacity: 0;
position: absolute;
right: 0;
transition: all .2s;
width: 18px;
}
#sidebar .close:hover {
background-color: rgba(0, 0, 0, .2);
opacity: .7 !important;
}
#footer { #footer {
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;

View file

@ -111,8 +111,9 @@
<script type="text/html" class="channels"> <script type="text/html" class="channels">
{{#each channels}} {{#each channels}}
<button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan"> <button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
<span class="badge"></span> <span class="badge"></span>
<span class="close"></span>
{{name}} {{name}}
</button> </button>
{{/each}} {{/each}}

View file

@ -225,6 +225,31 @@ $(function() {
.sticky(); .sticky();
}); });
sidebar.on("click", ".close", function() {
var cmd = "/close";
var chan = $(this).closest(".chan");
if (chan.hasClass("lobby")) {
cmd = "/quit";
var server = chan
.clone()
.remove("span")
.text()
.trim();
if (!confirm("Disconnect from " + server + "?")) {
return false;
}
}
socket.emit("input", {
target: chan.data("id"),
text: cmd
});
chan.css({
transition: "none",
opacity: .4
});
return false;
});
chat.on("input", ".search", function() { chat.on("input", ".search", function() {
var value = $(this).val(); var value = $(this).val();
var names = $(this).closest(".users").find(".names"); var names = $(this).closest(".users").find(".names");