Add join channel UI via context menu or plus button next to lobbys
This commit is contained in:
parent
148628c49f
commit
3fde87efbc
@ -222,6 +222,7 @@ kbd {
|
|||||||
#viewport .rt::before { content: "\f0c0"; /* http://fontawesome.io/icon/users/ */ }
|
#viewport .rt::before { content: "\f0c0"; /* http://fontawesome.io/icon/users/ */ }
|
||||||
#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
|
#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
|
||||||
|
|
||||||
|
.context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
|
||||||
.context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
|
.context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
|
||||||
.context-menu-close::before { content: "\f00d"; /* http://fontawesome.io/icon/times/ */ }
|
.context-menu-close::before { content: "\f00d"; /* http://fontawesome.io/icon/times/ */ }
|
||||||
.context-menu-list::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
|
.context-menu-list::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
|
||||||
@ -457,7 +458,6 @@ kbd {
|
|||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar button,
|
|
||||||
#sidebar .chan,
|
#sidebar .chan,
|
||||||
#sidebar .sign-out,
|
#sidebar .sign-out,
|
||||||
#sidebar .empty {
|
#sidebar .empty {
|
||||||
@ -551,6 +551,7 @@ kbd {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#sidebar .badge,
|
#sidebar .badge,
|
||||||
|
#sidebar .add-channel,
|
||||||
#sidebar .close {
|
#sidebar .close {
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
@ -594,6 +595,32 @@ kbd {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sidebar .lobby .add-channel {
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transition: opacity 0.2s, background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .lobby .add-channel::before {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
content: "+";
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .lobby .add-channel {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .lobby .add-channel:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
#sidebar .chan.active .close {
|
#sidebar .chan.active .close {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
display: unset;
|
display: unset;
|
||||||
@ -685,7 +712,7 @@ kbd {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#windows .input {
|
.input {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid #cdd3da;
|
border: 1px solid #cdd3da;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@ -894,6 +921,35 @@ kbd {
|
|||||||
touch-action: pan-y;
|
touch-action: pan-y;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggled via JavaScript
|
||||||
|
*/
|
||||||
|
#sidebar .join-form {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .join-form .input {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .join-form .btn {
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
padding: 1px;
|
||||||
|
margin: auto;
|
||||||
|
height: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .add-channel-tooltip {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
#chat .show-more {
|
#chat .show-more {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
@ -132,6 +132,12 @@ $(function() {
|
|||||||
text: "List all channels",
|
text: "List all channels",
|
||||||
data: target.data("id"),
|
data: target.data("id"),
|
||||||
});
|
});
|
||||||
|
output += templates.contextmenu_item({
|
||||||
|
class: "join",
|
||||||
|
action: "join",
|
||||||
|
text: "Join a channel\u2026",
|
||||||
|
data: target.data("id"),
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if (target.hasClass("channel")) {
|
if (target.hasClass("channel")) {
|
||||||
output += templates.contextmenu_item({
|
output += templates.contextmenu_item({
|
||||||
@ -477,7 +483,39 @@ $(function() {
|
|||||||
closeChan($(this).closest(".chan"));
|
closeChan($(this).closest(".chan"));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
sidebar.on("click", ".add-channel", (e) => {
|
||||||
|
const id = $(e.target).data("id");
|
||||||
|
const joinForm = $(`#join-channel-${id}`);
|
||||||
|
joinForm.toggle();
|
||||||
|
joinForm.find(".input[name='channel']").focus();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
sidebar.on("submit", ".join-form", function() {
|
||||||
|
const form = $(this);
|
||||||
|
const channel = form.find("input[name='channel']");
|
||||||
|
const channelString = channel.val();
|
||||||
|
const key = form.find("input[name='key']");
|
||||||
|
const keyString = key.val();
|
||||||
|
const chan = utils.findCurrentNetworkChan(channelString);
|
||||||
|
if (chan.length) {
|
||||||
|
chan.click();
|
||||||
|
} else {
|
||||||
|
socket.emit("input", {
|
||||||
|
text: `/join ${channelString} ${keyString}`,
|
||||||
|
target: form.prev().data("id"),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
channel.val("");
|
||||||
|
key.val("");
|
||||||
|
form.hide();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
const contextMenuActions = {
|
const contextMenuActions = {
|
||||||
|
join: function(itemData) {
|
||||||
|
$(`#join-channel-${itemData}`).show();
|
||||||
|
},
|
||||||
close: function(itemData) {
|
close: function(itemData) {
|
||||||
closeChan($(`.networks .chan[data-target="${itemData}"]`));
|
closeChan($(`.networks .chan[data-target="${itemData}"]`));
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,15 @@
|
|||||||
{{#each channels}}
|
{{#each channels}}
|
||||||
<div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}} chan-{{slugify name}}">
|
<div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}} chan-{{slugify name}}">
|
||||||
|
{{#equal type "lobby"}}
|
||||||
|
<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel...">
|
||||||
|
<button class="add-channel" aria-label="Join a channel..." data-id="{{id}}"></button>
|
||||||
|
</span>
|
||||||
|
{{/equal}}
|
||||||
<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
|
<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
|
||||||
{{#notEqual type "lobby"}}<button class="close" aria-label="Close"></button>{{/notEqual}}
|
{{#notEqual type "lobby"}}<button class="close" aria-label="Close"></button>{{/notEqual}}
|
||||||
<span class="name" title="{{name}}">{{name}}</span>
|
<span class="name" title="{{name}}">{{name}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
{{#equal type "lobby"}}
|
||||||
|
{{> join_channel}}
|
||||||
|
{{/equal}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
|
@ -42,6 +42,7 @@ module.exports = {
|
|||||||
msg_unhandled: require("./msg_unhandled.tpl"),
|
msg_unhandled: require("./msg_unhandled.tpl"),
|
||||||
network: require("./network.tpl"),
|
network: require("./network.tpl"),
|
||||||
image_viewer: require("./image_viewer.tpl"),
|
image_viewer: require("./image_viewer.tpl"),
|
||||||
|
join_channel: require("./join_channel.tpl"),
|
||||||
session: require("./session.tpl"),
|
session: require("./session.tpl"),
|
||||||
unread_marker: require("./unread_marker.tpl"),
|
unread_marker: require("./unread_marker.tpl"),
|
||||||
user: require("./user.tpl"),
|
user: require("./user.tpl"),
|
||||||
|
5
client/views/join_channel.tpl
Normal file
5
client/views/join_channel.tpl
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<form id="join-channel-{{id}}" class="join-form" method="post" action="" autocomplete="off">
|
||||||
|
<input type="text" class="input" name="channel" placeholder="Channel" pattern="[^\s]+" maxlength="200" title="Should be a valid channel name">
|
||||||
|
<input type="password" class="input" name="key" placeholder="Password (optional)" pattern="[^\s]+" title="Should be a valid channel key" maxlength="200" >
|
||||||
|
<button type="submit" class="btn joinchan:submit" data-id="{{id}}">Join</button>
|
||||||
|
</form>
|
Loading…
Reference in New Issue
Block a user