[Client] Improve alert component

This commit is contained in:
syuilo 2018-11-14 16:30:58 +09:00
parent 850396e9da
commit 11afa8140c
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
31 changed files with 268 additions and 672 deletions

View file

@ -221,7 +221,6 @@
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-style-loader": "4.1.2", "vue-style-loader": "4.1.2",
"vue-svg-inline-loader": "1.2.1", "vue-svg-inline-loader": "1.2.1",
"vue-sweetalert2": "1.5.9",
"vue-template-compiler": "2.5.17", "vue-template-compiler": "2.5.17",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuewordcloud": "18.7.11", "vuewordcloud": "18.7.11",

View file

@ -48,15 +48,15 @@ export default Vue.extend({
}, },
remove(i) { remove(i) {
this.$swal({ this.$root.alert({
type: 'warning', type: 'warning',
text: this.$t('_remove.are-you-sure').replace('$1', this.announcements.find((_, j) => j == i).title), text: this.$t('_remove.are-you-sure').replace('$1', this.announcements.find((_, j) => j == i).title),
showCancelButton: true showCancelButton: true
}).then(res => { }).then(res => {
if (!res.value) return; if (!res) return;
this.announcements = this.announcements.filter((_, j) => j !== i); this.announcements = this.announcements.filter((_, j) => j !== i);
this.save(true); this.save(true);
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('_remove.removed') text: this.$t('_remove.removed')
}); });
@ -68,13 +68,13 @@ export default Vue.extend({
broadcasts: this.announcements broadcasts: this.announcements
}).then(() => { }).then(() => {
if (!silent) { if (!silent) {
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('saved') text: this.$t('saved')
}); });
} }
}).catch(e => { }).catch(e => {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: e text: e
}); });

View file

@ -75,13 +75,13 @@ export default Vue.extend({
url: this.url, url: this.url,
aliases: this.aliases.split(' ').filter(x => x.length > 0) aliases: this.aliases.split(' ').filter(x => x.length > 0)
}).then(() => { }).then(() => {
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('add-emoji.added') text: this.$t('add-emoji.added')
}); });
this.fetchEmojis(); this.fetchEmojis();
}).catch(e => { }).catch(e => {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: e text: e
}); });
@ -103,12 +103,12 @@ export default Vue.extend({
url: emoji.url, url: emoji.url,
aliases: emoji.aliases.split(' ').filter(x => x.length > 0) aliases: emoji.aliases.split(' ').filter(x => x.length > 0)
}).then(() => { }).then(() => {
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('updated') text: this.$t('updated')
}); });
}).catch(e => { }).catch(e => {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: e text: e
}); });
@ -116,23 +116,23 @@ export default Vue.extend({
}, },
removeEmoji(emoji) { removeEmoji(emoji) {
this.$swal({ this.$root.alert({
type: 'warning', type: 'warning',
text: this.$t('remove-emoji.are-you-sure').replace('$1', emoji.name), text: this.$t('remove-emoji.are-you-sure').replace('$1', emoji.name),
showCancelButton: true showCancelButton: true
}).then(res => { }).then(res => {
if (!res.value) return; if (!res) return;
this.$root.api('admin/emoji/remove', { this.$root.api('admin/emoji/remove', {
id: emoji.id id: emoji.id
}).then(() => { }).then(() => {
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('remove-emoji.removed') text: this.$t('remove-emoji.removed')
}); });
this.fetchEmojis(); this.fetchEmojis();
}).catch(e => { }).catch(e => {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: e text: e
}); });

View file

@ -149,7 +149,7 @@ export default Vue.extend({
this.$root.api('admin/invite').then(x => { this.$root.api('admin/invite').then(x => {
this.inviteCode = x.code; this.inviteCode = x.code;
}).catch(e => { }).catch(e => {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: e text: e
}); });
@ -181,12 +181,12 @@ export default Vue.extend({
githubClientId: this.githubClientId, githubClientId: this.githubClientId,
githubClientSecret: this.githubClientSecret, githubClientSecret: this.githubClientSecret,
}).then(() => { }).then(() => {
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('saved') text: this.$t('saved')
}); });
}).catch(e => { }).catch(e => {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: e text: e
}); });

