profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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>
<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;

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

@ -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;

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

@ -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;

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

@ -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>

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

@ -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;
}
},
},
},