feat(modal): add fade animation

assets/styles/framework/animations.less

@@ -1,6 +1,6 @@
 // Animations
 @animation-speed: 0.05s;
-@animation-speed-long: 0.25s;
+@animation-speed-long: 0.2s;
 @transition-all: all @animation-speed ease; // DEPRICATED don't use this
 
 .fade-enter-active,

components/ui/Global/Global.html

@@ -1,93 +1,110 @@
 <div>
-  <SettingsModal v-if="ui.showSettings" />
   <InteractablesContextMenu v-if="ui.contextMenuStatus" />
-  <UiModal
-    v-if="ui.modals.wallet"
-    :close-modal="() => toggleModal(ModalWindows.WALLET)"
-    nopad
-    v-click-outside="() => toggleModal(ModalWindows.WALLET)"
-  >
-    <WalletPopup />
-  </UiModal>
-  <UiModal
-    v-if="ui.modals.createServer"
-    :close-modal="() => toggleModal(ModalWindows.CREATE_SERVER)"
-    :title="$t('servers.create.heading')"
-  >
-    <ServersCreate
-      v-click-outside="() => toggleModal(ModalWindows.CREATE_SERVER)"
+  <transition name="modal">
+    <SettingsModal v-if="ui.showSettings" />
+    <UiModal
+      v-if="ui.modals.wallet"
+      :close-modal="() => toggleModal(ModalWindows.WALLET)"
+      nopad
+      v-click-outside="() => toggleModal(ModalWindows.WALLET)"
+    >
+      <WalletPopup />
+    </UiModal>
+    <UiModal
+      v-if="ui.modals.createServer"
       :close-modal="() => toggleModal(ModalWindows.CREATE_SERVER)"
-    />
-  </UiModal>
-  <UiModal
-    v-if="ui.modals.error"
-    :close-modal="() => toggleModal(ModalWindows.ERROR)"
-    :title="$t('popups.error.title')"
-  >
-    <UiPopupsError
-      v-click-outside="() => toggleModal(ModalWindows.ERROR)"
+      :title="$t('servers.create.heading')"
+    >
+      <ServersCreate
+        v-click-outside="() => toggleModal(ModalWindows.CREATE_SERVER)"
+        :close-modal="() => toggleModal(ModalWindows.CREATE_SERVER)"
+      />
+    </UiModal>
+    <UiModal
+      v-if="ui.modals.error"
       :close-modal="() => toggleModal(ModalWindows.ERROR)"
-      :set-close-timeout="5000"
-    />
-  </UiModal>
-  <UiModal v-if="webrtc.incomingCall" nopad>
-    <MediaIncomingCall :accept-call="acceptCall" :deny-call="denyCall" />
-  </UiModal>
-  <UiModal
-    v-if="ui.modals.marketplace"
-    :close-modal="() => toggleModal(ModalWindows.MARKETPLACE)"
-    nopad
-  >
-    <Marketplace
-      v-click-outside="() => toggleModal(ModalWindows.MARKETPLACE)"
+      :title="$t('popups.error.title')"
+    >
+      <UiPopupsError
+        v-click-outside="() => toggleModal(ModalWindows.ERROR)"
+        :close-modal="() => toggleModal(ModalWindows.ERROR)"
+        :set-close-timeout="5000"
+      />
+    </UiModal>
+    <UiModal v-if="webrtc.incomingCall" nopad>
+      <MediaIncomingCall :accept-call="acceptCall" :deny-call="denyCall" />
+    </UiModal>
+    <UiModal
+      v-if="ui.modals.marketplace"
       :close-modal="() => toggleModal(ModalWindows.MARKETPLACE)"
-    />
-  </UiModal>
-  <UiModal
-    v-if="ui.modals.glyph"
-    :close-modal="() => toggleModal(ModalWindows.GLYPH)"
-    nopad
-    v-click-outside="() => toggleModal(ModalWindows.GLYPH)"
-    small
-  >
-    <Glyphs
-      v-click-outside="() => toggleModal(ModalWindows.GLYPH)"
+      nopad
+    >
+      <Marketplace
+        v-click-outside="() => toggleModal(ModalWindows.MARKETPLACE)"
+        :close-modal="() => toggleModal(ModalWindows.MARKETPLACE)"
+      />
+    </UiModal>
+    <UiModal
+      v-if="ui.modals.glyph"
       :close-modal="() => toggleModal(ModalWindows.GLYPH)"
-    />
-  </UiModal>
-  <UiModal
-    v-if="ui.modals.userProfile"
-    :close-modal="() => toggleModal(ModalWindows.USER_PROFILE)"
-    nopad
-    v-click-outside="() => toggleModal(ModalWindows.USER_PROFILE)"
-  >
-    <UserProfile :close-modal="() => toggleModal(ModalWindows.USER_PROFILE)" />
-  </UiModal>
-  <UiModal
-    v-if="ui.modals.callToAction"
-    :close-modal="() => toggleModal(ModalWindows.CALL_TO_ACTION)"
-    nopad
-    v-click-outside="() => toggleModal(ModalWindows.CALL_TO_ACTION)"
-  >
-    <CallToAction
+      nopad
+      v-click-outside="() => toggleModal(ModalWindows.GLYPH)"
+      small
+    >
+      <Glyphs
+        v-click-outside="() => toggleModal(ModalWindows.GLYPH)"
+        :close-modal="() => toggleModal(ModalWindows.GLYPH)"
+      />
+    </UiModal>
+    <UiModal
+      v-if="ui.modals.userProfile"
+      :close-modal="() => toggleModal(ModalWindows.USER_PROFILE)"
+      nopad
+      v-click-outside="() => toggleModal(ModalWindows.USER_PROFILE)"
+    >
+      <UserProfile
+        :close-modal="() => toggleModal(ModalWindows.USER_PROFILE)"
+      />
+    </UiModal>
+    <UiModal
+      v-if="ui.modals.callToAction"
       :close-modal="() => toggleModal(ModalWindows.CALL_TO_ACTION)"
