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:28 UTC
[incubator-dlab] branch DLAB-1783 created (now 7029b0a)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DLAB-1783
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.
at 7029b0a [DLAB-1783]: Fixed bugs, added file icon, Added autofocus
This branch includes the following new commits:
new 7029b0a [DLAB-1783]: Fixed bugs, added file icon, Added autofocus
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org
[incubator-dlab] 01/01: [DLAB-1783]: Fixed bugs, added file icon,
Added autofocus
Posted by dg...@apache.org.
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