added message buttons

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;
-			const markdown=(document.getElementById("typebox") as HTMLDivElement)["markdown"] as MarkDown;
-			markdown.txt=this.content.rawString.split("");
-			markdown.boxupdate(document.getElementById("typebox") as HTMLDivElement);
+			this.setEdit();
 		},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;
+	}
+}