From eaa92e784d89c5bbaaed8efb0ed096005d2460f8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 17 Nov 2020 22:52:07 +0900
Subject: Resolve #6840

---
 src/client/components/launch-pad.vue | 152 +++++++++++++++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 src/client/components/launch-pad.vue

(limited to 'src/client/components/launch-pad.vue')

diff --git a/src/client/components/launch-pad.vue b/src/client/components/launch-pad.vue
new file mode 100644
index 0000000000..d09a4002df
--- /dev/null
+++ b/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>
-- 
cgit v1.2.3-freya