diff options
Diffstat (limited to 'src/client')
30 files changed, 268 insertions, 671 deletions
diff --git a/src/client/app/admin/views/announcements.vue b/src/client/app/admin/views/announcements.vue index 75e316bcf0..d1c4284064 100644 --- a/src/client/app/admin/views/announcements.vue +++ b/src/client/app/admin/views/announcements.vue @@ -48,15 +48,15 @@ export default Vue.extend({ }, remove(i) { - this.$swal({ + this.$root.alert({ type: 'warning', text: this.$t('_remove.are-you-sure').replace('$1', this.announcements.find((_, j) => j == i).title), showCancelButton: true }).then(res => { - if (!res.value) return; + if (!res) return; this.announcements = this.announcements.filter((_, j) => j !== i); this.save(true); - this.$swal({ + this.$root.alert({ type: 'success', text: this.$t('_remove.removed') }); @@ -68,13 +68,13 @@ export default Vue.extend({ broadcasts: this.announcements }).then(() => { if (!silent) { - this.$swal({ + this.$root.alert({ type: 'success', text: this.$t('saved') }); } }).catch(e => { - this.$swal({ + this.$root.alert({ type: 'error', text: e }); diff --git a/src/client/app/admin/views/emoji.vue b/src/client/app/admin/views/emoji.vue index 68092fef56..6810340a3e 100644 --- a/src/client/app/admin/views/emoji.vue +++ b/src/client/app/admin/views/emoji.vue @@ -75,13 +75,13 @@ export default Vue.extend({ url: this.url, aliases: this.aliases.split(' ').filter(x => x.length > 0) }).then(() => { - this.$swal({ + this.$root.alert({ type: 'success', text: this.$t('add-emoji.added') }); this.fetchEmojis(); }).catch(e => { - this.$swal({ + this.$root.alert({ type: 'error', text: e }); @@ -103,12 +103,12 @@ export default Vue.extend({ url: emoji.url, aliases: emoji.aliases.split(' ').filter(x => x.length > 0) }).then(() => { - this.$swal({ + this.$root.alert({ type: 'success', text: this.$t('updated') }); }).catch(e => { - this.$swal({ + this.$root.alert({ type: 'error', text: e }); @@ -116,23 +116,23 @@ export default Vue.extend({ }, removeEmoji(emoji) { - this.$swal({ + this.$root.alert({ type: 'warning', text: this.$t('remove-emoji.are-you-sure').replace('$1', emoji.name), showCancelButton: true }).then(res => { - if (!res.value) return; + if (!res) return; this.$root.api('admin/emoji/remove', { id: emoji.id }).then(() => { - this.$swal({ + this.$root.alert({ type: 'success', text: this.$t('remove-emoji.removed') }); this.fetchEmojis(); }).catch(e => { - this.$swal({ + this.$root.alert({ type: 'error', text: e }); diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue index 130a78e5c5..e52a20d708 100644 --- a/src/client/app/admin/views/instance.vue +++ b/src/client/app/admin/views/instance.vue @@ -149,7 +149,7 @@ export default Vue.extend({ this.$root.api('admin/invite').then(x => { this.inviteCode = x.code; }).catch(e => { - this.$swal({ + this.$root.alert({ type: 'error', text: e }); @@ -181,12 +181,12 @@ export default Vue.extend({ githubClientId: this.githubClientId, githubClientSecret: this.githubClientSecret, }).then(() => { - this.$swal({ + this.$root.alert({ type: 'success', text: this.$t('saved') }); }).catch(e => { - this.$swal({ + this.$root.alert({ type: 'error', text: e }); diff --git a/src/client/app/app.styl b/src/client/app/app.styl index 3d8218dbda..13b0133287 100644 --- a/src/client/app/app.styl +++ b/src/client/app/app.styl @@ -123,29 +123,3 @@ pre [data-icon] 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 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> diff --git a/src/client/app/desktop/api/update-avatar.ts b/src/client/app/desktop/api/update-avatar.ts index ae8b723ea6..e0215aa34f 100644 --- a/src/client/app/desktop/api/update-avatar.ts +++ b/src/client/app/desktop/api/update-avatar.ts @@ -8,12 +8,9 @@ export default ($root: any) => { const regex = RegExp('\.(jpg|jpeg|png|gif|webp|bmp|tiff)$'); if (!regex.test(file.name) ) { - $root.$dialog({ + $root.alert({ title: '%fa:info-circle% %i18n:desktop.invalid-filetype%', - text: null, - actions: [{ - text: '%i18n:common.got-it%' - }] + text: null }); return reject('invalid-filetype'); } @@ -90,12 +87,9 @@ export default ($root: any) => { value: i.avatarUrl }); - $root.$dialog({ + $root.alert({ title: '%fa:info-circle% %i18n:desktop.avatar-updated%', - text: null, - actions: [{ - text: '%i18n:common.got-it%' - }] + text: null }); return i; diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts index c338d4e95c..36582684ec 100644 --- a/src/client/app/desktop/api/update-banner.ts +++ b/src/client/app/desktop/api/update-banner.ts @@ -10,10 +10,7 @@ export default ($root: any) => { if (!regex.test(file.name) ) { $root.dialog({ title: '%fa:info-circle% %i18n:desktop.invalid-filetype%', - text: null, - actions: [{ - text: '%i18n:common.got-it%' - }] + text: null }); return reject('invalid-filetype'); } @@ -90,12 +87,9 @@ export default ($root: any) => { value: i.bannerUrl }); - $root.$dialog({ + $root.alert({ title: '%fa:info-circle% %i18n:desktop.banner-updated%', - text: null, - actions: [{ - text: '%i18n:common.got-it%' - }] + text: null }); return i; diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts index f2d27fa16e..cb23613164 100644 --- a/src/client/app/desktop/script.ts +++ b/src/client/app/desktop/script.ts @@ -34,7 +34,6 @@ import PostFormWindow from './views/components/post-form-window.vue'; import RenoteFormWindow from './views/components/renote-form-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 Dialog from './views/components/dialog.vue'; import InputDialog from './views/components/input-dialog.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) { return new Promise<string>((res, rej) => { const o = opts || {}; diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue deleted file mode 100644 index 2664105bdc..0000000000 --- a/src/client/app/desktop/views/components/dialog.vue +++ /dev/null @@ -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> diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue index 7840d7e748..a643064078 100644 --- a/src/client/app/desktop/views/components/drive.file.vue +++ b/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') }); }, diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue index fe9bad2c28..5558f65c3e 100644 --- a/src/client/app/desktop/views/components/drive.folder.vue +++ b/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: diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue index 08dbfd2fa9..c4e9e102d5 100644 --- a/src/client/app/desktop/views/components/drive.vue +++ b/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') }); }); }, diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue index 500773ee9f..492edc67d6 100644 --- a/src/client/app/desktop/views/components/home.vue +++ b/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') }); }, diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index d652c2def1..99e8064cea 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/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') }); diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue index 27da5427b9..8336828c0c 100644 --- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue @@ -87,7 +87,6 @@ import XNotes from './deck.notes.vue'; import XNote from '../../components/note.vue'; import Menu from '../../../../common/views/components/menu.vue'; import MkUserListsWindow from '../../components/user-lists-window.vue'; -import Ok from '../../../../common/views/components/ok.vue'; import { concat } from '../../../../../../prelude/array'; import * as ApexCharts from 'apexcharts'; @@ -308,7 +307,8 @@ export default Vue.extend({ listId: list.id, userId: this.user.id }); - this.$root.new(Ok); + // TODO + //this.$root.new(Ok); }); } }]; diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue index e369d724e8..63bb60bcb3 100644 --- a/src/client/app/desktop/views/pages/user/user.profile.vue +++ b/src/client/app/desktop/views/pages/user/user.profile.vue @@ -101,7 +101,7 @@ export default Vue.extend({ listId: list.id, userId: this.user.id }); - this.$dialog({ + this.$root.alert({ title: 'Done!', text: this.$t('list-pushed').replace('{user}', this.user.name).replace('{list}', list.title) }); diff --git a/src/client/app/init.ts b/src/client/app/init.ts index d1ac060564..60f4ab31fe 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -7,7 +7,6 @@ import Vuex from 'vuex'; import VueRouter from 'vue-router'; import VAnimateCss from 'v-animate-css'; import VModal from 'vue-js-modal'; -import VueSweetalert2 from 'vue-sweetalert2'; import VueI18n from 'vue-i18n'; import VueHotkey from './common/hotkey'; @@ -16,6 +15,7 @@ import checkForUpdate from './common/scripts/check-for-update'; import MiOS from './mios'; import { clientVersion as version, codename, lang } from './config'; import { builtinThemes, lightTheme, applyTheme } from './theme'; +import Alert from './common/views/components/alert.vue'; if (localStorage.getItem('theme') == null) { applyTheme(lightTheme); @@ -258,7 +258,6 @@ Vue.use(VueRouter); Vue.use(VAnimateCss); Vue.use(VModal); Vue.use(VueHotkey); -Vue.use(VueSweetalert2); Vue.use(VueI18n); Vue.component('fa', FontAwesomeIcon); @@ -430,6 +429,13 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS]) => void, document.body.appendChild(x.$el); 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, render: createEl => createEl(App) diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 5622e233df..116ffce1dc 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -35,7 +35,6 @@ import MkFollow from '../common/views/pages/follow.vue'; import PostForm from './views/components/post-form-dialog.vue'; import FileChooser from './views/components/drive-file-chooser.vue'; import FolderChooser from './views/components/drive-folder-chooser.vue'; -import Dialog from './views/components/dialog.vue'; /** * 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) { alert(message); } diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue deleted file mode 100644 index ca9ccd8246..0000000000 --- a/src/client/app/mobile/views/components/dialog.vue +++ /dev/null @@ -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> diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index 2bd64b6270..fceaebc66d 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -360,12 +360,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') }); |