View file

@ -123,29 +123,3 @@ pre
[data-icon] [data-icon]
display inline-block display inline-block
.swal2-container
z-index 10000 !important
&.swal2-shown
background-color rgba(0, 0, 0, 0.5) !important
.swal2-popup
background var(--face) !important
.swal2-content
color var(--text) !important
.swal2-confirm
background-color var(--primary) !important
border-left-color var(--primary) !important
border-right-color var(--primary) !important
color var(--primaryForeground) !important
&:hover
background-image none !important
background-color var(--primaryDarken5) !important
&:active
background-image none !important
background-color var(--primaryDarken5) !important

View file

@ -22,7 +22,7 @@ export default async function($root: any, force = false, silent = false) {
} }
if (!silent) { if (!silent) {
$root.$dialog({ $root.alert({
title: $root.$t('@.update-available-title'), title: $root.$t('@.update-available-title'),
text: $root.$t('@.update-available', { newer, current }) text: $root.$t('@.update-available', { newer, current })
}); });

View file

@ -4,12 +4,9 @@ export default ($root: any) => {
require('fuckadblock'); require('fuckadblock');
function adBlockDetected() { function adBlockDetected() {
$root.$dialog({ $root.alert({
title: $root.$t('@.adblock.detected'), title: $root.$t('@.adblock.detected'),
text: $root.$t('@.adblock.warning'), text: $root.$t('@.adblock.warning')
actins: [{
text: 'OK'
}]
}); });
} }

View file

@ -3,7 +3,6 @@ import { sum } from '../../../../prelude/array';
import shouldMuteNote from './should-mute-note'; import shouldMuteNote from './should-mute-note';
import MkNoteMenu from '../views/components/note-menu.vue'; import MkNoteMenu from '../views/components/note-menu.vue';
import MkReactionPicker from '../views/components/reaction-picker.vue'; import MkReactionPicker from '../views/components/reaction-picker.vue';
import Ok from '../views/components/ok.vue';
function focus(el, fn) { function focus(el, fn) {
const target = fn(el); const target = fn(el);
@ -142,7 +141,11 @@ export default (opts: Opts = {}) => ({
this.$root.api('notes/favorites/create', { this.$root.api('notes/favorites/create', {
noteId: this.appearNote.id noteId: this.appearNote.id
}).then(() => { }).then(() => {
this.$root.new(Ok); // TODO
/*this.$root.alert({
pointer: false,
autoClose: true
});*/
}); });
}, },

View file

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

View file

@ -9,7 +9,6 @@ import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import { url } from '../../../config'; import { url } from '../../../config';
import copyToClipboard from '../../../common/scripts/copy-to-clipboard'; import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
import Ok from './ok.vue';
import { concat, intersperse } from '../../../../../prelude/array'; import { concat, intersperse } from '../../../../../prelude/array';
export default Vue.extend({ export default Vue.extend({
@ -79,7 +78,8 @@ export default Vue.extend({
this.$root.api('i/pin', { this.$root.api('i/pin', {
noteId: this.note.id noteId: this.note.id
}).then(() => { }).then(() => {
this.$root.new(Ok); // TODO
//this.$root.new(Ok);
this.destroyDom(); this.destroyDom();
}); });
}, },
@ -105,7 +105,8 @@ export default Vue.extend({
this.$root.api('notes/favorites/create', { this.$root.api('notes/favorites/create', {
noteId: this.note.id noteId: this.note.id
}).then(() => { }).then(() => {
this.$root.new(Ok); // TODO
//this.$root.new(Ok);
this.destroyDom(); this.destroyDom();
}); });
}, },
@ -114,7 +115,8 @@ export default Vue.extend({
this.$root.api('notes/favorites/delete', { this.$root.api('notes/favorites/delete', {
noteId: this.note.id noteId: this.note.id
}).then(() => { }).then(() => {
this.$root.new(Ok); // TODO
//this.$root.new(Ok);
this.destroyDom(); this.destroyDom();
}); });
}, },

View file

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

View file

@ -25,12 +25,9 @@ export default Vue.extend({
type: 'password' type: 'password'
}).then(newPassword2 => { }).then(newPassword2 => {
if (newPassword !== newPassword2) { if (newPassword !== newPassword2) {
this.$dialog({ this.$root.alert({
title: null, title: null,
text: this.$t('not-match'), text: this.$t('not-match')
actions: [{
text: 'OK'
}]
}); });
return; return;
} }

View file

@ -193,7 +193,7 @@ export default Vue.extend({
this.$store.state.i.bannerUrl = i.bannerUrl; this.$store.state.i.bannerUrl = i.bannerUrl;
if (notify) { if (notify) {
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('saved') text: this.$t('saved')
}); });

View file

@ -221,7 +221,7 @@ export default Vue.extend({
try { try {
theme = JSON5.parse(code); theme = JSON5.parse(code);
} catch (e) { } catch (e) {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: this.$t('invalid-theme') text: this.$t('invalid-theme')
}); });
@ -234,7 +234,7 @@ export default Vue.extend({
} }
if (theme.id == null) { if (theme.id == null) {
this.$swal({ this.$root.alert({
type: 'error', type: 'error',
text: this.$t('invalid-theme') 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)) { if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
this.$swal({ this.$root.alert({
type: 'info', type: 'info',
text: this.$t('already-installed') text: this.$t('already-installed')
}); });
@ -254,7 +254,7 @@ export default Vue.extend({
key: 'themes', value: themes key: 'themes', value: themes
}); });
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('installed').replace('{}', theme.name) text: this.$t('installed').replace('{}', theme.name)
}); });
@ -267,7 +267,7 @@ export default Vue.extend({
key: 'themes', value: themes key: 'themes', value: themes
}); });
this.$swal({ this.$root.alert({
type: 'info', type: 'info',
text: this.$t('uninstalled').replace('{}', theme.name) text: this.$t('uninstalled').replace('{}', theme.name)
}); });
@ -304,7 +304,7 @@ export default Vue.extend({
const theme = this.myTheme; const theme = this.myTheme;
if (theme.name == null || theme.name.trim() == '') { if (theme.name == null || theme.name.trim() == '') {
this.$swal({ this.$root.alert({
type: 'warning', type: 'warning',
text: this.$t('theme-name-required') text: this.$t('theme-name-required')
}); });
@ -318,7 +318,7 @@ export default Vue.extend({
key: 'themes', value: themes key: 'themes', value: themes
}); });
this.$swal({ this.$root.alert({
type: 'success', type: 'success',
text: this.$t('saved') text: this.$t('saved')
}); });

View file

@ -57,6 +57,7 @@ export default Vue.extend({
text-align center text-align center
font-weight normal font-weight normal
font-size 16px font-size 16px
line-height 24px
border none border none
border-radius 6px border-radius 6px
outline none outline none
@ -85,6 +86,7 @@ export default Vue.extend({
&.inline &.inline
display inline-block display inline-block
width auto width auto
min-width 100px
&.primary &.primary
font-weight bold font-weight bold

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze" :class="{ inputs }"> <div class="vnxwkwuf" :class="{ inputs, noGrow }">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -15,21 +15,27 @@ export default Vue.extend({
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
},
noGrow: {
type: Boolean,
required: false,
default: false
} }
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.pfzekjfwkwvadvlujpdnnxfggqgqjoze .vnxwkwuf
display flex
&.inputs &.inputs
margin 32px 0 margin 32px 0
> * &:not(.noGrow)
flex 1 display flex
&:not(:last-child) > *
margin-right 16px flex 1
> *:not(:last-child)
margin-right 16px
</style> </style>

View file

@ -8,12 +8,9 @@ export default ($root: any) => {
const regex = RegExp('\.(jpg|jpeg|png|gif|webp|bmp|tiff)$'); const regex = RegExp('\.(jpg|jpeg|png|gif|webp|bmp|tiff)$');
if (!regex.test(file.name) ) { if (!regex.test(file.name) ) {
$root.$dialog({ $root.alert({
title: '%fa:info-circle% %i18n:desktop.invalid-filetype%', title: '%fa:info-circle% %i18n:desktop.invalid-filetype%',
text: null, text: null
actions: [{
text: '%i18n:common.got-it%'
}]
}); });
return reject('invalid-filetype'); return reject('invalid-filetype');
} }
@ -90,12 +87,9 @@ export default ($root: any) => {
value: i.avatarUrl value: i.avatarUrl
}); });
$root.$dialog({ $root.alert({
title: '%fa:info-circle% %i18n:desktop.avatar-updated%', title: '%fa:info-circle% %i18n:desktop.avatar-updated%',
text: null, text: null
actions: [{
text: '%i18n:common.got-it%'
}]
}); });
return i; return i;

View file

@ -10,10 +10,7 @@ export default ($root: any) => {
if (!regex.test(file.name) ) { if (!regex.test(file.name) ) {
$root.dialog({ $root.dialog({
title: '%fa:info-circle% %i18n:desktop.invalid-filetype%', title: '%fa:info-circle% %i18n:desktop.invalid-filetype%',
text: null, text: null
actions: [{
text: '%i18n:common.got-it%'
}]
}); });
return reject('invalid-filetype'); return reject('invalid-filetype');
} }
@ -90,12 +87,9 @@ export default ($root: any) => {
value: i.bannerUrl value: i.bannerUrl
}); });
$root.$dialog({ $root.alert({
title: '%fa:info-circle% %i18n:desktop.banner-updated%', title: '%fa:info-circle% %i18n:desktop.banner-updated%',
text: null, text: null
actions: [{
text: '%i18n:common.got-it%'
}]
}); });
return i; return i;

View file

@ -34,7 +34,6 @@ import PostFormWindow from './views/components/post-form-window.vue';
import RenoteFormWindow from './views/components/renote-form-window.vue'; import RenoteFormWindow from './views/components/renote-form-window.vue';
import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue'; import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue';
import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue'; import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue';
import Dialog from './views/components/dialog.vue';
import InputDialog from './views/components/input-dialog.vue'; import InputDialog from './views/components/input-dialog.vue';
import Notification from './views/components/ui-notification.vue'; import Notification from './views/components/ui-notification.vue';
@ -114,21 +113,6 @@ init(async (launch) => {
}); });
}, },
$dialog(opts) {
return new Promise<string>((res, rej) => {
const o = opts || {};
const d = this.$root.new(Dialog, {
title: o.title,
text: o.text,
modal: o.modal,
buttons: o.actions
});
d.$once('clicked', id => {
res(id);
});
});
},
$input(opts) { $input(opts) {
return new Promise<string>((res, rej) => { return new Promise<string>((res, rej) => {
const o = opts || {}; const o = opts || {};

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -87,7 +87,6 @@ import XNotes from './deck.notes.vue';
import XNote from '../../components/note.vue'; import XNote from '../../components/note.vue';
import Menu from '../../../../common/views/components/menu.vue'; import Menu from '../../../../common/views/components/menu.vue';
import MkUserListsWindow from '../../components/user-lists-window.vue'; import MkUserListsWindow from '../../components/user-lists-window.vue';
import Ok from '../../../../common/views/components/ok.vue';
import { concat } from '../../../../../../prelude/array'; import { concat } from '../../../../../../prelude/array';
import * as ApexCharts from 'apexcharts'; import * as ApexCharts from 'apexcharts';
@ -308,7 +307,8 @@ export default Vue.extend({
listId: list.id, listId: list.id,
userId: this.user.id userId: this.user.id
}); });
this.$root.new(Ok); // TODO
//this.$root.new(Ok);
}); });
} }
}]; }];

