[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,24 +1,11 @@
 <div class="sidenav">
-    <div class="sidenav__section sidenav__section--new" [ngClass]="{ 'section--new--mini': !showLabel }">
-        <button *ngIf="showLabel"
-            [matMenuTriggerFor]="menu"
-            class="sidenav__section--new__button"
-            [disableRipple]="true"
-            mat-raised-button
-            color="accent">
-
-            <span>{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
-            <mat-icon>arrow_drop_down</mat-icon>
-        </button>
-
-        <button [matMenuTriggerFor]="menu"
-            *ngIf="!showLabel"
-            color="accent"
-            mat-icon-button>
-            <mat-icon>add_box</mat-icon>
-        </button>
-
-        <mat-menu #menu="matMenu" [overlapTrigger]="false">
+    <div class="sidenav__section sidenav__section sidenav_action-menu">
+        <adf-sidebar-action-menu [expanded]="showLabel" title="{{'APP.NEW_MENU.LABEL' | translate }}">
+            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
+            <div sidebar-menu-expand-icon>
+                    <mat-icon>queue</mat-icon>
+            </div>
+            <div sidebar-menu-options>
                 <button
                     mat-menu-item
                     [disabled]="!permission.check(node, ['create'])"
@@ -34,6 +21,7 @@
                 </button>
 
                 <adf-upload-button
+                    mat-ripple
                     [tooltip]="
                         (permission.check(node, ['create'])
                             ? 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES'
@@ -58,7 +46,8 @@
                     [uploadFolders]="true"
                     [staticTitle]="'APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER' | translate">
                 </adf-upload-button>
-        </mat-menu>
+            </div>
+        </adf-sidebar-action-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;
+    }
 }