sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(client): blur effect for modal

Browse Source
This commit is contained in:
syuilo
2020-07-12 18:14:59 +09:00
parent 426c2fa5d1
commit aae9bc4cf4
11 changed files with 64 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/components/dialog.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="mk-dialog" :class="{ iconOnly }">
<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
<div class="bg" ref="bg" @click="onBgClick" v-if="show"></div>
<div class="bg _modalBg" ref="bg" @click="onBgClick" v-if="show"></div>
</transition>
<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="() => { destroyDom(); }">
<div class="main" ref="main" v-if="show">
@ -245,16 +245,6 @@ export default Vue.extend({
width: initial;
}
> .bg {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
}
> .main {
display: block;
position: fixed;

8
src/client/components/modal.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="mk-modal" v-hotkey.global="keymap">
<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
<div class="bg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
<div class="bg _modalBg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
</transition>
<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
<div class="content" ref="content" v-if="show" @click.self="canClose ? close() : () => {}"><slot></slot></div>
@ -60,13 +60,7 @@ export default Vue.extend({
.mk-modal {
> .bg {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
background: var(--modalBg)
}
> .content {

8
src/client/components/popup.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="mk-popup" v-hotkey.global="keymap">
<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
<div class="bg" ref="bg" @click="close()" v-if="show"></div>
<div class="bg _modalBg" ref="bg" @click="close()" v-if="show"></div>
</transition>
<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
@ -128,13 +128,7 @@ export default Vue.extend({
.mk-popup {
> .bg {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
background: var(--modalBg)
}
> .content {

13
src/client/components/post-form-dialog.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
<div class="ulveipgl">
<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="$emit('closed');">
<div class="bg" ref="bg" v-if="show" @click="close()"></div>
<div class="bg _modalBg" ref="bg" v-if="show" @click="close()"></div>
</transition>
<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
<transition :name="$store.state.device.animation ? 'form' : ''" appear
@ -119,16 +119,9 @@ export default Vue.extend({
opacity: 0;
}
.ulveipglmagnxfgvitaxyszerjwiqmwl {
.ulveipgl {
> .bg {
display: block;
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#000, 0.7);
}
> .main {

8
src/client/components/sidebar.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="mvcprjjd">
<transition name="nav-back">
<div class="nav-back"
<div class="nav-back _modalBg"
v-if="showing"
@click="showing = false"
@touchstart="showing = false"
@ -320,13 +320,7 @@ export default Vue.extend({
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
> .nav-back {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 100%;
background: var(--modalBg);
}
> .nav {