You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2021/02/16 12:12:14 UTC
[incubator-datalab] 02/02: [DATALAB-2290]: Added vertical scrollbar
for groups on project page
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DATALAB-2290
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit d8b61f5e00daf44885a86bf9c8f330dc9c89a700
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Feb 16 14:11:49 2021 +0200
[DATALAB-2290]: Added vertical scrollbar for groups on project page
---
.../project/project-list/project-list.component.html | 14 +++++++++++---
.../project/project-list/project-list.component.scss | 2 +-
.../self-service/src/main/resources/webapp/src/styles.scss | 14 ++++++++++++--
3 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
index db1c207..56e0719 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
@@ -26,9 +26,17 @@
<ng-container matColumnDef="groups">
<th mat-header-cell *matHeaderCellDef class="groups"> Group </th>
<td mat-cell *matCellDef="let element" class="groups">
- <mat-chip-list>
- <mat-chip *ngFor="let group of element.groups" [matTooltip]="group" matTooltipPosition="above" class="ellipsis">{{ group }}</mat-chip>
- </mat-chip-list>
+ <div class="mat-chip-list-wrap scrolling">
+ <mat-chip-list>
+ <mat-chip *ngFor="let group of element.groups"
+ [matTooltip]="group"
+ matTooltipPosition="above"
+ class="ellipsis"
+ >
+ {{ group }}
+ </mat-chip>
+ </mat-chip-list>
+ </div>
</td>
</ng-container>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
index a5f4b13..140feb4 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
@@ -170,7 +170,7 @@ td.settings {
padding: 10px 15px;
}
-.mat-chip{
+.mat-chip {
max-width: 200px !important;
white-space: nowrap;
display: inline-block;
diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss
index b4c110a..f7b94d6 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -61,6 +61,16 @@
height: calc(100% - 48px);
}
+
+.mat-chip-list-wrap {
+ max-height: 120px;
+ overflow: auto;
+ margin-right: 5px;
+ .mat-chip-list-wrapper{
+ margin: 0;
+ }
+}
+
mat-chip.mat-chip {
outline: none;
color: #758ea8;
@@ -390,8 +400,8 @@ input[type='number'] {
.scrolling::-webkit-scrollbar,
.ace_scrollbar::-webkit-scrollbar,
.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar {
- width: 5px;
- height: 5px;
+ width: 3px;
+ height: 3px;
}
#scrolling::-webkit-scrollbar-track,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org