refactor: simplify blurred modal backdrop & ui tweaks (#1638)

ArkEcosystem · Feb 26, 2020 · 627ab74 · 627ab74
1 parent c6c6f39
commit 627ab74
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 92 deletions.
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -27,17 +27,11 @@
       <AppSidemenu
         v-if="hasAnyProfile"
         :is-horizontal="true"
-        :class="{
-          'blur': hasBlurFilter
-        }"
         class="block md:hidden z-1"
       />
       <section
         :style="background ? `backgroundImage: url('${assets_loadImage(background)}')` : ''"
-        :class="{
-          'blur': hasBlurFilter
-        }"
-        class="App__main flex flex-col items-center px-6 pb-6 pt-2 lg:pt-6 w-screen-adjusted h-screen-adjusted overflow-hidden -m-2"
+        class="App__main flex flex-col items-center px-4 pb-4 lg:pt-4 w-screen h-screen-adjusted overflow-hidden"
       >
         <div
           :class="{ 'ml-6': !hasAnyProfile }"
@@ -73,32 +67,19 @@
       />
 
       <PortalTarget
-        :slot-props="{ setPortalHasContent }"
         name="modal"
         multiple
-        @change="onPortalChange('modal', ...arguments)"
       />
 
-      <PortalTarget
-        :slot-props="{ setPortalHasContent }"
-        name="updater"
-        @change="onPortalChange('updater', ...arguments)"
-      />
+      <PortalTarget name="updater" />
 
-      <PortalTarget
-        name="loading"
-        @change="onPortalChange('loading', ...arguments)"
-      />
+      <PortalTarget name="loading" />
 
-      <PortalTarget
-        name="qr-scan"
-        @change="onPortalChange('qr-scan', ...arguments)"
-      />
+      <PortalTarget name="qr-scan" />
 
       <PortalTarget
         name="button-dropdown"
         multiple
-        :slot-props="{ hasBlurFilter }"
       />
 
       <AlertMessage />
