Improved poke modal

This commit is contained in:
WolverinDEV 2019-05-25 19:06:57 +02:00
parent f336a50870
commit 15ca5f6531
7 changed files with 167 additions and 37 deletions

View file

@ -1,4 +1,11 @@
# Changelog: # Changelog:
* **25.05.19**
- Show icons within the permission editor
- Added the possibility to select icons within the permission editor
- Added server group clients list
- Improved invite buddy dialog
- Improved poke modal system
* **24.05.19** * **24.05.19**
- Implemented icon upload - Implemented icon upload

View file

@ -2,24 +2,85 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.container-information { .container-servers {
text-align: center; display: flex;
flex-direction: column;
justify-content: stretch;
.server {
display: flex;
flex-direction: column;
justify-content: stretch;
.server-name {
margin-top: 5px;
flex-grow: 0;
flex-shrink: 0;
font-weight: bold;
text-decoration: underline;
} }
.container-message { .poke-list {
text-align: center; display: flex;
flex-direction: column;
justify-content: flex-start;
.message { overflow-y: auto;
color: green; overflow-x: auto;
.entry {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-shrink: 0;
flex-grow: 0;
> * {
white-space: nowrap;
} }
.date, .user, .text {
margin-right: 5px;
}
.date {
color: cornflowerblue;
}
.text {
color: #004d00;
}
}
}
}
}
.buttons {
display: flex;
flex-direction: row;
justify-content: stretch;
margin-top: 5px;
flex-shrink: 0;
flex-grow: 0;
.spacer {
flex-grow: 1;
flex-shrink: 1;
} }
.button-close { .button-close {
flex-grow: 0;
flex-shrink: 0;
margin-top: 5px; margin-top: 5px;
width: 150px; width: 150px;
float: right; float: right;
} }
} }
}
/* /*
<script class="jsrender-template" id="tmpl_poke_popup" type="text/html"> <script class="jsrender-template" id="tmpl_poke_popup" type="text/html">

View file

@ -2586,13 +2586,11 @@
</script> </script>
<script class="jsrender-template" id="tmpl_poke_popup" type="text/html"> <script class="jsrender-template" id="tmpl_poke_popup" type="text/html">
<div class="container-poke"> <div class="container-poke">
<div class="container-information"> <div class="container-servers"></div>
<a>{{tr "You have been poked by"/}} </a><node key="invoker"></node><a>:</a> <div class="buttons">
<div class="spacer"></div>
<button class="btn btn-raised btn-primary button-close">{{tr "Close" /}}</button>
</div> </div>
<div class="container-message">
<a class="message">{{>message}}</a>
</div>
<button class="button-close">{{tr "Close" /}}</button>
</div> </div>
</script> </script>
<script class="jsrender-template" id="tmpl_invite" type="text/html"> <script class="jsrender-template" id="tmpl_invite" type="text/html">

View file

@ -733,7 +733,7 @@ namespace connection {
handleNotifyClientPoke(json) { handleNotifyClientPoke(json) {
json = json[0]; json = json[0];
Modals.spawnPoke({ Modals.spawnPoke(this.connection_handler, {
id: parseInt(json["invokerid"]), id: parseInt(json["invokerid"]),
name: json["invokername"], name: json["invokername"],
unique_id: json["invokeruid"] unique_id: json["invokeruid"]

View file

@ -326,7 +326,6 @@ function main() {
password: password, password: password,
hashed: password_hashed hashed: password_hashed
} : undefined); } : undefined);
Modals.spawnInviteEditor(connection);
} else { } else {
Modals.spawnConnectModal({ Modals.spawnConnectModal({
url: address, url: address,

View file

@ -52,6 +52,7 @@ namespace htmltags {
{ {
if(properties.add_braces) if(properties.add_braces)
result = result + "\""; result = result + "\"";
result = result + MessageHelper.htmlEscape(properties.client_name || "undefined").join(" "); result = result + MessageHelper.htmlEscape(properties.client_name || "undefined").join(" ");
if(properties.add_braces) if(properties.add_braces)
result = result + "\""; result = result + "\"";

View file

@ -3,28 +3,92 @@
/// <reference path="../../proto.ts" /> /// <reference path="../../proto.ts" />
namespace Modals { namespace Modals {
export function spawnPoke(invoker: { let global_modal: PokeModal;
name: string,
id: number, interface ServerEntry {
unique_id: string source: ConnectionHandler;
}, message) { add_message(invoker: PokeInvoker, message: string);
let modal; }
modal = createModal({
class PokeModal {
private _handle: Modal;
private source_map: ServerEntry[] = [];
constructor() {
this._handle = createModal({
header: tr("You have been poked!"), header: tr("You have been poked!"),
body: () => { body: () => {
let template = $("#tmpl_poke_popup").renderTag({ let template = $("#tmpl_poke_popup").renderTag();
"invoker": ClientEntry.chatTag(invoker.id, invoker.name, invoker.unique_id, true), template.find(".button-close").on('click', event => this._handle_close());
"message": message
});
template = $.spawn("div").append(template);
template.find(".button-close").on('click', event => modal.close());
return template; return template;
}, },
footer: undefined, footer: undefined,
width: 750 width: 750
}); });
modal.open(); this._handle.close_listener.push(() => this._handle_close());
}
modal() { return this._handle; }
add_poke(source: ConnectionHandler, invoker: PokeInvoker, message: string) {
let handler: ServerEntry;
for(const entry of this.source_map)
if(entry.source === source) {
handler = entry;
break;
}
if(!handler) {
const html_tag = $.spawn("div").addClass("server");
const poke_list = $.spawn("div").addClass("poke-list");
$.spawn("div")
.addClass("server-name")
.text(source && source.channelTree && source.channelTree.server ? source.channelTree.server.properties.virtualserver_name : "unknown")
.appendTo(html_tag);
poke_list.appendTo(html_tag);
this.source_map.push(handler = {
source: source,
add_message: (invoker: PokeInvoker, message: string) => {
const container = $.spawn("div").addClass("entry");
$.spawn("div").addClass("date").text(moment().format("HH:mm:ss") + " - ").appendTo(container);
$.spawn("div").addClass("user").append($(htmltags.generate_client({
add_braces: true,
client_id: invoker.id,
client_name: invoker.name,
client_unique_id: invoker.unique_id
}))).appendTo(container);
if(message) {
$.spawn("div").addClass("text").text(tr("pokes you:")).appendTo(container);
$.spawn("div").addClass("poke-message").text(message).appendTo(container);
} else {
$.spawn("div").addClass("text").text(tr("pokes you.")).appendTo(container);
}
container.appendTo(poke_list);
}
});
this._handle.htmlTag.find(".container-servers").append(html_tag);
}
handler.add_message(invoker, message);
}
private _handle_close() {
this._handle.close();
global_modal = undefined;
}
}
type PokeInvoker = {
name: string,
id: number,
unique_id: string
};
export function spawnPoke(source: ConnectionHandler, invoker: PokeInvoker, message: string) {
if(!global_modal)
global_modal = new PokeModal();
global_modal.add_poke(source, invoker, message);
global_modal.modal().open();
} }
} }