[ADF-1841] Content Metadata first iteration (#2666)

* First try

* Small layout changes

* Add pipe support for CardViewTextItemModel

* property service

* Additional stuff

* Make CardViewUpdateService smarter

* Content metadata saving

* Rebase fix

* CardView Style fixes

* Fix core and content-services tests

* Fix CardView text item update UX

lib/core/viewer/components/viewer.component.html

@@ -150,10 +150,10 @@
 
             <ng-container *ngIf="showSidebar && sidebarPosition !== 'left'">
                 <div class="adf-viewer__sidebar adf-viewer__sidebar-right">
-                    <ng-content select="adf-viewer-sidebar"></ng-content>
-                    <ng-container *ngIf="!sidebar">
-                        <!-- todo: default info drawer -->
+                    <ng-container *ngIf="sidebarTemplate">
+                        <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
                     </ng-container>
+                    <ng-content *ngIf="!sidebarTemplate" select="adf-viewer-sidebar"></ng-content>
                 </div>
             </ng-container>
         </div>

lib/core/viewer/components/viewer.component.scss

@@ -1,95 +1,99 @@
-$adf-viewer-background-color: #f5f5f5;
+@mixin adf-viewer-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $adf-viewer-background-color: mat-color($background, card);
 
-@mixin full-screen() {
-    width: 100%;
-    height: 100%;
-    background-color: $adf-viewer-background-color;
-}
-
-.adf-viewer {
-
-    &__mimeicon {
-        vertical-align: middle;
+    .full-screen {
+        width: 100%;
+        height: 100%;
+        background-color: $adf-viewer-background-color;
     }
 
-    &-container {
-        .adf-viewer-layout-content {
-            @include full-screen();
-            position: relative;
-            overflow-y: auto;
-            overflow-x: hidden;
-            z-index: 1;
+    .adf-viewer {
 
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            flex: 1;
+        &__mimeicon {
+            vertical-align: middle;
+        }
+
+        &-container {
+            .adf-viewer-layout-content {
+                @extend .full-screen;
+                position: relative;
+                overflow-y: auto;
+                overflow-x: hidden;
+                z-index: 1;
 
-            & > div {
                 display: flex;
-                flex-flow: row wrap;
-                margin: 0 auto;
-                align-items: stretch;
+                flex-direction: row;
+                flex-wrap: wrap;
+                flex: 1;
+
+                & > div {
+                    display: flex;
+                    flex-flow: row wrap;
+                    margin: 0 auto;
+                    align-items: stretch;
+                }
+            }
+
+            .adf-viewer-layout {
+                @extend .full-screen;
+
+                display: flex;
+                flex-direction: row;
+                overflow-y: auto;
+                overflow-x: hidden;
+                position: relative;
+            }
+
+            .adf-viewer-content {
+                @extend .full-screen;
+                flex: 1;
             }
         }
 
-        .adf-viewer-layout {
-            @include full-screen();
+        &-overlay-container {
+            .adf-viewer-content {
+                position: fixed;
+                top: 0px;
+                left: 0px;
+                z-index: 1000;
+            }
+        }
 
+        &-inline-container {
+            @extend .full-screen;
+        }
+
+        &-content-container {
             display: flex;
-            flex-direction: row;
-            overflow-y: auto;
-            overflow-x: hidden;
-            position: relative;
+            justify-content: center;
         }
 
-        .adf-viewer-content {
-            @include full-screen();
-            flex: 1;
+        &-unknown-content {
+            align-items: center;
+            display: flex;
         }
-    }
 
-    &-overlay-container {
-        .adf-viewer-content {
-            position: fixed;
-            top: 0px;
-            left: 0px;
-            z-index: 1000;
+        &__loading-screen {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            height: 85vh;
+
+            .mat-spinner {
+                margin: 0 auto;
+            }
         }
-    }
 
-    &-inline-container {
-        @include full-screen();
-    }
-
-    &-content-container {
-        display: flex;
-        justify-content: center;
-    }
-
-    &-unknown-content {
-        align-items: center;
-        display: flex;
-    }
-
-    &__loading-screen {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        height: 85vh;
-
-        .mat-spinner {
-            margin: 0 auto;
+        &__sidebar {
+            width: 350px;
+            display: block;
+            padding: 0;
+            background-color: #fafafa;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+            border-left: 1px solid mat-color($foreground, text, 0.07);
         }
     }
-
-    &__sidebar {
-        width: 350px;
-        display: block;
-        padding: 8px 0;
-        background-color: #fafafa;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
-        border-left: 1px solid rgba(0, 0, 0, 0.07);
-    }
 }

lib/core/viewer/components/viewer.component.ts

@@ -23,7 +23,6 @@ import {
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { BaseEvent } from '../../events';
 import { AlfrescoApiService, LogService, RenditionsService } from '../../services';
-
 import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
 import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerSidebarComponent } from './viewer-sidebar.component';
@@ -92,6 +91,9 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     @Input()
     sidebarPosition = 'right';
 
+    @Input()
+    sidebarTemplate: TemplateRef<any> = null;
+
     @Output()
     goBack = new EventEmitter<BaseEvent<any>>();
 
@@ -114,6 +116,7 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     downloadUrl: string = null;
     fileName = 'document';
     isLoading = false;
+    node: MinimalNodeEntryEntity;
 
     extensionTemplates: { template: TemplateRef<any>, isVisible: boolean }[] = [];
     externalExtensions: string[] = [];
@@ -121,6 +124,7 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     otherMenu: any;
     extension: string;
     mimeType: string;
+    sidebarTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
 
     private extensions = {
         image: ['png', 'jpg', 'jpeg', 'gif', 'bpm'],
@@ -203,6 +207,7 @@ export class ViewerComponent implements OnDestroy, OnChanges {
                             }
 
                             this.extensionChange.emit(this.extension);
+                            this.sidebarTemplateContext.node = data;
                             this.scrollTop();
                             resolve();
                         },