Merge pull request #184 from thelounge/xpaw/close-button

Change close button behaviour

client/css/style.css

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

client/js/lounge.js

@@ -491,27 +491,32 @@ $(function() {
 		}
 	});
 
-	function positionContextMenu(e) {
+	function positionContextMenu(that, e) {
-		var top, left;
+		var offset;
 		var menuWidth = contextMenu.outerWidth();
 		var menuHeight = contextMenu.outerHeight();
 
-		if ((window.innerWidth - e.pageX) < menuWidth) {
+		if (that.hasClass("menu")) {
-			left = window.innerWidth - menuWidth;
+			offset = that.offset();
-		} else {
+			offset.left -= menuWidth - that.outerWidth();
-			left = e.pageX;
+			offset.top += that.outerHeight();
+			return offset;
 		}
 
-		if ((window.innerHeight - e.pageY) < menuHeight) {
+		offset = {left: e.pageX, top: e.pageY};
-			top = window.innerHeight - menuHeight;
+
-		} else {
+		if ((window.innerWidth - offset.left) < menuWidth) {
-			top = e.pageY;
+			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");

client/themes/morning.css

@@ -132,15 +132,13 @@ QUIT #d0907d
 }
 
 /* Buttons */
-#chat .show-more-button,
+#chat .show-more-button {
-#windows .header .button {
 	background: #2e3642;
 	border-color: #242a33;
 	color: #ccc;
 }
 
-#chat .show-more-button:hover,
+#chat .show-more-button:hover {
-#windows .header .button:hover {
 	color: #fff;
 }
 

client/themes/zenburn.css

@@ -162,15 +162,13 @@ body {
 }
 
 /* Buttons */
-#chat .show-more-button,
+#chat .show-more-button {
-#windows .header .button {
 	background: #434443;
 	border-color: #101010;
 	color: #dcdccc;
 }
 
-#chat .show-more-button:hover,
+#chat .show-more-button:hover {
-#windows .header .button:hover {
 	color: #fff;
 }
 

client/views/chat.tpl

@@ -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="menu"></button>
-			<button class="button close">
-				{{#equal type "lobby"}}
-					Disconnect
-				{{else}}
-					{{#equal type "query"}}
-						Close
-					{{else}}
-						Leave
-					{{/equal}}
-				{{/equal}}
-			</button>
-		</div>
 		<span class="title">{{name}}</span>
 		<span class="topic">{{{parse topic}}}</span>
 	</div>