mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-12-27 23:53:08 +02:00
Resolve #6840
This commit is contained in:
syuilo
parent
48589e0da1
commit
eaa92e784d
2 changed files with 155 additions and 25 deletions
152
src/client/components/launch-pad.vue
Normal file
152
src/client/components/launch-pad.vue
Normal 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>
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue