diff --git a/src/equicordplugins/collapsibleUi/index.tsx b/src/equicordplugins/collapsibleUi/index.tsx index d6c7d709c..29145e661 100644 --- a/src/equicordplugins/collapsibleUi/index.tsx +++ b/src/equicordplugins/collapsibleUi/index.tsx @@ -29,7 +29,7 @@ function PanelsIcon(props: SVGProps) { } function getStateClasses(store: StateStore) { - const classNames = [cl("state"), cl(`transition-${store.transitionMs}`)]; + const classNames = [cl("state"), cl(`collapsed-size-${store.collapsedSize}`), cl(`transition-${store.transitionMs}`)]; for (const panelId of toolbarPanelOrder) { const panel = panelRegistry[panelId]; diff --git a/src/equicordplugins/collapsibleUi/settings.ts b/src/equicordplugins/collapsibleUi/settings.ts index dce2485b2..a1b164a56 100644 --- a/src/equicordplugins/collapsibleUi/settings.ts +++ b/src/equicordplugins/collapsibleUi/settings.ts @@ -8,8 +8,15 @@ import { definePluginSettings } from "@api/Settings"; import { OptionType } from "@utils/types"; export const transitionMarkers = [0, 80, 120, 160, 200, 260, 320]; +export const collapsedSizeMarkers = [8, 12, 16, 20, 24, 28, 32, 40, 48]; export const panelRegistry = { + guildBar: { + id: "guildBar", + classId: "guild-bar", + label: "Guild Bar", + collapsedKey: "guildBarCollapsed", + }, channelList: { id: "channelList", classId: "channel-list", @@ -28,6 +35,12 @@ export const panelRegistry = { label: "Message Buttons", collapsedKey: "chatButtonsCollapsed", }, + titleBar: { + id: "titleBar", + classId: "title-bar", + label: "Title Bar", + collapsedKey: "titleBarCollapsed", + }, userArea: { id: "userArea", classId: "user-area", @@ -38,15 +51,26 @@ export const panelRegistry = { export type PanelId = keyof typeof panelRegistry; -export const toolbarPanelOrder = ["channelList", "membersList", "chatButtons", "userArea"] as const satisfies readonly PanelId[]; +export const toolbarPanelOrder = ["guildBar", "channelList", "membersList", "chatButtons", "titleBar", "userArea"] as const satisfies readonly PanelId[]; export const settings = definePluginSettings({ + collapsedSize: { + type: OptionType.SLIDER, + description: "Collapsed hover area size in pixels.", + default: 12, + markers: collapsedSizeMarkers, + }, transitionMs: { type: OptionType.SLIDER, description: "Panel transition speed in milliseconds.", default: 160, markers: transitionMarkers, }, + guildBarCollapsed: { + type: OptionType.BOOLEAN, + description: "Persist the guild bar as collapsed.", + default: false, + }, channelListCollapsed: { type: OptionType.BOOLEAN, description: "Persist the channel list as collapsed.", @@ -62,6 +86,11 @@ export const settings = definePluginSettings({ description: "Persist the message button row as collapsed.", default: false, }, + titleBarCollapsed: { + type: OptionType.BOOLEAN, + description: "Persist the title bar as collapsed.", + default: false, + }, userAreaCollapsed: { type: OptionType.BOOLEAN, description: "Persist the user area as collapsed.", diff --git a/src/equicordplugins/collapsibleUi/style.css b/src/equicordplugins/collapsibleUi/style.css index 0ff9d8cc3..c3cf45f7c 100644 --- a/src/equicordplugins/collapsibleUi/style.css +++ b/src/equicordplugins/collapsibleUi/style.css @@ -1,13 +1,49 @@ body:has(.vc-collapsible-ui-state) { --vc-cui-chat-buttons-width: min(320px, 36vw); --vc-cui-collapsed-size: 12px; - --vc-cui-hover-peek: 18px; + --vc-cui-hover-peek: var(--vc-cui-collapsed-size); --vc-cui-hover-delay: 120ms; --vc-cui-user-area-collapsed-width: 52px; --vc-cui-transition: 160ms; --vc-cui-ease: cubic-bezier(.2, 0, 0, 1); } +body:has(.vc-collapsible-ui-collapsed-size-8) { + --vc-cui-collapsed-size: 8px; +} + +body:has(.vc-collapsible-ui-collapsed-size-12) { + --vc-cui-collapsed-size: 12px; +} + +body:has(.vc-collapsible-ui-collapsed-size-16) { + --vc-cui-collapsed-size: 16px; +} + +body:has(.vc-collapsible-ui-collapsed-size-20) { + --vc-cui-collapsed-size: 20px; +} + +body:has(.vc-collapsible-ui-collapsed-size-24) { + --vc-cui-collapsed-size: 24px; +} + +body:has(.vc-collapsible-ui-collapsed-size-28) { + --vc-cui-collapsed-size: 28px; +} + +body:has(.vc-collapsible-ui-collapsed-size-32) { + --vc-cui-collapsed-size: 32px; +} + +body:has(.vc-collapsible-ui-collapsed-size-40) { + --vc-cui-collapsed-size: 40px; +} + +body:has(.vc-collapsible-ui-collapsed-size-48) { + --vc-cui-collapsed-size: 48px; +} + body:has(.vc-collapsible-ui-transition-0) { --vc-cui-transition: 0ms; } @@ -36,6 +72,47 @@ body:has(.vc-collapsible-ui-transition-320) { --vc-cui-transition: 320ms; } +body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"] { + overflow: hidden !important; + transition: + width var(--vc-cui-transition) var(--vc-cui-ease), + inline-size var(--vc-cui-transition) var(--vc-cui-ease), + min-width var(--vc-cui-transition) var(--vc-cui-ease), + min-inline-size var(--vc-cui-transition) var(--vc-cui-ease), + max-width var(--vc-cui-transition) var(--vc-cui-ease), + max-inline-size var(--vc-cui-transition) var(--vc-cui-ease), + flex-basis var(--vc-cui-transition) var(--vc-cui-ease) !important; +} + +body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:hover) nav[class*="guilds_"], +body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:focus-within) nav[class*="guilds_"] { + transition-delay: var(--vc-cui-hover-delay); +} + +body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:hover) nav[class*="guilds_"] > :where(*), +body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:focus-within) nav[class*="guilds_"] > :where(*) { + opacity: 1; + pointer-events: auto; + transition: opacity var(--vc-cui-transition) var(--vc-cui-ease); + transition-delay: var(--vc-cui-hover-delay); +} + +body:has(.vc-collapsible-ui-guild-bar-collapsed):not(:has(nav[class*="guilds_"]:hover), :has(nav[class*="guilds_"]:focus-within)) nav[class*="guilds_"] { + width: var(--vc-cui-collapsed-size) !important; + inline-size: var(--vc-cui-collapsed-size) !important; + min-width: var(--vc-cui-collapsed-size) !important; + min-inline-size: var(--vc-cui-collapsed-size) !important; + max-width: var(--vc-cui-collapsed-size) !important; + max-inline-size: var(--vc-cui-collapsed-size) !important; + flex: 0 0 var(--vc-cui-collapsed-size) !important; +} + +body:has(.vc-collapsible-ui-guild-bar-collapsed):not(:has(nav[class*="guilds_"]:hover), :has(nav[class*="guilds_"]:focus-within)) nav[class*="guilds_"] > :where(*) { + opacity: 0; + pointer-events: none; + transition: opacity var(--vc-cui-transition) var(--vc-cui-ease); +} + body:has(.vc-collapsible-ui-channel-list-collapsed):has([class*="sidebarList_"]:hover) [class*="sidebarList_"] { transition-delay: var(--vc-cui-hover-delay); } @@ -171,6 +248,56 @@ body:has(.vc-collapsible-ui-user-area-collapsed):not(:has([class*="sidebar_"] > transition: opacity var(--vc-cui-transition) var(--vc-cui-ease); } +body:has(.vc-collapsible-ui-guild-bar-collapsed):has(.vc-collapsible-ui-channel-list-collapsed):not(:has([class*="sidebar_"] > [class*="panels_"]:hover)) [class*="sidebar_"] > [class*="panels_"] { + width: calc(var(--vc-cui-hover-peek) + 4px) !important; + inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important; + min-width: calc(var(--vc-cui-hover-peek) + 4px) !important; + min-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important; + max-width: calc(var(--vc-cui-hover-peek) + 4px) !important; + max-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important; +} + +body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"] { + overflow: hidden !important; + transition: + height var(--vc-cui-transition) var(--vc-cui-ease), + block-size var(--vc-cui-transition) var(--vc-cui-ease), + min-height var(--vc-cui-transition) var(--vc-cui-ease), + min-block-size var(--vc-cui-transition) var(--vc-cui-ease), + max-height var(--vc-cui-transition) var(--vc-cui-ease), + max-block-size var(--vc-cui-transition) var(--vc-cui-ease), + padding var(--vc-cui-transition) var(--vc-cui-ease) !important; +} + +body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:hover) section[class*="title_"][class*="container__"], +body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:focus-within) section[class*="title_"][class*="container__"] { + transition-delay: var(--vc-cui-hover-delay); +} + +body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:hover) section[class*="title_"][class*="container__"] > :where(*), +body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:focus-within) section[class*="title_"][class*="container__"] > :where(*) { + opacity: 1; + pointer-events: auto; + transition: opacity var(--vc-cui-transition) var(--vc-cui-ease); + transition-delay: var(--vc-cui-hover-delay); +} + +body:has(.vc-collapsible-ui-title-bar-collapsed):not(:has(section[class*="title_"][class*="container__"]:hover), :has(section[class*="title_"][class*="container__"]:focus-within)) section[class*="title_"][class*="container__"] { + height: var(--vc-cui-hover-peek) !important; + block-size: var(--vc-cui-hover-peek) !important; + min-height: var(--vc-cui-hover-peek) !important; + min-block-size: var(--vc-cui-hover-peek) !important; + max-height: var(--vc-cui-hover-peek) !important; + max-block-size: var(--vc-cui-hover-peek) !important; + padding-block: 0 !important; +} + +body:has(.vc-collapsible-ui-title-bar-collapsed):not(:has(section[class*="title_"][class*="container__"]:hover), :has(section[class*="title_"][class*="container__"]:focus-within)) section[class*="title_"][class*="container__"] > :where(*) { + opacity: 0; + pointer-events: none; + transition: opacity var(--vc-cui-transition) var(--vc-cui-ease); +} + .vc-collapsible-ui-chat-buttons { display: flex; align-items: center;