+      nopad
+      v-click-outside="() => toggleModal(ModalWindows.CALL_TO_ACTION)"
+    >
+      <CallToAction
+        :close-modal="() => toggleModal(ModalWindows.CALL_TO_ACTION)"
+      />
+    </UiModal>
+    <UiModal
+      v-if="ui.modals.renameFile"
+      :close-modal="() => toggleModal(ModalWindows.RENAME_FILE)"
+      v-click-outside="() => toggleModal(ModalWindows.RENAME_FILE)"
+      small
+      nopad
+    >
+      <FilesRename :close-modal="() => toggleModal(ModalWindows.RENAME_FILE)" />
+    </UiModal>
+    <UiUpdateModal
+      v-if="ui.modals.changelog"
+      v-click-outside="() => toggleModal(ModalWindows.CHANGELOG)"
     />
-  </UiModal>
-  <UiModal
-    v-if="ui.modals.renameFile"
-    :close-modal="() => toggleModal(ModalWindows.RENAME_FILE)"
-    v-click-outside="() => toggleModal(ModalWindows.RENAME_FILE)"
-    small
-    nopad
-  >
-    <FilesRename :close-modal="() => toggleModal(ModalWindows.RENAME_FILE)" />
-  </UiModal>
-  <UiUpdateModal
-    v-if="ui.modals.changelog"
-    v-click-outside="() => toggleModal(ModalWindows.CHANGELOG)"
-  />
-  <UiChatImageOverlay v-if="ui.chatImageOverlay" />
-  <FilesView v-if="files.preview" />
+    <UiModal
+      v-if="ui.modals.renameFile"
+      :close-modal="() => toggleModal(ModalWindows.RENAME_FILE)"
+      v-click-outside="() => toggleModal(ModalWindows.RENAME_FILE)"
+      small
+      nopad
+    >
+      <FilesRename :close-modal="() => toggleModal(ModalWindows.RENAME_FILE)" />
+    </UiModal>
+    <UiUpdateModal
+      v-if="ui.modals.changelog"
+      v-click-outside="() => toggleModal(ModalWindows.CHANGELOG)"
+    />
+    <UiChatImageOverlay v-if="ui.chatImageOverlay" />
+    <FilesView v-if="files.preview" />
+  </transition>
   <transition :name="$device.isMobile ? 'slide' : ''">
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>

components/ui/Modal/Modal.html

@@ -1,4 +1,4 @@
-<div style="position: absolute; inset: 0">
+<div class="modal-container">
   <div v-if="small" class="mobile-modal-background"></div>
   <div class="modal is-active" :class="small ? 'small' : '' ">
     <div class="modal-background" v-on:click="close"></div>

components/ui/Modal/Modal.less

@@ -10,13 +10,12 @@
 
 .modal-background {
   &:extend(.blur-less);
-  background: transparent !important;
+  background: rgba(0, 0, 0, 0.25);
 }
 
 .modal-card-body {
-  &:extend(.bordered);
   &:extend(.round-corners);
-  font-weight: normal !important;
+  font-weight: normal;
   font-size: @text-size;
   width: fit-content;
   text-align: left;
@@ -31,12 +30,15 @@
 
 .modal-card {
   width: fit-content;
+  box-shadow: @ui-shadow;
+  transform-origin: 50% 200%;
 }
 
-.modal {
+.modal-container {
   &:extend(.sixth-layer);
-  position: absolute;
+  position: fixed;
 }
+
 .close {
   position: absolute;
   right: @large-spacing;
@@ -49,8 +51,9 @@
 
   &:extend(.first-layer);
 }
+
 .label {
-  padding: 0 !important;
+  padding: 0;
 }
 
 .modal-card {
@@ -88,7 +91,30 @@
     position: absolute;
 
     &:extend(.first-layer);
-    background: transparent !important;
+    background: transparent;
     backdrop-filter: @light-blur;
   }
 }
+
+.modal-enter-active,
+.modal-leave-active {
+  &,
+  .modal-background,
+  .modal-card {
+    transition: all @animation-speed-long ease;
+  }
+}
+
+.modal-enter,
+.modal-leave-to {
+  .modal-background {
+    background-color: transparent;
+    backdrop-filter: blur(0px);
+  }
+
+  .modal-card {
+    opacity: 0;
+    transform: perspective(880px) rotateX(0.5deg);
+    filter: @light-blur;
+  }
+}

layouts/chat.vue

@@ -18,7 +18,6 @@
         isBackgroundCall ? 'has-background-call' : '',
       ]"
     >
-      <UiGlobal />
       <swiper
         ref="swiper"
         class="swiper"
@@ -94,6 +93,7 @@
           />
         </swiper-slide>
       </swiper>
+      <UiGlobal />
     </div>
     <MobileNav v-if="$device.isMobile" />
     <!-- Sets the global css variable for the theme flair color -->