[ACA-1450] "manage versions" dialog enhancements (#415)

* move dialog to the "dialogs" folder

* rename to node-versions

* style and layout refactoring

* style fixes

* layout fixes

* fix scrollbars

* code polishing

src/app/app.module.ts

@@ -65,7 +65,7 @@ import { NodeRestoreDirective } from './common/directives/node-restore.directive
 import { NodePermanentDeleteDirective } from './common/directives/node-permanent-delete.directive';
 import { NodeUnshareDirective } from './common/directives/node-unshare.directive';
 import { NodeVersionsDirective } from './common/directives/node-versions.directive';
-import { VersionManagerDialogAdapterComponent } from './components/versions-dialog/version-manager-dialog-adapter.component';
+import { NodeVersionsDialogComponent } from './dialogs/node-versions/node-versions.dialog';
 import { BrowsingFilesService } from './common/services/browsing-files.service';
 import { ContentManagementService } from './common/services/content-management.service';
 import { NodeActionsService } from './common/services/node-actions.service';
@@ -148,7 +148,7 @@ import { ViewerEffects } from './store/effects/viewer.effects';
         NodePermanentDeleteDirective,
         NodeUnshareDirective,
         NodeVersionsDirective,
-        VersionManagerDialogAdapterComponent,
+        NodeVersionsDialogComponent,
         SearchComponent,
         SettingsComponent,
         SortingPreferenceKeyDirective,
@@ -174,7 +174,7 @@ import { ViewerEffects } from './store/effects/viewer.effects';
         NodePermissionService
     ],
     entryComponents: [
-        VersionManagerDialogAdapterComponent
+        NodeVersionsDialogComponent
     ],
     bootstrap: [AppComponent]
 })

src/app/common/directives/node-versions.directive.ts

@@ -28,7 +28,7 @@ import { Directive, HostListener, Input } from '@angular/core';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
 
-import { VersionManagerDialogAdapterComponent } from '../../components/versions-dialog/version-manager-dialog-adapter.component';
+import { NodeVersionsDialogComponent } from '../../dialogs/node-versions/node-versions.dialog';
 import { MatDialog } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states/app.state';
