From 2a313e73ff3431ad1b333baa780abfd9b1bafb9a Mon Sep 17 00:00:00 2001 From: Freeplay <Freeplay@duck.com> Date: Sun, 14 May 2023 17:06:58 -0400 Subject: [PATCH 1/6] Replace classic.vue w/ a class in universal.vue --- packages/client/src/init.ts | 2 - packages/client/src/ui/classic.vue | 410 --------------------------- packages/client/src/ui/universal.vue | 85 +++++- 3 files changed, 82 insertions(+), 415 deletions(-) delete mode 100644 packages/client/src/ui/classic.vue diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 34cdc16efa..43a92a3163 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -191,8 +191,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id"; ? defineAsyncComponent(() => import("@/ui/visitor.vue")) : ui === "deck" ? defineAsyncComponent(() => import("@/ui/deck.vue")) - : ui === "classic" - ? defineAsyncComponent(() => import("@/ui/classic.vue")) : defineAsyncComponent(() => import("@/ui/universal.vue")), ); diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue deleted file mode 100644 index 4ee25a0fe2..0000000000 --- a/packages/client/src/ui/classic.vue +++ /dev/null @@ -1,410 +0,0 @@ -<template> - <div - class="gbhvwtnk" - :class="{ wallpaper }" - :style="`--globalHeaderHeight:${globalHeaderHeight}px`" - > - <XHeaderMenu - v-if="showMenuOnTop" - v-get-size="(w, h) => (globalHeaderHeight = h)" - /> - - <div - class="columns" - :class="{ fullView, withGlobalHeader: showMenuOnTop }" - > - <XSidebar v-if="!showMenuOnTop" /> - <div v-else ref="widgetsLeft" class="widgets left"> - <XWidgets - :place="'left'" - @mounted="attachSticky(widgetsLeft)" - /> - </div> - - <main - class="main" - :style="{ background: pageMetadata?.value?.bg }" - @contextmenu.stop="onContextmenu" - > - <div class="content"> - <RouterView /> - </div> - </main> - - <div v-if="isDesktop" ref="widgetsRight" class="widgets right"> - <XWidgets :place="null" @mounted="attachSticky(widgetsRight)" /> - </div> - </div> - - <transition :name="$store.state.animation ? 'tray-back' : ''"> - <div - v-if="widgetsShowing" - class="tray-back _modalBg" - @click="widgetsShowing = false" - @touchstart.passive="widgetsShowing = false" - ></div> - </transition> - - <transition :name="$store.state.animation ? 'tray' : ''"> - <XWidgets v-if="widgetsShowing" class="tray" /> - </transition> - - <XCommon /> - </div> -</template> - -<script lang="ts" setup> -import { defineAsyncComponent, markRaw, ref, onMounted, provide } from "vue"; -import XSidebar from "./_common_/navbar.vue"; -import XCommon from "./_common_/common.vue"; -import type { ComputedRef } from "vue"; -import type { PageMetadata } from "@/scripts/page-metadata"; -import { instanceName } from "@/config"; -import { StickySidebar } from "@/scripts/sticky-sidebar"; -import * as os from "@/os"; -import { mainRouter } from "@/router"; -import { - provideMetadataReceiver, - setPageMetadata, -} from "@/scripts/page-metadata"; -import { defaultStore } from "@/store"; -import { i18n } from "@/i18n"; -const XHeaderMenu = defineAsyncComponent(() => import("./classic.header.vue")); -const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue")); - -const DESKTOP_THRESHOLD = 1100; - -let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD); - -let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); -let widgetsShowing = $ref(false); -let fullView = $ref(false); -let globalHeaderHeight = $ref(0); -const wallpaper = localStorage.getItem("wallpaper") != null; -const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === "top"); -let live2d = $ref<HTMLIFrameElement>(); -let widgetsLeft = $ref(); -let widgetsRight = $ref(); - -provide("router", mainRouter); -provideMetadataReceiver((info) => { - pageMetadata = info; - if (pageMetadata.value) { - document.title = `${pageMetadata.value.title} | ${instanceName}`; - } -}); -provide("shouldHeaderThin", showMenuOnTop); -provide("shouldSpacerMin", true); - -function attachSticky(el) { - const sticky = new StickySidebar( - el, - defaultStore.state.menuDisplay === 0, - defaultStore.state.menuDisplay === "top" ? 60 : 0 - ); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す - window.addEventListener( - "scroll", - () => { - sticky.calc(window.scrollY); - }, - { passive: true } - ); -} - -function top() { - window.scroll({ top: 0, behavior: "smooth" }); -} - -function onContextmenu(ev: MouseEvent) { - const isLink = (el: HTMLElement) => { - if (el.tagName === "A") return true; - if (el.parentElement) { - return isLink(el.parentElement); - } - }; - if (isLink(ev.target)) return; - if ( - ["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes( - ev.target.tagName - ) || - ev.target.attributes["contenteditable"] - ) - return; - if (window.getSelection().toString() !== "") return; - const path = mainRouter.getCurrentPath(); - os.contextMenu( - [ - { - type: "label", - text: path, - }, - { - icon: fullView - ? "ph-arrows-in-simple ph-bold ph-lg" - : "ph-arrows-out-simple ph-bold ph-lg", - text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView, - action: () => { - fullView = !fullView; - }, - }, - { - icon: "ph-browser ph-bold ph-lg", - text: i18n.ts.openInWindow, - action: () => { - os.pageWindow(path); - }, - }, - ], - ev - ); -} - -if (window.innerWidth < 1024) { - localStorage.setItem("ui", "default"); - location.reload(); -} - -document.documentElement.style.overflowY = "scroll"; - -if (defaultStore.state.widgets.length === 0) { - defaultStore.set("widgets", [ - { - name: "calendar", - id: "a", - place: null, - data: {}, - }, - { - name: "notifications", - id: "b", - place: null, - data: {}, - }, - { - name: "trends", - id: "c", - place: null, - data: {}, - }, - ]); -} - -onMounted(() => { - window.addEventListener( - "resize", - () => { - isDesktop = window.innerWidth >= DESKTOP_THRESHOLD; - }, - { passive: true } - ); -}); -</script> - -<style lang="scss" scoped> -.tray-enter-active, -.tray-leave-active { - opacity: 1; - transform: translateX(0); - transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), - opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); -} -.tray-enter-from, -.tray-leave-active { - opacity: 0; - transform: translateX(240px); -} - -.tray-back-enter-active, -.tray-back-leave-active { - opacity: 1; - transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); -} -.tray-back-enter-from, -.tray-back-leave-active { - opacity: 0; -} - -.gbhvwtnk { - display: flex; - justify-content: center; - $ui-font-size: 1em; - $widgets-hide-threshold: 1200px; - - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - min-height: calc(var(--vh, 1vh) * 100); - box-sizing: border-box; - - --navBg: transparent; - --X14: var(--acrylicBg); - - &.wallpaper { - background: var(--wallpaperOverlay); - :deep(main) { - background: var(--acrylicBg) !important; - backdrop-filter: blur(12px); - } - :deep(.tl), - :deep(.notes) { - background: none !important; - } - } - - > .columns { - display: flex; - justify-content: center; - max-width: 100%; - //margin: 32px 0; - - &.fullView { - margin: 0; - - > :deep(.sidebar) { - display: none; - } - - > .widgets { - display: none; - } - - > .main { - margin: 0; - border-radius: 0; - box-shadow: none; - width: 100%; - } - } - - > :deep(.sidebar) { - margin-left: -200px; - padding-left: 200px; - box-sizing: content-box; - .banner { - pointer-events: none; - mask: radial-gradient( - farthest-side at top, - hsl(0, 0%, 0%) 0%, - hsla(0, 0%, 0%, 0.987) 0.3%, - hsla(0, 0%, 0%, 0.951) 1.4%, - hsla(0, 0%, 0%, 0.896) 3.2%, - hsla(0, 0%, 0%, 0.825) 5.8%, - hsla(0, 0%, 0%, 0.741) 9.3%, - hsla(0, 0%, 0%, 0.648) 13.6%, - hsla(0, 0%, 0%, 0.55) 18.9%, - hsla(0, 0%, 0%, 0.45) 25.1%, - hsla(0, 0%, 0%, 0.352) 32.4%, - hsla(0, 0%, 0%, 0.259) 40.7%, - hsla(0, 0%, 0%, 0.175) 50.2%, - hsla(0, 0%, 0%, 0.104) 60.8%, - hsla(0, 0%, 0%, 0.049) 72.6%, - hsla(0, 0%, 0%, 0.013) 85.7%, - hsla(0, 0%, 0%, 0) 100% - ) !important; - -webkit-mask: radial-gradient( - farthest-side at top, - hsl(0, 0%, 0%) 0%, - hsla(0, 0%, 0%, 0.987) 0.3%, - hsla(0, 0%, 0%, 0.951) 1.4%, - hsla(0, 0%, 0%, 0.896) 3.2%, - hsla(0, 0%, 0%, 0.825) 5.8%, - hsla(0, 0%, 0%, 0.741) 9.3%, - hsla(0, 0%, 0%, 0.648) 13.6%, - hsla(0, 0%, 0%, 0.55) 18.9%, - hsla(0, 0%, 0%, 0.45) 25.1%, - hsla(0, 0%, 0%, 0.352) 32.4%, - hsla(0, 0%, 0%, 0.259) 40.7%, - hsla(0, 0%, 0%, 0.175) 50.2%, - hsla(0, 0%, 0%, 0.104) 60.8%, - hsla(0, 0%, 0%, 0.049) 72.6%, - hsla(0, 0%, 0%, 0.013) 85.7%, - hsla(0, 0%, 0%, 0) 100% - ) !important; - width: 125% !important; - left: -12.5% !important; - height: 125% !important; - } - } - - > .main { - min-width: 0; - width: 750px; - margin: 0 16px 0 0; - background: var(--panel); - border-left: solid 1px var(--divider); - border-right: solid 1px var(--divider); - border-radius: 0; - overflow: clip; - --margin: 12px; - background: var(--bg); - } - - > .widgets { - //--panelBorder: none; - width: 300px; - - @media (max-width: $widgets-hide-threshold) { - display: none; - } - - &.left { - margin-right: 16px; - } - } - - &.withGlobalHeader { - > .main { - margin-top: 0; - border: solid 1px var(--divider); - border-radius: var(--radius); - --stickyTop: var(--globalHeaderHeight); - } - - > .widgets { - --stickyTop: var(--globalHeaderHeight); - margin-top: 0; - } - } - - @media (max-width: 850px) { - margin: 0; - - > :deep(.sidebar) { - border-right: solid 0.5px var(--divider); - } - - > .main { - margin: 0; - border-radius: 0; - box-shadow: none; - width: 100%; - } - } - } - - > .tray-back { - z-index: 1001; - } - - > .tray { - position: fixed; - top: 0; - right: 0; - z-index: 1001; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); - padding: var(--margin); - box-sizing: border-box; - overflow: auto; - background: var(--bg); - } - - > .ivnzpscs { - position: fixed; - bottom: 0; - right: 0; - width: 300px; - height: 600px; - border: none; - pointer-events: none; - } -} -</style> diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index f6b57c081f..068f3f7f3b 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -1,5 +1,5 @@ <template> - <div class="dkgtipfy" :class="{ wallpaper, isMobile }"> + <div class="dkgtipfy" :class="{ wallpaper, isMobile, centered: ui === 'classic' }"> <XSidebar v-if="!isMobile" class="sidebar" /> <MkStickyContainer class="contents"> @@ -160,7 +160,7 @@ import XCommon from "./_common_/common.vue"; import * as Acct from "calckey-js/built/acct"; import type { ComputedRef } from "vue"; import type { PageMetadata } from "@/scripts/page-metadata"; -import { instanceName } from "@/config"; +import { instanceName, ui } from "@/config"; import { StickySidebar } from "@/scripts/sticky-sidebar"; import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue"; import * as os from "@/os"; @@ -210,6 +210,10 @@ provideMetadataReceiver((info) => { } }); +if (ui === "classic") { + provide("shouldSpacerMin", true); +} + const menuIndicated = computed(() => { for (const def in navbarItemDef) { if (def === "notifications") continue; // 通知は下にボタンとして表示されてるから @@ -454,7 +458,82 @@ console.log(mainRouter.currentRoute.value.name); } &.wallpaper { background: var(--wallpaperOverlay); - //backdrop-filter: var(--blur, blur(4px)); + } + + &.centered { + justify-content: center; + --navBg: transparent; + + > :deep(.sidebar:not(.iconOnly)) { + margin-left: -200px; + padding-left: 200px; + box-sizing: content-box; + .banner { + pointer-events: none; + mask: radial-gradient( + farthest-side at top, + hsl(0, 0%, 0%) 0%, + hsla(0, 0%, 0%, 0.987) 0.3%, + hsla(0, 0%, 0%, 0.951) 1.4%, + hsla(0, 0%, 0%, 0.896) 3.2%, + hsla(0, 0%, 0%, 0.825) 5.8%, + hsla(0, 0%, 0%, 0.741) 9.3%, + hsla(0, 0%, 0%, 0.648) 13.6%, + hsla(0, 0%, 0%, 0.55) 18.9%, + hsla(0, 0%, 0%, 0.45) 25.1%, + hsla(0, 0%, 0%, 0.352) 32.4%, + hsla(0, 0%, 0%, 0.259) 40.7%, + hsla(0, 0%, 0%, 0.175) 50.2%, + hsla(0, 0%, 0%, 0.104) 60.8%, + hsla(0, 0%, 0%, 0.049) 72.6%, + hsla(0, 0%, 0%, 0.013) 85.7%, + hsla(0, 0%, 0%, 0) 100% + ) !important; + -webkit-mask: radial-gradient( + farthest-side at top, + hsl(0, 0%, 0%) 0%, + hsla(0, 0%, 0%, 0.987) 0.3%, + hsla(0, 0%, 0%, 0.951) 1.4%, + hsla(0, 0%, 0%, 0.896) 3.2%, + hsla(0, 0%, 0%, 0.825) 5.8%, + hsla(0, 0%, 0%, 0.741) 9.3%, + hsla(0, 0%, 0%, 0.648) 13.6%, + hsla(0, 0%, 0%, 0.55) 18.9%, + hsla(0, 0%, 0%, 0.45) 25.1%, + hsla(0, 0%, 0%, 0.352) 32.4%, + hsla(0, 0%, 0%, 0.259) 40.7%, + hsla(0, 0%, 0%, 0.175) 50.2%, + hsla(0, 0%, 0%, 0.104) 60.8%, + hsla(0, 0%, 0%, 0.049) 72.6%, + hsla(0, 0%, 0%, 0.013) 85.7%, + hsla(0, 0%, 0%, 0) 100% + ) !important; + width: 125% !important; + left: -12.5% !important; + height: 125% !important; + } + } + + > .contents { + min-width: 0; + width: 750px; + background: var(--panel); + border-radius: 0; + overflow: clip; + --margin: 12px; + background: var(--bg); + } + + &.wallpaper { + .contents { + background: var(--acrylicBg) !important; + backdrop-filter: blur(12px); + } + :deep(.tl), + :deep(.notes) { + background: none !important; + } + } } > .sidebar { From 0996e2e2b62cfe330281548961db73b28222c566 Mon Sep 17 00:00:00 2001 From: Freeplay <Freeplay@duck.com> Date: Sun, 14 May 2023 17:21:28 -0400 Subject: [PATCH 2/6] fix mobile navbar --- packages/client/src/ui/universal.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 068f3f7f3b..105cc41d4e 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -462,7 +462,9 @@ console.log(mainRouter.currentRoute.value.name); &.centered { justify-content: center; - --navBg: transparent; + &:not(.isMobile) { + --navBg: transparent; + } > :deep(.sidebar:not(.iconOnly)) { margin-left: -200px; From d2cee55c358c159f0832752a90652eb062a9caad Mon Sep 17 00:00:00 2001 From: Freeplay <Freeplay@duck.com> Date: Sun, 14 May 2023 19:10:48 -0400 Subject: [PATCH 3/6] Change "Classic" to "Centered" --- locales/en-US.yml | 2 +- packages/client/src/navbar.ts | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/locales/en-US.yml b/locales/en-US.yml index 7df19e815e..58f64d823f 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -919,7 +919,7 @@ manageAccounts: "Manage Accounts" makeReactionsPublic: "Set reaction history to public" makeReactionsPublicDescription: "This will make the list of all your past reactions\ \ publicly visible." -classic: "Classic" +classic: "Centered" muteThread: "Mute thread" unmuteThread: "Unmute thread" ffVisibility: "Follows/Followers Visibility" diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts index 3f1ae2824f..074e8896c1 100644 --- a/packages/client/src/navbar.ts +++ b/packages/client/src/navbar.ts @@ -120,14 +120,6 @@ export const navbarItemDef = reactive({ unisonReload(); }, }, - { - text: i18n.ts.deck, - active: ui === "deck", - action: () => { - localStorage.setItem("ui", "deck"); - unisonReload(); - }, - }, { text: i18n.ts.classic, active: ui === "classic", @@ -136,6 +128,14 @@ export const navbarItemDef = reactive({ unisonReload(); }, }, + { + text: i18n.ts.deck, + active: ui === "deck", + action: () => { + localStorage.setItem("ui", "deck"); + unisonReload(); + }, + }, ], ev.currentTarget ?? ev.target, ); From 8b91a6faa14f2e893fa3e33104049995330a5069 Mon Sep 17 00:00:00 2001 From: Freeplay <Freeplay@duck.com> Date: Sun, 14 May 2023 19:10:59 -0400 Subject: [PATCH 4/6] tweak navbar --- packages/client/src/ui/universal.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 105cc41d4e..a5d8d76eb7 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -472,6 +472,7 @@ console.log(mainRouter.currentRoute.value.name); box-sizing: content-box; .banner { pointer-events: none; + top: -20% !important; mask: radial-gradient( farthest-side at top, hsl(0, 0%, 0%) 0%, @@ -512,7 +513,7 @@ console.log(mainRouter.currentRoute.value.name); ) !important; width: 125% !important; left: -12.5% !important; - height: 125% !important; + height: 145% !important; } } From ba1f39a9acdb72562b1f57ddb64a352c0615abbd Mon Sep 17 00:00:00 2001 From: Freeplay <Freeplay@duck.com> Date: Sun, 14 May 2023 19:14:54 -0400 Subject: [PATCH 5/6] Remove classic header (isn't used anywhere anymore) --- packages/client/src/ui/classic.header.vue | 285 ---------------------- 1 file changed, 285 deletions(-) delete mode 100644 packages/client/src/ui/classic.header.vue diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue deleted file mode 100644 index 99a0ab098b..0000000000 --- a/packages/client/src/ui/classic.header.vue +++ /dev/null @@ -1,285 +0,0 @@ -<template> - <div class="azykntjl"> - <div class="body"> - <div class="left"> - <MkA - v-click-anime - v-tooltip="i18n.ts.timeline" - class="item index" - active-class="active" - to="/" - exact - > - <i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i> - </MkA> - <template v-for="item in menu"> - <div v-if="item === '-'" class="divider"></div> - <component - :is="navbarItemDef[item].to ? 'MkA' : 'button'" - v-else-if=" - navbarItemDef[item] && - navbarItemDef[item].show !== false - " - v-click-anime - v-tooltip="$ts[navbarItemDef[item].title]" - class="item _button" - :class="item" - active-class="active" - :to="navbarItemDef[item].to" - v-on=" - navbarItemDef[item].action - ? { click: navbarItemDef[item].action } - : {} - " - > - <i - class="ph-fw ph-lg" - :class="navbarItemDef[item].icon" - ></i> - <span - v-if="navbarItemDef[item].indicated" - class="indicator" - ><i class="ph-circle ph-fill"></i - ></span> - </component> - </template> - <div class="divider"></div> - <MkA - v-if="$i.isAdmin || $i.isModerator" - v-click-anime - v-tooltip="i18n.ts.controlPanel" - class="item" - active-class="active" - to="/admin" - :behavior="settingsWindowed ? 'modalWindow' : null" - > - <i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i> - </MkA> - <button v-click-anime class="item _button" @click="more"> - <i - class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg" - ></i> - <span v-if="otherNavItemIndicated" class="indicator" - ><i class="ph-circle ph-fill"></i - ></span> - </button> - </div> - <div class="right"> - <MkA - v-click-anime - v-tooltip="i18n.ts.settings" - class="item" - active-class="active" - to="/settings" - :behavior="settingsWindowed ? 'modalWindow' : null" - > - <i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i> - </MkA> - <button - v-click-anime - class="item _button account" - @click="openAccountMenu" - > - <MkAvatar :user="$i" class="avatar" /><MkAcct - class="acct" - :user="$i" - disableLink - /> - </button> - <div class="post" @click="post"> - <MkButton class="button" gradate full rounded> - <i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i> - </MkButton> - </div> - </div> - </div> - </div> -</template> - -<script lang="ts"> -import { defineAsyncComponent, defineComponent } from "vue"; -import { host } from "@/config"; -import { search } from "@/scripts/search"; -import * as os from "@/os"; -import { navbarItemDef } from "@/navbar"; -import { openAccountMenu } from "@/account"; -import MkButton from "@/components/MkButton.vue"; -import { i18n } from "@/i18n"; - -export default defineComponent({ - components: { - MkButton, - }, - - data() { - return { - host: host, - accounts: [], - connection: null, - navbarItemDef: navbarItemDef, - settingsWindowed: false, - i18n, - }; - }, - - computed: { - menu(): string[] { - return this.$store.state.menu; - }, - - otherNavItemIndicated(): boolean { - for (const def in this.navbarItemDef) { - if (this.menu.includes(def)) continue; - if (this.navbarItemDef[def].indicated) return true; - } - return false; - }, - }, - - watch: { - "$store.reactiveState.menuDisplay.value"() { - this.calcViewState(); - }, - }, - - created() { - window.addEventListener("resize", this.calcViewState); - this.calcViewState(); - }, - - methods: { - calcViewState() { - this.settingsWindowed = window.innerWidth > 1400; - }, - - post() { - os.post(); - }, - - search() { - search(); - }, - - more(ev) { - os.popup( - defineAsyncComponent( - () => import("@/components/MkLaunchPad.vue") - ), - { - src: ev.currentTarget ?? ev.target, - anchor: { x: "center", y: "bottom" }, - }, - {}, - "closed" - ); - }, - - openAccountMenu: (ev) => { - openAccountMenu( - { - withExtraOperation: true, - }, - ev - ); - }, - }, -}); -</script> - -<style lang="scss" scoped> -.azykntjl { - $height: 60px; - $avatar-size: 32px; - $avatar-margin: 8px; - - position: sticky; - top: 0; - z-index: 1000; - width: 100%; - height: $height; - background-color: var(--bg); - - > .body { - max-width: 1380px; - margin: 0 auto; - display: flex; - - > .right, - > .left { - > .item { - position: relative; - font-size: 0.9em; - display: inline-block; - padding: 0 12px; - line-height: $height; - - > i, - > .avatar { - margin-right: 0; - } - - > i { - left: 10px; - } - - > .avatar { - width: $avatar-size; - height: $avatar-size; - vertical-align: middle; - } - - > .indicator { - position: absolute; - top: 0; - left: 0; - color: var(--navIndicator); - font-size: 8px; - animation: blink 1s infinite; - } - - &:hover { - text-decoration: none; - color: var(--navHoverFg); - } - - &.active { - color: var(--navActive); - } - } - - > .divider { - display: inline-block; - height: 16px; - margin: 0 10px; - border-right: solid 0.5px var(--divider); - } - - > .post { - display: inline-block; - - > .button { - width: 40px; - height: 40px; - padding: 0; - min-width: 0; - } - } - - > .account { - display: inline-flex; - align-items: center; - vertical-align: top; - margin-right: 8px; - - > .acct { - margin-left: 8px; - } - } - } - - > .right { - margin-left: auto; - } - } -} -</style> From cda1e7bbf4203595b6a686758e7df54abcdbfa6c Mon Sep 17 00:00:00 2001 From: Freeplay <Freeplay@duck.com> Date: Sun, 14 May 2023 19:19:00 -0400 Subject: [PATCH 6/6] classic view spacing --- packages/client/src/components/global/MkSpacer.vue | 5 +++++ packages/client/src/ui/universal.vue | 4 ---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue index 3dc93efdd0..d6ec1bf44d 100644 --- a/packages/client/src/components/global/MkSpacer.vue +++ b/packages/client/src/components/global/MkSpacer.vue @@ -9,6 +9,7 @@ <script lang="ts" setup> import { inject, onMounted, onUnmounted, ref } from "vue"; import { deviceKind } from "@/scripts/device-kind"; +import { ui } from "@/config"; const props = withDefaults( defineProps<{ @@ -34,6 +35,10 @@ const adjust = (rect: { width: number; height: number }) => { margin = props.marginMin; return; } + if ( ui === "classic" ) { + margin = 12; + return; + } if ( rect.width > (props.contentMax ?? 0) || diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index a5d8d76eb7..707f1ef6b4 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -210,10 +210,6 @@ provideMetadataReceiver((info) => { } }); -if (ui === "classic") { - provide("shouldSpacerMin", true); -} - const menuIndicated = computed(() => { for (const def in navbarItemDef) { if (def === "notifications") continue; // 通知は下にボタンとして表示されてるから