From 9e264f3fb031abe1074c472dddfc096b2d57e3eb Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Fri, 4 May 2018 20:39:26 +0300
Subject: [PATCH] [ACA-1317] Use ADF component for "New" side navigation
 actions (#347)

* adf-sidebar-action-menu

* update
---
 e2e/components/sidenav/sidenav.ts             |   2 +-
 .../components/sidenav/sidenav.component.html | 105 ++++++++----------
 .../components/sidenav/sidenav.component.scss |  17 +--
 .../sidenav/sidenav.component.theme.scss      |   5 +-
 src/app/ui/application.scss                   |   2 +
 .../overrides/_adf-sidebar-action-menu.scss   |  39 +++++++
 .../ui/overrides/_alfresco-upload-button.scss |   7 +-
 7 files changed, 102 insertions(+), 75 deletions(-)
 create mode 100644 src/app/ui/overrides/_adf-sidebar-action-menu.scss

diff --git a/e2e/components/sidenav/sidenav.ts b/e2e/components/sidenav/sidenav.ts
index 53d4baf84..3c14615b6 100755
--- a/e2e/components/sidenav/sidenav.ts
+++ b/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));
diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html
index 7fb3f30b5..2dc6c0af3 100644
--- a/src/app/components/sidenav/sidenav.component.html
+++ b/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 }">
-        <button *ngIf="showLabel"
-            [matMenuTriggerFor]="menu"
-            class="sidenav__section--new__button"
-            [disableRipple]="true"
-            mat-raised-button
-            color="accent">
+    <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'])"
+                    (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>
-            <mat-icon>arrow_drop_down</mat-icon>
-        </button>
+                <adf-upload-button
+                    mat-ripple
+                    [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"
-            *ngIf="!showLabel"
-            color="accent"
-            mat-icon-button>
-            <mat-icon>add_box</mat-icon>
-        </button>
-
-        <mat-menu #menu="matMenu" [overlapTrigger]="false">
-            <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>
-
-            <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>
+                <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>
+            </div>
+        </adf-sidebar-action-menu>
     </div>
 
     <div class="sidenav__section sidenav__section--menu" *ngFor="let list of navigation">
diff --git a/src/app/components/sidenav/sidenav.component.scss b/src/app/components/sidenav/sidenav.component.scss
index 724a6ee3f..48df44e8f 100644
--- a/src/app/components/sidenav/sidenav.component.scss
+++ b/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 {
diff --git a/src/app/components/sidenav/sidenav.component.theme.scss b/src/app/components/sidenav/sidenav.component.theme.scss
index 8941378c3..9ec93afae 100644
--- a/src/app/components/sidenav/sidenav.component.theme.scss
+++ b/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;
diff --git a/src/app/ui/application.scss b/src/app/ui/application.scss
index 89f484547..c179506b5 100644
--- a/src/app/ui/application.scss
+++ b/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';
+
diff --git a/src/app/ui/overrides/_adf-sidebar-action-menu.scss b/src/app/ui/overrides/_adf-sidebar-action-menu.scss
new file mode 100644
index 000000000..35dc19ae3
--- /dev/null
+++ b/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%;
+}
diff --git a/src/app/ui/overrides/_alfresco-upload-button.scss b/src/app/ui/overrides/_alfresco-upload-button.scss
index e3dbbfd00..896211be3 100644
--- a/src/app/ui/overrides/_alfresco-upload-button.scss
+++ b/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;
+    }
 }