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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected]
