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 003153d994
commit 6dfe753d38
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-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
@changeColor="onChangeColor"
@close="onCloseColorChanger"
@ -199,13 +199,13 @@
/>
</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">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div>
</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">
<simple-attachment-note
v-on:close="showFilesSideMenu = false"
@ -215,7 +215,7 @@
</div>
</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 grid">
<div class="sixteen wide column">
@ -257,7 +257,7 @@
</div>
</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">
<p>Note Decrypted</p>
<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 {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .5s ease;
/*.fade-enter-active {*/
animation: fade-in .3s;
}
/*.fade-leave-active {*/
animation: fade-in .1s reverse;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<template>
<transition name="modal-fade">
<!-- <transition name="fade"> -->
<div>
<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">