@@ -38,10 +38,8 @@ import { SnackbarErrorAction } from '../../store/actions';
     selector: '[acaNodeVersions]'
 })
 export class NodeVersionsDirective {
-
     // tslint:disable-next-line:no-input-rename
-    @Input('acaNodeVersions')
-    node: MinimalNodeEntity;
+    @Input('acaNodeVersions') node: MinimalNodeEntity;
 
     @HostListener('click')
     onClick() {
@@ -72,13 +70,17 @@ export class NodeVersionsDirective {
         }
     }
 
-    openVersionManagerDialog(contentEntry: MinimalNodeEntryEntity) {
-        if (contentEntry.isFile) {
-            this.dialog.open(
-                VersionManagerDialogAdapterComponent,
-                <any>{ data: { contentEntry }, panelClass: 'adf-version-manager-dialog', width: '630px' });
+    openVersionManagerDialog(node: MinimalNodeEntryEntity) {
+        if (node.isFile) {
+            this.dialog.open(NodeVersionsDialogComponent, {
+                data: { node },
+                panelClass: 'adf-version-manager-dialog-panel',
+                width: '630px'
+            });
         } else {
-            this.store.dispatch(new SnackbarErrorAction('APP.MESSAGES.ERRORS.PERMISSION'));
+            this.store.dispatch(
+                new SnackbarErrorAction('APP.MESSAGES.ERRORS.PERMISSION')
+            );
         }
     }
 }

src/app/components/page.component.ts

@@ -23,20 +23,17 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { MinimalNodeEntity, MinimalNodeEntryEntity, Pagination } from 'alfresco-js-api';
-import { UserPreferencesService, FileUploadErrorEvent } from '@alfresco/adf-core';
-import { ShareDataRow, DocumentListComponent } from '@alfresco/adf-content-services';
+import { DocumentListComponent, ShareDataRow } from '@alfresco/adf-content-services';
+import { FileUploadErrorEvent, UserPreferencesService } from '@alfresco/adf-core';
+import { OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { OnDestroy, ViewChild, OnInit } from '@angular/core';
-import { Subscription, Subject } from 'rxjs/Rx';
 import { Store } from '@ngrx/store';
-import { AppStore } from '../store/states/app.state';
-import { SetSelectedNodesAction } from '../store/actions/node.action';
-import { selectedNodes } from '../store/selectors/app.selectors';
+import { MinimalNodeEntity, MinimalNodeEntryEntity, Pagination } from 'alfresco-js-api';
 import { takeUntil } from 'rxjs/operators';
-import { SnackbarErrorAction } from '../store/actions';
-import { ViewNodeAction } from '../store/actions/viewer.action';
-
+import { Subject, Subscription } from 'rxjs/Rx';
+import { SnackbarErrorAction, ViewNodeAction, SetSelectedNodesAction } from '../store/actions';
+import { selectedNodes } from '../store/selectors/app.selectors';
+import { AppStore } from '../store/states/app.state';
 
 export abstract class PageComponent implements OnInit, OnDestroy {
 

src/app/components/versions-dialog/version-manager-dialog-adapter.component.html

@@ -1,9 +0,0 @@
-<div class="version-manager-dialog-adapter">
-    <header mat-dialog-title>{{'VERSION.DIALOG.TITLE' | translate}}</header>
-    <section mat-dialog-content>
-        <adf-version-manager [node]="contentEntry" (uploadError)="uploadError($event)"></adf-version-manager>
-    </section>
-    <footer mat-dialog-actions>
-        <button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
-    </footer>
-</div>

src/app/components/versions-dialog/version-manager-dialog-adapter.component.scss

@@ -1,52 +0,0 @@
-.adf-version-manager-dialog {
-    .mat-dialog-container {
-        padding-left: 0;
-        padding-right: 0;
-        padding-bottom: 8px;
-    }
-
-    .mat-dialog-title {
-        margin-left: 24px;
-        margin-right: 24px;
-        font-size: 20px;
-        font-weight: 600;
-        font-style: normal;
-        font-stretch: normal;
-        line-height: 1.6;
-        letter-spacing: -0.5px;
-        color: rgba(0, 0, 0, 0.87);
-    }
-
-    .mat-dialog-content {
-        margin: 0;
-    }
-
-    .mat-dialog-actions {
-        padding: 8px 8px 24px 8px;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-pack: end;
-        -ms-flex-pack: end;
-        justify-content: flex-end;
-        color: rgba(0, 0, 0, 0.54);
-
-        button {
-            text-transform: uppercase;
-            font-weight: normal;
-
-            &:enabled {
-                color: #ff9800;
-            }
-        }
-    }
-
-    .adf-version-list {
-        height: 200px;
-        overflow: auto;
-    }
-}
-
-.version-manager-dialog-adapter {
-    width: 100%;
-}

src/app/components/versions-dialog/version-manager-dialog-adapter.component.ts

@@ -1,45 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBarConfig } from '@angular/material';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-import { MatSnackBar } from '@angular/material';
-
-@Component({
-    templateUrl: './version-manager-dialog-adapter.component.html',
-    styleUrls: ['./version-manager-dialog-adapter.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class VersionManagerDialogAdapterComponent {
-
-    public contentEntry: MinimalNodeEntryEntity;
-
-    constructor(@Inject(MAT_DIALOG_DATA) data: any,
-                private snackBar: MatSnackBar,
-                private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
-        this.contentEntry = data.contentEntry;
-    }
-
-    uploadError(errorMessage: string) {
-        this.snackBar.open(errorMessage, '', <MatSnackBarConfig>{ duration: 4000 });
-    }
-
-    close() {
-        this.containingDialog.close();
-    }
-}

src/app/dialogs/node-versions/node-versions.dialog.html

@@ -0,0 +1,7 @@
+<header mat-dialog-title>{{'VERSION.DIALOG.TITLE' | translate}}</header>
+<section mat-dialog-content>
+    <adf-version-manager [node]="node" (uploadError)="uploadError($event)"></adf-version-manager>
+</section>
+<footer mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="true">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
+</footer>

src/app/dialogs/node-versions/node-versions.dialog.theme.scss

@@ -0,0 +1,66 @@
+@mixin aca-node-versions-dialog-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $accent: map-get($theme, accent);
+
+    .adf-version-manager-dialog-panel {
+        height: 400px;
+    }
+
+    .aca-node-versions-dialog {
+
+        .mat-dialog-title {
+            font-size: 20px;
+            font-weight: 600;
+            font-style: normal;
+            font-stretch: normal;
+            line-height: 1.6;
+            letter-spacing: -0.5px;
+            color: mat-color($foreground, text, 0.87);
+        }
+
+        .mat-dialog-actions {
+            padding: 8px 8px 24px 8px;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: end;
+            -ms-flex-pack: end;
+            justify-content: flex-end;
+            color: mat-color($foreground, text, 0.54);
+
+            button {
+                text-transform: uppercase;
+                font-weight: normal;
+
+                &:enabled {
+                    color: mat-color($accent);
+                }
+            }
+        }
+
+        .adf-new-version-container {
+            height: 100%;
+
+            .adf-new-version-uploader-container {
+                & > .adf-version-upload {
+                    width: 100%;
+                }
+            }
+
+
+        }
+
+        .adf-version-list-container {
+
+            .adf-version-list {
+                height: 180px;
+                overflow: hidden;
+                padding: 0;
+            }
+
+            .mat-list.adf-version-list {
+                overflow: auto;
+            }
+        }
+    }
+}

src/app/dialogs/node-versions/node-versions.dialog.ts

@@ -0,0 +1,52 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { Store } from '@ngrx/store';
+import { AppStore } from '../../store/states/app.state';
+import { SnackbarErrorAction } from '../../store/actions';
+
+@Component({
+    templateUrl: './node-versions.dialog.html',
+    encapsulation: ViewEncapsulation.None,
+    // tslint:disable-next-line:use-host-property-decorator
+    host: { class: 'aca-node-versions-dialog' }
+})
+export class NodeVersionsDialogComponent {
+    node: MinimalNodeEntryEntity;
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) data: any,
+        private store: Store<AppStore>
+    ) {
+        this.node = data.node;
+    }
+
+    uploadError(errorMessage: string) {
+        this.store.dispatch(new SnackbarErrorAction(errorMessage));
+    }
+}

src/app/store/actions.ts

@@ -4,3 +4,4 @@ export * from './actions/logo-path.action';
 export * from './actions/node.action';
 export * from './actions/snackbar.action';
 export * from './actions/router.action';
+export * from './actions/viewer.action';

src/app/ui/custom-theme.scss

@@ -3,6 +3,7 @@
 
 @import '../components/sidenav/sidenav.component.theme';
 @import '../components/about/about.component.theme';
+@import '../dialogs/node-versions/node-versions.dialog.theme';
 @import './overrides/adf-toolbar.theme';
 @import './overrides/adf-search-filter.theme';
 @import './overrides/adf-info-drawer.theme';
@@ -67,6 +68,7 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
     @include adf-document-list-theme($custom-theme);
     @include adf-upload-drag-area-theme($custom-theme);
 
+    @include aca-node-versions-dialog-theme($custom-theme);
     @include snackbar-theme($custom-theme);
     @include sidenav-component-theme($custom-theme);
     @include aca-about-component-theme($custom-theme);

src/app/ui/overrides/adf-info-drawer.theme.scss

@@ -30,8 +30,7 @@
             }
         }
 
-        .adf-version-list-container,
-        .adf-version-manager-dialog .adf-version-list-container {
+        .adf-version-list-container {
             .adf-version-list {
                 height: auto;
             }