[Client] Improve alert component

11 files changed, 219 insertions, 208 deletions

diff --git a/src/client/app/common/scripts/check-for-update.ts b/src/client/app/common/scripts/check-for-update.ts
index 377eccc6b5..7fe9d8d50c 100644
--- a/src/client/app/common/scripts/check-for-update.ts
+++ b/src/client/app/common/scripts/check-for-update.ts
@@ -22,7 +22,7 @@ export default async function($root: any, force = false, silent = false) {
 		}
 
 		if (!silent) {
-			$root.$dialog({
+			$root.alert({
 				title: $root.$t('@.update-available-title'),
 				text: $root.$t('@.update-available', { newer, current })
 			});
diff --git a/src/client/app/common/scripts/fuck-ad-block.ts b/src/client/app/common/scripts/fuck-ad-block.ts
index 8d0a3e2785..f5cc1b71f2 100644
--- a/src/client/app/common/scripts/fuck-ad-block.ts
+++ b/src/client/app/common/scripts/fuck-ad-block.ts
@@ -4,12 +4,9 @@ export default ($root: any) => {
 	require('fuckadblock');
 
 	function adBlockDetected() {
-		$root.$dialog({
+		$root.alert({
 			title: $root.$t('@.adblock.detected'),
-			text: $root.$t('@.adblock.warning'),
-			actins: [{
-				text: 'OK'
-			}]
+			text: $root.$t('@.adblock.warning')
 		});
 	}
 
diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 9f1a4c6eea..80935927d5 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -3,7 +3,6 @@ import { sum } from '../../../../prelude/array';
 import shouldMuteNote from './should-mute-note';
 import MkNoteMenu from '../views/components/note-menu.vue';
 import MkReactionPicker from '../views/components/reaction-picker.vue';
-import Ok from '../views/components/ok.vue';
 
 function focus(el, fn) {
 	const target = fn(el);
@@ -142,7 +141,11 @@ export default (opts: Opts = {}) => ({
 			this.$root.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				/*this.$root.alert({
+					pointer: false,
+					autoClose: true
+				});*/
 			});
 		},
 
diff --git a/src/client/app/common/views/components/alert.vue b/src/client/app/common/views/components/alert.vue
new file mode 100644
index 0000000000..8f307f86ea
--- /dev/null
+++ b/src/client/app/common/views/components/alert.vue
@@ -0,0 +1,179 @@
+<template>
+<div class="felqjxyj" :class="{ pointer }">
+	<div class="bg" ref="bg" @click="onBgClick"></div>
+	<div class="main" ref="main">
+		<div class="icon" :class="type"><fa :icon="icon"/></div>
+		<header v-if="title" v-html="title"></header>
+		<div class="body" v-if="text" v-html="text"></div>
+		<ui-horizon-group no-grow class="buttons">
+			<ui-button @click="ok" primary>OK</ui-button>
+			<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
+		</ui-horizon-group>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: 'info'
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		text: {
+			type: String,
+			required: true
+		},
+		showCancelButton: {
+			type: Boolean,
+			default: false
+		},
+		pointer: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	computed: {
+		icon(): any {
+			switch (this.type) {
+				case 'success': return 'check';
+				case 'error': return faTimesCircle;
+				case 'warning': return 'exclamation-triangle';
+				case 'info': return 'info-circle';
+				case 'question': return faQuestionCircle;
+			}
+		}
+	},
+
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.bg as any).style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				scale: [1.2, 1],
+				duration: 300,
+				easing: [0, 0.5, 0.5, 1]
+			});
+		});
+	},
+
+	methods: {
+		ok() {
+			this.$emit('ok');
+			this.close();
+		},
+
+		cancel() {
+			this.$emit('cancel');
+			this.close();
+		},
+
+		close() {
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			(this.$refs.main as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				scale: 0.8,
+				duration: 300,
+				easing: [ 0.5, -0.5, 1, 0.5 ],
+				complete: () => this.destroyDom()
+			});
+		},
+
+		onBgClick() {
+			this.cancel();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.felqjxyj
+	display flex
+	align-items center
+	justify-content center
+	position fixed
+	z-index 30000
+	top 0
+	left 0
+	width 100%
+	height 100%
+
+	&:not(.pointer)
+		pointer-events none
+
+	> .bg
+		display block
+		position fixed
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(#000, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		margin auto
+		padding 32px 42px
+		min-width 320px
+		max-width 480px
+		width calc(100% - 32px)
+		text-align center
+		background var(--face)
+		border-radius 8px
+		color var(--faceText)
+		opacity 0
+
+		> .icon
+			font-size 32px
+
+			&.success
+				color #37ec92
+
+			&.error
+				color #ec4137
+
+			&.warning
+				color #ecb637
+
+			> *
+				display block
+				margin 0 auto
+
+		> .header
+			margin 16px 0
+			font-weight bold
+
+		> .body
+			margin 16px 0
+
+</style>
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index 86b3820c36..d45c9c8835 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -9,7 +9,6 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 import { url } from '../../../config';
 import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
-import Ok from './ok.vue';
 import { concat, intersperse } from '../../../../../prelude/array';
 
 export default Vue.extend({
@@ -79,7 +78,8 @@ export default Vue.extend({
 			this.$root.api('i/pin', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				//this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
@@ -105,7 +105,8 @@ export default Vue.extend({
 			this.$root.api('notes/favorites/create', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				//this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
@@ -114,7 +115,8 @@ export default Vue.extend({
 			this.$root.api('notes/favorites/delete', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				//this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
diff --git a/src/client/app/common/views/components/ok.vue b/src/client/app/common/views/components/ok.vue
deleted file mode 100644
index 63bd784b18..0000000000
--- a/src/client/app/common/views/components/ok.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-<div class="yvbkymdqeusiqucuuloahhiqflzinufs">
-	<div class="bg" ref="bg"></div>
-	<div class="body" ref="body">
-		<div class="icon">
-			<div class="circle left"></div>
-			<span class="check tip"></span>
-			<span class="check long"></span>
-			<div class="ring"></div>
-			<div class="fix"></div>
-			<div class="circle right"></div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	mounted() {
-		this.$nextTick(() => {
-			anime({
-				targets: this.$refs.bg,
-				opacity: 1,
-				duration: 300,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.body,
-				opacity: 1,
-				scale: [1.2, 1],
-				duration: 300,
-				easing: [0, 0.5, 0.5, 1]
-			});
-		});
-
-		setTimeout(() => {
-			anime({
-				targets: this.$refs.bg,
-				opacity: 0,
-				duration: 300,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.body,
-				opacity: 0,
-				scale: 0.8,
-				duration: 300,
-				easing: [0.5, 0, 1, 0.5],
-				complete: () => this.destroyDom()
-			});
-		}, 1250);
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.yvbkymdqeusiqucuuloahhiqflzinufs
-	pointer-events none
-
-	> .bg
-		display block
-		position fixed
-		z-index 10000
-		top 0
-		left 0
-		width 100%
-		height 100%
-		background rgba(#000, 0.7)
-		opacity 0
-
-	> .body
-		position fixed
-		z-index 10000
-		top 0
-		right 0
-		left 0
-		bottom 0
-		margin auto
-		width 150px
-		height 150px
-		background var(--face)
-		border-radius 8px
-		opacity 0
-
-		> .icon
-			display flex
-			justify-content center
-			position absolute
-			top 0
-			right 0
-			left 0
-			bottom 0
-			width 5em
-			height 5em
-			margin auto
-			border .25em solid transparent
-			border-radius 50%
-			line-height 5em
-			cursor default
-			box-sizing content-box
-			user-select none
-			zoom normal
-			border-color #a5dc86
-
-			> .circle
-				position absolute
-				width 3.75em
-				height 7.5em
-				transform rotate(45deg)
-				border-radius 50%
-				background var(--face)
-
-				&.left
-					top -.4375em
-					left -2.0635em
-					transform rotate(-45deg)
-					transform-origin 3.75em 3.75em
-					border-radius 7.5em 0 0 7.5em
-
-				&.right
-					top -.6875em
-					left 1.875em
-					transform rotate(-45deg)
-					transform-origin 0 3.75em
-					border-radius 0 7.5em 7.5em 0
-					animation swal2-rotate-success-circular-line 4.25s ease-in
-
-			> .check
-				display block
-				position absolute
-				height .3125em
-				border-radius .125em
-				background-color #a5dc86
-				z-index 2
-
-				&.tip
-					top 2.875em
-					left .875em
-					width 1.5625em
-					transform rotate(45deg)
-					animation swal2-animate-success-line-tip .75s
-
-				&.long
-					top 2.375em
-					right .5em
-					width 2.9375em
-					transform rotate(-45deg)
-					animation swal2-animate-success-line-long .75s
-
-			> .fix
-				position absolute
-				top .5em
-				left 1.625em
-				width .4375em
-				height 5.625em
-				transform rotate(-45deg)
-				z-index 1
-				background var(--face)
-
-			> .ring
-				position absolute
-				top -.25em
-				left -.25em
-				width 100%
-				height 100%
-				border .25em solid rgba(165,220,134,.3)
-				border-radius 50%
-				z-index 2
-				box-sizing content-box
-</style>
diff --git a/src/client/app/common/views/components/password-settings.vue b/src/client/app/common/views/components/password-settings.vue
index 8661b51538..356f8b2fa4 100644
--- a/src/client/app/common/views/components/password-settings.vue
+++ b/src/client/app/common/views/components/password-settings.vue
@@ -25,12 +25,9 @@ export default Vue.extend({
 						type: 'password'
 					}).then(newPassword2 => {
 						if (newPassword !== newPassword2) {
-							this.$dialog({
+							this.$root.alert({
 								title: null,
-								text: this.$t('not-match'),
-								actions: [{
-									text: 'OK'
-								}]
+								text: this.$t('not-match')
 							});
 							return;
 						}
diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/profile-editor.vue
index 034c3bed8c..bbb2fdb800 100644
--- a/src/client/app/common/views/components/profile-editor.vue
+++ b/src/client/app/common/views/components/profile-editor.vue
@@ -193,7 +193,7 @@ export default Vue.extend({
 				this.$store.state.i.bannerUrl = i.bannerUrl;
 
 				if (notify) {
-					this.$swal({
+					this.$root.alert({
 						type: 'success',
 						text: this.$t('saved')
 					});
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 4a6d066d7f..fac11d9efb 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
 			try {
 				theme = JSON5.parse(code);
 			} catch (e) {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: this.$t('invalid-theme')
 				});
@@ -234,7 +234,7 @@ export default Vue.extend({
 			}
 
 			if (theme.id == null) {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: this.$t('invalid-theme')
 				});
@@ -242,7 +242,7 @@ export default Vue.extend({
 			}
 
 			if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
-				this.$swal({
+				this.$root.alert({
 					type: 'info',
 					text: this.$t('already-installed')
 				});
@@ -254,7 +254,7 @@ export default Vue.extend({
 				key: 'themes', value: themes
 			});
 
-			this.$swal({
+			this.$root.alert({
 				type: 'success',
 				text: this.$t('installed').replace('{}', theme.name)
 			});
@@ -267,7 +267,7 @@ export default Vue.extend({
 				key: 'themes', value: themes
 			});
 
-			this.$swal({
+			this.$root.alert({
 				type: 'info',
 				text: this.$t('uninstalled').replace('{}', theme.name)
 			});
@@ -304,7 +304,7 @@ export default Vue.extend({
 			const theme = this.myTheme;
 
 			if (theme.name == null || theme.name.trim() == '') {
-				this.$swal({
+				this.$root.alert({
 					type: 'warning',
 					text: this.$t('theme-name-required')
 				});
@@ -318,7 +318,7 @@ export default Vue.extend({
 				key: 'themes', value: themes
 			});
 
-			this.$swal({
+			this.$root.alert({
 				type: 'success',
 				text: this.$t('saved')
 			});
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 132518da92..ee8366e89d 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -57,6 +57,7 @@ export default Vue.extend({
 	text-align center
 	font-weight normal
 	font-size 16px
+	line-height 24px
 	border none
 	border-radius 6px
 	outline none
@@ -85,6 +86,7 @@ export default Vue.extend({
 	&.inline
 		display inline-block
 		width auto
+		min-width 100px
 
 	&.primary
 		font-weight bold
diff --git a/src/client/app/common/views/components/ui/horizon-group.vue b/src/client/app/common/views/components/ui/horizon-group.vue
index b9c7cf5cbe..0d4eafae52 100644
--- a/src/client/app/common/views/components/ui/horizon-group.vue
+++ b/src/client/app/common/views/components/ui/horizon-group.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze" :class="{ inputs }">
+<div class="vnxwkwuf" :class="{ inputs, noGrow }">
 	<slot></slot>
 </div>
 </template>
@@ -15,21 +15,27 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		noGrow: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.pfzekjfwkwvadvlujpdnnxfggqgqjoze
-	display flex
-
+.vnxwkwuf
 	&.inputs
 		margin 32px 0
 
-	> *
-		flex 1
+	&:not(.noGrow)
+		display flex
+
+		> *
+			flex 1
 
-		&:not(:last-child)
-			margin-right 16px
+	> *:not(:last-child)
+		margin-right 16px
 </style>