This commit is contained in:
syuilo 2020-11-17 22:52:07 +09:00
parent 48589e0da1
commit eaa92e784d
2 changed files with 155 additions and 25 deletions

View file

@ -0,0 +1,152 @@
<template>
<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
<div class="szkkfdyq _popup">
<div class="main">
<template v-for="item in items">
<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
<Fa :icon="item.icon" class="icon"/>
<div class="text">{{ item.text }}</div>
<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
</button>
<MkA v-else :to="item.to" @click.passive="close()">
<Fa :icon="item.icon" class="icon"/>
<div class="text">{{ item.text }}</div>
<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
</MkA>
</template>
</div>
<div class="sub">
<MkA to="/docs" @click.passive="close()">
<Fa :icon="faQuestionCircle" class="icon"/>
<div class="text">{{ $t('help') }}</div>
</MkA>
<MkA to="/about" @click.passive="close()">
<Fa :icon="faInfoCircle" class="icon"/>
<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
</MkA>
<MkA to="/about-misskey" @click.passive="close()">
<Fa :icon="faInfoCircle" class="icon"/>
<div class="text">{{ $t('aboutMisskey') }}</div>
</MkA>
</div>
</div>
</MkModal>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faQuestionCircle, faInfoCircle, faCircle } from '@fortawesome/free-solid-svg-icons';
import MkModal from '@/components/ui/modal.vue';
import { sidebarDef } from '@/sidebar';
import { instanceName } from '@/config';
export default defineComponent({
components: {
MkModal,
},
emits: ['closed'],
data() {
return {
menuDef: sidebarDef,
items: [],
instanceName,
faQuestionCircle, faInfoCircle, faCircle,
};
},
computed: {
menu(): string[] {
return this.$store.state.deviceUser.menu;
},
},
created() {
this.items = Object.keys(this.menuDef).filter(k => !this.menu.includes(k)).map(k => this.menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
type: def.to ? 'link' : 'button',
text: this.$t(def.title),
icon: def.icon,
to: def.to,
action: def.action,
indicate: def.indicated,
}));
},
methods: {
close() {
this.$refs.modal.close();
}
}
});
</script>
<style lang="scss" scoped>
.szkkfdyq {
width: 100%;
max-height: 100%;
max-width: 800px;
padding: 32px;
box-sizing: border-box;
overflow: auto;
text-align: center;
border-radius: 16px;
@media (max-width: 500px) {
padding: 16px;
}
> .main, > .sub {
> * {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 128px;
height: 128px;
border-radius: var(--radius);
@media (max-width: 500px) {
width: 100px;
height: 100px;
}
&:hover {
background: rgba(0, 0, 0, 0.05);
text-decoration: none;
}
> .icon {
font-size: 26px;
}
> .text {
margin-top: 8px;
font-size: 0.9em;
line-height: 1.5em;
}
> i {
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 1px var(--divider);
}
}
</style>

View file

@ -45,7 +45,7 @@
import { defineComponent } from 'vue';
import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
import { host, instanceName } from '@/config';
import { host } from '@/config';
import { search } from '@/scripts/search';
import * as os from '@/os';
import { sidebarDef } from '@/sidebar';
@ -223,30 +223,8 @@ export default defineComponent({
},
more(ev) {
const items = Object.keys(this.menuDef).filter(k => !this.menu.includes(k)).map(k => this.menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
type: def.to ? 'link' : 'button',
text: this.$t(def.title),
icon: def.icon,
to: def.to,
action: def.action,
indicate: def.indicated,
}));
os.modalMenu([...items, null, {
type: 'link',
text: this.$t('help'),
to: '/docs',
icon: faQuestionCircle,
}, {
type: 'link',
text: this.$t('aboutX', { x: instanceName }),
to: '/about',
icon: faInfoCircle,
}, {
type: 'link',
text: this.$t('aboutMisskey'),
to: '/about-misskey',
icon: faInfoCircle,
}], ev.currentTarget || ev.target);
os.popup(import('./launch-pad.vue'), {}, {
}, 'closed');
},
addAcount() {