Expanded team

apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html

@@ -32,17 +32,15 @@
 
 <div class="mt-16">
     <div class="all-caps-label" translate="project-details.members"></div>
-    <div class="flex members-container mt-12">
-        <div *ngFor="let userId of displayMembers" class="member">
+    <div class="flex members-container">
+        <div *ngFor="let userId of displayedMembers" class="member">
             <redaction-initials-avatar [userId]="userId" size="large" color="gray"></redaction-initials-avatar>
         </div>
-        <div *ngIf="overflowCount" class="member">
-            <div class="oval large white-dark">+{{ overflowCount }}</div>
+        <div *ngIf="overflowCount && !expandedTeam" class="member pointer">
+            <div class="oval large white-dark" (click)="toggleExpandedTeam()">+{{ overflowCount }}</div>
         </div>
-        <!--        <div (click)="openAssignProjectMembersDialog.emit()" *ngIf="permissionsService.isManager()" class="member pointer">-->
-        <!--            <div class="oval red-white large">+</div>-->
-        <!--        </div>-->
         <redaction-circle-button
+            class="member"
             (action)="openAssignProjectMembersDialog.emit()"
             icon="red:plus"
             *ngIf="permissionsService.isManager()"
@@ -51,6 +49,7 @@
         >
         </redaction-circle-button>
     </div>
+    <div class="all-caps-label see-less pointer" *ngIf="expandedTeam" translate="project-details.see-less" (click)="toggleExpandedTeam()"></div>
 </div>
 
 <div *ngIf="hasFiles" class="mt-24">

apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss

@@ -6,7 +6,19 @@
 }
 
 .members-container {
-    gap: 5px;
+    flex-wrap: wrap;
+    margin-top: 4px;
+
+    .member {
+        margin-top: 4px;
+        margin-right: 2px;
+    }
+}
+
+.see-less {
+    opacity: 1;
+    color: $primary;
+    margin-top: 16px;
 }
 
 .legend {

apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts

@@ -16,6 +16,7 @@ import { StatusSorter } from '../../../common/sorters/status-sorter';
 })
 export class ProjectDetailsComponent implements OnInit {
     public documentsChartData: DoughnutChartConfig[] = [];
+    public expandedTeam = false;
     @Input() public filters: { needsWorkFilters: FilterModel[]; statusFilters: FilterModel[] };
     @Output() public filtersChanged = new EventEmitter();
     @Output() public openAssignProjectMembersDialog = new EventEmitter();
@@ -32,17 +33,26 @@ export class ProjectDetailsComponent implements OnInit {
 
     ngOnInit(): void {
         this.calculateChartConfig();
-        this.appStateService.fileChanged.subscribe((event) => {
+        this.appStateService.fileChanged.subscribe(() => {
             this.calculateChartConfig();
         });
     }
 
-    public get displayMembers() {
-        return this.appStateService.activeProject.project.memberIds.slice(0, 6);
+    private get _memberIds(): string[] {
+        const ids = this.appStateService.activeProject.project.memberIds;
+        return [...ids, ...ids, ids[0], ids[1], ids[0]];
+    }
+
+    public get displayedMembers(): string[] {
+        return this.expandedTeam || !this.overflowCount ? this._memberIds : this._memberIds.slice(0, 7);
+    }
+
+    public toggleExpandedTeam() {
+        this.expandedTeam = !this.expandedTeam;
     }
 
     public get overflowCount() {
-        return this.appStateService.activeProject.project.memberIds.length > 6 ? this.appStateService.activeProject.project.memberIds.length - 6 : 0;
+        return this._memberIds.length > 8 ? this._memberIds.length - 7 : 0;
     }
 
     public calculateChartConfig(): void {
@@ -62,7 +72,6 @@ export class ProjectDetailsComponent implements OnInit {
     }
 
     public toggleFilter(filterType: 'needsWorkFilters' | 'statusFilters', key: string): void {
-        console.log(this.filters, filterType, this.filters[filterType], key);
         const filter = this.filters[filterType].find((f) => f.key === key);
         filter.checked = !filter.checked;
         this.filtersChanged.emit(this.filters);

apps/red-ui/src/assets/i18n/en.json

@@ -142,6 +142,7 @@
         },
         "owner": "Owner",
         "members": "Members",
+        "see-less": "See less",
         "assign-members": "Assign Members",
         "expand": "Show Details",
         "collapse": "Hide Details"