[ci:force] cleanup the toolbar and tooltips

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 150
+}

demo-shell/resources/i18n/en.json

@@ -173,6 +173,8 @@
       "DELETED_BY": "Deleted by"
     },
     "TOOLBAR": {
+      "TOGGLE_DISPLAY_MODE": "Toggle display mode",
+      "TOGGLE_METADATA": "Toggle metadata",
       "CARDVIEW": "Card view mode",
       "SHARE_EDIT": "Edit settings",
       "NEW_FOLDER": "New folder",
@@ -181,10 +183,6 @@
       "DELETE": "Delete",
       "FAVORITES": "Add to favorites",
       "SHARE": "Share",
-      "THEME": "Select a theme",
-      "SHOW_VERSION": "Show version",
-      "HIDE_VERSION": "Hide version",
-      "LISTVIEW": "List view mode",
       "CREATE_LIBRARY": "Create Library"
     },
     "ACTIONS": {

demo-shell/src/app/components/files/files.component.html

@@ -22,7 +22,7 @@
                 </button>
                 <span class="app-error-message--text">{{errorMessage}}</span>
             </div>
-            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="app-files-toolbar">
+            <adf-toolbar *ngIf="!disableDragArea" class="app-files-toolbar">
                 <adf-toolbar-title>
                     <adf-breadcrumb
                                     class="app-files-breadcrumb"
@@ -41,14 +41,9 @@
                     <button
                         mat-icon-button
                         data-automation-id="document-list-grid-view"
-                        title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.TOGGLE_DISPLAY_MODE' | translate }}"
                         (click)="toggleGalleryView()">
-                        <mat-icon *ngIf="displayMode === 'list'"
+                        <mat-icon>list</mat-icon>
-                                  matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy
-                        </mat-icon>
-                        <mat-icon *ngIf="displayMode === 'gallery'"
-                                  matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list
-                        </mat-icon>
                     </button>
                     <button
                         data-automation-id="create-new-folder"
@@ -57,13 +52,12 @@
                         title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
                         (error)="openSnackMessageError($event)"
                         (success)="documentList.reload()"
-                        [adf-create-folder]="currentFolderId"
+                        [adf-create-folder]="currentFolderId">
-                        matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}">
                         <mat-icon>create_new_folder</mat-icon>
                     </button>
                     <button
                         mat-icon-button
-                        matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.CREATE_LIBRARY' | translate }}"
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.CREATE_LIBRARY' | translate }}"
                         data-automation-id="create-new-library"
                         (click)="createLibrary()">
                         <mat-icon>library_add</mat-icon>
@@ -75,15 +69,13 @@
                             title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
                             (error)="openSnackMessageError($event)"
                             [adf-edit-folder]="documentList.selection[0]?.entry"
-                            (success)="documentList.reload()"
+                            (success)="documentList.reload()">
-                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}">
                         <mat-icon>create</mat-icon>
                     </button>
                     <button mat-icon-button
                             [disabled]="!hasSelection(documentList.selection)"
                             title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
-                            [adfNodeDownload]="documentList.selection"
+                            [adfNodeDownload]="documentList.selection">
-                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}">
                         <mat-icon>get_app</mat-icon>
                     </button>
                     <button mat-icon-button
@@ -93,8 +85,7 @@
                             [adf-nodes]="documentList.selection"
                             title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                             (delete)="onDeleteActionSuccess($event)"
-                            [adf-delete]="documentList.selection"
+                            [adf-delete]="documentList.selection">
-                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}">
                         <mat-icon>delete</mat-icon>
                     </button>
                     <button
@@ -103,17 +94,15 @@
                             [disabled]="!documentList.selection.length"
                             #favorite="adfFavorite"
                             [adf-node-favorite]="documentList.selection"
-                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.FAVORITES' | translate }}">
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.FAVORITES' | translate }}">
-                        <mat-icon>
+                        <mat-icon>{{ favorite.hasFavorites() ? 'star' :'star_border' }}</mat-icon>
-                            {{ favorite.hasFavorites() ? 'star' :'star_border' }}
-                        </mat-icon>
                     </button>
                     <button mat-icon-button
                             [disabled]="documentList.selection.length && !shareRef.isFile"
                             [baseShareUrl]="baseShareUrl"
                             #shareRef="adfShare"
                             [adf-share]="documentList.selection[0]"
-                            [matTooltip]="(shareRef.isShared
+                            [title]="(shareRef.isShared
                                 ? 'DOCUMENT_LIST.TOOLBAR.SHARE_EDIT'
                                 : 'DOCUMENT_LIST.TOOLBAR.SHARE') | translate">
                         <mat-icon>
@@ -122,25 +111,9 @@
                     </button>
                 </div>
 
-                <button mat-icon-button [matMenuTriggerFor]="themePicker"
+                <button mat-icon-button (click)="showVersions = !showVersions" class="app-show-versions-button"
-                        matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.THEME' | translate }}">
+                    title="{{ 'DOCUMENT_LIST.TOOLBAR.TOGGLE_METADATA' | translate }}">
-                    <mat-icon>format_color_fill</mat-icon>
+                    <mat-icon>{{ showVersions ? 'chevron_right' : 'chevron_left' }}</mat-icon>
-                </button>
-
-                <mat-menu #themePicker="matMenu">
-                    <button mat-menu-item (click)="toolbarColor = null">Default</button>
-                    <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
-                    <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
-                    <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
-                </mat-menu>
-
-                <button mat-icon-button (click)="showVersions = !showVersions" class="app-show-versions-button">
-                    <mat-icon *ngIf="!showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHOW_VERSION' | translate }}">
-                        chevron_left
-                    </mat-icon>
-                    <mat-icon *ngIf="showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.HIDE_VERSION' | translate }}">
-                        chevron_right
-                    </mat-icon>
                 </button>
 
                 <adf-toolbar-divider class="app-toolbar-divider-before-more-menu"></adf-toolbar-divider>
@@ -149,8 +122,7 @@
                     <mat-icon>more_vert</mat-icon>
                 </button>
                 <mat-menu #menu="matMenu">
-                    <button mat-menu-item
+                    <button mat-menu-item (click)="toggleGalleryView()">
-                            (click)="toggleGalleryView()">
                         <mat-icon *ngIf="displayMode === 'list'">view_comfy</mat-icon>
                         <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
                         <span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
@@ -249,15 +221,6 @@
                         [formatTooltip]="getNodeNameTooltip"
                         class="app-ellipsis-cell adf-expand-cell-5">
                     </data-column>
-                    <!-- Location column demo -->
-                    <!--
-                    <data-column
-                        key="path"
-                        type="location"
-                        format="/files"
-                        title="Location">
-                    </data-column>
-                    -->
                     <data-column
                         key="content.sizeInBytes"
                         title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"

demo-shell/src/app/components/files/files.component.ts

@@ -80,7 +80,6 @@ import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.compon
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
 import { takeUntil, debounceTime, scan } from 'rxjs/operators';
-import { ThemePalette } from '@angular/material/core';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -109,8 +108,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.appConfig.get<string>(AppConfigValues.BASESHAREURL) ||
         this.appConfig.get<string>(AppConfigValues.ECMHOST)) + '/preview/s/';
 
-    toolbarColor: ThemePalette;
-
     selectionModes = [
         {value: 'none', viewValue: 'None'},
         {value: 'single', viewValue: 'Single'},