[ACS-7371] ADF manage version list missing button (#9484)

* [ACS-7371] list width limitation * [ACS-7371] list width limitation * [ACS-7371] change scss selector
Alfresco · Apr 10, 2024 · 12c1f3f · 12c1f3f
1 parent e105d37
commit 12c1f3f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/lib/content-services/src/lib/version-manager/version-list.component.html b/lib/content-services/src/lib/version-manager/version-list.component.html
@@ -1,19 +1,23 @@
-<mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate" color="accent"></mat-progress-bar>
+<mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate"
+                  color="accent"></mat-progress-bar>
 <mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
     <cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport">
-        <mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
+        <mat-list-item class="adf-version-list-item"
+                       *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
             <mat-icon mat-list-icon>insert_drive_file</mat-icon>
-            <p mat-line class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
+            <p mat-line class="adf-version-list-item-line adf-version-list-item-name"
+               [id]="'adf-version-list-item-name-' + version.entry.id">{{ version.entry.name }}</p>
             <p mat-line>
-                <span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
-                <span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
+                <span class="adf-version-list-item-line adf-version-list-item-version"
+                      [id]="'adf-version-list-item-version-' + version.entry.id">{{ version.entry.id }}</span> -
+                <span class="adf-version-list-item-line adf-version-list-item-date"
+                      [id]="'adf-version-list-item-date-' + version.entry.id">{{ version.entry.modifiedAt | date }}</span>
             </p>
-            <p
-                mat-line
-                [id]="'adf-version-list-item-comment-' + version.entry.id"
-                class="adf-version-list-item-comment"
-                *ngIf="showComments"
-                [title]="version.entry.versionComment">
+            <p mat-line
+               [id]="'adf-version-list-item-comment-' + version.entry.id"
+               class="adf-version-list-item-comment"
+               *ngIf="showComments"
+               [title]="version.entry.versionComment">
                 {{ version.entry.versionComment }}
             </p>
 

diff --git a/lib/content-services/src/lib/version-manager/version-list.component.scss b/lib/content-services/src/lib/version-manager/version-list.component.scss
@@ -1,12 +1,17 @@
 .adf-version-list {
-    .adf-version-list-viewport {
+    &-viewport {
         height: 100%;
         overflow-x: hidden;
+        display: flex;
+
+        :first-child {
+            max-width: 100%;
+        }
     }
 
-    .adf-version-list-item {
+    &-item {
         border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
-        width: 100vw;
+        width: 100%;
     }
 
     &-item-version {
@@ -18,7 +23,7 @@
     }
 
     &-item-comment {
-        width: 500px;
+        width: 100%;
         opacity: 0.5;
 
         @media screen and (width <= 629px) {

diff --git a/lib/content-services/src/lib/version-manager/version-list.component.ts b/lib/content-services/src/lib/version-manager/version-list.component.ts
@@ -19,9 +19,9 @@ import { AlfrescoApiService } from '@alfresco/adf-core';
 import { Component, Input, OnChanges, ViewEncapsulation, EventEmitter, Output, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { VersionsApi, Node, VersionEntry, NodesApi, NodeEntry, ContentApi, ContentPagingQuery } from '@alfresco/js-api';
 import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../dialogs/confirm.dialog';
+import { ConfirmDialogComponent } from '../dialogs';
 import { ContentVersionService } from './content-version.service';
-import { ContentService } from '../common/services/content.service';
+import { ContentService } from '../common';
 import { InfiniteScrollDatasource } from '../infinite-scroll-datasource';
 import { from, Observable, Subject } from 'rxjs';
 import { map, take, takeUntil } from 'rxjs/operators';