Merge pull request #184 from thelounge/xpaw/close-button
Change close button behaviour
This commit is contained in:
Jérémie Astori
commit
52708b2566
@ -189,7 +189,8 @@ button,
|
||||
}
|
||||
|
||||
#viewport .lt,
|
||||
#viewport .rt {
|
||||
#viewport .rt,
|
||||
#chat button.menu {
|
||||
color: #ccc;
|
||||
display: none;
|
||||
float: left;
|
||||
@ -213,10 +214,23 @@ button,
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#chat button.menu:before {
|
||||
font: 14px FontAwesome;
|
||||
content: "\f142";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#viewport .rt {
|
||||
display: block;
|
||||
float: right;
|
||||
margin: 6px -12px 0 12px;
|
||||
margin: 6px -12px 0 0;
|
||||
}
|
||||
|
||||
#chat button.menu {
|
||||
display: block;
|
||||
float: right;
|
||||
margin: 6px -8px 0 12px;
|
||||
}
|
||||
|
||||
#viewport.rt #chat .sidebar {
|
||||
@ -334,21 +348,6 @@ button,
|
||||
content: "\f0f6";
|
||||
}
|
||||
|
||||
#sidebar .chan:hover .badge {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#sidebar .chan:hover .close {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#sidebar .chan:hover .name {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
#sidebar .chan .name {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
@ -378,7 +377,7 @@ button,
|
||||
margin-left: 5px;
|
||||
padding: 3px 6px;
|
||||
float: right;
|
||||
transition: opacity .2s;
|
||||
transition: opacity .2s, background-color .2s, color .2s;
|
||||
}
|
||||
|
||||
#sidebar .badge.highlight {
|
||||
@ -386,6 +385,7 @@ button,
|
||||
color: #49505a;
|
||||
}
|
||||
|
||||
#sidebar .chan.active .badge,
|
||||
#sidebar .badge:empty {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -393,11 +393,12 @@ button,
|
||||
#sidebar .close {
|
||||
border-radius: 3px;
|
||||
margin-right: 5px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
transition: all .2s;
|
||||
transition: opacity .2s, background-color .2s;
|
||||
}
|
||||
|
||||
#sidebar .close:before {
|
||||
@ -412,9 +413,14 @@ button,
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#sidebar .close:hover {
|
||||
#sidebar .chan.active .close {
|
||||
visibility: visible;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
#sidebar .chan.active .close:hover {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
opacity: .7 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#sidebar .tse-scrollbar {
|
||||
@ -603,29 +609,6 @@ button,
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#windows .header .right {
|
||||
float: right;
|
||||
margin-right: -10px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#windows .header .button {
|
||||
background: #f4f4f4;
|
||||
background-image: linear-gradient(#f4f4f4, #ececec);
|
||||
border: 1px solid #d7d7d7;
|
||||
border-bottom-color: #b7b7b7;
|
||||
border-radius: 2px;
|
||||
color: #555;
|
||||
font: 12px Lato, sans-serif;
|
||||
height: 25px;
|
||||
line-height: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#windows .header .button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#windows .window .header {
|
||||
display: none;
|
||||
}
|
||||
@ -1589,14 +1572,6 @@ button,
|
||||
width: 215px;
|
||||
}
|
||||
|
||||
#sidebar .close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar .chan:hover .badge {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#sidebar .empty:before {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -1615,10 +1590,6 @@ button,
|
||||
display: block;
|
||||
}
|
||||
|
||||
#viewport .rt {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
#windows .window .header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -491,27 +491,32 @@ $(function() {
|
||||
}
|
||||
});
|
||||
|
||||
function positionContextMenu(e) {
|
||||
var top, left;
|
||||
function positionContextMenu(that, e) {
|
||||
var offset;
|
||||
var menuWidth = contextMenu.outerWidth();
|
||||
var menuHeight = contextMenu.outerHeight();
|
||||
|
||||
if ((window.innerWidth - e.pageX) < menuWidth) {
|
||||
left = window.innerWidth - menuWidth;
|
||||
} else {
|
||||
left = e.pageX;
|
||||
if (that.hasClass("menu")) {
|
||||
offset = that.offset();
|
||||
offset.left -= menuWidth - that.outerWidth();
|
||||
offset.top += that.outerHeight();
|
||||
return offset;
|
||||
}
|
||||
|
||||
if ((window.innerHeight - e.pageY) < menuHeight) {
|
||||
top = window.innerHeight - menuHeight;
|
||||
} else {
|
||||
top = e.pageY;
|
||||
offset = {left: e.pageX, top: e.pageY};
|
||||
|
||||
if ((window.innerWidth - offset.left) < menuWidth) {
|
||||
offset.left = window.innerWidth - menuWidth;
|
||||
}
|
||||
|
||||
return {left: left, top: top};
|
||||
if ((window.innerHeight - offset.top) < menuHeight) {
|
||||
offset.top = window.innerHeight - menuHeight;
|
||||
}
|
||||
|
||||
viewport.on("contextmenu", ".user, .network .chan", function(e) {
|
||||
return offset;
|
||||
}
|
||||
|
||||
function showContextMenu(that, e) {
|
||||
var target = $(e.currentTarget);
|
||||
var output = "";
|
||||
|
||||
@ -538,9 +543,18 @@ $(function() {
|
||||
contextMenuContainer.show();
|
||||
contextMenu
|
||||
.html(output)
|
||||
.css(positionContextMenu(e));
|
||||
.css(positionContextMenu($(that), e));
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
viewport.on("contextmenu", ".user, .network .chan", function(e) {
|
||||
return showContextMenu(this, e);
|
||||
});
|
||||
|
||||
viewport.on("click", "#chat .menu", function(e) {
|
||||
e.currentTarget = $(e.currentTarget).closest(".chan")[0];
|
||||
return showContextMenu(this, e);
|
||||
});
|
||||
|
||||
contextMenuContainer.on("click contextmenu", function() {
|
||||
@ -738,15 +752,6 @@ $(function() {
|
||||
});
|
||||
});
|
||||
|
||||
chat.on("click", ".close", function() {
|
||||
var id = $(this)
|
||||
.closest(".chan")
|
||||
.data("id");
|
||||
sidebar.find(".chan[data-id='" + id + "']")
|
||||
.find(".close")
|
||||
.click();
|
||||
});
|
||||
|
||||
chat.on("msg", ".messages", function(e, target, msg) {
|
||||
var button = sidebar.find(".chan[data-target='" + target + "']");
|
||||
var isQuery = button.hasClass("query");
|
||||
|
||||
@ -132,15 +132,13 @@ QUIT #d0907d
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
#chat .show-more-button,
|
||||
#windows .header .button {
|
||||
#chat .show-more-button {
|
||||
background: #2e3642;
|
||||
border-color: #242a33;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#chat .show-more-button:hover,
|
||||
#windows .header .button:hover {
|
||||
#chat .show-more-button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -162,15 +162,13 @@ body {
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
#chat .show-more-button,
|
||||
#windows .header .button {
|
||||
#chat .show-more-button {
|
||||
background: #434443;
|
||||
border-color: #101010;
|
||||
color: #dcdccc;
|
||||
}
|
||||
|
||||
#chat .show-more-button:hover,
|
||||
#windows .header .button:hover {
|
||||
#chat .show-more-button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -1,23 +1,11 @@
|
||||
{{#each channels}}
|
||||
<div id="chan-{{id}}" data-title="{{name}}" data-id="{{id}}" data-type="{{type}}" class="chan {{type}}">
|
||||
<div id="chan-{{id}}" data-title="{{name}}" data-id="{{id}}" data-type="{{type}}" data-target="#chan-{{id}}" class="chan {{type}}">
|
||||
<div class="header">
|
||||
<button class="lt"></button>
|
||||
{{#equal type "channel"}}
|
||||
<button class="rt"></button>
|
||||
{{/equal}}
|
||||
<div class="right">
|
||||
<button class="button close">
|
||||
{{#equal type "lobby"}}
|
||||
Disconnect
|
||||
{{else}}
|
||||
{{#equal type "query"}}
|
||||
Close
|
||||
{{else}}
|
||||
Leave
|
||||
{{/equal}}
|
||||
{{/equal}}
|
||||
</button>
|
||||
</div>
|
||||
<button class="menu"></button>
|
||||
<span class="title">{{name}}</span>
|
||||
<span class="topic">{{{parse topic}}}</span>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user