laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(fronted): setup syntax to menubar of Classic UI (#10474)

Browse Source
This commit is contained in:
Ryu jongheon 2023-04-06 08:35:14 +09:00 committed by GitHub
parent 19349b930a
commit e76d3e72db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
packages/frontend/src/ui/classic.header.vue
View File

@ -31,7 +31,7 @@
<button v-click-anime class="item _button account" @click="openAccountMenu"> <button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/> <MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
</button> </button>
<div class="post" @click="post"> <div class="post" @click="os.post()">
<MkButton class="button" gradate full rounded> <MkButton class="button" gradate full rounded>
<i class="ti ti-pencil ti-fw"></i> <i class="ti ti-pencil ti-fw"></i>
</MkButton> </MkButton>
@ -41,93 +41,50 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineAsyncComponent, defineComponent } from 'vue'; import { computed, defineAsyncComponent, onMounted } from 'vue';
import { openInstanceMenu } from './_common_/common'; import { openInstanceMenu } from './_common_/common';
import { host } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { navbarItemDef } from '@/navbar'; import { navbarItemDef } from '@/navbar';
import { openAccountMenu, $i } from '@/account'; import { openAccountMenu as openAccountMenu_, $i } from '@/account';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { mainRouter } from '@/router';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { instance } from '@/instance'; import { instance } from '@/instance';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
export default defineComponent({ const WINDOW_THRESHOLD = 1400;
components: {
MkButton,
},
data() { let settingsWindowed = $ref(window.innerWidth > WINDOW_THRESHOLD);
return { let menu = $ref(defaultStore.state.menu);
host: host, // const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
accounts: [], let otherNavItemIndicated = computed<boolean>(() => {
connection: null, for (const def in navbarItemDef) {
navbarItemDef: navbarItemDef, if (menu.includes(def)) continue;
settingsWindowed: false, if (navbarItemDef[def].indicated) return true;
defaultStore,
instance,
$i,
i18n,
};
},
computed: {
menu(): string[] {
return defaultStore.state.menu;
},
otherNavItemIndicated(): boolean {
for (const def in this.navbarItemDef) {
if (this.menu.includes(def)) continue;
if (this.navbarItemDef[def].indicated) return true;
} }
return false; return false;
}, });
},
watch: { function more(ev: MouseEvent) {
'defaultStore.reactiveState.menuDisplay.value'() {
this.calcViewState();
},
},
created() {
window.addEventListener('resize', this.calcViewState);
this.calcViewState();
},
methods: {
openInstanceMenu,
calcViewState() {
this.settingsWindowed = (window.innerWidth > 1400);
},
post() {
os.post();
},
search() {
mainRouter.push('/search');
},
more(ev) {
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
src: ev.currentTarget ?? ev.target, src: ev.currentTarget ?? ev.target,
anchor: { x: 'center', y: 'bottom' }, anchor: { x: 'center', y: 'bottom' },
}, { }, {
}, 'closed'); }, 'closed');
}, }
openAccountMenu: (ev) => { function openAccountMenu(ev: MouseEvent) {
openAccountMenu({ openAccountMenu_({
withExtraOperation: true, withExtraOperation: true,
}, ev); }, ev);
}, }
},
onMounted(() => {
window.addEventListener('resize', () => {
settingsWindowed = (window.innerWidth >= WINDOW_THRESHOLD);
}, { passive: true });
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

114
packages/frontend/src/ui/classic.sidebar.vue
View File

@ -3,7 +3,7 @@
<button v-click-anime class="item _button account" @click="openAccountMenu"> <button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> <MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button> </button>
<div class="post" data-cy-open-post-form @click="post"> <div class="post" data-cy-open-post-form @click="os.post">
<MkButton class="button" gradate full rounded> <MkButton class="button" gradate full rounded>
<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span> <i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
</MkButton> </MkButton>
@ -40,109 +40,59 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineAsyncComponent, defineComponent } from 'vue'; import { defineAsyncComponent, onMounted, computed, watch, nextTick } from 'vue';
import { openInstanceMenu } from './_common_/common'; import { openInstanceMenu } from './_common_/common';
import { host } from '@/config'; // import { host } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { navbarItemDef } from '@/navbar'; import { navbarItemDef } from '@/navbar';
import { openAccountMenu, $i } from '@/account'; import { openAccountMenu as openAccountMenu_, $i } from '@/account';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { StickySidebar } from '@/scripts/sticky-sidebar'; // import { StickySidebar } from '@/scripts/sticky-sidebar';
import { mainRouter } from '@/router'; // import { mainRouter } from '@/router';
//import MisskeyLogo from '@assets/client/misskey.svg'; //import MisskeyLogo from '@assets/client/misskey.svg';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { instance } from '@/instance'; import { instance } from '@/instance';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
export default defineComponent({ const WINDOW_THRESHOLD = 1400;
components: {
MkButton,
//MisskeyLogo,
},
data() { const menu = $ref(defaultStore.state.menu);
return { const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
host: host, const otherNavItemIndicated = computed<boolean>(() => {
accounts: [], for (const def in navbarItemDef) {
connection: null, if (menu.includes(def)) continue;
navbarItemDef: navbarItemDef, if (navbarItemDef[def].indicated) return true;
iconOnly: false,
settingsWindowed: false,
defaultStore,
instance,
$i,
i18n,
};
},
computed: {
menu(): string[] {
return this.defaultStore.state.menu;
},
otherNavItemIndicated(): boolean {
for (const def in this.navbarItemDef) {
if (this.menu.includes(def)) continue;
if (this.navbarItemDef[def].indicated) return true;
} }
return false; return false;
},
},
watch: {
'defaultStore.reactiveState.menuDisplay.value'() {
this.calcViewState();
},
iconOnly() {
this.$nextTick(() => {
this.$emit('change-view-mode');
}); });
}, let el = $shallowRef<HTMLElement>();
}, // let accounts = $ref([]);
// let connection = $ref(null);
let iconOnly = $ref(false);
let settingsWindowed = $ref(false);
created() { function calcViewState() {
window.addEventListener('resize', this.calcViewState); iconOnly = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
this.calcViewState(); settingsWindowed = (window.innerWidth > WINDOW_THRESHOLD);
}, }
mounted() { function more(ev: MouseEvent) {
const sticky = new StickySidebar(this.$el.parentElement, 16);
window.addEventListener('scroll', () => {
sticky.calc(window.scrollY);
}, { passive: true });
},
methods: {
openInstanceMenu,
calcViewState() {
this.iconOnly = (window.innerWidth <= 1400) || (this.defaultStore.state.menuDisplay === 'sideIcon');
this.settingsWindowed = (window.innerWidth > 1400);
},
post() {
os.post();
},
search() {
mainRouter.push('/search');
},
more(ev) {
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
src: ev.currentTarget ?? ev.target, src: ev.currentTarget ?? ev.target,
}, {}, 'closed'); }, {}, 'closed');
}, }
openAccountMenu: (ev) => { function openAccountMenu(ev: MouseEvent) {
openAccountMenu({ openAccountMenu_({
withExtraOperation: true, withExtraOperation: true,
}, ev); }, ev);
}, }
},
watch(defaultStore.reactiveState.menuDisplay, () => {
calcViewState();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>