alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-13 10:33:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix buid from cherry-commits

Browse Source
This commit is contained in:
evanpelle
2026-07-09 10:15:02 -07:00
parent 0a44f4d3db
commit 3687eee03b
1 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/ConfirmDialog.ts
+44 -19
View File
@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators.js";
import { translateText } from "../Utils";
/**
* A reusable inline confirmation dialog.
* A reusable inline confirmation / acknowledgement dialog.
*
* Usage:
* ```html
@@ -28,10 +28,16 @@ import { translateText } from "../Utils";
*/
@customElement("confirm-dialog")
export class ConfirmDialog extends LitElement {
@property() heading = "";
@property() message = "";
@property() variant: "danger" | "warning" = "danger";
@property() textareaPlaceholder = "";
@property() confirmText = "";
@property({ type: Boolean }) disabled = false;
@property({ type: Boolean }) showClose = false;
@property({ type: Boolean }) wide = false;
@property() buttons: "confirmCancel" | "confirmOnly" | "none" =
"confirmCancel";
@state() private text = "";
@@ -74,14 +80,29 @@ export class ConfirmDialog extends LitElement {
return html`
<div
class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80"
class="fixed inset-0 z-[10020] flex items-center justify-center bg-black/80"
@click=${(e: Event) => {
if (e.target === e.currentTarget) this.handleCancel();
}}
>
<div
class="mx-4 w-full max-w-sm p-6 rounded-2xl border ${borderColor} ${cardBg} shadow-2xl"
class="relative mx-4 w-full ${this.wide
? "max-w-md"
: "max-w-sm"} p-6 rounded-2xl border ${borderColor} ${cardBg} shadow-2xl"
>
${this.showClose
? html`<button
@click=${() => this.handleCancel()}
class="absolute top-3 right-3 flex h-8 w-8 items-center justify-center rounded-lg text-xl leading-none text-white/50 hover:bg-white/10 hover:text-white transition-all"
>
×
</button>`
: ""}
${this.heading
? html`<h2 class="text-lg font-bold text-white mb-2 pr-8">
${this.heading}
</h2>`
: ""}
<p class="text-sm font-medium ${textColor} mb-5">${this.message}</p>
${this.textareaPlaceholder
? html`<textarea
@@ -94,22 +115,26 @@ export class ConfirmDialog extends LitElement {
class="w-full px-3 py-2 mb-4 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-amber-500/50 text-sm resize-none"
></textarea>`
: ""}
<div class="flex gap-3">
<button
@click=${() => this.handleCancel()}
?disabled=${this.disabled}
class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl bg-white/5 text-white/60 border border-white/10 hover:bg-white/10 hover:text-white/80 transition-all disabled:opacity-50 disabled:pointer-events-none"
>
${translateText("common.cancel")}
</button>
<button
@click=${() => this.handleConfirm()}
?disabled=${this.disabled}
class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl ${btnClass} transition-all disabled:opacity-50 disabled:pointer-events-none border-0"
>
${translateText("common.confirm")}
</button>
</div>
${this.buttons === "none"
? ""
: html`<div class="flex gap-3">
${this.buttons === "confirmCancel"
? html`<button
@click=${() => this.handleCancel()}
?disabled=${this.disabled}
class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl bg-white/5 text-white/60 border border-white/10 hover:bg-white/10 hover:text-white/80 transition-all disabled:opacity-50 disabled:pointer-events-none"
>
${translateText("common.cancel")}
</button>`
: ""}
<button
@click=${() => this.handleConfirm()}
?disabled=${this.disabled}
class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl ${btnClass} transition-all disabled:opacity-50 disabled:pointer-events-none border-0"
>
${this.confirmText || translateText("common.confirm")}
</button>
</div>`}
</div>
</div>
`;