forked from mystiq/hydrogen-web
add destructive flag to delete menu option
This commit is contained in:
parent
5b0675b711
commit
6a5d856093
3 changed files with 17 additions and 10 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue