Improved poke modal
This commit is contained in:
parent
f336a50870
commit
15ca5f6531
7 changed files with 167 additions and 37 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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"]
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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 + "\"";
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Add table
Reference in a new issue