cadey
/
Shuo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added close buttons

This commit is contained in:
Mattias Erming 2014-05-24 23:56:28 +02:00
parent 799b10c6d9
commit 08a78d2879
3 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/css/style.css
View File

@ -78,7 +78,12 @@ button::-moz-focus-inner {
#networks { #networks {
margin: 20px; margin: 20px;
} }
#networks button { #networks .network + .network {
border-top: 2px solid #ebedef;
margin-top: 14px;
padding-top: 14px;
}
#networks .channel {
border-radius: 3px; border-radius: 3px;
color: #1abc9c; color: #1abc9c;
display: block; display: block;
@ -92,17 +97,35 @@ button::-moz-focus-inner {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
} }
#networks button:hover {
background-color: #f1f2f3;
}
#networks button.active { #networks button.active {
background-color: #ebedef; background-color: #ebedef;
color: #526476; color: #526476;
} }
#networks .network + .network { #networks button:hover {
border-top: 2px solid #ebedef; background-color: #f1f2f3;
margin-top: 14px; }
padding-top: 14px; #networks button:hover .badge {
opacity: 0;
}
#networks button:hover .close {
opacity: .2;
}
#networks .close {
background: no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0xMi44NzIsMS41NjJjMC4xOTUsMC4xOTQsMC4xOTUsMC41MTMsMCwwLjcwN0w4Ljk4Myw2LjE2Yy0wLjE5MywwLjE5NC0wLjE5MywwLjUxMywwLDAuNzA4bDMuODg3LDMuODkyDQoJYzAuMTk1LDAuMTk0LDAuMTk1LDAuNTEzLDAsMC43MDdsLTEuNDE2LDEuNDEzYy0wLjE5MywwLjE5NC0wLjUxMiwwLjE5NC0wLjcwNywwTDYuODYyLDguOTg4Yy0wLjE5NC0wLjE5NC0wLjUxMy0wLjE5NC0wLjcwNywwDQoJbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUtMC41MTMsMC4xOTUtMC43MDcsMGwtMS40MTQtMS40MTZjLTAuMTk0LTAuMTkzLTAuMTk0LTAuNTEyLDAtMC43MDdsMy44OS0zLjg4OQ0KCWMwLjE5NC0wLjE5NCwwLjE5NC0wLjUxMywwLTAuNzA4TDAuMTQ4LDIuMjY2Yy0wLjE5NC0wLjE5NS0wLjE5NC0wLjUxMywwLTAuNzA3bDEuNDE1LTEuNDE0YzAuMTk0LTAuMTk0LDAuNTEzLTAuMTk0LDAuNzA3LDANCglsMy44ODUsMy44OTFjMC4xOTQsMC4xOTUsMC41MTMsMC4xOTUsMC43MDcsMC4wMDFsMy44ODgtMy44OWMwLjE5NS0wLjE5MywwLjUxNC0wLjE5MywwLjcwNywwTDEyLjg3MiwxLjU2MnoiLz4NCjwvc3ZnPg0K);
background-size: 50%;
background-position: 6px 6px;
border-radius: 2px;
height: 19px;
margin-top: 1px;
opacity: 0;
position: absolute;
right: 28px;
transition: all .25s;
width: 20px;
}
#networks .close:hover {
background-color: rgba(0, 0, 0, .1);
opacity: .6 !important;
} }
#networks .badge { #networks .badge {
background: #f7f9fa; background: #f7f9fa;
@ -112,6 +135,9 @@ button::-moz-focus-inner {
font: 12px sans-serif; font: 12px sans-serif;
line-height: 21px; line-height: 21px;
padding: 0 6px; padding: 0 6px;
position: absolute;
right: 28px;
transition: all .25s;
} }
#networks .badge.highlight { #networks .badge.highlight {
background: #f8e2e2; background: #f8e2e2;
@ -197,7 +223,7 @@ button::-moz-focus-inner {
} }
#chat .show-more { #chat .show-more {
display: none; display: none;
margin: 6px 8px 4px 148px; margin: 4px 8px 4px 148px;
} }
#chat .show-more .btn { #chat .show-more .btn {
width: 100%; width: 100%;

1
client/index.html
View File

@ -40,6 +40,7 @@
{{#each channels}} {{#each channels}}
<button id="channel-{{id}}" class="channel" data-target="#window-{{id}}"> <button id="channel-{{id}}" class="channel" data-target="#window-{{id}}">
<span class="badge"></span> <span class="badge"></span>
<span class="close"></span>
{{name}} {{name}}
</button> </button>
{{/each}} {{/each}}

11
client/js/chat.js
View File

@ -126,8 +126,15 @@ $(function() {
.focus(); .focus();
}); });
sidebar.on("click", "#menu .btn", function() { sidebar.on("click", ".close", function() {
$("#menu").toggleClass("visible"); var link = $(this);
var channel = link.closest(".channel");
var id = parseInt(channel.attr("id").split("-")[1]);
socket.emit("input", {
id: id,
text: "/close",
});
return false;
}); });
chat.on("append", ".messages", function() { chat.on("append", ".messages", function() {