From 7a73ce8ad3e2bdf498a30f887d5cc10aa217f916 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 31 Mar 2024 23:41:59 -0700
Subject: [PATCH] Nice button transitions

---
 .../global-search.component.html              |  8 +++++--
 .../global-search.component.scss              | 21 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.html b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
index 4903611a6..6e952c4de 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.html
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
@@ -13,19 +13,23 @@
         <i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
         <span class="text-truncate">{{item[nameProp]}}</span>
         <div class="btn-group ms-auto">
-            <button #primaryButton type="button" class="btn btn-sm btn-outline-primary" (click)="primaryAction(type, item); $event.stopPropagation()">
+            <button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex" (click)="primaryAction(type, item); $event.stopPropagation()">
                 @if (type === 'document' || type === 'workflow' || type === 'customField' || type === 'group' || type === 'user') {
                     <i-bs width="1em" height="1em" name="pencil"></i-bs>
+                    <span class="">&nbsp;<ng-container i18n>Edit</ng-container></span>
                 } @else {
                     <i-bs width="1em" height="1em" name="filter"></i-bs>
+                    <span class="">&nbsp;<ng-container i18n>Filter documents</ng-container></span>
                 }
             </button>
             @if (type !== 'workflow' && type !== 'customField' && type !== 'group' && type !== 'user') {
-                <button #secondaryButton type="button" class="btn btn-sm btn-outline-primary" (click)="secondaryAction(type, item); $event.stopPropagation()">
+                <button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex" (click)="secondaryAction(type, item); $event.stopPropagation()">
                     @if (type === 'document') {
                         <i-bs width="1em" height="1em" name="download"></i-bs>
+                        <span class="">&nbsp;<ng-container i18n>Download</ng-container></span>
                     } @else {
                         <i-bs width="1em" height="1em" name="pencil"></i-bs>
+                        <span class="">&nbsp;<ng-container i18n>Edit</ng-container></span>
                     }
                 </button>
             }
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
index 0d9ad00df..411dfec65 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
@@ -62,3 +62,24 @@ form {
 .dropdown-item:has(button:focus) {
   background-color: var(--pngx-bg-alt);
 }
+
+.dropdown-item button {
+  transition: all 0.3s ease;
+  max-width: 2rem;
+  overflow: hidden;
+}
+
+.dropdown-item button span {
+  opacity: 0;
+  transition: inherit;
+}
+
+.dropdown-item:hover button,
+.dropdown-item:has(button:focus) button {
+  max-width: 10rem;
+}
+
+.dropdown-item:hover button span,
+.dropdown-item:has(button:focus) span {
+  opacity: 1;
+}