From ebe6c5aae3c10486299c95ca577316efeaa0c2f2 Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Thu, 16 Jan 2025 22:42:05 -0600 Subject: [PATCH] more better right click menus --- src/webpage/contextmenu.ts | 14 ++++++--- src/webpage/direct.ts | 20 +++++++----- src/webpage/style.css | 30 ++++++++++++++++++ src/webpage/user.ts | 62 +++++++++++++++++++++++++++----------- 4 files changed, 97 insertions(+), 29 deletions(-) diff --git a/src/webpage/contextmenu.ts b/src/webpage/contextmenu.ts index e4bbbff..02e6f52 100644 --- a/src/webpage/contextmenu.ts +++ b/src/webpage/contextmenu.ts @@ -101,8 +101,14 @@ class ContextButton implements menuPart { } } class Seperator implements menuPart { - makeContextHTML(_obj1: x, _obj2: y, menu: HTMLDivElement): void { - menu.append(document.createElement("hr")); + private visable?: (obj1: x, obj2: y) => boolean; + constructor(visable?: (obj1: x, obj2: y) => boolean) { + this.visable = visable; + } + makeContextHTML(obj1: x, obj2: y, menu: HTMLDivElement): void { + if (!this.visable || this.visable(obj1, obj2)) { + menu.append(document.createElement("hr")); + } } } class Contextmenu { @@ -139,8 +145,8 @@ class Contextmenu { ) { this.buttons.push(new ContextButton(text, onClick, addProps)); } - addSeperator() { - this.buttons.push(new Seperator()); + addSeperator(visable?: (obj1: x, obj2: y) => boolean) { + this.buttons.push(new Seperator(visable)); } private makemenu(x: number, y: number, addinfo: x, other: y) { const div = document.createElement("div"); diff --git a/src/webpage/direct.ts b/src/webpage/direct.ts index 533b10e..f332752 100644 --- a/src/webpage/direct.ts +++ b/src/webpage/direct.ts @@ -342,13 +342,6 @@ class Group extends Channel { user: User; static contextmenu = new Contextmenu("channel menu"); static setupcontextmenu() { - this.contextmenu.addButton( - () => I18n.getTranslation("DMs.copyId"), - function (this: Group) { - navigator.clipboard.writeText(this.id); - }, - ); - this.contextmenu.addButton( () => I18n.getTranslation("DMs.markRead"), function (this: Group) { @@ -356,19 +349,32 @@ class Group extends Channel { }, ); + this.contextmenu.addSeperator(); + this.contextmenu.addButton( () => I18n.getTranslation("DMs.close"), function (this: Group) { this.deleteChannel(); }, + { + color: "red", + }, ); + this.contextmenu.addSeperator(); + this.contextmenu.addButton( () => I18n.getTranslation("user.copyId"), function () { navigator.clipboard.writeText(this.user.id); }, ); + this.contextmenu.addButton( + () => I18n.getTranslation("DMs.copyId"), + function (this: Group) { + navigator.clipboard.writeText(this.id); + }, + ); } constructor(json: dirrectjson, owner: Direct) { super(-1, owner, json.id); diff --git a/src/webpage/style.css b/src/webpage/style.css index 5280610..3e47692 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -835,6 +835,7 @@ span.instanceStatus { align-items: center; gap: 8px; cursor: pointer; + flex-shrink: 0; } .liststyle .statusDiv { right: -1px; @@ -2280,6 +2281,35 @@ fieldset input[type="radio"] { display: flex; width: 100%; padding: 0.2in; + overflow: scroll; + height: 100%; + + + + + + + + + + + + + + + + + + + + + + + + + + + > div { background: #00000030; margin-bottom: 0.1in; diff --git a/src/webpage/user.ts b/src/webpage/user.ts index 19edd78..1fce045 100644 --- a/src/webpage/user.ts +++ b/src/webpage/user.ts @@ -164,18 +164,22 @@ class User extends SnowFlake { this.relationshipType = type; } static setUpContextMenu(): void { - this.contextmenu.addButton( - () => I18n.getTranslation("user.copyId"), - function (this: User) { - navigator.clipboard.writeText(this.id); - }, - ); this.contextmenu.addButton( () => I18n.getTranslation("user.message"), function (this: User) { this.opendm(); }, + { + icon: { + css: "svg-frmessage", + }, + }, ); + + this.contextmenu.addSeperator((user) => { + return user.id !== user.localuser.user.id; + }); + this.contextmenu.addButton( () => I18n.getTranslation("user.block"), function (this: User) { @@ -211,6 +215,9 @@ class User extends SnowFlake { this.id !== this.localuser.user.id ); }, + icon: { + css: "svg-addfriend", + }, }, ); this.contextmenu.addButton( @@ -224,6 +231,23 @@ class User extends SnowFlake { }, }, ); + + this.contextmenu.addSeperator(); + + this.contextmenu.addButton( + () => I18n.getTranslation("user.editServerProfile"), + function (this: User, member: Member | undefined) { + if (!member) return; + member.showEditProfile(); + }, + { + visable: function (member) { + return member?.id === this.localuser.user.id; + }, + }, + ); + + //TODO kick icon this.contextmenu.addButton( () => I18n.getTranslation("user.kick"), function (this: User, member: Member | undefined) { @@ -241,21 +265,11 @@ class User extends SnowFlake { } return us.hasPermission("KICK_MEMBERS") && this.id !== this.localuser.user.id; }, + color: "red", }, ); - this.contextmenu.addButton( - () => I18n.getTranslation("user.editServerProfile"), - function (this: User, member: Member | undefined) { - if (!member) return; - member.showEditProfile(); - }, - { - visable: function (member) { - return member?.id === this.localuser.user.id; - }, - }, - ); + //TODO ban icon this.contextmenu.addButton( () => I18n.getTranslation("user.ban"), function (this: User, member: Member | undefined) { @@ -273,8 +287,12 @@ class User extends SnowFlake { } return us.hasPermission("BAN_MEMBERS") && this.id !== this.localuser.user.id; }, + color: "red", }, ); + + this.contextmenu.addSeperator(); + this.contextmenu.addButton( () => I18n.getTranslation("user.addRole"), async function (this: User, member: Member | undefined, e) { @@ -329,6 +347,14 @@ class User extends SnowFlake { }, }, ); + + this.contextmenu.addSeperator(); + this.contextmenu.addButton( + () => I18n.getTranslation("user.copyId"), + function (this: User) { + navigator.clipboard.writeText(this.id); + }, + ); } static checkuser(user: User | userjson, owner: Localuser): User {