@@ -134,13 +115,6 @@ export default {
   data: () => ({
     isReady: false,
     isUriTransactionOpen: false,
-    forceBlurFilter: false,
-    portalHasContent: {
-      modal: false,
-      update: false,
-      loading: false,
-      'qr-scan': false
-    },
     uriTransactionSchema: {},
     aliveRouteComponents: []
   }),
@@ -154,9 +128,6 @@ export default {
   }),
 
   computed: {
-    hasBlurFilter () {
-      return Object.values(this.portalHasContent).some(hasContent => !!hasContent)
-    },
     background () {
       return this.$store.getters['session/background'] || `wallpapers/${this.hasSeenIntroduction ? 1 : 2}Default.png`
     },
@@ -342,10 +313,6 @@ export default {
       ipcRenderer.send('splashscreen:app-ready')
     },
 
-    onPortalChange (portal, isActive) {
-      this.setPortalHasContent(portal, isActive)
-    },
-
     __watchProcessURL () {
       ipcRenderer.on('process-url', (_, url) => {
         const uri = new URIHandler(url)
@@ -372,10 +339,6 @@ export default {
       this.uriTransactionSchema = {}
     },
 
-    setPortalHasContent (portal, isActive) {
-      this.portalHasContent[portal] = isActive
-    },
-
     setIntroDone () {
       this.$store.dispatch('app/setHasSeenIntroduction', true)
       this.$router.push({ name: 'profile-new' })
@@ -431,19 +394,19 @@ export default {
 .App__main {
   transition: .1s filter linear;
 }
-.App__container {
-  max-width: 1400px;
-}
 .App__main.h-screen-adjusted {
-  height: calc(100vh + 1rem);
+  height: calc(100vh - 80px);
 }
-.App__main.w-screen-adjusted {
-  width: calc(100vw + 1rem);
+.App__container {
+  max-width: 1400px;
 }
 @media (min-width: 768px) {
   .App__page {
     @apply .min-h-full;
     max-height: calc(100vh - 5rem);
   }
+  .App__main.h-screen-adjusted {
+    @apply h-screen;
+  }
 }
 </style>
diff --git a/src/renderer/components/App/AppSidemenu/AppSidemenu.vue b/src/renderer/components/App/AppSidemenu/AppSidemenu.vue
@@ -3,9 +3,9 @@
     v-model="activeItem"
     :class="{
       'AppSidemenu--horizontal': isHorizontal,
-      'AppSidemenu--vertical': !isHorizontal
+      'AppSidemenu--vertical mr-3 lg:mx-6': !isHorizontal
     }"
-    class="AppSidemenu relative bg-transparent"
+    class="AppSidemenu"
   >
     <div
       class="AppSidemenu__container flexify w-full md:h-full justify-between"
@@ -232,18 +232,20 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
+.AppSidemenu { @apply relative bg-transparent }
 .AppSidemenu__container__scrollable .flexify { @apply flex-none }
 .AppSidemenu__logo { transition: opacity 0.5s; }
 
 .AppSidemenu__avatar__container {
   transition: opacity 0.5s;
 }
 
-.AppSidemenu--horizontal .AppSidemenu__item { @apply w-16 }
+.AppSidemenu--horizontal { @apply h-full }
+.AppSidemenu--horizontal .flexify { @apply flex flex-row }
+.AppSidemenu--horizontal .AppSidemenu__container { @apply bg-theme-feature }
+.AppSidemenu--horizontal .AppSidemenu__item { @apply w-16 h-full }
 .AppSidemenu--horizontal .AppSidemenu__logo { @apply p-4 }
 .AppSidemenu--horizontal .AppSidemenu__logo img { @apply h-12 }
-.AppSidemenu--horizontal .flexify { @apply flex flex-row }
-.AppSidemenu--horizontal { @apply h-18; }
 .AppSidemenu--horizontal .AppSidemenu__avatar__dots {
   @apply absolute p-2 rounded-full bg-theme-feature;
   right: 0.1rem;
@@ -252,12 +254,12 @@ export default {
   height: 1.5rem;
 }
 
+.AppSidemenu--vertical { @apply w-22 h-full rounded-lg }
+.AppSidemenu--vertical .flexify { @apply flex flex-col }
 .AppSidemenu--vertical .AppSidemenu__container__scrollable { @apply rounded-lg py-2 }
 .AppSidemenu--vertical .AppSidemenu__item { @apply h-16 }
 .AppSidemenu--vertical .AppSidemenu__logo { @apply rounded-lg mb-3 p-5 }
 .AppSidemenu--vertical .AppSidemenu__logo img { @apply w-18 }
-.AppSidemenu--vertical .flexify { @apply flex flex-col }
-.AppSidemenu--vertical { @apply w-22 mx-6 rounded-lg }
 .AppSidemenu--vertical .AppSidemenu__avatar__dots {
   @apply absolute p-2 rounded-full bg-theme-feature shadow;
   right: 1rem;

diff --git a/src/renderer/components/Button/ButtonDropdown.vue b/src/renderer/components/Button/ButtonDropdown.vue
@@ -42,12 +42,8 @@
       >
         <div
           v-show="showDropdown"
-          slot-scope="app"
           class="ButtonDropdown__list transition"
           :style="dropdownStyle"
-          :class="{
-            'blur': app.hasBlurFilter
-          }"
         >
           <div
             v-for="(item, key) of items"
@@ -103,7 +99,8 @@ export default {
 
   data () {
     return {
-      showDropdown: false
+      showDropdown: false,
+      dropdownStyle: ''
     }
   },
 
@@ -129,24 +126,17 @@ export default {
       }
 
       return '0 -2 12 16'
-    },
-
-    dropdownStyle () {
-      const buttonDropdown = this.$refs.buttonDropdown
+    }
+  },
 
-      if (!buttonDropdown) {
-        return ''
-      }
+  mounted () {
+    this.setDropdownStyle()
 
-      const height = buttonDropdown.clientHeight
-      const position = buttonDropdown.getBoundingClientRect()
+    window.addEventListener('resize', this.handleResize)
+  },
 
-      return [
-        `top: ${position.top + height}px`,
-        `left: ${position.left}px`,
-        'z-index: 10'
-      ].join(';')
-    }
+  destroyed () {
+    window.removeEventListener('resize', this.handleResize)
   },
 
   methods: {
@@ -156,6 +146,27 @@ export default {
 
     triggerClose () {
       this.showDropdown = false
+    },
+
+    handleResize () {
+      this.setDropdownStyle()
+    },
+
+    setDropdownStyle () {
+      const buttonDropdown = this.$refs.buttonDropdown
+
+      if (buttonDropdown) {
+        const height = buttonDropdown.clientHeight
+        const position = buttonDropdown.getBoundingClientRect()
+
+        this.dropdownStyle = [
+          `top: ${position.top + height}px`,
+          `left: ${position.left}px`,
+          'z-index: 10'
+        ].join(';')
+      } else {
+        this.dropdownStyle = ''
+      }
     }
   }
 }

diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue
@@ -138,6 +138,7 @@ export default {
   left: 0;
   background-color: rgba(0, 0, 0, .5);
   transition: opacity .3s ease;
+  backdrop-filter: blur(4px);
 }
 
 .ModalCloseConfirmation__container__content{

diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue
@@ -1,7 +1,6 @@
 <template>
   <Portal :to="portalTarget">
     <div
-      slot-scope="{ setPortalHasContent }"
       class="ModalWindow"
       :class="{
         'ModalWindow--maximized': isMaximized,
@@ -30,7 +29,7 @@
                     :icon-name="isMaximized ? 'minus' : 'resize'"
                     icon-class="text-grey"
                     class="ModalWindow__resize-button p-6"
-                    @click="toggleMaximized(setPortalHasContent)"
+                    @click="toggleMaximized()"
                   />
                 </span>
 
@@ -83,7 +82,6 @@
 
 <script>
 import { ButtonClose } from '@/components/Button'
-import { isFunction } from 'lodash'
 import ModalCloseConfirmation from './ModalCloseConfirmation'
 
 export default {
@@ -163,9 +161,8 @@ export default {
   },
 
   methods: {
-    toggleMaximized (callback) {
+    toggleMaximized () {
       this.isMaximized = !this.isMaximized
-      isFunction(callback) && callback(this.portalTarget, this.isMaximized)
     },
 
     onBackdropClick () {
@@ -222,8 +219,9 @@ export default {
   display: table;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  transition: opacity 0.3s ease;
+  background-color: rgba(0, 0, 0, .5);
+  transition: opacity .3s ease;
+  backdrop-filter: blur(4px);
 }
 
 .ModalWindow--maximized .ModalWindow__wrapper {

diff --git a/src/renderer/components/Wallet/WalletDetails/WalletDetails.vue b/src/renderer/components/Wallet/WalletDetails/WalletDetails.vue
@@ -5,8 +5,8 @@
     <MenuTab
       ref="menutab"
       v-model="currentTab"
-      :class="{ 'rounded-bl-lg' : !isDelegatesTab || !isOwned }"
-      class="flex-1"
+      :class="{ 'rounded-b-lg lg:rounded-br-none' : !isDelegatesTab || !isOwned }"
+      class="flex-1 overflow-y-auto"
     >
       <MenuTabItem
         key="BackItem"
@@ -44,7 +44,7 @@
     </MenuTab>
     <div
       v-if="isDelegatesTab && isOwned"
-      class="bg-theme-feature px-5 flex flex-row rounded-bl-lg"
+      class="bg-theme-feature px-5 flex flex-row rounded-b-lg lg:rounded-br-none"
     >
       <div
         class="WalletDetails__button rounded-l"

diff --git a/src/renderer/components/Wallet/WalletHeading/WalletHeading.vue b/src/renderer/components/Wallet/WalletHeading/WalletHeading.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="justifyClass"
-    class="WalletHeading flex px-10 py-8 w-full bg-theme-heading-background rounded-tl-lg h-40 overflow-hidden"
+    class="WalletHeading flex px-10 py-8 w-full bg-theme-heading-background rounded-t-lg lg:rounded-tr-none h-40 overflow-hidden"
   >
     <WalletHeadingInfo
       v-if="!secondaryButtonsVisible"

diff --git a/src/renderer/pages/Wallet/WalletShow.vue b/src/renderer/pages/Wallet/WalletShow.vue
@@ -3,7 +3,7 @@
     <WalletDetails
       v-if="wallet"
       ref="WalletDetails"
-      class="h-full flex-1"
+      class="flex-1"
       :class="{
         'w-2/3': isSidebarExpanded,
         'w-7/8': !isSidebarExpanded

diff --git a/src/renderer/styles/_general.css b/src/renderer/styles/_general.css
@@ -62,12 +62,6 @@ img {
   transform: rotate(180deg);
 }
 
-.modal-backdrop {
-  @apply .fixed .z-50 .pin-t .pin-l .table .w-full .h-full;
-  background-color: rgba(0, 0, 0, 0.5);
-  transition: opacity 0.3s ease;
-}
-
 .instructions-text {
   @apply .mt-16 .mx-16 .w-1/2 .p-4 .rounded-lg .text-theme-page-instructions-text .bg-theme-page-instructions-background
 }