sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Client] Improve alert component

Browse Source
This commit is contained in:
syuilo
2018-11-14 16:30:58 +09:00
parent 850396e9da
commit 11afa8140c
31 changed files with 268 additions and 672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/client/app/common/views/components/alert.vue Normal file
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>

10
src/client/app/common/views/components/note-menu.vue
View File

@@ -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();
});
},

175
src/client/app/common/views/components/ok.vue
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>

7
src/client/app/common/views/components/password-settings.vue
View File

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

2
src/client/app/common/views/components/profile-editor.vue
View File

@@ -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')
});

14
src/client/app/common/views/components/theme.vue
View File

@@ -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')
});

2
src/client/app/common/views/components/ui/button.vue
View File

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

22
src/client/app/common/views/components/ui/horizon-group.vue
View File

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