mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-20 18:33:13 +00:00
Created ModalHeader and moved/unified all modal headers (#2882)
If this PR fixes an issue, link it below. If not, delete these two lines. Resolves #(issue number) ## Description: Moved the Modal Headers into its own class ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: w.o.n
This commit is contained in:
Ryan
@@ -16,6 +16,7 @@ import { JoinLobbyEvent } from "./Main";
|
||||
import { BaseModal } from "./components/BaseModal";
|
||||
import "./components/Difficulties";
|
||||
import "./components/LobbyTeamView";
|
||||
import { modalHeader } from "./components/ui/ModalHeader";
|
||||
@customElement("join-private-lobby-modal")
|
||||
export class JoinPrivateLobbyModal extends BaseModal {
|
||||
@query("#lobbyIdInput") private lobbyIdInput!: HTMLInputElement;
|
||||
@@ -40,125 +41,100 @@ export class JoinPrivateLobbyModal extends BaseModal {
|
||||
<div
|
||||
class="h-full flex flex-col bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 overflow-hidden select-none"
|
||||
>
|
||||
<div
|
||||
class="flex items-center mb-6 pb-2 border-b border-white/10 gap-2 shrink-0 p-6"
|
||||
>
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<button
|
||||
@click=${this.closeAndLeave}
|
||||
class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 transition-all border border-white/10"
|
||||
aria-label=${translateText("common.close")}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 text-gray-400 group-hover:text-white transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="text-white text-xl sm:text-2xl md:text-3xl font-bold uppercase tracking-widest break-words hyphens-auto"
|
||||
>
|
||||
${translateText("private_lobby.title")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Lobby ID Box -->
|
||||
${this.hasJoined
|
||||
? html`<div
|
||||
class="flex items-center gap-0.5 bg-white/5 rounded-lg px-2 py-1 border border-white/10 max-w-[220px] flex-nowrap"
|
||||
>
|
||||
<button
|
||||
@click=${() => {
|
||||
this.lobbyIdVisible = !this.lobbyIdVisible;
|
||||
this.requestUpdate();
|
||||
}}
|
||||
class="p-1.5 rounded-md hover:bg-white/10 text-white/60 hover:text-white transition-colors"
|
||||
title=${translateText("toggle_visibility")}
|
||||
>
|
||||
${this.lobbyIdVisible
|
||||
? html`<svg
|
||||
viewBox="0 0 512 512"
|
||||
height="16px"
|
||||
width="16px"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M256 105c-101.8 0-188.4 62.7-224 151 35.6 88.3 122.2 151 224 151s188.4-62.7 224-151c-35.6-88.3-122.2-151-224-151zm0 251.7c-56 0-101.7-45.7-101.7-101.7S200 153.3 256 153.3 357.7 199 357.7 255 312 356.7 256 356.7zm0-161.1c-33 0-59.4 26.4-59.4 59.4s26.4 59.4 59.4 59.4 59.4-26.4 59.4-59.4-26.4-59.4-59.4-59.4z"
|
||||
></path>
|
||||
</svg>`
|
||||
: html`<svg
|
||||
viewBox="0 0 512 512"
|
||||
height="16px"
|
||||
width="16px"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M448 256s-64-128-192-128S64 256 64 256c32 64 96 128 192 128s160-64 192-128z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="32"
|
||||
></path>
|
||||
<path
|
||||
d="M144 256l224 0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="32"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>`}
|
||||
</button>
|
||||
${modalHeader({
|
||||
title: translateText("private_lobby.title"),
|
||||
onBack: this.closeAndLeave,
|
||||
ariaLabel: translateText("common.close"),
|
||||
rightContent: this.hasJoined
|
||||
? html`
|
||||
<!-- Lobby ID Box -->
|
||||
<div
|
||||
@click=${this.copyToClipboard}
|
||||
@dblclick=${(e: Event) => {
|
||||
(e.currentTarget as HTMLElement).classList.add(
|
||||
"select-all",
|
||||
);
|
||||
}}
|
||||
@mouseleave=${(e: Event) => {
|
||||
(e.currentTarget as HTMLElement).classList.remove(
|
||||
"select-all",
|
||||
);
|
||||
}}
|
||||
class="font-mono text-xs font-bold text-white px-2 cursor-pointer select-none min-w-[80px] text-center truncate tracking-wider"
|
||||
title="${translateText("common.click_to_copy")}"
|
||||
class="flex items-center gap-0.5 bg-white/5 rounded-lg px-2 py-1 border border-white/10 max-w-[220px] flex-nowrap"
|
||||
>
|
||||
${this.copySuccess
|
||||
? translateText("common.copied")
|
||||
: this.lobbyIdVisible
|
||||
? this.currentLobbyId
|
||||
: "••••••••"}
|
||||
</div>
|
||||
<button
|
||||
@click=${this.copyToClipboard}
|
||||
class="p-1.5 rounded-md hover:bg-white/10 text-white/60 hover:text-white transition-colors"
|
||||
title="${translateText("common.click_to_copy")}"
|
||||
aria-label="${translateText("common.click_to_copy")}"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
height="16px"
|
||||
width="16px"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
<button
|
||||
@click=${() => {
|
||||
this.lobbyIdVisible = !this.lobbyIdVisible;
|
||||
this.requestUpdate();
|
||||
}}
|
||||
class="p-1.5 rounded-md hover:bg-white/10 text-white/60 hover:text-white transition-colors"
|
||||
title="${translateText("user_setting.toggle_visibility")}"
|
||||
>
|
||||
<path
|
||||
d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>`
|
||||
: ""}
|
||||
</div>
|
||||
${this.lobbyIdVisible
|
||||
? html`<svg
|
||||
viewBox="0 0 512 512"
|
||||
height="16px"
|
||||
width="16px"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M256 105c-101.8 0-188.4 62.7-224 151 35.6 88.3 122.2 151 224 151s188.4-62.7 224-151c-35.6-88.3-122.2-151-224-151zm0 251.7c-56 0-101.7-45.7-101.7-101.7S200 153.3 256 153.3 357.7 199 357.7 255 312 356.7 256 356.7zm0-161.1c-33 0-59.4 26.4-59.4 59.4s26.4 59.4 59.4 59.4 59.4-26.4 59.4-59.4-26.4-59.4-59.4-59.4z"
|
||||
></path>
|
||||
</svg>`
|
||||
: html`<svg
|
||||
viewBox="0 0 512 512"
|
||||
height="16px"
|
||||
width="16px"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M448 256s-64-128-192-128S64 256 64 256c32 64 96 128 192 128s160-64 192-128z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="32"
|
||||
></path>
|
||||
<path
|
||||
d="M144 256l224 0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="32"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
</svg>`}
|
||||
</button>
|
||||
<div
|
||||
@click=${this.copyToClipboard}
|
||||
@dblclick=${(e: Event) => {
|
||||
(e.currentTarget as HTMLElement).classList.add(
|
||||
"select-all",
|
||||
);
|
||||
}}
|
||||
@mouseleave=${(e: Event) => {
|
||||
(e.currentTarget as HTMLElement).classList.remove(
|
||||
"select-all",
|
||||
);
|
||||
}}
|
||||
class="font-mono text-xs font-bold text-white px-2 cursor-pointer select-none min-w-[80px] text-center truncate tracking-wider"
|
||||
title="${translateText("common.click_to_copy")}"
|
||||
>
|
||||
${this.copySuccess
|
||||
? translateText("common.copied")
|
||||
: this.lobbyIdVisible
|
||||
? this.currentLobbyId
|
||||
: "••••••••"}
|
||||
</div>
|
||||
<button
|
||||
@click=${this.copyToClipboard}
|
||||
class="p-1.5 rounded-md hover:bg-white/10 text-white/60 hover:text-white transition-colors"
|
||||
title="${translateText("common.click_to_copy")}"
|
||||
aria-label="${translateText("common.click_to_copy")}"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
height="16px"
|
||||
width="16px"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
: undefined,
|
||||
})}
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4 mr-1">
|
||||
${!this.hasJoined
|
||||
? html`<div class="flex flex-col gap-3">
|
||||
|
||||
Reference in New Issue
Block a user