View file

@ -101,7 +101,7 @@ export default Vue.extend({
listId: list.id, listId: list.id,
userId: this.user.id userId: this.user.id
}); });
this.$dialog({ this.$root.alert({
title: 'Done!', title: 'Done!',
text: this.$t('list-pushed').replace('{user}', this.user.name).replace('{list}', list.title) text: this.$t('list-pushed').replace('{user}', this.user.name).replace('{list}', list.title)
}); });

View file

@ -7,7 +7,6 @@ import Vuex from 'vuex';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import VAnimateCss from 'v-animate-css'; import VAnimateCss from 'v-animate-css';
import VModal from 'vue-js-modal'; import VModal from 'vue-js-modal';
import VueSweetalert2 from 'vue-sweetalert2';
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import VueHotkey from './common/hotkey'; import VueHotkey from './common/hotkey';
@ -16,6 +15,7 @@ import checkForUpdate from './common/scripts/check-for-update';
import MiOS from './mios'; import MiOS from './mios';
import { clientVersion as version, codename, lang } from './config'; import { clientVersion as version, codename, lang } from './config';
import { builtinThemes, lightTheme, applyTheme } from './theme'; import { builtinThemes, lightTheme, applyTheme } from './theme';
import Alert from './common/views/components/alert.vue';
if (localStorage.getItem('theme') == null) { if (localStorage.getItem('theme') == null) {
applyTheme(lightTheme); applyTheme(lightTheme);
@ -258,7 +258,6 @@ Vue.use(VueRouter);
Vue.use(VAnimateCss); Vue.use(VAnimateCss);
Vue.use(VModal); Vue.use(VModal);
Vue.use(VueHotkey); Vue.use(VueHotkey);
Vue.use(VueSweetalert2);
Vue.use(VueI18n); Vue.use(VueI18n);
Vue.component('fa', FontAwesomeIcon); Vue.component('fa', FontAwesomeIcon);
@ -430,6 +429,13 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS]) => void,
document.body.appendChild(x.$el); document.body.appendChild(x.$el);
return x; return x;
}, },
alert(opts) {
return new Promise((res) => {
const vm = this.new(Alert, opts);
vm.$once('ok', () => res(true));
vm.$once('cancel', () => res(false));
});
}
}, },
router, router,
render: createEl => createEl(App) render: createEl => createEl(App)

