From ba0fcbc2f9617bdc74e9e27032edcea53f65bc6c Mon Sep 17 00:00:00 2001
From: Warinyourself <warinyourself@gmail.com>
Date: Fri, 9 Dec 2022 16:52:13 +0300
Subject: [PATCH] Fix menu overflow error

---
 src/components/app/AppBar.tsx                 |  2 +-
 src/components/app/AppMenu.tsx                | 26 ++++++++++++-------
 src/components/base/LoginComponent.tsx        |  2 +-
 src/components/base/SettingsComponent.tsx     |  2 +-
 src/components/base/ShutdownButton.tsx        |  2 +-
 src/components/base/ShutdownMenu.tsx          |  2 +-
 src/components/base/settings/SettingsView.tsx |  4 +--
 src/style/index.styl                          |  2 +-
 src/views/Home.tsx                            | 16 +++++++++---
 9 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/components/app/AppBar.tsx b/src/components/app/AppBar.tsx
index 176c590..455be54 100644
--- a/src/components/app/AppBar.tsx
+++ b/src/components/app/AppBar.tsx
@@ -22,7 +22,7 @@ export default class AppBar extends Vue {
   }
 
   render() {
-    return <div class="app-bar">
+    return <div class="app-bar active-interface">
       <div class="app-bar__time"> { timer.longTime } </div>
       <div class="app-bar__info">
         { this.showBattery && <BatteryIcon /> }
diff --git a/src/components/app/AppMenu.tsx b/src/components/app/AppMenu.tsx
index 30ae276..149ccda 100644
--- a/src/components/app/AppMenu.tsx
+++ b/src/components/app/AppMenu.tsx
@@ -7,7 +7,6 @@ import { AppMenuItem, AppMenuPosition } from '@/models/page'
   components: { AppIcon }
 })
 export default class AppMenu extends Vue {
-  isActive = false
   innerPositioned: AppMenuPosition = { left: 0, top: 0, width: 199 }
 
   get position() {
@@ -15,8 +14,11 @@ export default class AppMenu extends Vue {
   }
 
   get menu() {
-    const menu = PageModule.menu
-    return menu
+    return PageModule.menu
+  }
+
+  get isShow() {
+    return this.menu.view
   }
 
   @Watch('menu.view')
@@ -37,7 +39,7 @@ export default class AppMenu extends Vue {
     return this.$refs.menu as Element
   }
 
-  async handleCallback(item: AppMenuItem | string) {
+  async handleCallback(event: MouseEvent, item: AppMenuItem | string) {
     if (this.menu.handler) {
       await this.menu.handler(item)
     }
@@ -45,12 +47,21 @@ export default class AppMenu extends Vue {
     this.closeMenu()
   }
 
+  handleClickOutside(event: MouseEvent) {
+    if (!this.isShow) return false
+
+    const clickOnMenu = this.$el.contains(event.target as Node)
+    !clickOnMenu && this.closeMenu()
+  }
+
   mounted() {
     window.addEventListener('resize', this.handleResize, { passive: true })
+    window.addEventListener('click', this.handleClickOutside)
   }
 
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize)
+    window.removeEventListener('click', this.handleClickOutside)
   }
 
   handleResize() {
@@ -81,18 +92,13 @@ export default class AppMenu extends Vue {
     PageModule.ASSIGN_MENU({ view: false })
   }
 
-  stopPreventEvent(event: Event) {
-    event.stopPropagation()
-    event.preventDefault()
-  }
-
   buildElementItem(item: AppMenuItem | string, index: number) {
     const isSting = typeof item === 'string'
     const { text, icon } = isSting ? { text: item, icon: null } : item
     return <li
       class='menu-list-item'
       key={index}
-      onClick={() => { this.handleCallback(item) }}
+      onClick={(event) => { this.handleCallback(event, item) }}
     >
       { text }
       { icon && <AppIcon class='menu-icon' name={icon} /> }
diff --git a/src/components/base/LoginComponent.tsx b/src/components/base/LoginComponent.tsx
index e2b7b26..64af2e5 100644
--- a/src/components/base/LoginComponent.tsx
+++ b/src/components/base/LoginComponent.tsx
@@ -73,7 +73,7 @@ export default class LoginComponent extends Vue {
 
   render() {
     return <div class={ `block-${this.activeBlock?.id}` }>
-      <div class={ `login-view login-view--${PageModule.loginPosition}` }>
+      <div class={ `active-interface login-view login-view--${PageModule.loginPosition}` }>
         <AppIcon name={ this.currentDesktopIcon } onClick={ this.openSettingsTab } class='desktop-icon'/>
         <AppIcon name={ AppModule.currentOs } onClick={ this.openSettingsTab } class='system-icon'/>
         <UserAvatar />
diff --git a/src/components/base/SettingsComponent.tsx b/src/components/base/SettingsComponent.tsx
index caa4047..2deba72 100644
--- a/src/components/base/SettingsComponent.tsx
+++ b/src/components/base/SettingsComponent.tsx
@@ -77,7 +77,7 @@ export default class SettingsComponent extends Vue {
 
   render() {
     return <div class="block-settings login-content-settings">
-      <div class="login-view">
+      <div class="login-view active-interface">
         <AppIcon onClick={ this.openLogin } name='collapse' class='system-icon' />
 
         { !this.isViewThemeOnly && <UserAvatar /> }
diff --git a/src/components/base/ShutdownButton.tsx b/src/components/base/ShutdownButton.tsx
index f33711c..597ce87 100644
--- a/src/components/base/ShutdownButton.tsx
+++ b/src/components/base/ShutdownButton.tsx
@@ -15,7 +15,7 @@ export default class ShutdownBlock extends Vue {
   render() {
     const button = <div class="shutdown-block active-block">
       <ShutdownMenu />
-      <div class="shutdown-button" onClick={ systemActionsObject.shutdown }>
+      <div class="shutdown-button active-interface" onClick={ systemActionsObject.shutdown }>
         <AppIcon name="shutdown" />
       </div>
     </div>
diff --git a/src/components/base/ShutdownMenu.tsx b/src/components/base/ShutdownMenu.tsx
index 3b8d8d6..89b2983 100644
--- a/src/components/base/ShutdownMenu.tsx
+++ b/src/components/base/ShutdownMenu.tsx
@@ -29,7 +29,7 @@ export default class ShutdownMenu extends Vue {
   }
 
   render() {
-    return <div class="shutdown-menu">
+    return <div class="shutdown-menu active-interface">
       { this.actions.map((action) => {
         return <div class="shutdown-item" onClick={ action.callback }>
           <AppIcon name={ action.icon } />
diff --git a/src/components/base/settings/SettingsView.tsx b/src/components/base/settings/SettingsView.tsx
index 3336be7..60eee3c 100644
--- a/src/components/base/settings/SettingsView.tsx
+++ b/src/components/base/settings/SettingsView.tsx
@@ -39,9 +39,7 @@ export default class SettingsView extends Vue {
     const activeTab = <div key={this.mainTabIndex}> { mapTabs[this.mainTabIndex] } </div>
 
     return <div class='user-settings'>
-      <keep-alive>
-        { activeTab }
-      </keep-alive>
+      { activeTab }
     </div>
   }
 }
diff --git a/src/style/index.styl b/src/style/index.styl
index f18c198..92e5bf6 100644
--- a/src/style/index.styl
+++ b/src/style/index.styl
@@ -31,7 +31,7 @@
 
 #app
   &.blur
-    .login-view
+    .active-interface
       backdrop-filter blur(10px)
   &.no-transition
     *
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 602a25b..565c0a6 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -67,6 +67,10 @@ export default class HomePage extends Vue {
     return !this.isViewThemeOnly && this.isOpenLogin
   }
 
+  get showMenu() {
+    return PageModule.menu.view
+  }
+
   get isSupportFullApi() {
     return AppModule.isSupportFullApi
   }
@@ -88,18 +92,24 @@ export default class HomePage extends Vue {
     document.addEventListener('mousedown', this.handleClick)
   }
 
+  closeMenu() {
+    PageModule.ASSIGN_MENU({ view: false })
+  }
+
   handleClick(event: MouseEvent) {
     if (!this.activeBlock) {
       return PageModule.openFirstBlock()
+    } else if (this.showMenu) {
+      return false
     }
 
     const target = event.target as HTMLElement
     const activeBlocks = document.querySelectorAll(`.block-${this.activeBlock.id}`)
     const isClickOnAciveBlock = Array.from(activeBlocks).some(node => node.contains(target))
-    const isClickOnIgnoreBlock = hasSomeParentClass(target, '.active-block')
+    const ignoreClick = hasSomeParentClass(target, '.active-block')
 
-    if (isClickOnIgnoreBlock) {
-      return undefined
+    if (ignoreClick) {
+      return false
     } else if (!isClickOnAciveBlock) {
       PageModule.closeBlock()
     }