Small change to make user all note option menus fade in

This commit is contained in:
Max G 2020-03-29 23:01:37 +00:00
parent 88a0c7b26a
commit 3d6e527e3a
2 changed files with 19 additions and 13 deletions

View File

@ -191,7 +191,7 @@
<!-- Side slide menus for colors, tags, images and other options --> <!-- Side slide menus for colors, tags, images and other options -->
<side-slide-menu v-if="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors"> <side-slide-menu v-show="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors">
<color-picker <color-picker
@changeColor="onChangeColor" @changeColor="onChangeColor"
@close="onCloseColorChanger" @close="onCloseColorChanger"
@ -199,13 +199,13 @@
/> />
</side-slide-menu> </side-slide-menu>
<side-slide-menu v-if="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags" :style-object="styleObject"> <side-slide-menu v-show="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags" :style-object="styleObject">
<div class="ui basic segment"> <div class="ui basic segment">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/> <note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div> </div>
</side-slide-menu> </side-slide-menu>
<side-slide-menu v-if="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images" :style-object="styleObject"> <side-slide-menu v-show="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images" :style-object="styleObject">
<div class="ui basic segment"> <div class="ui basic segment">
<simple-attachment-note <simple-attachment-note
v-on:close="showFilesSideMenu = false" v-on:close="showFilesSideMenu = false"
@ -215,7 +215,7 @@
</div> </div>
</side-slide-menu> </side-slide-menu>
<side-slide-menu v-if="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options" :style-object="styleObject"> <side-slide-menu v-show="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options" :style-object="styleObject">
<div class="ui basic padded segment"> <div class="ui basic padded segment">
<div class="ui grid"> <div class="ui grid">
<div class="sixteen wide column"> <div class="sixteen wide column">
@ -257,7 +257,7 @@
</div> </div>
</side-slide-menu> </side-slide-menu>
<side-slide-menu v-if="passwordEnterVisible" v-on:close="passwordEnterVisible = false" :fullShadow="true" name="encrypt note"> <side-slide-menu v-show="passwordEnterVisible" v-on:close="passwordEnterVisible = false" :fullShadow="true" name="encrypt note">
<div class="ui basic segment" v-if="isDecrypted && isEncrypted"> <div class="ui basic segment" v-if="isDecrypted && isEncrypted">
<p>Note Decrypted</p> <p>Note Decrypted</p>
<div class="ui green button" v-on:click="lockNote">Lock Note</div> <div class="ui green button" v-on:click="lockNote">Lock Note</div>

View File

@ -64,20 +64,26 @@
} }
.modal-fade-enter,
.modal-fade-leave-active { /*.fade-enter-active {*/
animation: fade-in .3s;
}
/*.fade-leave-active {*/
animation: fade-in .1s reverse;
}
@keyframes fade-in {
0% {
opacity: 0; opacity: 0;
} }
100% {
.modal-fade-enter-active, opacity: 1;
.modal-fade-leave-active { }
transition: opacity .5s ease;
} }
</style> </style>
<template> <template>
<transition name="modal-fade"> <!-- <transition name="fade"> -->
<div> <div>
<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}"> <div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">