commit
94bcb21faa
@ -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;
|
||||
@ -1188,6 +1196,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/
|
||||
|
@ -324,6 +324,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="context-menu-container">
|
||||
<ul id="context-menu"></ul>
|
||||
</div>
|
||||
|
||||
<script src="js/libs.min.js"></script>
|
||||
<script src="js/lounge.templates.js"></script>
|
||||
<script src="js/lounge.js"></script>
|
||||
|
@ -477,6 +477,8 @@ $(function() {
|
||||
});
|
||||
|
||||
var viewport = $("#viewport");
|
||||
var contextMenuContainer = $("#context-menu-container");
|
||||
var contextMenu = $("#context-menu");
|
||||
|
||||
viewport.on("click", ".lt, .rt", function(e) {
|
||||
var self = $(this);
|
||||
@ -489,6 +491,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});
|
||||
@ -637,6 +696,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");
|
||||
@ -852,6 +925,12 @@ $(function() {
|
||||
}
|
||||
});
|
||||
|
||||
Mousetrap.bind([
|
||||
"escape"
|
||||
], function() {
|
||||
contextMenuContainer.hide();
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
chat.find(".chan:not(.active)").each(function() {
|
||||
var chan = $(this);
|
||||
|
@ -1,2 +1,2 @@
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
{{{parse text}}}
|
||||
|
@ -1,9 +1,9 @@
|
||||
<a href="#" class="user">{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{from}}</a>
|
||||
invited
|
||||
{{#if invitedYou}}
|
||||
you
|
||||
{{else}}
|
||||
<a href="#" class="user">{{target}}</a>
|
||||
<a href="#" class="user" data-name="{{target}}">{{target}}</a>
|
||||
{{/if}}
|
||||
to
|
||||
{{{parse text}}}
|
||||
|
@ -1,3 +1,3 @@
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
<i class="hostmask">({{hostmask}})</i>
|
||||
has joined the channel
|
||||
|
@ -1,6 +1,6 @@
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
has kicked
|
||||
<a href="#" class="user">{{target}}</a>
|
||||
<a href="#" class="user" data-name="{{target}}">{{target}}</a>
|
||||
{{#if text}}
|
||||
<i class="part-reason">({{{parse text}}})</i>
|
||||
{{/if}}
|
||||
|
@ -1,3 +1,3 @@
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
sets mode
|
||||
{{{parse text}}}
|
||||
|
@ -1,3 +1,3 @@
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
is now known as
|
||||
<a href="#" class="user">{{mode}}{{text}}</a>
|
||||
<a href="#" class="user" data-name="{{text}}">{{mode}}{{text}}</a>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
<i class="hostmask">({{hostmask}})</i>
|
||||
has left the channel
|
||||
{{#if text}}
|
||||
|
@ -1,4 +1,4 @@
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
<i class="hostmask">({{hostmask}})</i>
|
||||
has quit
|
||||
{{#if text}}
|
||||
|
@ -1,7 +1,7 @@
|
||||
{{#if isSetByChan}}
|
||||
The topic is:
|
||||
{{else}}
|
||||
<a href="#" class="user">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
has changed the topic to:
|
||||
{{/if}}
|
||||
|
||||
|
3
client/views/contextmenu_item.tpl
Normal file
3
client/views/contextmenu_item.tpl
Normal file
@ -0,0 +1,3 @@
|
||||
<li class="context-menu-item context-menu-{{class}}" data-action="{{class}}"{{#if data}} data-data="{{data}}"{{/if}}>
|
||||
{{text}}
|
||||
</li>
|
@ -4,7 +4,7 @@
|
||||
</span>
|
||||
<span class="from">
|
||||
{{#if from}}
|
||||
<a href="#" class="user" style="color: #{{stringcolor from}}">{{mode}}{{from}}</a>
|
||||
<a href="#" class="user" style="color: #{{stringcolor from}}" data-name="{{from}}">{{mode}}{{from}}</a>
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="text">
|
||||
|
@ -13,7 +13,7 @@
|
||||
{{/unless}}
|
||||
<div class="user-mode {{modes mode}}">
|
||||
{{/diff}}
|
||||
<button class="user" style="color: #{{stringcolor name}}">{{mode}}{{name}}</button>
|
||||
<button class="user" style="color: #{{stringcolor name}}" data-name="{{name}}">{{mode}}{{name}}</button>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user