v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

src/client/components/window.vue

@@ -0,0 +1,155 @@
+<template>
+<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
+	<div class="ebkgoccj" :class="{ noPadding }" @keydown="onKeydown">
+		<div class="header">
+			<button class="_button" v-if="withOkButton" @click="close()"><fa :icon="faTimes"/></button>
+			<span class="title">
+				<mk-avatar :user="avatar" v-if="avatar" class="avatar"/>
+				<slot name="header"></slot>
+			</span>
+			<button class="_button" v-if="!withOkButton" @click="close()"><fa :icon="faTimes"/></button>
+			<button class="_button" v-if="withOkButton" @click="() => { $emit('ok'); close(); }" :disabled="okButtonDisabled"><fa :icon="faCheck"/></button>
+		</div>
+		<div class="body">
+			<slot></slot>
+		</div>
+	</div>
+</x-modal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../i18n';
+import XModal from './modal.vue';
+
+export default Vue.extend({
+	i18n,
+
+	components: {
+		XModal,
+	},
+
+	props: {
+		avatar: {
+			type: Object,
+			required: false
+		},
+		withOkButton: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		okButtonDisabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		noPadding: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			faTimes, faCheck
+		};
+	},
+
+	methods: {
+		close() {
+			this.$refs.modal.close();
+		},
+
+		onKeydown(e) {
+			if (e.which === 27) { // Esc
+				e.preventDefault();
+				e.stopPropagation();
+				this.close();
+			}
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ebkgoccj {
+	width: 400px;
+	height: 400px;
+	background: var(--panel);
+	border-radius: var(--radius);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+
+	@media (max-width: 500px) {
+		width: 350px;
+		height: 350px;
+	}
+
+	> .header {
+		$height: 58px;
+		$height-narrow: 42px;
+		display: flex;
+		flex-shrink: 0;
+
+		> button {
+			height: $height;
+			width: $height;
+
+			@media (max-width: 500px) {
+				height: $height-narrow;
+				width: $height-narrow;
+			}
+		}
+
+		> .title {
+			flex: 1;
+			line-height: $height;
+			padding-left: 32px;
+			font-weight: bold;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			pointer-events: none;
+
+			@media (max-width: 500px) {
+				line-height: $height-narrow;
+				padding-left: 16px;
+			}
+
+			> .avatar {
+				$size: 32px;
+				height: $size;
+				width: $size;
+				margin: (($height - $size) / 2) 8px (($height - $size) / 2) 0;
+
+				@media (max-width: 500px) {
+					$size: 24px;
+					height: $size;
+					width: $size;
+					margin: (($height-narrow - $size) / 2) 8px (($height-narrow - $size) / 2) 0;
+				}
+			}
+		}
+
+		> button + .title {
+			padding-left: 0;
+		}
+	}
+
+	> .body {
+		overflow: auto;
+	}
+
+	&:not(.noPadding) > .body {
+		padding: 0 32px 32px 32px;
+
+		@media (max-width: 500px) {
+			padding: 0 16px 16px 16px;
+		}
+	}
+}
+</style>