Resolve #6840

src/client/components/launch-pad.vue

@@ -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>

src/client/components/sidebar.vue

@@ -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 => ({
+			os.popup(import('./launch-pad.vue'), {}, {
-				type: def.to ? 'link' : 'button',
+			}, 'closed');
-				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);
 		},
 
 		addAcount() {