diff --git a/src/frontend/app/basket/basket-home.component.html b/src/frontend/app/basket/basket-home.component.html index 1233b3710b4811f9613515074a17b748c7b053a0..42c31f0f521f3d3a235ee2f959faa0022c10f0d9 100755 --- a/src/frontend/app/basket/basket-home.component.html +++ b/src/frontend/app/basket/basket-home.component.html @@ -1,9 +1,9 @@ <mat-divider *ngIf="homeData.regroupedBaskets.length > 0 || homeData.assignedBaskets.length > 0"> </mat-divider> -<mat-expansion-panel class="basketList" expanded *ngIf="homeData.regroupedBaskets.length > 0 || homeData.assignedBaskets.length > 0"> +<mat-expansion-panel class="basketList" [expanded]="appService.getStateBasketMenu()" *ngIf="homeData.regroupedBaskets.length > 0 || homeData.assignedBaskets.length > 0"> <mat-expansion-panel-header> <mat-panel-title> - <i class="fa fa-inbox"></i> {{lang.myBaskets}} + <i class="fa fa-inbox panelIconMenu"></i> {{lang.myBaskets}} </mat-panel-title> </mat-expansion-panel-header> <mat-form-field floatLabel="never" appearance="outline" class="basketsFilter" style="padding-left:20px;padding-right:20px;font-size: 11px;"> diff --git a/src/frontend/app/basket/basket-home.component.scss b/src/frontend/app/basket/basket-home.component.scss index b530ac7dcb898ee48d1b3d91e261e818f8a4845e..6e490a254d4d7ef0de62a3c5b34a34721ee41bcb 100644 --- a/src/frontend/app/basket/basket-home.component.scss +++ b/src/frontend/app/basket/basket-home.component.scss @@ -56,4 +56,8 @@ padding : 0px; padding-bottom: 5px; } +} + +.panelIconMenu { + font-size: 22px; } \ No newline at end of file diff --git a/src/frontend/app/basket/basket-home.component.ts b/src/frontend/app/basket/basket-home.component.ts index 5e4807d917f30d894b525cdf5aecafece2d7ab17..a647224c45cd7ee730d58a9edf728e1c8aef4db2 100755 --- a/src/frontend/app/basket/basket-home.component.ts +++ b/src/frontend/app/basket/basket-home.component.ts @@ -22,6 +22,7 @@ export class BasketHomeComponent implements OnInit { basketId: '' }; @Input() snavL: MatSidenav; + @Input('opened') opened: boolean; @Output('refreshEvent') refreshEvent = new EventEmitter<string>(); constructor( diff --git a/src/frontend/app/folder/document-list/folder-document-list.component.ts b/src/frontend/app/folder/document-list/folder-document-list.component.ts index 76a7a364dd86015f53f75a4546b35b344891e599..1e73f12d0f3a6910ac4f2244b3c249bbb899c4aa 100644 --- a/src/frontend/app/folder/document-list/folder-document-list.component.ts +++ b/src/frontend/app/folder/document-list/folder-document-list.component.ts @@ -84,7 +84,10 @@ export class FolderDocumentListComponent implements OnInit { allResInBasket: number[] = []; selectedDiffusionTab: number = 0; folderInfo: any = { - id: 0 + id: 0, + 'label': '', + 'ownerDisplayName': '', + 'entitiesSharing': [] }; private destroy$ = new Subject<boolean>(); @@ -115,6 +118,7 @@ export class FolderDocumentListComponent implements OnInit { } ngOnInit(): void { + this.appService.openBasketMenu(false); this.loading = false; this.http.get("../../rest/home") diff --git a/src/frontend/app/folder/folder-tree.component.html b/src/frontend/app/folder/folder-tree.component.html index 27194e6b7398bc962b722a9f038498bb917182f6..475477856f07e9f0efc668132d05d50c72667242 100644 --- a/src/frontend/app/folder/folder-tree.component.html +++ b/src/frontend/app/folder/folder-tree.component.html @@ -1,6 +1,8 @@ <div class="folderTools"> <div class="filter"> - <plugin-autocomplete [size]="'small'" [labelPlaceholder]="lang.searchFolder" [routeDatas]="['/rest/autocomplete/folders']" [targetSearchKey]="'idToDisplay'" (triggerEvent)="goTo($event)"></plugin-autocomplete> + <plugin-autocomplete [size]="'small'" [labelPlaceholder]="lang.searchFolder" + [routeDatas]="['/rest/autocomplete/folders']" [targetSearchKey]="'idToDisplay'" + (triggerEvent)="goTo($event)"></plugin-autocomplete> </div> <div> <button mat-icon-button color="accent" title="{{lang.addRootFolder}}" (click)="toggleInput()"> @@ -13,79 +15,98 @@ <form> <mat-form-field floatLabel="never" style="width: 100%;"> <input matInput id="itemValue" #itemValue placeholder="{{lang.addRootFolder}}"> - <button type="submit" matSuffix mat-icon-button (click)="createRoot(itemValue.value);createRootNode = !createRootNode" [disabled]="itemValue.value === ''"> + <button type="submit" matSuffix mat-icon-button + (click)="createRoot(itemValue.value);createRootNode = !createRootNode" + [disabled]="itemValue.value === ''"> + <mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon> + </button> + </mat-form-field> + </form> + </mat-list-item> +</mat-list> +<mat-nav-list> + <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> + <!-- This is the tree node template for leaf nodes --> + <mat-tree-node cdkDropList [id]="'folder-list-'+node.id" + cdkDropListConnectedTo="['document-list','folder-list']" (cdkDropListDropped)="drop($event, node)" + (cdkDropListEntered)="dragEnter(node)" (cdkDropListExited)="node.drag=false" [@hideShow] + *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="20px"> + <!-- use a disabled button to provide padding for tree leaf --> + <button class="expandButton" mat-icon-button disabled></button> + <a mat-list-item disableRipple class="folderTreeItem" [class.selectedFolder]="node.selected" + (mouseenter)="showAction(node)" (mouseleave)="hideAction(node)" (click)="selectFolder(node)"> + <span style="width: 90%;overflow: hidden;text-overflow: ellipsis;"> + <span class="treeLabel" [title]="node.label" [class.drag]="node.drag"> + <i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> + {{node.label}} + </span> + </span> + <button mat-icon-button [matMenuTriggerFor]="menu" + (click)="$event.stopPropagation();showAction(node);checkRights(node);" [disabled]="!node.showAction" + style="position: absolute;right:0px;"> + <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon> + <span *ngIf="!node.showAction" class="countResources" [class.empty]="node.countResources === 0"> + {{node.countResources}} + </span> + </button> + <mat-menu #menu="matMenu"> + <button mat-menu-item [disabled]="createItemNode || !node.canAdd" + (click)="addNewItem(node)">{{lang.addSubFolder}}</button> + <button mat-menu-item (click)="deleteNode(node)" [disabled]="!node.edition">{{lang.delete}}</button> + <button mat-menu-item (click)="openFolderAdmin(node)" + [disabled]="!node.edition">{{lang.update}}</button> + </mat-menu> + </a> + </mat-tree-node> + <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding matTreeNodePaddingIndent="0px"> + <form> + <mat-form-field floatLabel="never" style="width: 100%;padding-left: 10px;padding-right: 10px;"> + <input matInput id="itemValue" #itemValue placeholder="{{lang.addFolder}}..."> + <button type="submit" matSuffix mat-icon-button (click)="saveNode(node, itemValue.value)" + [disabled]="itemValue.value === ''"> <mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon> </button> </mat-form-field> </form> - </mat-list-item> - </mat-list> - <mat-nav-list> - <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> - <!-- This is the tree node template for leaf nodes --> - <mat-tree-node cdkDropList [id]="'folder-list-'+node.id" cdkDropListConnectedTo="['document-list','folder-list']" (cdkDropListDropped)="drop($event, node)" (cdkDropListEntered)="dragEnter(node)" (cdkDropListExited)="node.drag=false" [@hideShow] *matTreeNodeDef="let node" + </mat-tree-node> + <!-- This is the tree node template for expandable nodes --> + <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"> - <!-- use a disabled button to provide padding for tree leaf --> - <button class="expandButton" mat-icon-button disabled></button> -<a mat-list-item disableRipple class="folderTreeItem" [class.selectedFolder]="node.selected" (mouseenter)="showAction(node)" (mouseleave)="hideAction(node)" (click)="selectFolder(node)"> - <span style="width: 90%;overflow: hidden;text-overflow: ellipsis;"> - <span class="treeLabel" [title]="node.label" [class.drag]="node.drag"> - <i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> {{node.label}} - </span> + <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="folderTreeItem" [class.selectedFolder]="node.selected" + (mouseleave)="hideAction(node)" (mouseenter)="showAction(node)" (click)="selectFolder(node)"> + <span style="width: 90%;overflow: hidden;text-overflow: ellipsis;"> + <span class="treeLabel" [title]="node.label" [class.drag]="node.drag"> + <i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> + {{node.label}} </span> - <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();showAction(node);checkRights(node);" [disabled]="!node.showAction" style="position: absolute;right:0px;"> - <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon> - <span *ngIf="!node.showAction" class="countResources" [class.empty]="node.countResources === 0"> - {{node.countResources}} - </span> - </button> - <mat-menu #menu="matMenu"> - <button mat-menu-item [disabled]="createItemNode || !node.canAdd" (click)="addNewItem(node)">{{lang.addSubFolder}}</button> - <button mat-menu-item (click)="deleteNode(node)" [disabled]="!node.edition">{{lang.delete}}</button> - <button mat-menu-item (click)="openFolderAdmin(node)" [disabled]="!node.edition">{{lang.update}}</button> - </mat-menu> - </a> - </mat-tree-node> - <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding matTreeNodePaddingIndent="0px"> - <form> - <mat-form-field floatLabel="never" style="width: 100%;padding-left: 10px;padding-right: 10px;"> - <input matInput id="itemValue" #itemValue placeholder="{{lang.addFolder}}..."> - <button type="submit" matSuffix mat-icon-button (click)="saveNode(node, itemValue.value)" [disabled]="itemValue.value === ''"> - <mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon> - </button> - </mat-form-field> - </form> - </mat-tree-node> - <!-- This is the tree node template for expandable nodes --> - <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" 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="folderTreeItem" [class.selectedFolder]="node.selected" (mouseleave)="hideAction(node)" (mouseenter)="showAction(node)" (click)="selectFolder(node)"> - <span style="width: 90%;overflow: hidden;text-overflow: ellipsis;"> - <span class="treeLabel" [title]="node.label" [class.drag]="node.drag"> - <i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> {{node.label}} - </span> - </span> - <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();checkRights(node);" [disabled]="!node.showAction" style="position: absolute;right:0px;"> - <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon> - <span *ngIf="!node.showAction" class="countResources" [class.empty]="node.countResources === 0"> + </span> + <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();checkRights(node);" + [disabled]="!node.showAction" style="position: absolute;right:0px;"> + <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon> + <span *ngIf="!node.showAction" class="countResources" [class.empty]="node.countResources === 0"> {{node.countResources}} - </span> - </button> - <mat-menu #menu="matMenu"> - <button mat-menu-item [disabled]="createItemNode || !node.canAdd" (click)="addNewItem(node)">{{lang.addSubFolder}}</button> - <button mat-menu-item (click)="deleteNode(node)" [disabled]="!node.edition">{{lang.delete}}</button> - <button mat-menu-item (click)="openFolderAdmin(node)" [disabled]="!node.edition">{{lang.update}}</button> - </mat-menu> - </a> - </mat-tree-node> - </mat-tree> - </mat-nav-list> - <!--<mat-nav-list> + </span> + </button> + <mat-menu #menu="matMenu"> + <button mat-menu-item [disabled]="createItemNode || !node.canAdd" + (click)="addNewItem(node)">{{lang.addSubFolder}}</button> + <button mat-menu-item (click)="deleteNode(node)" [disabled]="!node.edition">{{lang.delete}}</button> + <button mat-menu-item (click)="openFolderAdmin(node)" + [disabled]="!node.edition">{{lang.update}}</button> + </mat-menu> + </a> + </mat-tree-node> + </mat-tree> +</mat-nav-list> +<!--<mat-nav-list> <mat-list-item role="listitem" disableRipple (click)="toggleInput()" class="more"> <mat-icon class="fa {{createRootNode ? 'fa-chevron-up' : 'fa-chevron-down'}}"></mat-icon> {{createRootNode ? lang.less : lang.more}} </mat-list-item> - </mat-nav-list>--> + </mat-nav-list>--> \ No newline at end of file diff --git a/src/frontend/app/folder/folder-tree.component.ts b/src/frontend/app/folder/folder-tree.component.ts index 7b9e0e8de74e8065b84f910e80daa56db8c4ab86..873788bad127c8af51d2d14de4e58182a58e0f0b 100644 --- a/src/frontend/app/folder/folder-tree.component.ts +++ b/src/frontend/app/folder/folder-tree.component.ts @@ -447,6 +447,8 @@ export class FolderTreeComponent implements OnInit { } goTo(folder: any) { + this.seletedId = folder.id; + this.getFolders(); this.router.navigate(["/folders/" + folder.id]); } } diff --git a/src/frontend/app/folder/panel/panel-folder.component.html b/src/frontend/app/folder/panel/panel-folder.component.html index a601c9d76e6640b5a3fcbf683a9679ffcaaec453..104fb582d1137e646254f0a2df6de05926ef28bd 100644 --- a/src/frontend/app/folder/panel/panel-folder.component.html +++ b/src/frontend/app/folder/panel/panel-folder.component.html @@ -1,7 +1,7 @@ <mat-expansion-panel class="folderList" expanded> <mat-expansion-panel-header> <mat-panel-title> - <i class="fa fa-folder"></i> {{lang.folders}} + <i class="fa fa-folder panelIconMenu"></i> {{lang.folders}} </mat-panel-title> </mat-expansion-panel-header> <folder-tree #folderTree [selectedId]="id" (refreshDocList)="refreshDocList()"></folder-tree> diff --git a/src/frontend/app/folder/panel/panel-folder.component.scss b/src/frontend/app/folder/panel/panel-folder.component.scss index 44c75d88e07660317364d2e30896bff5dc1c6b4f..b4a186883bf60692571c09c3d3b2958c99cc7460 100644 --- a/src/frontend/app/folder/panel/panel-folder.component.scss +++ b/src/frontend/app/folder/panel/panel-folder.component.scss @@ -24,4 +24,8 @@ font-size: 12px; font-weight: bold; } +} + +.panelIconMenu { + font-size: 22px; } \ No newline at end of file diff --git a/src/frontend/app/header/header-left.component.html b/src/frontend/app/header/header-left.component.html index 5fac3927e3fe23f8d992226bc21bf3d893e60660..a7346f9ae18fcbb8cc8ddb451804e9bba87dacd7 100644 --- a/src/frontend/app/header/header-left.component.html +++ b/src/frontend/app/header/header-left.component.html @@ -2,5 +2,5 @@ <button *ngIf="!snavLeft.opened" mat-icon-button (click)="snavLeft.open()" style="font-size:20px;"> <mat-icon class="fa fa-stream"></mat-icon> </button> - <i *ngIf="headerService.headerMessageIcon !== ''" class="{{headerService.headerMessageIcon}}"></i> {{headerService.headerMessage}} <span class="admin-toolbar-title-small">{{headerService.subHeaderMessage}}</span> + <i *ngIf="headerService.headerMessageIcon !== ''" class="{{headerService.headerMessageIcon}} headerIcon"></i> {{headerService.headerMessage}} <span class="admin-toolbar-title-small">{{headerService.subHeaderMessage}}</span> </div> \ No newline at end of file diff --git a/src/frontend/app/header/header-left.component.scss b/src/frontend/app/header/header-left.component.scss index b58fd3b9583fdbacd8ad3b876482bcaac6bf85e9..60736bd2520f9719e8e7f81a45e0d622fb2a2499 100644 --- a/src/frontend/app/header/header-left.component.scss +++ b/src/frontend/app/header/header-left.component.scss @@ -4,4 +4,8 @@ margin-left: -35px; margin-top: -10px; } +} + +.headerIcon { + font-size: 22px; } \ No newline at end of file diff --git a/src/frontend/service/app.service.ts b/src/frontend/service/app.service.ts index 1d84130845f5725b2cdc9e1ece67cd0145b89844..792f34db5b3ef1c5e4fab5bc1cb5f2f35130dc7b 100644 --- a/src/frontend/service/app.service.ts +++ b/src/frontend/service/app.service.ts @@ -9,6 +9,9 @@ export class AppService { currentUser: any; + isBasketMenuOpen: boolean = true; + isFolderMenuOpen: boolean = true; + constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) { this.mobileQuery = media.matchMedia('(max-width: 768px)'); this._mobileQueryListener = () => changeDetectorRef.detectChanges(); @@ -29,5 +32,21 @@ export class AppService { ngOnDestroy(): void { this.mobileQuery.removeListener(this._mobileQueryListener); - } + } + + openBasketMenu(state: boolean) { + return this.isBasketMenuOpen = state; + } + + openFolderMenu(state: boolean) { + return this.isFolderMenuOpen = state; + } + + getStateBasketMenu() { + return this.isBasketMenuOpen; + } + + getStateFolderMenu() { + return this.isFolderMenuOpen; + } }