mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-12-29 01:53:08 +02:00
[Client] Improve alert component
This commit is contained in:
syuilo
parent
850396e9da
commit
11afa8140c
31 changed files with 268 additions and 672 deletions
|
|
@ -221,7 +221,6 @@
|
|||
"vue-router": "3.0.1",
|
||||
"vue-style-loader": "4.1.2",
|
||||
"vue-svg-inline-loader": "1.2.1",
|
||||
"vue-sweetalert2": "1.5.9",
|
||||
"vue-template-compiler": "2.5.17",
|
||||
"vuedraggable": "2.16.0",
|
||||
"vuewordcloud": "18.7.11",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});*/
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
179
src/client/app/common/views/components/alert.vue
Normal file
179
src/client/app/common/views/components/alert.vue
Normal 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>
|
||||
|
|
@ -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();
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 16px
|
||||
> *
|
||||
flex 1
|
||||
|
||||
> *:not(:last-child)
|
||||
margin-right 16px
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 || {};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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')
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}];
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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')
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue