[ACA-1317] Use ADF component for "New" side navigation actions (#347)

* adf-sidebar-action-menu

* update

e2e/components/sidenav/sidenav.ts

@@ -33,7 +33,7 @@ export class Sidenav extends Component {
         link: '.sidenav-menu__item',
         label: '.menu__item--label',
         activeLink: '.menu__item--active',
-        newButton: '.sidenav__section--new__button'
+        newButton: '.adf-sidebar-action-menu-button'
     };
 
     links: ElementArrayFinder = this.component.all(by.css(Sidenav.selectors.link));

src/app/components/sidenav/sidenav.component.html

@@ -1,64 +1,53 @@
 <div class="sidenav">
-    <div class="sidenav__section sidenav__section--new" [ngClass]="{ 'section--new--mini': !showLabel }">
+    <div class="sidenav__section sidenav__section sidenav_action-menu">
-        <button *ngIf="showLabel"
+        <adf-sidebar-action-menu [expanded]="showLabel" title="{{'APP.NEW_MENU.LABEL' | translate }}">
-            [matMenuTriggerFor]="menu"
+            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
-            class="sidenav__section--new__button"
+            <div sidebar-menu-expand-icon>
-            [disableRipple]="true"
+                    <mat-icon>queue</mat-icon>
-            mat-raised-button
+            </div>
-            color="accent">
+            <div sidebar-menu-options>
+                <button
+                    mat-menu-item
+                    [disabled]="!permission.check(node, ['create'])"
+                    (error)="openSnackMessage($event)"
+                    [adf-create-folder]="node?.id"
+                    [attr.title]="
+                        ( permission.check(node, ['create'])
+                            ? 'APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER'
+                            : 'APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED'
+                        ) | translate">
+                    <mat-icon>create_new_folder</mat-icon>
+                    <span>{{ 'APP.NEW_MENU.MENU_ITEMS.CREATE_FOLDER' | translate }}</span>
+                </button>
 
-            <span>{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
+                <adf-upload-button
-            <mat-icon>arrow_drop_down</mat-icon>
+                    mat-ripple
-        </button>
+                    [tooltip]="
+                        (permission.check(node, ['create'])
+                            ? 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES'
+                            : 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES_NOT_ALLOWED'
+                        ) | translate"
+                    [disabled]="!permission.check(node, ['create'])"
+                    [rootFolderId]="node?.id"
+                    [multipleFiles]="true"
+                    [uploadFolders]="false"
+                    [staticTitle]="'APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE' | translate">
+                </adf-upload-button>
 
-        <button [matMenuTriggerFor]="menu"
+                <adf-upload-button
-            *ngIf="!showLabel"
+                    [tooltip]="
-            color="accent"
+                        (permission.check(node, ['create'])
-            mat-icon-button>
+                            ? 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS'
-            <mat-icon>add_box</mat-icon>
+                            : 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS_NOT_ALLOWED'
-        </button>
+                        ) | translate"
-
+                    [disabled]="!permission.check(node, ['create'])"
-        <mat-menu #menu="matMenu" [overlapTrigger]="false">
+                    [rootFolderId]="node?.id"
-            <button
+                    [multipleFiles]="true"
-                mat-menu-item
+                    [uploadFolders]="true"
-                [disabled]="!permission.check(node, ['create'])"
+                    [staticTitle]="'APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER' | translate">
-                (error)="openSnackMessage($event)"
+                </adf-upload-button>
-                [adf-create-folder]="node?.id"
+            </div>
-                [attr.title]="
+        </adf-sidebar-action-menu>
-                    ( permission.check(node, ['create'])
-                        ? 'APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER'
-                        : 'APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED'
-                    ) | translate">
-                <mat-icon>create_new_folder</mat-icon>
-                <span>{{ 'APP.NEW_MENU.MENU_ITEMS.CREATE_FOLDER' | translate }}</span>
-            </button>
-
-            <adf-upload-button
-                [tooltip]="
-                    (permission.check(node, ['create'])
-                        ? 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES'
-                        : 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES_NOT_ALLOWED'
-                    ) | translate"
-                [disabled]="!permission.check(node, ['create'])"
-                [rootFolderId]="node?.id"
-                [multipleFiles]="true"
-                [uploadFolders]="false"
-                [staticTitle]="'APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE' | translate">
-            </adf-upload-button>
-
-            <adf-upload-button
-                [tooltip]="
-                    (permission.check(node, ['create'])
-                        ? 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS'
-                        : 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS_NOT_ALLOWED'
-                    ) | translate"
-                [disabled]="!permission.check(node, ['create'])"
-                [rootFolderId]="node?.id"
-                [multipleFiles]="true"
-                [uploadFolders]="true"
-                [staticTitle]="'APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER' | translate">
-            </adf-upload-button>
-        </mat-menu>
     </div>
 
     <div class="sidenav__section sidenav__section--menu" *ngFor="let list of navigation">

src/app/components/sidenav/sidenav.component.scss

@@ -8,8 +8,10 @@
         border-bottom: 0;
     }
 
-    .section--new--mini  {
+    &_action-menu {
         display: flex;
+        padding: 16px 24px;
+        height: 40px;
         justify-content: center;
         align-items: center;
     }
@@ -17,19 +19,6 @@
     &__section {
         padding: 8px 14px;
         position: relative;
-
-        &--new {
-            padding: 16px 24px;
-            height: 40px;
-        }
-
-        &--new__button {
-            width: 100%;
-        }
-
-        &--new__button.mat-raised-button {
-            box-shadow: none !important;
-        }
     }
 
     &-menu {

src/app/components/sidenav/sidenav.component.theme.scss

@@ -10,7 +10,10 @@
         @include angular-material-theme($theme);
 
         background-color: mat-color($background, background);
-        border-right: $border;
+
+        .adf-sidebar-action-menu-button {
+            background-color: mat-color($accent);
+        }
 
         &__section {
             border-bottom: $border;

src/app/ui/application.scss

@@ -30,3 +30,5 @@ ng-component {
 @import './overrides/toolbar';
 @import './overrides/adf-viewer-more-actions';
 @import './overrides/adf-info-drawer';
+@import './overrides/_adf-sidebar-action-menu';
+

src/app/ui/overrides/_adf-sidebar-action-menu.scss

@@ -0,0 +1,39 @@
+.adf-sidebar-action-menu-options div .mat-menu-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mat-menu-item[disabled],
+.mat-menu-item[disabled]:hover {
+    color: rgba(0, 0, 0, 0.38);
+}
+
+.mat-menu-panel.adf-sidebar-action-menu-panel {
+    max-width: 290px !important;
+}
+
+.adf-sidebar-action-menu-panel {
+    width: 290px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.adf-sidebar-action-menu-panel .mat-menu-content {
+    width: 100%;
+}
+
+.adf-sidebar-action-menu-icon {
+    margin: 0;
+}
+
+.adf-sidebar-action-menu-icon div[sidebar-menu-expand-icon] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.adf-sidebar-action-menu {
+    width: 100%;
+}

src/app/ui/overrides/_alfresco-upload-button.scss

@@ -38,7 +38,12 @@ adf-upload-button {
         font-size: 16px;
         font-weight: normal;
         text-align: left;
-        margin-left: 18px;
+        margin-left: 12px;
         color: $alfresco-primary-text-color;
     }
+
+    &:hover label {
+        color: #ff9800;
+        opacity: inherit;
+    }
 }