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:26 UTC
[incubator-datalab] branch feat/DATALAB-3048/add-material-tab created (now 7f6c5991e)
This is an automated email from the ASF dual-hosted git repository.
hshpak pushed a change to branch feat/DATALAB-3048/add-material-tab
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
at 7f6c5991e DATALAB-3048- changed view of the shared dialog window
This branch includes the following new commits:
new 7f6c5991e DATALAB-3048- changed view of the shared dialog window
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@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org
[incubator-datalab] 01/01: DATALAB-3048- changed view of the shared dialog window
Posted by hs...@apache.org.
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