diff --git a/client/css/style.css b/client/css/style.css index 22f2fd16..db7b4a23 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -421,6 +421,14 @@ button, right: 3px; } +#sidebar, +#footer { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + #footer { background: rgba(0, 0, 0, .06); border-radius: 2px; @@ -1178,6 +1186,62 @@ button, width: 58px; } +#context-menu-container { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; + background: transparent; +} + +#context-menu { + position: absolute; + list-style: none; + margin: 0; + padding: 0; + min-width: 160px; + font-size: 14px; + background-color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, .1); + border: 1px solid rgba(61, 70, 77, .1); +} + +.context-menu-item:first-child { + border-bottom: 1px solid rgba(61, 70, 77, .1); +} + +.context-menu-item { + cursor: pointer; + display: block; + padding: 6px 8px; + color: #333; +} + +.context-menu-item:hover { + background-color: #f6f6f6; +} + +.context-menu-item:before { + font-family: FontAwesome; + width: 20px; + display: inline-block; +} + +.context-menu-user:before { + content: "\f007"; +} + +.context-menu-chan:before { + content: "\f0f6"; +} + +.context-menu-close:before { + content: "\f057"; +} + /** * Tooltips * See http://primercss.io/tooltips/ diff --git a/client/index.html b/client/index.html index 0a634917..89c49357 100644 --- a/client/index.html +++ b/client/index.html @@ -324,6 +324,10 @@ +
+ +
+ diff --git a/client/js/lounge.js b/client/js/lounge.js index 413e5b21..dac046ed 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -497,6 +497,8 @@ $(function() { }); var viewport = $("#viewport"); + var contextMenuContainer = $("#context-menu-container"); + var contextMenu = $("#context-menu"); viewport.on("click", ".lt, .rt", function(e) { var self = $(this); @@ -509,6 +511,63 @@ $(function() { } }); + function positionContextMenu(e) { + var top, left; + var menuWidth = contextMenu.outerWidth(); + var menuHeight = contextMenu.outerHeight(); + + if ((window.innerWidth - e.pageX) < menuWidth) { + left = window.innerWidth - menuWidth; + } else { + left = e.pageX; + } + + if ((window.innerHeight - e.pageY) < menuHeight) { + top = window.innerHeight - menuHeight; + } else { + top = e.pageY; + } + + return {left: left, top: top}; + } + + viewport.on("contextmenu", ".user, .network .chan", function(e) { + var target = $(e.currentTarget); + var output = ""; + + if (target.hasClass("user")) { + output = render("contextmenu_item", { + class: "user", + text: target.text(), + data: target.data("name") + }); + } + else if (target.hasClass("chan")) { + output = render("contextmenu_item", { + class: "chan", + text: target.data("title"), + data: target.data("target") + }); + output += render("contextmenu_item", { + class: "close", + text: target.hasClass("lobby") ? "Disconnect" : target.hasClass("query") ? "Close" : "Leave", + data: target.data("target") + }); + } + + contextMenuContainer.show(); + contextMenu + .html(output) + .css(positionContextMenu(e)); + + return false; + }); + + contextMenuContainer.on("click contextmenu", function() { + contextMenuContainer.hide(); + return false; + }); + var input = $("#input") .history() .tab(complete, {hint: false}); @@ -642,6 +701,20 @@ $(function() { return false; }); + contextMenu.on("click", ".context-menu-item", function() { + switch ($(this).data("action")) { + case "close": + $(".networks .chan[data-target=" + $(this).data("data") + "] .close").click(); + break; + case "chan": + $(".networks .chan[data-target=" + $(this).data("data") + "]").click(); + break; + case "user": + $(".channel.active .users .user[data-name=" + $(this).data("data") + "]").click(); + break; + } + }); + chat.on("input", ".search", function() { var value = $(this).val().toLowerCase(); var names = $(this).closest(".users").find(".names"); @@ -857,6 +930,12 @@ $(function() { } }); + Mousetrap.bind([ + "escape" + ], function() { + contextMenuContainer.hide(); + }); + setInterval(function() { chat.find(".chan:not(.active)").each(function() { var chan = $(this); diff --git a/client/views/actions/action.tpl b/client/views/actions/action.tpl index 0e28c0c8..ddb8efce 100644 --- a/client/views/actions/action.tpl +++ b/client/views/actions/action.tpl @@ -1,2 +1,2 @@ -{{mode}}{{from}} +{{mode}}{{from}} {{{parse text}}} diff --git a/client/views/actions/invite.tpl b/client/views/actions/invite.tpl index 1f3a7750..6e689ac1 100644 --- a/client/views/actions/invite.tpl +++ b/client/views/actions/invite.tpl @@ -1,9 +1,9 @@ -{{from}} +{{from}} invited {{#if invitedYou}} you {{else}} - {{target}} + {{target}} {{/if}} to {{{parse text}}} diff --git a/client/views/actions/join.tpl b/client/views/actions/join.tpl index 5d026abb..2eaf2a93 100644 --- a/client/views/actions/join.tpl +++ b/client/views/actions/join.tpl @@ -1,3 +1,3 @@ -{{mode}}{{from}} +{{mode}}{{from}} ({{hostmask}}) has joined the channel diff --git a/client/views/actions/kick.tpl b/client/views/actions/kick.tpl index 22cb4a0c..e41feb16 100644 --- a/client/views/actions/kick.tpl +++ b/client/views/actions/kick.tpl @@ -1,6 +1,6 @@ -{{mode}}{{from}} +{{mode}}{{from}} has kicked -{{target}} +{{target}} {{#if text}} ({{{parse text}}}) {{/if}} diff --git a/client/views/actions/mode.tpl b/client/views/actions/mode.tpl index 7574695f..56b5aa97 100644 --- a/client/views/actions/mode.tpl +++ b/client/views/actions/mode.tpl @@ -1,3 +1,3 @@ -{{mode}}{{from}} +{{mode}}{{from}} sets mode {{{parse text}}} diff --git a/client/views/actions/nick.tpl b/client/views/actions/nick.tpl index 3ecd5ac9..dc6ed133 100644 --- a/client/views/actions/nick.tpl +++ b/client/views/actions/nick.tpl @@ -1,3 +1,3 @@ -{{mode}}{{from}} +{{mode}}{{from}} is now known as -{{mode}}{{text}} +{{mode}}{{text}} diff --git a/client/views/actions/part.tpl b/client/views/actions/part.tpl index 54c7370e..fd2eb23f 100644 --- a/client/views/actions/part.tpl +++ b/client/views/actions/part.tpl @@ -1,4 +1,4 @@ -{{mode}}{{from}} +{{mode}}{{from}} ({{hostmask}}) has left the channel {{#if text}} diff --git a/client/views/actions/quit.tpl b/client/views/actions/quit.tpl index 2627812b..3f0933f8 100644 --- a/client/views/actions/quit.tpl +++ b/client/views/actions/quit.tpl @@ -1,4 +1,4 @@ -{{mode}}{{from}} +{{mode}}{{from}} ({{hostmask}}) has quit {{#if text}} diff --git a/client/views/actions/topic.tpl b/client/views/actions/topic.tpl index 4dba215c..56962794 100644 --- a/client/views/actions/topic.tpl +++ b/client/views/actions/topic.tpl @@ -1,7 +1,7 @@ {{#if isSetByChan}} The topic is: {{else}} - {{mode}}{{from}} + {{mode}}{{from}} has changed the topic to: {{/if}} diff --git a/client/views/contextmenu_item.tpl b/client/views/contextmenu_item.tpl new file mode 100644 index 00000000..e1cd4dc5 --- /dev/null +++ b/client/views/contextmenu_item.tpl @@ -0,0 +1,3 @@ +
  • + {{text}} +
    • diff --git a/client/views/msg.tpl b/client/views/msg.tpl index 35ca031f..c3155ba4 100644 --- a/client/views/msg.tpl +++ b/client/views/msg.tpl @@ -4,7 +4,7 @@ {{#if from}} - {{mode}}{{from}} + {{mode}}{{from}} {{/if}} diff --git a/client/views/user.tpl b/client/views/user.tpl index 5502c5f7..7ce24097 100644 --- a/client/views/user.tpl +++ b/client/views/user.tpl @@ -13,7 +13,7 @@ {{/unless}}
    {{/diff}} - + {{/each}}