You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/05/13 14:30:29 UTC
[incubator-dlab] 01/01: [DLAB-1783]: Fixed bugs, added file icon,
Added autofocus
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1783
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 7029b0a9040032f0c4937f155d11c545af39bef1
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Wed May 13 17:30:04 2020 +0300
[DLAB-1783]: Fixed bugs, added file icon, Added autofocus
---
.../resources/webapp/src/app/core/util/patterns.ts | 2 +-
.../bucket-browser/bucket-browser.component.html | 62 ++++----
.../bucket-browser/bucket-browser.component.scss | 161 +++++++++++++++++----
.../bucket-browser/bucket-browser.component.ts | 28 ++--
.../bucket-confirmation-dialog.component.html | 3 +-
.../bucket-confirmation-dialog.component.scss | 7 +-
.../folder-tree/folder-tree.component.html | 3 +-
.../folder-tree/folder-tree.component.ts | 5 +-
8 files changed, 201 insertions(+), 70 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
index dc10b86..2ec9c9d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
@@ -24,6 +24,6 @@ export const PATTERNS = {
url: '[a-zA-Z0-9.://%#&\\.@:%-_\+~#=]*\.[^\s]*[a-zA-Z0-9]/+',
nodeCountPattern: '^[1-9]\\d*$',
integerRegex: '^[0-9]*$',
- folderRegex: "[-A-Za-z0-9!@$%^&*|+=_'~{}<>`:;[ ]+$",
+ folderRegex: /[-A-Za-z0-9!@$%^&*|+=_'~{}<>`:;[(.,\])]+/g,
fullUrl: /^(http?|ftp|https):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+([.:])(\d{4}|com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*\/$/
};
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index 9041be1..eab06fe 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -26,8 +26,9 @@
<!-- <div class="dialog-content tabs">-->
<div class="dialog-content tabs" [hidden]="!path">
<div class="submit m-bott-10 m-top-10">
+ <div class="left-side-butts">
<span [matTooltip]="'You have not permission to upload data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload}}">
- <button mat-raised-button type="button" class="butt action first-btn" [disabled]="!this.bucketStatus.upload || allDisable || isSelectionOpened" (click)="handleFileInput($event)">
+ <button mat-raised-button type="button" class="butt first-btn" [disabled]="!this.bucketStatus.upload || allDisable || isSelectionOpened" (click)="handleFileInput($event)">
<input [ngClass]="{'not-allowed': !this.bucketStatus.upload}" type="file" (change)="handleFileInput($event)" title="" multiple>
Upload files
</button>
@@ -36,7 +37,7 @@
<button
mat-raised-button
type="button"
- class="butt action"
+ class="butt"
(click)="createFolder(selectedFolder)"
[disabled]="!this.bucketStatus.upload || allDisable"
>
@@ -54,18 +55,6 @@
Delete
</button>
</span>
-
-<!-- <div [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">-->
-<!-- <button-->
-<!-- type="button" class="butt"-->
-<!-- mat-raised-button-->
-<!-- (click)="fileAction('download')"-->
-<!-- [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable"-->
-<!-- >-->
-<!-- Download-->
-<!-- </button>-->
-<!-- </div>-->
-
<div class="action-wrapper" [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">
<span class="action-button-wrapper">
<button
@@ -95,6 +84,15 @@
</button>
</div>
</div>
+ </div>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt refresh"
+ (click)="refreshBucket()"
+ >
+ <i class="material-icons">autorenew</i>Refresh
+ </button>
</div>
<p class="path"><span>Bucket path:</span>
@@ -157,17 +155,19 @@
<ul class="folder-tree">
<li *ngFor="let file of folderItems" class="folder-item" >
<div class="folder-item-wrapper" *ngIf="file.children && file.item" (click)="showItem(file)">
- <span *ngIf="this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isFolderSelected}" (click)="toggleSelectedFile(file, 'folder');$event.stopPropagation()" >
- <span class="checked-checkbox" *ngIf="file.isFolderSelected"></span>
- </span>
<div class="name name-folder">
- <i class="material-icons folder-icon" >folder</i>
- <span class="name-wrap"
- matTooltip="{{file.item}}"
- matTooltipPosition="above"
- matTooltipShowDelay="1000"
- [matTooltipClass]="'bucket-item-tooltip'"
- >{{file.item}}</span>
+ <span *ngIf="this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isFolderSelected}" (click)="toggleSelectedFile(file, 'folder');$event.stopPropagation()" >
+ <span class="checked-checkbox" *ngIf="file.isFolderSelected"></span>
+ </span>
+ <i class="material-icons folder-icon folder-name">folder</i>
+ <span class="item-name name-wrap"
+ matTooltip="{{file.item}}"
+ matTooltipPosition="above"
+ matTooltipShowDelay="1000"
+ [matTooltipClass]="'bucket-item-tooltip'"
+ >
+ {{file.item}}
+ </span>
</div>
<div class="size size-folder">-</div>
<div class="date" *ngIf="!file.isDownloading">-</div>
@@ -178,9 +178,9 @@
<div class="folder-item-wrapper" (click)="toggleSelectedFile(file, 'file')" *ngIf="!file.children" [ngClass]="{'no-select': !this.bucketStatus.download && !this.bucketStatus.delete}">
<div class="name name-file">
<span *ngIf="this.bucketStatus.download || this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file, 'file');$event.stopPropagation()" >
-
<span class="checked-checkbox" *ngIf="file.isSelected"></span>
</span>
+ <i class="material-icons folder-icon" >description</i>
<span
class="item-name name-wrap"
[ngClass]="{'removed-checkbox': !this.bucketStatus.download && !this.bucketStatus.delete}"
@@ -209,7 +209,7 @@
</header>
<ul class="upload-files">
<li class="file upload-table-header" *ngIf="addedFiles.length">
- <div class="name ellipsis">File</div>
+ <div class="name ellipsis" >File</div>
<div class="upload-path ellipsis">Path</div>
<div class="size">Size</div>
<div class="state"></div>
@@ -217,7 +217,14 @@
</li>
<li *ngFor="let file of addedFiles" class="file">
<div class="name">
- <span class="ellipsis" matTooltip="{{file.name}}" matTooltipPosition="above">{{file.name}}</span>
+ <span
+ class="ellipsis"
+ matTooltip="{{file.name}}"
+ [matTooltipClass]="'bucket-item-tooltip'"
+ matTooltipPosition="above"
+ >
+ {{file.name}}
+ </span>
</div>
<div class="upload-path">
<span class="ellipsis" matTooltip="{{file.path}}" matTooltipPosition="above">{{file.path}}</span>
@@ -231,6 +238,7 @@
</div>
<div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">close</i></div>
</li>
+ <li id="upload-list"></li>
</ul>
</div>
<!-- <div class="text-center m-top-30 m-bott-20">-->
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
index a03428a..8da014e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
@@ -43,6 +43,7 @@
.action-wrapper{
position: relative;
+
.action-button-wrapper{
position: relative;
width: 160px;
@@ -50,8 +51,10 @@
.mat-raised-button.butt{
margin-bottom: 0;
+
&.actions-btn{
padding-right: 38px;
+
.material-icons{
transition: ease-in-out 1s;
font-size: 25px;
@@ -61,11 +64,12 @@
}
}
}
+
.action-menu{
position: absolute;
margin: 0 10px;
text-align: center;
- //box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+
&-item.mat-raised-button.butt{
z-index: 1;
margin: 0;
@@ -92,17 +96,20 @@
overflow: hidden;
white-space: nowrap;
display: flex;
+
.url{
font-weight: 600;
overflow: hidden;
display: block;
direction: rtl;
+
&-folder{
padding-left: 5px;
padding-right: 5px;
color: #00bcd4;
cursor: pointer;
}
+
&-icon i{
transform: translateY(2px);
font-size: 15px;
@@ -110,23 +117,42 @@
}
}
bottom: 0;
+
.dialog-content{
padding: 0 35px;
}
+
.content-box {
height: 500px;
-
}
.submit{
display: flex;
+ justify-content: space-between;
+ .left-side-butts{
+ display: flex;
+ }
+
.butt{
position: relative;
overflow: hidden;
margin: 10px;
+
&.first-btn{
margin-left: 0;
}
+
+ &.refresh{
+ margin-right: 0;
+ }
+
+ &.action-menu-item{
+ &:hover{
+ color: #00bcd4;
+ background-color: #fafafa;
+ }
+ }
+
input[type="file"] {
position: absolute;
left: 0;
@@ -154,14 +180,14 @@
.bucket-wrapper{
- height: 53vh;
+ height: 57vh;
border: 2px solid rgba(0,0,0,.12);
border-radius: 5px;
display: flex;
width: 100%;
&.added-upload{
- height: 37vh;
+ height: 40vh;
}
.backet-selection{
position: relative;
@@ -169,25 +195,31 @@
border-right: 2px solid rgba(0,0,0,.12);
padding-top: 6px;
transition: .2s;
+
&.opened{
width: 33.3%;
+
.button-wrapper {
text-align: right;
left: auto;
+
i{
padding-right: 3px;
}
}
}
+
.button-wrapper {
position: absolute;
left: 0;
right: 0;
top: 9px;
text-align: center;
+
i{
cursor: pointer;
font-size: 18px;
+
&:hover{
color: #00bcd4;
}
@@ -198,6 +230,7 @@
color: rgba(0, 0, 0, 0.87);
padding-left: 20px;
line-height: 24px;
+
&-item{
&:hover{
color: #00bcd4;
@@ -206,25 +239,27 @@
}
}
}
+
.navigation{
transition: .2s;
width: 31.3%;
height: 100%;
overflow: auto;
padding-top: 6px;
+
&.selection-opened{
width: 66.7%;
}
- .folder-tree{
+ .folder-tree{
.folder{
line-height: 30px;
}
}
+
.mat-tree-node{
min-height: auto;
}
-
}
.directory{
@@ -234,54 +269,72 @@
font-weight: 400;
position: relative;
border-left: 2px solid rgba(0,0,0,.12);
+
&.selection-opened{
display: none;
}
+
.folder-tree{
- overflow: auto;
+ overflow-x: auto;
+ overflow-y: overlay;
max-height: 100%;
+
.name{
flex:2;
display: flex;
align-items: center;
overflow: hidden;
+
.name-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10px;
}
+
&-folder{
- padding-left: 9px;
- span{
- padding-left: 5px;
+ .folder-name{
+ padding-left: 8px;
}
}
+
&-file{
- //padding-left: 4px;
+ i{
+ transform: translateX(6px);
+ }
span.item-name{
- padding-left: 9px;
+ padding-left: 8px;
&.removed-checkbox{
padding-left: 0;
}
}
}
}
+
.size{
flex:1;
+
+ &-folder{
+ padding-left: 4px;
+ }
}
+
.date{
flex:1;
+
.th_date{
font-size: 13px;
}
}
+
.progress-wrapper{
flex:1;
+
.progres{
border: 1px solid rgba(0,0,0,.12);
height: 15px;
position: relative;
+
.bar{
position: absolute;
top: 0;
@@ -289,6 +342,7 @@
left: 0;
width: 0;
background-color: #00bcd4;
+
&.full{
width: 100%;
transition: 5s ease-in-out;
@@ -296,20 +350,24 @@
}
}
}
+
.material-icons.close{
font-size: 15px;
margin: 0 10px;
cursor: pointer;
}
+
.action {
display: flex;
justify-content: space-around;
width: 100%;
+
.add-file {
overflow: hidden;
min-width: 100px ;
height: 30px;
position: relative;
+
input{
position: absolute;
left: 0;
@@ -320,20 +378,20 @@
}
}
}
-
}
}
.folder-tree {
- padding: 20px 30px;
+ padding: 0px 30px;
padding-top: 6px;
}
.folder-item{
display: flex;
align-items: center;
+
&.t_header{
- top: -33px;
+ top: -41px;
position: absolute;
left: 0;
right: 0;
@@ -343,9 +401,10 @@
}
.th_name{
- padding-left: 25px;
+ padding-left: 29px;
font-size: 14px;
cursor: pointer;
+
&:hover{
color: #00bcd4;
}
@@ -353,16 +412,20 @@
.filter-files{
width: 100%;
- padding: 3px 26px;
+ padding: 3px 0;
+ padding-left: 3px;
display: flex;
align-items: center;
+
.filter-name{
font-size: 14px;
height: 20px;
width: 90%;
}
+
span{
transform: translateY(2px);
+
&:hover{
i{
color: #00bcd4;
@@ -391,12 +454,19 @@
align-items: center;
cursor: pointer;
color: rgba(0,0,0,.87);
+
&.header-item{
- //pointer-events: none;
+ cursor: auto;
+
+ .name{
+ margin-left: -3px;
+ }
}
+
i{
color: rgb(232, 232, 232);
}
+
&:hover:not(.header-wrapper){
color: #00bcd4;
transition: .3s ease-in-out;
@@ -404,17 +474,22 @@
color: #00bcd4;
transition: .3s ease-in-out;
}
+
.empty-checkbox{
border-color: #00bcd4
}
+
.progress-wrapper{
+
.progres{
border-color: #00bcd4 !important;
}
}
}
+
&.no-select{
pointer-events: none;
+
.name-wrap{
padding-left: 29px !important;
}
@@ -427,8 +502,6 @@ input[type='file'] {
opacity:1
}
-
-
.empty-checkbox {
min-width: 16px;
width: 16px;
@@ -437,10 +510,12 @@ input[type='file'] {
border: 2px solid lightgrey;
margin-top: 2px;
position: relative;
+
&.checked {
border-color: #35afd5;
background-color: #35afd5;
}
+
.checked-checkbox {
top: 0;
left: 4px;
@@ -464,11 +539,11 @@ input[type='file'] {
}
.upload-window{
- margin-top: 20px;
+ margin-top: 2vh;
border: 2px solid rgba(0,0,0,.12);
border-radius: 5px;
background-color: white;
- min-height: 100px;
+ height: 15vh;
color: black;
.upload-header{
@@ -503,6 +578,7 @@ input[type='file'] {
outline: none;
cursor: pointer;
transition: all 0.45s ease-in-out;
+
&:hover{
color: #36afd5;
}
@@ -511,16 +587,18 @@ input[type='file'] {
}
.upload-files{
padding: 5px;
- height: 100px;
+ height: calc(100% - 30px);
overflow: auto;
.file{
padding: 2px;
display: flex;
font-size: 12px;
position: relative;
+
&.upload-table-header{
font-size: 11px;
}
+
.name{
flex:12;
padding-right: 5px;
@@ -579,20 +657,47 @@ input[type='file'] {
}
}
+@media only screen and (max-height: 920px) {
+ .bucket-wrapper {
+ height: 55vh;
+ &.added-upload{
+ height: 38vh;
+ }
+ }
+}
+
@media only screen and (max-height: 840px) {
.bucket-wrapper {
- height: 45vh;
+ height: 53vh;
&.added-upload{
- height: 30vh;
+ height: 36vh;
}
}
}
-@media only screen and (max-height: 690px) {
+@media only screen and (max-height: 760px) {
.bucket-wrapper {
- height: 40vh;
+ height: 51vh;
&.added-upload{
- height: 25vh;
+ height: 34vh;
+ }
+ }
+}
+
+@media only screen and (max-height: 700px) {
+ .bucket-wrapper {
+ height: 49vh;
+ &.added-upload{
+ height: 32vh;
+ }
+ }
+}
+
+@media only screen and (max-height: 650px) {
+ .bucket-wrapper {
+ height: 47vh;
+ &.added-upload{
+ height: 30vh;
}
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
index 963497c..5f549a2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
@@ -104,13 +104,15 @@ export class BucketBrowserComponent implements OnInit {
};
if (existFile && askForAll) {
const result = await this.openResolveDialog(existFile);
- askForAll = !result.forAll;
- if (result.forAll && !result.replaceObject) {
- skipAll = true;
- }
- if (result.replaceObject) {
- this.addedFiles.push(uploadItem);
- this.uploadNewFile(uploadItem);
+ if (result) {
+ askForAll = !result.forAll;
+ if (result.forAll && !result.replaceObject) {
+ skipAll = true;
+ }
+ if (result.replaceObject) {
+ this.addedFiles.push(uploadItem);
+ this.uploadNewFile(uploadItem);
+ }
}
} else if (!existFile || (existFile && !askForAll && !skipAll)) {
this.addedFiles.push(uploadItem);
@@ -119,6 +121,10 @@ export class BucketBrowserComponent implements OnInit {
}
}
event.target.value = '';
+ setTimeout(() => {
+ const element = document.querySelector('#upload-list');
+ element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
+ }, 0);
}
async openResolveDialog(existFile) {
@@ -202,15 +208,19 @@ export class BucketBrowserComponent implements OnInit {
this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
file.isUploading = false;
file.uploaded = true;
- this.toastr.success('File successfully uploaded!', 'Success!');
+ // this.toastr.success('File successfully uploaded!', 'Success!');
}, error => {
- this.toastr.error(error.message || 'File uploading error!', 'Oops!');
+ // this.toastr.error(error.message || 'File uploading error!', 'Oops!');
file.errorUploading = true;
file.isUploading = false;
}
);
}
+ public refreshBucket() {
+ this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
+ }
+
public createFolder(folder) {
this.allDisable = true;
this.folderTreeComponent.addNewItem(folder, '', false);
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
index de5fef5..c40fba8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
@@ -38,6 +38,7 @@
<mat-list-item *ngFor="let object of data.items" class="delete-item">
<div class="object">
<span *ngIf="object['children']"><i class="material-icons folder-icon" >folder</i></span>
+ <span *ngIf="!object['children']"><i class="material-icons folder-icon file-icon" >description</i></span>
<div class="ellipsis"
matTooltip="{{object['item']}}"
matTooltipPosition="above"
@@ -63,7 +64,7 @@
matTooltipPosition="above"
matTooltipShowDelay="1000"
[matTooltipClass]="'bucket-item-tooltip'"
- >{{data.items}}</span> already exist in selected folder. How would you like to resolve this conflict?</p>
+ >{{data.items}}</span> already exists in selected folder. How would you like to resolve this conflict?</p>
<mat-radio-group
aria-labelledby="upload-radio-group-label"
class="upload-radio-group"
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
index 188c4d6..a64bc54 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
@@ -21,7 +21,12 @@
.folder-icon{
color: rgb(232, 232, 232);
- margin-right: 5px;
+ margin-right: 3px;
+ transform: translateX(-2px);
+ &.file-icon{
+ transform: translateX(-4px);
+ margin-right: -2px;
+ }
}
h3{
margin-bottom: 20px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
index d1de799..844ac2b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
@@ -8,7 +8,7 @@
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding matTreeNodePaddingIndent="17" class="input-node">
- <form class="add-folder-form">
+ <form class="add-folder-form" id="folder-form">
<mat-form-field>
<mat-label>New folder</mat-label>
<input matInput #itemValue [formControl]="folderFormControl" [errorStateMatcher]="matcher">
@@ -20,7 +20,6 @@
</mat-error>
<mat-error *ngIf="folderFormControl.hasError('isDuplicate')">
Folder with this name already exists
-
</mat-error>
</mat-form-field>
<button (click)="saveNode(node, itemValue.value)"
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
index 91242eb..c600d54 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
@@ -230,9 +230,12 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
private addNewItem(node: TodoItemFlatNode, file, isFile, path) {
const parentNode = this.flatNodeMap.get(node);
-
this.bucketDataService.insertItem(parentNode!, file, isFile);
this.treeControl.expand(node);
+ setTimeout(() => {
+ const element = document.querySelector('#folder-form');
+ element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
+ }, 0);
}
private removeItem(node: TodoItemFlatNode) {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org