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

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

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