[Client] Improve alert component

src/client/app/desktop/views/components/dialog.vue

@@ -1,168 +0,0 @@
-<template>
-<div class="mk-dialog">
-	<div class="bg" ref="bg" @click="onBgClick"></div>
-	<div class="main" ref="main">
-		<header v-html="title" :class="$style.header"></header>
-		<div class="body" v-html="text"></div>
-		<div class="buttons">
-			<button v-for="button in buttons" @click="click(button)">{{ button.text }}</button>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	props: {
-		title: {
-			type: String,
-			required: false
-		},
-		text: {
-			type: String,
-			required: true
-		},
-		buttons: {
-			type: Array,
-			default: () => {
-				return [{
-					text: 'OK'
-				}];
-			}
-		},
-		modal: {
-			type: Boolean,
-			default: false
-		}
-	},
-	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: {
-		click(button) {
-			this.$emit('clicked', button.id);
-			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() {
-			if (!this.modal) {
-				this.close();
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-dialog
-	> .bg
-		display block
-		position fixed
-		z-index 8192
-		top 0
-		left 0
-		width 100%
-		height 100%
-		background rgba(#000, 0.7)
-		opacity 0
-		pointer-events none
-
-	> .main
-		display block
-		position fixed
-		z-index 8192
-		top 20%
-		left 0
-		right 0
-		margin 0 auto 0 auto
-		padding 32px 42px
-		width 480px
-		background #fff
-		opacity 0
-
-		> .body
-			margin 1em 0
-			color #888
-
-		> .buttons
-			> button
-				display inline-block
-				float right
-				margin 0
-				padding 10px 10px
-				font-size 1.1em
-				font-weight normal
-				text-decoration none
-				color #888
-				background transparent
-				outline none
-				border none
-				border-radius 0
-				cursor pointer
-				transition color 0.1s ease
-
-				i
-					margin 0 0.375em
-
-				&:hover
-					color var(--primary)
-
-				&:active
-					color var(--primaryDarken10)
-					transition color 0s ease
-
-</style>
-
-<style lang="stylus" module>
-
-
-.header
-	margin 1em 0
-	color var(--primary)
-	// color #43A4EC
-	font-weight bold
-
-	&:empty
-		display none
-
-	> i
-		margin-right 0.5em
-
-</style>

src/client/app/desktop/views/components/drive.file.vue

@@ -170,12 +170,9 @@ export default Vue.extend({
 
 		copyUrl() {
 			copyToClipboard(this.file.url);
-			this.$dialog({
+			this.$root.alert({
 				title: this.$t('contextmenu.copied'),
-				text: this.$t('contextmenu.copied-url-to-clipboard'),
-				actions: [{
-					text: this.$t('@.ok')
-				}]
+				text: this.$t('contextmenu.copied-url-to-clipboard')
 			});
 		},
 

src/client/app/desktop/views/components/drive.folder.vue

@@ -155,12 +155,9 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$dialog({
+							this.$root.alert({
 								title: this.$t('unable-to-process'),
-								text: this.$t('circular-reference-detected'),
-								actions: [{
-									text: this.$t('@.ok')
-								}]
+								text: this.$t('circular-reference-detected')
 							});
 							break;
 						default:

src/client/app/desktop/views/components/drive.vue

@@ -313,12 +313,9 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$dialog({
+							this.$root.alert({
 								title: this.$t('unable-to-process'),
-								text: this.$t('circular-reference-detected'),
-								actions: [{
-									text: this.$t('@.ok')
-								}]
+								text: this.$t('circular-reference-detected')
 							});
 							break;
 						default:
@@ -343,12 +340,9 @@ export default Vue.extend({
 					folderId: this.folder ? this.folder.id : undefined
 				});
 
-				this.$dialog({
+				this.$root.alert({
 					title: this.$t('url-upload-requested'),
-					text: this.$t('may-take-time'),
-					actions: [{
-						text: this.$t('@.ok')
-					}]
+					text: this.$t('may-take-time')
 				});
 			});
 		},

src/client/app/desktop/views/components/home.vue

@@ -186,12 +186,9 @@ export default Vue.extend({
 
 	methods: {
 		hint() {
-			this.$dialog({
+			this.$root.alert({
 				title: this.$t('@.customization-tips.title'),
-				text: this.$t('@.customization-tips.paragraph'),
-				actions: [{
-					text: this.$t('@.customization-tips.gotit')
-				}]
+				text: this.$t('@.customization-tips.paragraph')
 			});
 		},
 

src/client/app/desktop/views/components/settings.vue

@@ -549,12 +549,12 @@ export default Vue.extend({
 				this.checkingForUpdate = false;
 				this.latestVersion = newer;
 				if (newer == null) {
-					this.$dialog({
+					this.$root.alert({
 						title: this.$t('no-updates'),
 						text: this.$t('no-updates-desc')
 					});
 				} else {
-					this.$dialog({
+					this.$root.alert({
 						title: this.$t('update-available'),
 						text: this.$t('update-available-desc')
 					});
@@ -563,7 +563,7 @@ export default Vue.extend({
 		},
 		clean() {
 			localStorage.clear();
-			this.$dialog({
+			this.$root.alert({
 				title: this.$t('cache-cleared'),
 				text: this.$t('cache-cleared-desc')
 			});