fix(ME): improve appearance and fonctionality of logout/profile butto…

…ns in sidebar
geonetwork · Jan 15, 2025 · 5ddca3f · 5ddca3f
1 parent 0631b43
commit 5ddca3f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 40 deletions.
diff --git a/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts b/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts
@@ -523,9 +523,7 @@ describe('dashboard (authenticated)', () => {
     it('should navigate to the account settings page', () => {
       cy.visit('/catalog/search')
       cy.get('md-editor-sidebar')
-        .find('gn-ui-button')
-        .first()
-        .find('a')
+        .find('[data-cy=account-link]')
         .invoke('removeAttr', 'target')
         .click()
       cy.url().should('include', '/admin.console')
@@ -549,7 +547,7 @@ describe('Logging in and out', () => {
     })
     it('logs out the user', () => {
       cy.get('gn-ui-avatar').should('be.visible')
-      cy.get('md-editor-sidebar').find('gn-ui-button').eq(1).click()
+      cy.get('md-editor-sidebar').find('[data-cy=logout-button]').click()
       cy.url().should('include', '/catalog.signin?redirect=')
       cy.get('gn-ui-avatar').should('not.exist')
     })

diff --git a/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html b/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html
@@ -16,31 +16,30 @@
     <ng-container *ngIf="platformService.getMe() | async as user">
       <div
         *ngIf="user && user.name"
-        class="basis-1/12 mb-2 flex flex-col justify-center items-center"
+        class="mb-3 gap-2 flex flex-col justify-center items-center"
+        [style.--gn-ui-button-height]="'40px'"
+        [style.--gn-ui-button-width]="'40px'"
+        [style.--gn-ui-button-rounded]="'40px'"
       >
-        <gn-ui-button
-          type="default"
-          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer mb-1"
+        <a
+          [href]="settingsUrl"
+          target="_blank"
+          class="gn-ui-btn-black"
+          data-cy="account-link"
         >
-          <a [href]="settingsUrl" target="_blank">
-            <gn-ui-user-preview
-              [user]="user"
-              [avatarPlaceholder]="placeholder$ | async"
-              extraClass="w-10 h-10"
-            ></gn-ui-user-preview>
-          </a>
-        </gn-ui-button>
+          <gn-ui-user-preview
+            [user]="user"
+            [avatarPlaceholder]="placeholder$ | async"
+          ></gn-ui-user-preview>
+        </a>
         <gn-ui-button
-          type="default"
-          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer"
-          (click)="logOut()"
+          type="black"
+          class="flex justify-center items-center"
+          data-cy="logout-button"
+          (buttonClick)="logOut()"
+          [title]="'editor.sidebar.logout' | translate"
         >
-          <img
-            src="assets/system-shut.svg"
-            [alt]="'editor.sidebar.logout' | translate"
-            [title]="'editor.sidebar.logout' | translate"
-            class="w-4 h-4 hover:invert-[.5]"
-          />
+          <ng-icon name="iconoirSystemShut" size="16px" />
         </gn-ui-button>
       </div>
     </ng-container>
@@ -52,7 +51,7 @@
         <gn-ui-button
           *ngIf="organisations[0].logoUrl?.href"
           type="default"
-          class="flex flex-col gap-3 items-center gap-2"
+          class="flex flex-col items-center gap-2"
           [routerLink]="['/organizations', organisations[0].id]"
         >
           <img

diff --git a/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts b/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts
@@ -7,11 +7,15 @@ import {
   AuthService,
   AvatarServiceInterface,
 } from '@geonetwork-ui/api/repository'
-import { LetDirective } from '@ngrx/component'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
-import { Observable, combineLatest } from 'rxjs'
+import { combineLatest, Observable } from 'rxjs'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { RouterLink } from '@angular/router'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { iconoirSystemShut } from '@ng-icons/iconoir'
+import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
 
 @Component({
   selector: 'md-editor-sidebar',
@@ -23,8 +27,16 @@ import { Organization } from '@geonetwork-ui/common/domain/model/record'
     DashboardMenuComponent,
     CommonModule,
     TranslateModule,
-    LetDirective,
     UiElementsModule,
+    ButtonComponent,
+    RouterLink,
+    NgIcon,
+    FeatureSearchModule,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSystemShut,
+    }),
   ],
 })
 export class SidebarComponent implements OnInit {

diff --git a/apps/metadata-editor/src/assets/system-shut.svg b/apps/metadata-editor/src/assets/system-shut.svg