From b8aa312a14f9feb7231ea9132b058a04159cc845 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 14 Feb 2024 11:26:54 +0100
Subject: [PATCH] fully apply Nextcloud AppMenu.vue updated (#326)

---
 src/AppMenu.vue | 52 ++++++++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index f90ebad..4e31f12 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -168,6 +168,7 @@ $header-icon-size: 20px;
   flex-shrink: 1;
   flex-wrap: wrap;
 }
+
 .app-menu-main {
   display: flex;
   flex-wrap: nowrap;
@@ -177,7 +178,6 @@ $header-icon-size: 20px;
     height: 50px;
     position: relative;
     display: flex;
-    opacity: .7;
 
     &.app-menu-entry__active {
       opacity: 1;
@@ -217,6 +217,7 @@ $header-icon-size: 20px;
       width: $header-icon-size;
       height: $header-icon-size;
       padding: calc((100% - $header-icon-size) / 2);
+      box-sizing: content-box;
       filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
     }
 
@@ -226,8 +227,8 @@ $header-icon-size: 20px;
       font-size: 12px;
       color: var(--color-primary-text);
       text-align: center;
-      bottom: -5px;
       left: 50%;
+      top: 45%;
       display: block;
       min-width: 100%;
       transform: translateX(-50%);
@@ -235,6 +236,7 @@ $header-icon-size: 20px;
       width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
+      letter-spacing: -0.5px;
     }
 
     &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
@@ -242,11 +244,11 @@ $header-icon-size: 20px;
       opacity: 1;
       .app-menu-entry--label {
         opacity: 1;
-        font-weight: bold;
-        font-size: 14px;
+        font-weight: bolder;
         bottom: 0;
-        width: auto;
-        overflow: visible;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
     }
   }
@@ -263,8 +265,10 @@ $header-icon-size: 20px;
   &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
   .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
   .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
+    opacity: 1;
+
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -280,7 +284,7 @@ $header-icon-size: 20px;
   &.app-menu-main__show-hovered .app-menu-entry:hover,
   &.app-menu-main__show-hovered .app-menu-entry:focus {
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -295,38 +299,42 @@ $header-icon-size: 20px;
 }
 
 ::v-deep .app-menu-more .button-vue--vue-tertiary {
-  color: var(--color-primary-text);
   opacity: .7;
   margin: 3px;
+  filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-  &:hover {
-    opacity: 1;
-    background-color: transparent !important;
+  &:not([aria-expanded="true"]) {
+    color: var(--color-primary-element-text);
+
+    &:hover {
+      opacity: 1;
+      background-color: transparent !important;
+    }
   }
 
-  &:focus-visible {
-    opacity: 1;
-    background-color: transparent !important;
-    border-radius: var(--border-radius);
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-primary-text);
-  }
+    &:focus-visible {
+      opacity: 1;
+      outline: none !important;
+    }
 }
 
 .app-menu-popover-entry {
   .app-icon {
     position: relative;
     height: 44px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
 
     &.has-unread::after {
       background-color: var(--color-main-text);
     }
 
     img {
-      filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
       width: $header-icon-size;
       height: $header-icon-size;
-      padding: calc((50px - $header-icon-size) / 2);
     }
   }
 }
@@ -335,7 +343,7 @@ $header-icon-size: 20px;
   content: "";
   width: 8px;
   height: 8px;
-  background-color: var(--color-primary-text);
+  background-color: var(--color-primary-element-text);
   border-radius: 50%;
   position: absolute;
   display: block;