mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

add destructive flag to delete menu option

Browse source
This commit is contained in:
Bruno Windels 2021-05-28 16:25:23 +02:00
parent 5b0675b711
commit 6a5d856093
3 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/platform/web/ui/css/themes/element/theme.css
View file

@ -671,14 +671,8 @@ button.link {
padding: 8px 32px 8px 8px; padding: 8px 32px 8px 8px;
} }
.menu button:focus { .menu .destructive button {
background-color: #03B381; color: #FF4B55;
color: white;
}
.menu button:hover {
background-color: #03B381;
color: white;
} }
.InviteView_body { .InviteView_body {

15
src/platform/web/ui/general/Menu.js
View file

@ -28,8 +28,15 @@ export class Menu extends TemplateView {
render(t) { render(t) {
return t.ul({className: "menu", role: "menu"}, this._options.map(o => { return t.ul({className: "menu", role: "menu"}, this._options.map(o => {
const className = {
destructive: o.destructive,
};
if (o.icon) {
className.icon = true;
className[o.icon] = true;
}
return t.li({ return t.li({
className: o.icon ? `icon ${o.icon}` : "", className,
}, t.button({onClick: o.callback}, o.label)); }, t.button({onClick: o.callback}, o.label));
})); }));
} }
@ -40,10 +47,16 @@ class MenuOption {
this.label = label; this.label = label;
this.callback = callback; this.callback = callback;
this.icon = null; this.icon = null;
this.destructive = false;
} }
setIcon(className) { setIcon(className) {
this.icon = className; this.icon = className;
return this; return this;
} }
setDestructive() {
this.destructive = true;
return this;
}
} }

2
src/platform/web/ui/session/room/timeline/BaseMessageView.js
View file

@ -82,7 +82,7 @@ export class BaseMessageView extends TemplateView {
if (vm.isPending) { if (vm.isPending) {
options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending())); options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending()));
} else if (vm.shape !== "redacted") { } else if (vm.shape !== "redacted") {
options.push(Menu.option(vm.i18n`Delete`, () => vm.redact())); options.push(Menu.option(vm.i18n`Delete`, () => vm.redact()).setDestructive());
} }
return options; return options;
} }