mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey synced 2024-07-03 07:36:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-30 15:18:08 +09:00
parent de71845b35
commit 8e8e3dbe4e
2 changed files with 17 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]"> <div :class="$style.root">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/> <XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<MkStickyContainer :class="$style.contents"> <MkStickyContainer :class="$style.contents">
@ -12,8 +12,8 @@
</main> </main>
</MkStickyContainer> </MkStickyContainer>
<div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets"> <div v-if="isDesktop" :class="$style.widgets">
<XWidgets :marginTop="'var(--margin)'" @mounted="attachSticky"/> <XWidgets :marginTop="'var(--margin)'"/>
</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>
@ -87,7 +87,6 @@
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, inject, Ref } from 'vue'; import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, inject, Ref } from 'vue';
import XCommon from './_common_/common.vue'; import XCommon from './_common_/common.vue';
import { instanceName } from '@/config'; import { instanceName } from '@/config';
import { StickySidebar } from '@/scripts/sticky-sidebar';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -114,7 +113,6 @@ window.addEventListener('resize', () => {
}); });
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsEl = $shallowRef<HTMLElement>();
const widgetsShowing = $ref(false); const widgetsShowing = $ref(false);
const navFooter = $shallowRef<HTMLElement>(); const navFooter = $shallowRef<HTMLElement>();
@ -140,8 +138,6 @@ mainRouter.on('change', () => {
drawerMenuShowing.value = false; drawerMenuShowing.value = false;
}); });
document.documentElement.style.overflowY = 'scroll';
if (window.innerWidth > 1024) { if (window.innerWidth > 1024) {
const tempUI = miLocalStorage.getItem('ui_temp'); const tempUI = miLocalStorage.getItem('ui_temp');
if (tempUI) { if (tempUI) {
@ -197,19 +193,10 @@ const onContextmenu = (ev) => {
}], ev); }], ev);
}; };
const attachSticky = (el) => {
const sticky = new StickySidebar(widgetsEl);
window.addEventListener('scroll', () => {
sticky.calc(window.scrollY);
}, { passive: true });
};
function top() { function top() {
window.scroll({ top: 0, behavior: 'smooth' }); // TODO
} }
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
let navFooterHeight = $ref(0); let navFooterHeight = $ref(0);
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, $$(navFooterHeight)); provide<Ref<number>>(CURRENT_STICKY_BOTTOM, $$(navFooterHeight));
@ -275,28 +262,31 @@ $widgets-hide-threshold: 1090px;
} }
.root { .root {
min-height: 100dvh; height: 100dvh;
overflow: clip;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
} }
.withWallpaper {
background: var(--wallpaperOverlay);
//backdrop-filter: var(--blur, blur(4px));
}
.sidebar { .sidebar {
border-right: solid 0.5px var(--divider); border-right: solid 0.5px var(--divider);
} }
.contents { .contents {
width: 100%; flex: 1;
height: 100%;
min-width: 0; min-width: 0;
overflow: auto;
overflow-y: scroll;
background: var(--bg); background: var(--bg);
} }
.widgets { .widgets {
padding: 0 var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)); width: 350px;
height: 100%;
box-sizing: border-box;
overflow: auto;
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
border-left: solid 0.5px var(--divider); border-left: solid 0.5px var(--divider);
background: var(--bg); background: var(--bg);

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="$style.root" :style="{ paddingTop: marginTop }"> <div :class="$style.root">
<XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @addWidget="addWidget" @removeWidget="removeWidget" @updateWidget="updateWidget" @updateWidgets="updateWidgets" @exit="editMode = false"/> <XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @addWidget="addWidget" @removeWidget="removeWidget" @updateWidget="updateWidget" @updateWidgets="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>
@ -11,7 +11,7 @@
let editMode = $ref(false); let editMode = $ref(false);
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue'; import { } from 'vue';
import XWidgets from '@/components/MkWidgets.vue'; import XWidgets from '@/components/MkWidgets.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -21,28 +21,16 @@ const props = withDefaults(defineProps<{
// left = place: leftだけを表示 // left = place: leftだけを表示
// right = rightとnullを表示 // right = rightとnullを表示
place?: 'left' | null | 'right'; place?: 'left' | null | 'right';
marginTop?: string;
}>(), { }>(), {
place: null, place: null,
marginTop: '0',
}); });
const emit = defineEmits<{
(ev: 'mounted', el?: Element): void;
}>();
let rootEl = $shallowRef<HTMLDivElement>();
const widgets = $computed(() => { const widgets = $computed(() => {
if (props.place === null) return defaultStore.reactiveState.widgets.value; if (props.place === null) return defaultStore.reactiveState.widgets.value;
if (props.place === 'left') return defaultStore.reactiveState.widgets.value.filter(w => w.place === 'left'); if (props.place === 'left') return defaultStore.reactiveState.widgets.value.filter(w => w.place === 'left');
return defaultStore.reactiveState.widgets.value.filter(w => w.place !== 'left'); return defaultStore.reactiveState.widgets.value.filter(w => w.place !== 'left');
}); });
onMounted(() => {
emit('mounted', rootEl);
});
function addWidget(widget) { function addWidget(widget) {
defaultStore.set('widgets', [{ defaultStore.set('widgets', [{
...widget, ...widget,
@ -83,13 +71,6 @@ function updateWidgets(thisWidgets) {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
position: sticky;
height: min-content;
box-sizing: border-box;
}
.widgets {
width: 300px;
} }
.edit { .edit {