Improved poke modal

ChangeLog.md

@@ -1,4 +1,11 @@
 # 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**
     - Implemented icon upload
     

shared/css/static/modal-poke.scss

@@ -2,22 +2,83 @@
 	display: flex;
 	flex-direction: column;
 
-	.container-information {
-		text-align: center;
-	}
+	.container-servers {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
 
-	.container-message {
-		text-align: center;
+		.server {
+			display: flex;
+			flex-direction: column;
+			justify-content: stretch;
 
-		.message {
-			color: green;
+			.server-name {
+				margin-top: 5px;
+
+				flex-grow: 0;
+				flex-shrink: 0;
+
+				font-weight: bold;
+				text-decoration: underline;
+			}
+
+			.poke-list {
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-start;
+
+				overflow-y: auto;
+				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;
+					}
+				}
+			}
 		}
 	}
 
-	.button-close {
+	.buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: stretch;
+
 		margin-top: 5px;
-		width: 150px;
-		float: right;
+		flex-shrink: 0;
+		flex-grow: 0;
+
+		.spacer {
+			flex-grow: 1;
+			flex-shrink: 1;
+		}
+
+		.button-close {
+			flex-grow: 0;
+			flex-shrink: 0;
+
+			margin-top: 5px;
+			width: 150px;
+			float: right;
+		}
 	}
 }
 

shared/html/templates.html

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

shared/js/connection/CommandHandler.ts

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

shared/js/main.ts

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

shared/js/ui/htmltags.ts

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

shared/js/ui/modal/ModalPoke.ts

@@ -3,28 +3,92 @@
 /// <reference path="../../proto.ts" />
 
 namespace Modals {
-    export function spawnPoke(invoker: {
+    let global_modal: PokeModal;
+
+    interface ServerEntry {
+        source: ConnectionHandler;
+        add_message(invoker: PokeInvoker, message: string);
+    }
+
+    class PokeModal {
+        private _handle: Modal;
+        private source_map: ServerEntry[] = [];
+
+        constructor() {
+            this._handle = createModal({
+                header: tr("You have been poked!"),
+                body: () => {
+                    let template = $("#tmpl_poke_popup").renderTag();
+                    template.find(".button-close").on('click', event => this._handle_close());
+                    return template;
+                },
+                footer: undefined,
+                width: 750
+            });
+            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
-    }, message) {
-        let modal;
-        modal = createModal({
-            header: tr("You have been poked!"),
-            body: () => {
-                let template = $("#tmpl_poke_popup").renderTag({
-                    "invoker": ClientEntry.chatTag(invoker.id, invoker.name, invoker.unique_id, true),
-                    "message": message
-                });
-                template = $.spawn("div").append(template);
+    };
 
-                template.find(".button-close").on('click', event => modal.close());
-
-                return template;
-            },
-            footer: undefined,
-            width: 750
-        });
-        modal.open();
+    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();
     }
 }