From 3f033d6ab7a0710134a3647c5c6ac0ca0e773f0a Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Tue, 10 Jan 2023 11:15:29 +0900 Subject: [PATCH] refactor(client): use css modules --- .../src/components/global/MkAvatar.vue | 4 +- packages/frontend/src/ui/classic.vue | 7 +- packages/frontend/src/ui/universal.vue | 88 ++++++++++++------- .../frontend/src/ui/universal.widgets.vue | 34 ++----- packages/frontend/vite.config.ts | 6 +- 5 files changed, 72 insertions(+), 67 deletions(-) diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index 0a42a29323..670bb3b188 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -52,7 +52,7 @@ watch(() => props.user.avatarBlurhash, () => { }); </script> -<style lang="scss" scoped> +<style lang="scss" module> @keyframes earwiggleleft { from { transform: rotate(37.6deg) skew(30deg); } 25% { transform: rotate(10deg) skew(30deg); } @@ -68,9 +68,7 @@ watch(() => props.user.avatarBlurhash, () => { 75% { transform: rotate(0deg) skew(-30deg); } to { transform: rotate(-37.6deg) skew(-30deg); } } -</style> -<style lang="scss" module> .root { position: relative; display: inline-block; diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue index f220501ee2..321a75122b 100644 --- a/packages/frontend/src/ui/classic.vue +++ b/packages/frontend/src/ui/classic.vue @@ -7,7 +7,7 @@ <XSidebar/> </div> <div v-else ref="widgetsLeft" class="widgets left"> - <XWidgets place="left" :classic="true" @mounted="attachSticky(widgetsLeft)"/> + <XWidgets place="left" :margin-top="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/> </div> <main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu"> @@ -17,7 +17,7 @@ </main> <div v-if="isDesktop" ref="widgetsRight" class="widgets right"> - <XWidgets :place="showMenuOnTop ? 'right' : null" :classic="true" @mounted="attachSticky(widgetsRight)"/> + <XWidgets :place="showMenuOnTop ? 'right' : null" :margin-top="'var(--margin)'" @mounted="attachSticky(widgetsRight)"/> </div> </div> @@ -80,7 +80,7 @@ provide('shouldHeaderThin', showMenuOnTop); provide('forceSpacerMin', true); function attachSticky(el) { - const sticky = new StickySidebar(el, defaultStore.state.menuDisplay === 'top' ? 0 : 16, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す + const sticky = new StickySidebar(el, 0, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す window.addEventListener('scroll', () => { sticky.calc(window.scrollY); }, { passive: true }); @@ -248,7 +248,6 @@ onMounted(() => { > .widgets { //--panelBorder: none; width: 300px; - margin-top: 16px; @media (max-width: $widgets-hide-threshold) { display: none; diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index e5085f3be2..3d74fc9ee3 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -13,7 +13,7 @@ </MkStickyContainer> <div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets"> - <XWidgets @mounted="attachSticky"/> + <XWidgets :margin-top="'var(--margin)'" @mounted="attachSticky"/> </div> <button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button> @@ -26,7 +26,12 @@ <button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button> </div> - <Transition :name="$store.state.animation ? 'menuDrawer-back' : ''"> + <Transition + :enter-active-class="$store.state.animation ? $style.transition_menuDrawerBg_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''" + > <div v-if="drawerMenuShowing" :class="$style.menuDrawerBg" @@ -36,11 +41,21 @@ ></div> </Transition> - <Transition :name="$store.state.animation ? 'menuDrawer' : ''"> + <Transition + :enter-active-class="$store.state.animation ? $style.transition_menuDrawer_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_menuDrawer_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''" + > <XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/> </Transition> - <Transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''"> + <Transition + :enter-active-class="$store.state.animation ? $style.transition_widgetsDrawerBg_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''" + > <div v-if="widgetsShowing" :class="$style.widgetsDrawerBg" @@ -50,8 +65,15 @@ ></div> </Transition> - <Transition :name="$store.state.animation ? 'widgetsDrawer' : ''"> - <XWidgets v-if="widgetsShowing" :class="$style.widgetsDrawer"/> + <Transition + :enter-active-class="$store.state.animation ? $style.transition_widgetsDrawer_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_widgetsDrawer_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_widgetsDrawer_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''" + > + <div v-if="widgetsShowing" :class="$style.widgetsDrawer"> + <XWidgets/> + </div> </Transition> <XCommon/> @@ -176,55 +198,53 @@ function top() { const wallpaper = miLocalStorage.getItem('wallpaper') != null; </script> -<style lang="scss" scoped> -.widgetsDrawer-enter-active, -.widgetsDrawer-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); -} -.widgetsDrawer-enter-from, -.widgetsDrawer-leave-active { - opacity: 0; - transform: translateX(240px); -} +<style lang="scss" module> +$ui-font-size: 1em; // TODO: どこかに集約したい +$widgets-hide-threshold: 1090px; -.widgetsDrawer-back-enter-active, -.widgetsDrawer-back-leave-active { +.transition_menuDrawerBg_enterActive, +.transition_menuDrawerBg_leaveActive { opacity: 1; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } -.widgetsDrawer-back-enter-from, -.widgetsDrawer-back-leave-active { +.transition_menuDrawerBg_enterFrom, +.transition_menuDrawerBg_leaveTo { opacity: 0; } -.menuDrawer-enter-active, -.menuDrawer-leave-active { +.transition_menuDrawer_enterActive, +.transition_menuDrawer_leaveActive { 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); } -.menuDrawer-enter-from, -.menuDrawer-leave-active { +.transition_menuDrawer_enterFrom, +.transition_menuDrawer_leaveTo { opacity: 0; transform: translateX(-240px); } -.menuDrawer-back-enter-active, -.menuDrawer-back-leave-active { +.transition_widgetsDrawerBg_enterActive, +.transition_widgetsDrawerBg_leaveActive { opacity: 1; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } -.menuDrawer-back-enter-from, -.menuDrawer-back-leave-active { +.transition_widgetsDrawerBg_enterFrom, +.transition_widgetsDrawerBg_leaveTo { opacity: 0; } -</style> -<style lang="scss" module> -$ui-font-size: 1em; // TODO: どこかに集約したい -$widgets-hide-threshold: 1090px; +.transition_widgetsDrawer_enterActive, +.transition_widgetsDrawer_leaveActive { + 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); +} +.transition_widgetsDrawer_enterFrom, +.transition_widgetsDrawer_leaveTo { + opacity: 0; + transform: translateX(240px); +} .root { min-height: 100dvh; diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue index d4210f6988..7a37992933 100644 --- a/packages/frontend/src/ui/universal.widgets.vue +++ b/packages/frontend/src/ui/universal.widgets.vue @@ -1,6 +1,6 @@ <template> -<div class="efzpzdvf" :class="{ universal: !classic, classic }"> - <XWidgets :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/> +<div :class="$style.root" :style="{ paddingTop: marginTop }"> + <XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/> <button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button> <button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button> @@ -21,10 +21,10 @@ const props = withDefaults(defineProps<{ // left = place: leftだけを表示 // right = rightとnullを表示 place?: 'left' | null | 'right'; - classic?: boolean; + marginTop?: string; }>(), { place: null, - classic: false, + marginTop: '0', }); const emit = defineEmits<{ @@ -81,31 +81,15 @@ function updateWidgets(thisWidgets) { } </script> -<style lang="scss" scoped> -.efzpzdvf { +<style lang="scss" module> +.root { position: sticky; height: min-content; min-height: 100vh; box-sizing: border-box; +} - &.universal { - padding-top: var(--margin); - - > * { - margin: var(--margin) 0; - } - } - - > * { - width: 300px; - - &:first-child { - margin-top: 0; - } - } - - > .add { - margin: 0 auto; - } +.widgets { + width: 300px; } </style> diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts index d89d71e192..bb858e256f 100644 --- a/packages/frontend/vite.config.ts +++ b/packages/frontend/vite.config.ts @@ -59,7 +59,11 @@ export default defineConfig(({ command, mode }) => { css: { modules: { generateScopedName: (name, filename, css) => { - return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4); + if (process.env.NODE_ENV === 'production') { + return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4); + } else { + return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4) + '-' + name; + } }, }, },