added message buttons

.dist/message.js

@@ -6,6 +6,7 @@ import { Embed } from "./embed.js";
 import { File } from "./file.js";
 import { SnowFlake } from "./snowflake.js";
 import { Emoji } from "./emoji.js";
+import { Dialog } from "./dialog.js";
 class Message extends SnowFlake {
     static contextmenu = new Contextmenu("message menu");
     owner;
@@ -59,10 +60,7 @@ class Message extends SnowFlake {
             });
         });
         Message.contextmenu.addbutton("Edit", function () {
-            this.channel.editing = this;
+            this.setEdit();
-            const markdown = document.getElementById("typebox")["markdown"];
-            markdown.txt = this.content.rawString.split("");
-            markdown.boxupdate(document.getElementById("typebox"));
         }, null, function () {
             return this.author.id === this.localuser.user.id;
         });
@@ -72,6 +70,12 @@ class Message extends SnowFlake {
             return this.canDelete();
         });
     }
+    setEdit() {
+        this.channel.editing = this;
+        const markdown = document.getElementById("typebox")["markdown"];
+        markdown.txt = this.content.rawString.split("");
+        markdown.boxupdate(document.getElementById("typebox"));
+    }
     constructor(messagejson, owner) {
         super(messagejson.id);
         this.owner = owner;
@@ -478,8 +482,67 @@ class Message extends SnowFlake {
         this.reactdiv = new WeakRef(reactions);
         this.updateReactions();
         div.append(reactions);
+        this.bindButtonEvent();
         return (div);
     }
+    bindButtonEvent() {
+        if (this.div) {
+            let buttons;
+            this.div.onmouseenter = _ => {
+                if (buttons) {
+                    buttons.remove();
+                    buttons = undefined;
+                }
+                if (this.div) {
+                    buttons = document.createElement("div");
+                    buttons.classList.add("messageButtons", "flexltr");
+                    if (this.channel.hasPermission("SEND_MESSAGES")) {
+                        const container = document.createElement("div");
+                        const reply = document.createElement("span");
+                        reply.classList.add("svgtheme", "svg-reply", "svgicon");
+                        container.append(reply);
+                        buttons.append(container);
+                        container.onclick = _ => {
+                            this.channel.setReplying(this);
+                        };
+                    }
+                    if (this.author === this.localuser.user) {
+                        const container = document.createElement("div");
+                        const edit = document.createElement("span");
+                        edit.classList.add("svgtheme", "svg-edit", "svgicon");
+                        container.append(edit);
+                        buttons.append(container);
+                        container.onclick = _ => {
+                            this.setEdit();
+                        };
+                    }
+                    if (this.canDelete()) {
+                        const container = document.createElement("div");
+                        const reply = document.createElement("span");
+                        reply.classList.add("svgtheme", "svg-delete", "svgicon");
+                        container.append(reply);
+                        buttons.append(container);
+                        container.onclick = _ => {
+                            if (_.shiftKey) {
+                                this.delete();
+                                return;
+                            }
+                            const diaolog = new Dialog(["hdiv", ["title", "are you sure you want to delete this?"], ["button", "", "yes", () => { this.delete(); diaolog.hide(); }], ["button", "", "no", () => { diaolog.hide(); }]]);
+                            diaolog.show();
+                        };
+                    }
+                    console.log(buttons);
+                    this.div.append(buttons);
+                }
+            };
+            this.div.onmouseleave = _ => {
+                if (buttons) {
+                    buttons.remove();
+                    buttons = undefined;
+                }
+            };
+        }
+    }
     updateReactions() {
         const reactdiv = this.reactdiv.deref();
         if (!reactdiv)

webpage/message.ts

@@ -10,6 +10,7 @@ import{File}from"./file.js";
 import{ SnowFlake }from"./snowflake.js";
 import{ memberjson, messagejson }from"./jsontypes.js";
 import{Emoji}from"./emoji.js";
+import { Dialog } from "./dialog.js";
 
 class Message extends SnowFlake{
 	static contextmenu=new Contextmenu<Message,undefined>("message menu");
@@ -64,10 +65,7 @@ class Message extends SnowFlake{
 			});
 		});
 		Message.contextmenu.addbutton("Edit",function(this:Message){
-			this.channel.editing=this;
+			this.setEdit();
-			const markdown=(document.getElementById("typebox") as HTMLDivElement)["markdown"] as MarkDown;
-			markdown.txt=this.content.rawString.split("");
-			markdown.boxupdate(document.getElementById("typebox") as HTMLDivElement);
 		},null,function(){
 			return this.author.id===this.localuser.user.id;
 		});
