You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by hs...@apache.org on 2022/09/23 08:34:27 UTC
[incubator-datalab] 01/01: DATALAB-3048- changed view of the shared dialog window
This is an automated email from the ASF dual-hosted git repository.
hshpak pushed a commit to branch feat/DATALAB-3048/add-material-tab
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 7f6c5991e80c2e260689c9e330d44dcc49840e69
Author: Hennadii_Shpak <bo...@gmail.com>
AuthorDate: Fri Sep 23 10:40:09 2022 +0300
DATALAB-3048- changed view of the shared dialog window
---
.../image-action-dialog.component.html | 4 +-
.../image-action-dialog.component.scss | 9 +-
.../image-action-dialog.component.ts | 3 +-
.../image-action-dialog.module.ts | 2 +-
.../image-action-dialog/image-action.config.ts | 5 -
.../share-dialog/share-dialog.component.html | 162 ++++++++++-----------
.../share-dialog/share-dialog.component.scss | 14 +-
.../share-dialog/share-dialog.component.ts | 15 +-
.../terminate-dialog.component.html | 2 +-
.../terminate-dialog.component.scss | 1 +
10 files changed, 103 insertions(+), 114 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html
index c531d5423..4b0652343 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html
@@ -25,12 +25,12 @@
</h4>
<button type="button" class="close" (click)="dialogRef.close()">×</button>
</header>
- <section class="content">
+ <section class="content" [ngClass]="isTerminate ? 'terminate-content' : 'share-content'">
<ng-content select="[datalab-share-dialog]">
</ng-content>
<ng-content select="[datalab-terminate-dialog]">
</ng-content>
- <div [hidden]="activeTabConfig && activeTabConfig.shareWith" class="text-center m-top-30 m-bott-10">
+ <div *ngIf="!activeTabIndex" class="text-center m-bott-10">
<button type="button" class="butt mat-raised-button" (click)="dialogRef.close()">No</button>
<button
[disabled]="isShareBtnDisabled"
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss
index ec94d5903..a9d69fead 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss
@@ -18,8 +18,15 @@
*/
.content {
- max-height: 75vh;
margin: 0;
padding: 20px 30px;
font-weight: 600;
}
+
+.share-content {
+ height: 327px;
+}
+
+.terminate-content {
+ max-height: 75vh;
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.ts
index d07f7f47c..5279fefc9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.ts
@@ -33,9 +33,10 @@ const CONFIRM_BUTTON_CONFIG = {
styleUrls: ['./image-action-dialog.component.scss']
})
export class ImageActionDialogComponent implements OnInit {
- @Input() activeTabConfig: DialogWindowTabConfig;
+ @Input() activeTabIndex: boolean;
@Input() isShareBtnDisabled: Boolean;
@Input() sharingDataList: UserData[] = [];
+ @Input() isTerminate: boolean = false;
readonly actionType: typeof ImageActions = ImageActions;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts
index a8e5b976e..db47226b6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts
@@ -38,7 +38,7 @@ import { UnShareWarningComponent } from './unshare-warning/un-share-warning.comp
UnShareWarningComponent
],
imports: [ CommonModule, MaterialModule, FormsModule, ReactiveFormsModule ],
- entryComponents: [TerminateDialogComponent , ShareDialogComponent, UnShareWarningComponent],
+ entryComponents: [ TerminateDialogComponent , ShareDialogComponent, UnShareWarningComponent ],
exports: [ ImageActionDialogComponent ]
})
export class ImageActionDialogModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action.config.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action.config.ts
index 4afac79bb..8c769485a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action.config.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action.config.ts
@@ -21,11 +21,6 @@ export enum SharePlaceholder {
groupOrNameSearchInput = 'Enter user login or group name'
}
-export enum TabName {
- shareImage = 'shareImage',
- shareWith = 'shareWith'
-}
-
export enum UserDataTypeConfig {
group = 'GROUP',
user = 'USER'
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html
index d39160bc7..93c81caee 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html
@@ -18,7 +18,7 @@
-->
<datalab-image-action-dialog
- [activeTabConfig]="activeTabConfig"
+ [activeTabIndex]="activeTabIndex"
[sharingDataList]="sharingDataList"
[isShareBtnDisabled]="!isShareBtnDisabled"
>
@@ -29,95 +29,85 @@
<ng-container *ngIf="(onInputSubscription$ | async)"></ng-container>
<div datalab-share-dialog class="dialog__wrapper">
- <ul class="title__list">
- <li
- class="title__item active-tab"
- [ngClass]="{'active-tab': activeTabConfig.shareImage}"
- (click)="onTabTitle(tabsName.shareImage)"
- >
- <button class="title__btn">
- <h4 class="title">
- SHARE IMAGE
- </h4>
- </button>
- </li>
- <li
- class="title__item"
- [ngClass]="{'active-tab': activeTabConfig.shareWith}"
- (click)="onTabTitle(tabsName.shareWith)"
- >
- <button class="title__btn">
- <h4 class="title">
- SHARED WITH
- </h4>
- </button>
- </li>
- </ul>
+ <mat-tab-group (selectedTabChange)="onTabTitle( )">
+ <mat-tab>
+ <ng-template mat-tab-label>
+ SHARE IMAGE
+ </ng-template>
+ <ng-template matTabContent>
+ <div class="search-input__wrapper">
- <div *ngIf="activeTabConfig.shareImage" class="search-input__wrapper">
-
- <div class="input__wrapper">
- <input
- type="text"
- class="search-input"
- [placeholder]="placeholder.groupOrNameSearchInput"
- [formControl]="addUserDataControl"
- (change)="onChange()"
- (input)="onInputKeyDown()"
- matInput
- [matAutocomplete]="auto"
- #searchUserData
- />
- <mat-autocomplete #auto="matAutocomplete">
- <mat-option
- *ngFor="let user of (searchUserDataDropdownList$ | async)"
- (click)="addUserToTemporaryList(user)"
- [value]="user.value">
- <mat-icon class="user-data__icon">{{user.type === 'GROUP' ? 'people' : 'person'}}</mat-icon>
- {{user.value}}
- </mat-option>
- <mat-option *ngIf="!(searchUserDataDropdownList$ | async)?.length" class="multiple-select ml-10" disabled>
- No results found
- </mat-option>
- </mat-autocomplete>
- <span [hidden]="!isUserDataListEmpty" class="error">
+ <div class="input__wrapper">
+ <input
+ type="text"
+ class="search-input"
+ [placeholder]="placeholder.groupOrNameSearchInput"
+ [formControl]="addUserDataControl"
+ (change)="onChange()"
+ (input)="onInputKeyDown()"
+ matInput
+ [matAutocomplete]="auto"
+ #searchUserData
+ />
+ <mat-autocomplete #auto="matAutocomplete">
+ <mat-option
+ *ngFor="let user of (searchUserDataDropdownList$ | async)"
+ (click)="addUserToTemporaryList(user)"
+ [value]="user.value">
+ <mat-icon class="user-data__icon">{{user.type === 'GROUP' ? 'people' : 'person'}}</mat-icon>
+ {{user.value}}
+ </mat-option>
+ <mat-option *ngIf="!(searchUserDataDropdownList$ | async)?.length" class="multiple-select ml-10" disabled>
+ No results found
+ </mat-option>
+ </mat-autocomplete>
+ <span [hidden]="!isUserDataListEmpty" class="error">
Please enter user login or group name
</span>
- </div>
- <div class="user-list__wrapper scrolling">
- <ul class="user-list user-list__temporary">
- <li
- *ngFor="let entity of (temporaryUserDataList$ | async)"
- class="user-list__item"
- >
- <datalab-share-user-data
- (removeUserData)="onRemoveUserData($event)"
- [userData]="entity"
+ </div>
+ <div class="user-list__wrapper scrolling">
+ <ul class="user-list user-list__temporary">
+ <li
+ *ngFor="let entity of (temporaryUserDataList$ | async)"
+ class="user-list__item"
+ >
+ <datalab-share-user-data
+ (removeUserData)="onRemoveUserData($event)"
+ [userData]="entity"
+ >
+ </datalab-share-user-data>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </ng-template>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>
+ SHARED WITH
+ </ng-template>
+ <ng-template matTabContent>
+ <div class="share-with__wrapper">
+ <div
+ *ngIf="(userDataList$ | async)?.length; else emptyUserList"
+ class="user-list__wrapper scrolling"
>
- </datalab-share-user-data>
- </li>
- </ul>
- </div>
- </div>
-
- <div *ngIf="activeTabConfig.shareWith" class="share-with__wrapper">
- <div
- *ngIf="(userDataList$ | async)?.length; else emptyUserList"
- class="user-list__wrapper scrolling"
- >
- <ul class="user-list user-list__shared">
- <li
- *ngFor="let entity of (userDataList$ | async)"
- class="user-list__item"
- >
- <datalab-share-user-data (removeUserData)="unShare($event)" [userData]="entity"></datalab-share-user-data>
- </li>
- </ul>
+ <ul class="user-list user-list__shared">
+ <li
+ *ngFor="let entity of (userDataList$ | async)"
+ class="user-list__item"
+ >
+ <datalab-share-user-data (removeUserData)="unShare($event)" [userData]="entity"></datalab-share-user-data>
+ </li>
+ </ul>
- </div>
- <ng-template #emptyUserList>
- <p class="empty-state">The image hase not been shared.</p>
- </ng-template>
- </div>
+ </div>
+ <ng-template #emptyUserList>
+ <p class="empty-state">The image hase not been shared.</p>
+ </ng-template>
+ </div>
+ </ng-template>
+ </mat-tab>
+ </mat-tab-group>
</div>
</datalab-image-action-dialog>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss
index 62748a486..353df2c20 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss
@@ -57,7 +57,7 @@
}
&__wrapper {
- height: 149px;
+ padding-top: 30px;
}
}
@@ -90,6 +90,7 @@
}
&__wrapper{
+ margin-bottom: 45px;
overflow-y: scroll;
}
@@ -114,12 +115,7 @@
align-items: center;
height: 200px;
color: #35afd5;
-}
-
-.share-with {
- &__wrapper {
- height: 225px;
- }
+ font-weight: 300;
}
.user-data__icon {
@@ -131,3 +127,7 @@
background-color: #E6E6E6;
color: white;
}
+
+.dialog__wrapper ::ng-deep .mat-tab-label {
+ width: 50%;
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts
index 0cbbc035e..433690308 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts
@@ -18,8 +18,8 @@
*/
import { Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { SharePlaceholder, TabName } from '../image-action.config';
-import { DialogWindowTabConfig, ShareDialogData, UserData } from '../image-action.model';
+import { SharePlaceholder } from '../image-action.config';
+import { ShareDialogData, UserData } from '../image-action.model';
import { FormControl } from '@angular/forms';
import { ImagesService } from '../../../images/images.service';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
@@ -45,16 +45,12 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
@ViewChild('searchUserData') searchUserData: ElementRef;
readonly placeholder: typeof SharePlaceholder = SharePlaceholder;
- readonly tabsName: typeof TabName = TabName;
searchUserDataDropdownList$: Observable<UserData[]>;
userDataList$!: Observable<UserData[]>;
temporaryUserDataList$!: Observable<UserData[]>;
sharingDataList: UserData[] = [];
- activeTabConfig: DialogWindowTabConfig = {
- shareImage: true,
- shareWith: false
- };
+ activeTabIndex: boolean = false;
addUserDataControl: FormControl = new FormControl('');
onInputSubscription$: Observable<UserData[]>;
@@ -107,9 +103,8 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
this.shareDialogService.filterSearchDropdown();
}
- onTabTitle(tabName: keyof DialogWindowTabConfig): void {
- Object.keys(this.activeTabConfig).forEach(item => this.activeTabConfig[item] = false);
- this.activeTabConfig = {...this.activeTabConfig, [tabName]: true};
+ onTabTitle(): void {
+ this.activeTabIndex = !this.activeTabIndex;
}
onRemoveUserData(userData: UserData): void {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html
index bb5c58f2e..d52209ec0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html
@@ -17,7 +17,7 @@
~ under the License.
-->
-<datalab-image-action-dialog>
+<datalab-image-action-dialog [isTerminate]="true">
<div datalab-terminate-dialog class="wrapper">
<div class="terminate-action__wrapper">
<div class="list-header sans terminate-action__header--wrapper">
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss
index 31a155d95..29e2e10a2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss
@@ -63,6 +63,7 @@
}
.question {
+ margin-bottom: 30px;
text-align: center;
color: #718ba6;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org