View file

@ -35,7 +35,6 @@ import MkFollow from '../common/views/pages/follow.vue';
import PostForm from './views/components/post-form-dialog.vue'; import PostForm from './views/components/post-form-dialog.vue';
import FileChooser from './views/components/drive-file-chooser.vue'; import FileChooser from './views/components/drive-file-chooser.vue';
import FolderChooser from './views/components/drive-folder-chooser.vue'; import FolderChooser from './views/components/drive-folder-chooser.vue';
import Dialog from './views/components/dialog.vue';
/** /**
* init * init
@ -99,21 +98,6 @@ init((launch) => {
}); });
}, },
$dialog(opts) {
return new Promise<string>((res, rej) => {
const o = opts || {};
const d = this.$root.new(Dialog, {
title: o.title,
text: o.text,
modal: o.modal,
buttons: o.actions
});
d.$once('clicked', id => {
res(id);
});
});
},
$notify(message) { $notify(message) {
alert(message); alert(message);
} }

View file

@ -1,167 +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 16px
width calc(100% - 32px)
max-width 300px
background #fff
opacity 0
> .body
margin 1em 0
color #888
> .buttons
> button
display inline-block
float right
margin 0
padding 0 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 0 0 1em 0
color var(--primary)
// color #43A4EC
font-weight bold
&:empty
display none
> i
margin-right 0.5em
</style>

View file

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