FEAT #11296 TIME 1 update css panel

src/frontend/app/basket/basket-home.component.html

@@ -3,16 +3,16 @@
 <mat-expansion-panel class="basketList" expanded *ngIf="homeData.regroupedBaskets.length > 0 || homeData.assignedBaskets.length > 0">
     <mat-expansion-panel-header>
         <mat-panel-title>
-            {{lang.myBaskets}}
+            <i class="fa fa-inbox"></i>&nbsp;{{lang.myBaskets}}
         </mat-panel-title>
     </mat-expansion-panel-header>
-    <mat-form-field floatLabel="never" style="padding-left:20px;padding-right:20px;">
+    <mat-form-field floatLabel="never" appearance="outline" class="basketsFilter" style="padding-left:20px;padding-right:20px;font-size: 11px;">
         <input matInput placeholder="{{lang.filterBy}}" #listFilter>
     </mat-form-field>
     <ng-container *ngFor="let regroupedBasket of homeData.regroupedBaskets">
-        <mat-icon *ngIf="regroupedBasket.baskets[0]" color="primary" mat-list-icon class="fa fa-users" style="margin-left:10px;"></mat-icon> <span *ngIf="regroupedBasket.baskets[0]" class="basketGroupTitle">{{regroupedBasket.groupDesc}}</span>
-        <mat-divider *ngIf="regroupedBasket.baskets[0]"></mat-divider>
-        <mat-nav-list>
+        <span *ngIf="regroupedBasket.baskets[0]" class="basketGroupTitle">{{regroupedBasket.groupDesc}}</span>
+        <mat-divider *ngIf="regroupedBasket.baskets[0]" style="width: 80%;"></mat-divider>
+        <mat-nav-list style="padding-bottom: 10px;">
             <ng-container *ngFor="let basket of regroupedBasket.baskets | filterList:listFilter.value:'basket_name'">
                 <a mat-list-item *ngIf="basket.redirected" disableRipple="true" style="cursor:not-allowed;">
                     <mat-icon [ngStyle]="{'color': basket.color}" *ngIf="basket.redirected && !appService.getViewMode()" mat-list-icon class="fa fa-share"></mat-icon>

src/frontend/app/basket/basket-home.component.scss

 @import '../../css/vars.scss';
 
 .basketList {
+    border-radius: 0px;
     box-shadow:none;
 
     ::ng-deep.mat-expansion-panel-body {
@@ -8,7 +9,10 @@
     }
 
     .mat-expansion-panel-header-title {
-        color: rgba(0,0,0,0.54);
+        color: #135F7F;
+        font-weight: bold !important;
+        display: flex;
+        align-items: center;
         font-size: 14px;
         font-weight: 500;
     }
@@ -41,7 +45,15 @@
 }
 
 .basketGroupTitle {
-    color: rgba(0, 0, 0, 0.54);
+    color: $primary;
     font-size: 14px;
     font-weight: 500;
+    padding-left: 10px;
+}
+
+.basketsFilter {
+    ::ng-deep.mat-form-field-infix {
+        padding : 0px;
+        padding-bottom: 5px;
+    }
 }
\ No newline at end of file

src/frontend/app/folder/folder-tree.component.html

@@ -9,14 +9,14 @@
             <a mat-list-item disableRipple [class.selectedFolder]="node.selected" (mouseenter)="showAction(node)"
                 (mouseleave)="hideAction(node)" (click)="selectFolder(node)">
                 <span style="flex:1;overflow: hidden;text-overflow: ellipsis;">
-                    <span class="treeLabel" [class.private]="!node.public" [title]="node.label" [class.drag]="node.drag">
-                        {{node.label}}
+                    <span class="treeLabel" [title]="node.label" [class.drag]="node.drag">
+                        {{node.label}} <i class="fa fa-users private" *ngIf="node.public" title="Dossier partagé"></i>
                     </span>
                 </span>
                 <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();showAction(node);"
                     [disabled]="!node.showAction">
                     <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon>
-                    <span *ngIf="!node.showAction">
+                    <span *ngIf="!node.showAction" class="countResources">
                         {{node.countResources}}
                     </span>
                 </button>
@@ -42,20 +42,20 @@
         <mat-tree-node cdkDropList [id]="'folder-list-'+node.id" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event, node)"
             (cdkDropListEntered)="dragEnter(node)" (cdkDropListExited)="node.drag=false" [@hideShow] *matTreeNodeDef="let node;when: hasChild"
             matTreeNodePadding matTreeNodePaddingIndent="20px">
-            <button class="expandButton" [class.private]="!node.public" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
+            <button class="expandButton" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                 <mat-icon class="mat-icon-rtl-mirror fa {{treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'}}">
                 </mat-icon>
             </button>
             <a mat-list-item disableRipple [class.selectedFolder]="node.selected" (mouseleave)="hideAction(node)"
                 (mouseenter)="showAction(node)" (click)="selectFolder(node)">
                 <span style="flex:1;overflow: hidden;text-overflow: ellipsis;">
-                    <span class="treeLabel" [class.private]="!node.public" [title]="node.label" [class.drag]="node.drag">
-                        {{node.label}}
+                    <span class="treeLabel" [title]="node.label" [class.drag]="node.drag">
+                        {{node.label}} <i class="fa fa-users private" *ngIf="node.public" title="Dossier partagé"></i>
                     </span>
                 </span>
                 <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();" [disabled]="!node.showAction">
                     <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon>
-                    <span *ngIf="!node.showAction">
+                    <span *ngIf="!node.showAction" class="countResources">
                         {{node.countResources}}
                     </span>
                 </button>

src/frontend/app/folder/folder-tree.component.scss

@@ -71,7 +71,7 @@ form {
 
 .treeLabel {
     white-space: pre;
-    color: $primary;
+    color: rgb(102, 102, 102);
 }
 
 .drag {
@@ -85,5 +85,14 @@ form {
 }
 
 .private {
-    color: $warn;
+    color: $secondary;
+}
+
+.countResources {
+    color: $primary;
+    font-weight: bold;
+}
+
+button:disabled {
+    opacity: 1;
 }
\ No newline at end of file

src/frontend/app/folder/panel/panel-folder.component.html

 <mat-expansion-panel class="folderList" expanded>
     <mat-expansion-panel-header>
         <mat-panel-title>
-            {{lang.folders}}
+            <i class="fa fa-folder"></i>&nbsp;{{lang.folders}}
         </mat-panel-title>
     </mat-expansion-panel-header>
     <folder-tree #folderTree [selectedId]="id" (refreshDocList)="refreshDocList()"></folder-tree>

src/frontend/app/folder/panel/panel-folder.component.scss

@@ -8,7 +8,10 @@
     }
 
     .mat-expansion-panel-header-title {
-        color: rgba(0, 0, 0, 0.54);
+        color: #135F7F;
+        font-weight: bold !important;
+        display: flex;
+        align-items: center;
         font-size: 14px;
         font-weight: 500;
     }