From afc1e0bf3f8adeae9af7fdaac9cad1660356693c Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 4 Sep 2019 19:05:55 +0200
Subject: [PATCH] FIX #11641 TIME 1:30 fix refresh folder after aucotomplete +
autoclose basket panel in folder list + fix icon size header and left panel
---
.../app/basket/basket-home.component.html | 4 +-
.../app/basket/basket-home.component.scss | 4 +
.../app/basket/basket-home.component.ts | 1 +
.../folder-document-list.component.ts | 6 +-
.../app/folder/folder-tree.component.html | 155 ++++++++++--------
.../app/folder/folder-tree.component.ts | 2 +
.../folder/panel/panel-folder.component.html | 2 +-
.../folder/panel/panel-folder.component.scss | 4 +
.../app/header/header-left.component.html | 2 +-
.../app/header/header-left.component.scss | 4 +
src/frontend/service/app.service.ts | 21 ++-
11 files changed, 132 insertions(+), 73 deletions(-)
diff --git a/src/frontend/app/basket/basket-home.component.html b/src/frontend/app/basket/basket-home.component.html
index 1233b3710b4..42c31f0f521 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 b530ac7dcb8..6e490a254d4 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 5e4807d917f..a647224c45c 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 76a7a364dd8..1e73f12d0f3 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 27194e6b739..475477856f0 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 7b9e0e8de74..873788bad12 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 a601c9d76e6..104fb582d11 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 44c75d88e07..b4a186883bf 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 5fac3927e3f..a7346f9ae18 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 b58fd3b9583..60736bd2520 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 1d84130845f..792f34db5b3 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;
+ }
}
--
GitLab