@@ -77,6 +75,12 @@ class Message extends SnowFlake{
 			return this.canDelete();
 		});
 	}
+	setEdit(){
+		this.channel.editing=this;
+		const markdown=(document.getElementById("typebox") as HTMLDivElement)["markdown"] as MarkDown;
+		markdown.txt=this.content.rawString.split("");
+		markdown.boxupdate(document.getElementById("typebox") as HTMLDivElement);
+	}
 	constructor(messagejson:messagejson,owner:Channel){
 		super(messagejson.id);
 		this.owner=owner;
@@ -473,8 +477,67 @@ class Message extends SnowFlake{
 		this.reactdiv=new WeakRef(reactions);
 		this.updateReactions();
 		div.append(reactions);
+		this.bindButtonEvent();
 		return(div);
 	}
+	bindButtonEvent(){
+		if(this.div){
+			let buttons:HTMLDivElement|undefined;
+			this.div.onmouseenter=_=>{
+				if(buttons){
+					buttons.remove();
+					buttons=undefined;
+				}
+				if(this.div){
+					buttons=document.createElement("div");
+					buttons.classList.add("messageButtons","flexltr");
+					if(this.channel.hasPermission("SEND_MESSAGES")){
+						const container=document.createElement("div");
+						const reply=document.createElement("span");
+						reply.classList.add("svgtheme", "svg-reply", "svgicon");
+						container.append(reply);
+						buttons.append(container);
+						container.onclick=_=>{
+							this.channel.setReplying(this);
+						}
+					}
+					if(this.author===this.localuser.user){
+						const container=document.createElement("div");
+						const edit=document.createElement("span");
+						edit.classList.add("svgtheme", "svg-edit", "svgicon");
+						container.append(edit);
+						buttons.append(container);
+						container.onclick=_=>{
+							this.setEdit();
+						}
+					}
+					if(this.canDelete()){
+						const container=document.createElement("div");
+						const reply=document.createElement("span");
+						reply.classList.add("svgtheme", "svg-delete", "svgicon");
+						container.append(reply);
+						buttons.append(container);
+						container.onclick=_=>{
+							if(_.shiftKey){
+								this.delete();
+								return;
+							}
+							const diaolog=new Dialog(["hdiv",["title","are you sure you want to delete this?"],["button","","yes",()=>{this.delete();diaolog.hide()}],["button","","no",()=>{diaolog.hide()}]]);
+							diaolog.show();
+						}
+					}
+					console.log(buttons);
+					this.div.append(buttons);
+				}
+			}
+			this.div.onmouseleave=_=>{
+				if(buttons){
+					buttons.remove();
+					buttons=undefined;
+				}
+			}
+		}
+	}
 	updateReactions(){
 		const reactdiv=this.reactdiv.deref();
 		if(!reactdiv)return;

webpage/style.css

@@ -91,7 +91,6 @@ video{
 	}
 }
 .messagediv{
-	overflow: hidden;
 	max-width:100%;
 	/* width: 9%; */
 	/* display: inline-block; */
@@ -103,6 +102,7 @@ video{
 	flex-shrink: 0;
 	width: 100%;
 	box-sizing: border-box;
+	position: relative;
 }
 pre {
 	background: var(--code-bg);
@@ -1577,6 +1577,15 @@ form div{
 .svg-announce{
 	mask: url(/icons/announce.svg);
 }
+.svg-edit{
+	mask: url(/icons/edit.svg);
+}
+.svg-reply{
+	mask: url(/icons/reply.svg);
+}
+.svg-delete{
+	mask: url(/icons/delete.svg);
+}
 .svg-category{
 	mask: url(/icons/category.svg);
 }
@@ -2087,3 +2096,21 @@ form div{
 	margin-left:.05in;
 }
 
+.messageButtons{
+	height:.24in;
+	position:absolute;
+	top:-.075in;
+	right:4px;
+	background:var(--settings-hover);
+	padding:.02in;
+	div{
+		span{
+			display:block;
+			width:.175in;
+			height:.175in;
+		}
+		padding:.0in;
+		margin:.02in;
+		box-sizing:border-box;
+	}
+}