SWREI/switched
0
0
Fork 0
Code

refactor(client): use css modules

Browse Source
This commit is contained in:
syuilo 2023-01-10 11:15:29 +09:00
parent d10e000883
commit 3f033d6ab7
5 changed files with 72 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/global/MkAvatar.vue
View File

@ -52,7 +52,7 @@ watch(() => props.user.avatarBlurhash, () => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
@keyframes earwiggleleft { @keyframes earwiggleleft {
from { transform: rotate(37.6deg) skew(30deg); } from { transform: rotate(37.6deg) skew(30deg); }
25% { transform: rotate(10deg) skew(30deg); } 25% { transform: rotate(10deg) skew(30deg); }
@ -68,9 +68,7 @@ watch(() => props.user.avatarBlurhash, () => {
75% { transform: rotate(0deg) skew(-30deg); } 75% { transform: rotate(0deg) skew(-30deg); }
to { transform: rotate(-37.6deg) skew(-30deg); } to { transform: rotate(-37.6deg) skew(-30deg); }
} }
</style>
<style lang="scss" module>
.root { .root {
position: relative; position: relative;
display: inline-block; display: inline-block;

7
packages/frontend/src/ui/classic.vue
View File

@ -7,7 +7,7 @@
<XSidebar/> <XSidebar/>
</div> </div>
<div v-else ref="widgetsLeft" class="widgets left"> <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> </div>
<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu"> <main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
@ -17,7 +17,7 @@
</main> </main>
<div v-if="isDesktop" ref="widgetsRight" class="widgets right"> <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>
</div> </div>
@ -80,7 +80,7 @@ provide('shouldHeaderThin', showMenuOnTop);
provide('forceSpacerMin', true); provide('forceSpacerMin', true);
function attachSticky(el) { 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', () => { window.addEventListener('scroll', () => {
sticky.calc(window.scrollY); sticky.calc(window.scrollY);
}, { passive: true }); }, { passive: true });
@ -248,7 +248,6 @@ onMounted(() => {
> .widgets { > .widgets {
//--panelBorder: none; //--panelBorder: none;
width: 300px; width: 300px;
margin-top: 16px;
@media (max-width: $widgets-hide-threshold) { @media (max-width: $widgets-hide-threshold) {
display: none; display: none;

88
packages/frontend/src/ui/universal.vue
View File

@ -13,7 +13,7 @@
</MkStickyContainer> </MkStickyContainer>
<div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets"> <div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets">
<XWidgets @mounted="attachSticky"/> <XWidgets :margin-top="'var(--margin)'" @mounted="attachSticky"/>
</div> </div>
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button> <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> <button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
</div> </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 <div
v-if="drawerMenuShowing" v-if="drawerMenuShowing"
:class="$style.menuDrawerBg" :class="$style.menuDrawerBg"
@ -36,11 +41,21 @@
></div> ></div>
</Transition> </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"/> <XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/>
</Transition> </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 <div
v-if="widgetsShowing" v-if="widgetsShowing"
:class="$style.widgetsDrawerBg" :class="$style.widgetsDrawerBg"
@ -50,8 +65,15 @@
></div> ></div>
</Transition> </Transition>
<Transition :name="$store.state.animation ? 'widgetsDrawer' : ''"> <Transition
<XWidgets v-if="widgetsShowing" :class="$style.widgetsDrawer"/> :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> </Transition>
<XCommon/> <XCommon/>
@ -176,55 +198,53 @@ function top() {
const wallpaper = miLocalStorage.getItem('wallpaper') != null; const wallpaper = miLocalStorage.getItem('wallpaper') != null;
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.widgetsDrawer-enter-active, $ui-font-size: 1em; // TODO: どこかに集約したい
.widgetsDrawer-leave-active { $widgets-hide-threshold: 1090px;
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);
}
.widgetsDrawer-back-enter-active, .transition_menuDrawerBg_enterActive,
.widgetsDrawer-back-leave-active { .transition_menuDrawerBg_leaveActive {
opacity: 1; opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
} }
.widgetsDrawer-back-enter-from, .transition_menuDrawerBg_enterFrom,
.widgetsDrawer-back-leave-active { .transition_menuDrawerBg_leaveTo {
opacity: 0; opacity: 0;
} }
.menuDrawer-enter-active, .transition_menuDrawer_enterActive,
.menuDrawer-leave-active { .transition_menuDrawer_leaveActive {
opacity: 1; opacity: 1;
transform: translateX(0); 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: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
} }
.menuDrawer-enter-from, .transition_menuDrawer_enterFrom,
.menuDrawer-leave-active { .transition_menuDrawer_leaveTo {
opacity: 0; opacity: 0;
transform: translateX(-240px); transform: translateX(-240px);
} }
.menuDrawer-back-enter-active, .transition_widgetsDrawerBg_enterActive,
.menuDrawer-back-leave-active { .transition_widgetsDrawerBg_leaveActive {
opacity: 1; opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
} }
.menuDrawer-back-enter-from, .transition_widgetsDrawerBg_enterFrom,
.menuDrawer-back-leave-active { .transition_widgetsDrawerBg_leaveTo {
opacity: 0; opacity: 0;
} }
</style>
<style lang="scss" module> .transition_widgetsDrawer_enterActive,
$ui-font-size: 1em; // TODO: どこかに集約したい .transition_widgetsDrawer_leaveActive {
$widgets-hide-threshold: 1090px; 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 { .root {
min-height: 100dvh; min-height: 100dvh;

34
packages/frontend/src/ui/universal.widgets.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="efzpzdvf" :class="{ universal: !classic, classic }"> <div :class="$style.root" :style="{ paddingTop: marginTop }">
<XWidgets :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/> <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-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> <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だけを表示 // left = place: leftだけを表示
// right = rightとnullを表示 // right = rightとnullを表示
place?: 'left' | null | 'right'; place?: 'left' | null | 'right';
classic?: boolean; marginTop?: string;
}>(), { }>(), {
place: null, place: null,
classic: false, marginTop: '0',
}); });
const emit = defineEmits<{ const emit = defineEmits<{
@ -81,31 +81,15 @@ function updateWidgets(thisWidgets) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.efzpzdvf { .root {
position: sticky; position: sticky;
height: min-content; height: min-content;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
}
&.universal { .widgets {
padding-top: var(--margin); width: 300px;
> * {
margin: var(--margin) 0;
}
}
> * {
width: 300px;
&:first-child {
margin-top: 0;
}
}
> .add {
margin: 0 auto;
}
} }
</style> </style>

6
packages/frontend/vite.config.ts
View File

@ -59,7 +59,11 @@ export default defineConfig(({ command, mode }) => {
css: { css: {
modules: { modules: {
generateScopedName: (name, filename, css) => { 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;
}
}, },
}, },
}, },