65600: Theme changes&improvements and route calculation moved to tree creation

src/app/community-list-page/community-list-adapter.ts

@@ -10,6 +10,8 @@ import {Collection} from '../core/shared/collection.model';
 import {hasValue, isNotEmpty} from '../shared/empty.util';
 import {RemoteData} from '../core/data/remote-data';
 import {PaginatedList} from '../core/data/paginated-list';
+import {getCommunityPageRoute} from "../+community-page/community-page-routing.module";
+import {getCollectionPageRoute} from "../+collection-page/collection-page-routing.module";
 
 export interface FlatNode {
     isExpandable: boolean;
@@ -20,6 +22,7 @@ export interface FlatNode {
     parent?: FlatNode;
     payload: Community | Collection;
     isShowMoreNode: boolean;
+    route?: string;
 }
 
 export const combineAndFlatten = (obsList: Array<Observable<FlatNode[]>>): Observable<FlatNode[]> =>
@@ -42,6 +45,7 @@ export const toFlatNode = (
     parent,
     payload: c,
     isShowMoreNode: false,
+    route: c instanceof Community ? getCommunityPageRoute(c.id) : getCollectionPageRoute(c.id),
 });
 
 export const showMoreFlatNode = (
@@ -70,7 +74,7 @@ export class CommunityListAdapter {
     constructor(private cds: CommunityDataService) {
         this.config = new PaginationComponentOptions();
         this.config.id = 'top-level-pagination';
-        this.config.pageSize = 5;
+        this.config.pageSize = 10;
         this.config.currentPage = 1;
         this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
         this.initTopCommunityList()

src/app/community-list-page/community-list/community-list.component.html

@@ -18,17 +18,23 @@
     </cdk-tree-node>
     <!-- This is the tree node template for leaf nodes -->
     <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
-                   [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                    class="example-tree-node">
-                   class="example-tree-node">
+        <div class="btn-group">
-        <!-- use a disabled button to provide padding for tree leaf -->
+            <button type="button" class="btn btn-default" cdkTreeNodeToggle >
-        <button type="button" class="btn btn-default" [style.visibility]="'hidden'"></button>
+                <span class="fa fa-minus"
-        <h6 class="align-middle">
+                      aria-hidden="true"></span>
-            <a [routerLink]="getCollectionRoute(node)" class="lead">
+            </button>
-                {{node.name}}
+            <h6 class="align-middle pt-2">
-            </a>
+                <a [routerLink]="node.route" class="lead">
-        </h6>
+                    {{node.name}}
-        <div class="text-muted">
+                </a>
-            {{node.payload.shortDescription}}
+            </h6>
+        </div>
+        <div class="text-muted d-flex" cdkTreeNodePadding>
+            <div *ngIf="node.payload.shortDescription">
+                <button type="button" class="btn btn-default invisible"></button>
+                <span>{{node.payload.shortDescription}}</span>
+            </div>
         </div>
     </cdk-tree-node>
     <!-- This is the tree node template for expandable nodes -->
@@ -38,18 +44,22 @@
             <button type="button" class="btn btn-default" cdkTreeNodeToggle
                     [attr.aria-label]="'toggle ' + node.name"
                     (click)="toggleExpanded(node)"
-                    [style.visibility]="node.isExpandable ? 'visible' : 'hidden'">
+                    [ngClass]="node.isExpandable ? 'visible' : 'invisible'">
                 <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
                       aria-hidden="true"></span>
             </button>
             <h5 class="align-middle pt-2">
-                <a [routerLink]="getCommunityRoute(node)" class="lead">
+                <a [routerLink]="node.route" class="lead">
                     {{node.name}}
                 </a>
             </h5>
         </div>
-        <div class="text-muted pl-4">
+        <div class="text-muted d-flex" cdkTreeNodePadding>
-            {{node.payload.shortDescription}}
+            <div *ngIf="node.payload.shortDescription">
+                <button type="button" class="btn btn-default invisible">
+                </button>
+                <span>{{node.payload.shortDescription}}</span>
+            </div>
         </div>
     </cdk-tree-node>
 </cdk-tree>

src/app/community-list-page/community-list/community-list.component.ts

@@ -2,8 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {CommunityListAdapter, FlatNode} from '../community-list-adapter';
 import {CommunityListDatasource} from '../community-list-datasource';
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {getCollectionPageRoute} from '../../+collection-page/collection-page-routing.module';
-import {getCommunityPageRoute} from '../../+community-page/community-page-routing.module';
 
 @Component({
     selector: 'ds-community-list',
@@ -13,6 +11,7 @@ import {getCommunityPageRoute} from '../../+community-page/community-page-routin
 export class CommunityListComponent implements OnInit {
 
     private expandedNodes: FlatNode[] = [];
+    private Arr = Array;
 
     treeControl = new FlatTreeControl<FlatNode>(
         (node) => node.level, (node) => node.isExpandable
@@ -36,11 +35,6 @@ export class CommunityListComponent implements OnInit {
         return node.isShowMoreNode;
     }
 
-    shouldRender(node: FlatNode) {
-        const parent = node.parent;
-        return !parent || parent.isExpanded;
-    }
-
     toggleExpanded(node: FlatNode) {
         if (node.isExpanded) {
             this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name);
@@ -52,14 +46,6 @@ export class CommunityListComponent implements OnInit {
         this.dataSource.loadCommunities(this.expandedNodes);
     }
 
-    getCollectionRoute(node: FlatNode): string {
-        return getCollectionPageRoute(node.id);
-    }
-
-    getCommunityRoute(node: FlatNode): string {
-        return getCommunityPageRoute(node.id);
-    }
-
     getNextPage(): void {
         console.log('go to next page');
         // TODO