From 8f5420b4362b5fd9c03e2e990c469775fa38e07d Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Tue, 15 Apr 2025 13:41:49 -0500 Subject: [PATCH] fix settings for mobile --- src/webpage/guild.ts | 2 -- src/webpage/role.ts | 8 +++++--- src/webpage/settings.ts | 31 ++++++++++++++++++++++++++++++- src/webpage/style.css | 34 ++++++++++++++++++++++++++++++++-- 4 files changed, 67 insertions(+), 8 deletions(-) diff --git a/src/webpage/guild.ts b/src/webpage/guild.ts index 0222224..3c2bd74 100644 --- a/src/webpage/guild.ts +++ b/src/webpage/guild.ts @@ -15,7 +15,6 @@ import { emojipjson, extendedProperties, banObj, - addInfoBan, templateSkim, } from "./jsontypes.js"; import {User} from "./user.js"; @@ -25,7 +24,6 @@ import {webhookMenu} from "./webhooks.js"; import {createImg} from "./utils/utils.js"; import {Sticker} from "./sticker.js"; import {ProgessiveDecodeJSON} from "./utils/progessiveLoad.js"; -import {getApiUrls} from "../utils.js"; class Guild extends SnowFlake { owner!: Localuser; diff --git a/src/webpage/role.ts b/src/webpage/role.ts index 968baa3..0fb3b99 100644 --- a/src/webpage/role.ts +++ b/src/webpage/role.ts @@ -293,10 +293,10 @@ class RoleList extends Buttons { div.innerHTML = ""; div.append(this.buttonListGen(div2)); //not actually sure why the html is needed } - buttonMap = new WeakMap(); + buttonRoleMap = new WeakMap(); dragged?: HTMLButtonElement; buttonDragEvents(button: HTMLButtonElement, role: Role) { - this.buttonMap.set(button, role); + this.buttonRoleMap.set(button, role); button.addEventListener("dragstart", (e) => { this.dragged = button; e.stopImmediatePropagation(); @@ -318,7 +318,7 @@ class RoleList extends Buttons { }); button.addEventListener("drop", (_) => { - const role2 = this.buttonMap.get(this.dragged as HTMLButtonElement); + const role2 = this.buttonRoleMap.get(this.dragged as HTMLButtonElement); if (!role2) return; const index2 = this.guild.roles.indexOf(role2); this.guild.roles.splice(index2, 1); @@ -390,6 +390,7 @@ class RoleList extends Buttons { buttonTable.append(roleRow); for (const thing of this.buttons) { const button = document.createElement("button"); + this.buttonMap.set(thing[0], button); button.classList.add("SettingsButton"); button.textContent = thing[0]; const role = this.guild.roleids.get(thing[1]); @@ -407,6 +408,7 @@ class RoleList extends Buttons { } } button.onclick = (_) => { + html.classList.remove("mobileHidden"); this.generateHTMLArea(thing[1], html); if (this.warndiv) { this.warndiv.remove(); diff --git a/src/webpage/settings.ts b/src/webpage/settings.ts index 1e4953b..62c1fa6 100644 --- a/src/webpage/settings.ts +++ b/src/webpage/settings.ts @@ -13,6 +13,7 @@ interface OptionsElement { export class Buttons implements OptionsElement { readonly name: string; readonly buttons: [string, Options | string][]; + readonly buttonMap = new Map(); buttonList!: HTMLDivElement; warndiv!: HTMLElement; value: unknown; @@ -41,10 +42,11 @@ export class Buttons implements OptionsElement { buttonList.classList.add(this.top ? "flexttb" : "flexltr"); this.buttonList = buttonList; const htmlarea = document.createElement("div"); - htmlarea.classList.add("flexgrow"); + htmlarea.classList.add("flexgrow", "settingsHTMLArea"); const buttonTable = this.generateButtons(htmlarea); if (this.buttons[0]) { this.generateHTMLArea(this.buttons[0][1], htmlarea); + htmlarea.classList.add("mobileHidden"); } buttonList.append(buttonTable); buttonList.append(htmlarea); @@ -54,10 +56,12 @@ export class Buttons implements OptionsElement { } makeButtonHTML(buttond: [string, string | Options], optionsArea: HTMLElement) { const button = document.createElement("button"); + this.buttonMap.set(buttond[1], button); button.classList.add("SettingsButton"); button.textContent = buttond[0]; button.onclick = (_) => { this.generateHTMLArea(buttond[1], optionsArea); + optionsArea.classList.remove("mobileHidden"); if (this.warndiv) { this.warndiv.remove(); } @@ -80,7 +84,19 @@ export class Buttons implements OptionsElement { div.textContent = str; return div; } + last?: Options | string; generateHTMLArea(buttonInfo: Options | string, htmlarea: HTMLElement) { + if (this.last) { + const elm = this.buttonMap.get(this.last); + if (elm) { + elm.classList.remove("activeSetting"); + } + } + this.last = buttonInfo; + const elm = this.buttonMap.get(buttonInfo); + if (elm) { + elm.classList.add("activeSetting"); + } let html: HTMLElement; if (buttonInfo instanceof Options) { buttonInfo.subOptions = undefined; @@ -90,6 +106,7 @@ export class Buttons implements OptionsElement { } htmlarea.innerHTML = ""; htmlarea.append(html); + return html; } changed(html: HTMLElement) { this.warndiv = html; @@ -970,6 +987,18 @@ class Options implements OptionsElement { } generateName(): (HTMLElement | string)[] { const build: (HTMLElement | string)[] = []; + if (this.owner instanceof Buttons) { + const span = document.createElement("span"); + span.classList.add("svg-intoMenu", "svgicon", "mobileback"); + build.push(span); + span.onclick = () => { + const container = this.container.deref(); + if (!container) return; + if (!container.parentElement) return; + if (!container.parentElement.parentElement) return; + container.parentElement.parentElement.classList.add("mobileHidden"); + }; + } if (this.subOptions) { if (this.name !== "") { const name = document.createElement("span"); diff --git a/src/webpage/style.css b/src/webpage/style.css index a3acfd8..d65e6d6 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -525,6 +525,7 @@ textarea { .svg-voicensfw { mask: url(/icons/voicensfw.svg); } + .svgicon { display: block; height: 100%; @@ -534,6 +535,11 @@ textarea { aspect-ratio: 1/1; flex-shrink: 0; } +.mobileback { + visibility: hidden; + height: 0px; + width: 0px; +} #searchX { width: 0.16in; height: 0.16in; @@ -2397,18 +2403,25 @@ fieldset input[type="radio"] { box-sizing: border-box; overflow-y: auto; } + .SettingsButton { width: 100%; padding: 8px 12px; background: transparent; color: var(--primary-text-soft); border: none; - transition: none; + transition: background 0.1s; +} +.activeSetting { + background: color-mix(in srgb, var(--secondary-bg) 60%, transparent); } .SettingsButton:hover { background: var(--settings-panel-hover); color: var(--primary-text-prominent); } +.activeSetting:hover { + background: color-mix(in srgb, var(--secondary-bg) 40%, transparent); +} .addrole { height: 10px; width: 10px; @@ -2747,8 +2760,16 @@ fieldset input[type="radio"] { font-size: 1.2rem; } .settingbuttons { - height: 100px; + height: 100%; width: 100%; + z-index: 1; + position: absolute; + } + .settingsHTMLArea { + z-index: 2; + height: 100%; + background: var(--primary-bg); + transition: transform 0.2s; } .nonimagecenter .settingbuttons { height: auto; @@ -2762,6 +2783,15 @@ fieldset input[type="radio"] { .rolesheader { margin: 6px 12px; } + .mobileback { + width: 20px; + height: 20px; + visibility: visible; + cursor: pointer; + } + .mobileHidden { + transform: translate(100%, 0px); + } } .friendcontainer { display: flex;