Sharkey/packages/client/src/components/launch-pad.vue

175 lines
4.3 KiB
Vue
Raw Normal View History

2020-11-17 15:52:07 +02:00
<template>
2022-03-27 10:28:25 +03:00
<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
2020-11-17 15:52:07 +02:00
<div class="main">
<template v-for="item in items">
2021-11-19 12:36:12 +02:00
<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
2020-11-17 15:52:07 +02:00
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
2020-11-17 15:52:07 +02:00
</button>
2021-11-19 12:36:12 +02:00
<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
2020-11-17 15:52:07 +02:00
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
2020-11-17 15:52:07 +02:00
</MkA>
</template>
</div>
<div class="sub">
<button v-click-anime class="_button" @click="help">
<i class="fas fa-question-circle icon"></i>
2020-12-26 03:47:36 +02:00
<div class="text">{{ $ts.help }}</div>
</button>
2021-11-19 12:36:12 +02:00
<MkA v-click-anime to="/about" @click.passive="close()">
<i class="fas fa-info-circle icon"></i>
<div class="text">{{ $ts.instanceInfo }}</div>
2020-11-17 15:52:07 +02:00
</MkA>
2021-11-19 12:36:12 +02:00
<MkA v-click-anime to="/about-misskey" @click.passive="close()">
2021-04-25 06:31:11 +03:00
<img src="/static-assets/favicon.png" class="icon"/>
2020-12-26 03:47:36 +02:00
<div class="text">{{ $ts.aboutMisskey }}</div>
2020-11-17 15:52:07 +02:00
</MkA>
</div>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { } from 'vue';
2021-11-11 19:02:25 +02:00
import MkModal from '@/components/ui/modal.vue';
import { menuDef } from '@/menu';
import { instanceName } from '@/config';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { deviceKind } from '@/scripts/device-kind';
import * as os from '@/os';
2020-11-17 15:52:07 +02:00
const props = withDefaults(defineProps<{
src?: HTMLElement;
2022-03-27 10:28:25 +03:00
anchor?: { x: string; y: string; };
}>(), {
2022-03-27 10:28:25 +03:00
anchor: () => ({ x: 'right', y: 'center' }),
2020-11-17 15:52:07 +02:00
});
const emit = defineEmits<{
(ev: 'closed'): void;
}>();
const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
deviceKind === 'smartphone' ? 'drawer' :
'dialog';
const modal = $ref<InstanceType<typeof MkModal>>();
const menu = defaultStore.state.menu;
const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
type: def.to ? 'link' : 'button',
text: i18n.ts[def.title],
icon: def.icon,
to: def.to,
action: def.action,
indicate: def.indicated,
}));
function close() {
modal.close();
}
function help(ev: MouseEvent) {
os.popupMenu([{
type: 'link',
to: '/mfm-cheat-sheet',
text: i18n.ts._mfm.cheatSheet,
icon: 'fas fa-code',
}, {
type: 'link',
to: '/scratchpad',
text: i18n.ts.scratchpad,
icon: 'fas fa-terminal',
}, null, {
text: i18n.ts.document,
icon: 'fas fa-question-circle',
action: () => {
window.open('https://misskey-hub.net/help.html', '_blank');
},
}], ev.currentTarget ?? ev.target);
close();
}
2020-11-17 15:52:07 +02:00
</script>
<style lang="scss" scoped>
.szkkfdyq {
max-height: 100%;
width: min(460px, 100vw);
padding: 24px;
2020-11-17 15:52:07 +02:00
box-sizing: border-box;
overflow: auto;
overscroll-behavior: contain;
text-align: left;
2020-11-17 15:52:07 +02:00
border-radius: 16px;
&.asDrawer {
width: 100%;
padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
border-radius: 24px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
text-align: center;
2020-11-17 15:52:07 +02:00
}
2020-11-17 15:52:07 +02:00
> .main, > .sub {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
2020-11-17 15:52:07 +02:00
> * {
position: relative;
display: flex;
2020-11-17 15:52:07 +02:00
flex-direction: column;
align-items: center;
justify-content: center;
2021-04-25 06:31:11 +03:00
vertical-align: bottom;
height: 100px;
border-radius: 10px;
2020-11-17 15:52:07 +02:00
&:hover {
color: var(--accent);
background: var(--accentedBg);
2020-11-17 15:52:07 +02:00
text-decoration: none;
}
> .icon {
font-size: 24px;
height: 24px;
2020-11-17 15:52:07 +02:00
}
> .text {
margin-top: 12px;
font-size: 0.8em;
2020-11-17 15:52:07 +02:00
line-height: 1.5em;
}
> .indicator {
2020-11-17 15:52:07 +02:00
position: absolute;
top: 32px;
left: 32px;
color: var(--indicator);
font-size: 8px;
animation: blink 1s infinite;
@media (max-width: 500px) {
top: 16px;
left: 16px;
}
}
}
}
> .sub {
margin-top: 8px;
padding-top: 8px;
border-top: solid 0.5px var(--divider);
2020-11-17 15:52:07 +02:00
}
}
</style>