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 2020/12/16 12:26:42 UTC

[incubator-datalab] 05/06: COde refactoring 14/12

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DATALAB-2182
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git

commit f40997ea751ee5db48193ae87abc0a3665a8221a
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Dec 14 19:01:10 2020 +0200

    COde refactoring 14/12
---
 .../src/main/resources/webapp/angular.json         |   2 +-
 .../src/app/core/services/localization.service.ts  |   6 +-
 .../bucket-browser/bucket-browser.component.html   |   4 +-
 .../bucket-browser/bucket-browser.component.scss   | 291 +--------------------
 .../bucket-browser/bucket-browser.component.ts     |   2 +-
 .../bucket-browser/upload-window.component.scss    | 196 ++++++++++++++
 .../install-libraries.component.scss               | 242 -----------------
 .../libraries-info.component.scss                  | 261 ++++++++++++++++++
 .../resources-grid/resources-grid.component.scss   | 111 +-------
 .../webapp/src/assets/styles/_dialogs.scss         |   8 -
 .../resources/webapp/src/assets/styles/_theme.scss |  13 +-
 11 files changed, 482 insertions(+), 654 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/angular.json b/services/self-service/src/main/resources/webapp/angular.json
index ea25464..8dd6228 100644
--- a/services/self-service/src/main/resources/webapp/angular.json
+++ b/services/self-service/src/main/resources/webapp/angular.json
@@ -11,7 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": ["chart.js"],
+            "allowedCommonJsDependencies": ["chart.js", "ng-daterangepicker", "moment-timezone"],
             "aot": true,
             "outputPath": "dist",
             "index": "src/index.html",
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts
index 7aa9a0a..59793b1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts
@@ -30,9 +30,12 @@ export class LocalizationService {
   public timezone = _moment().format('Z');
   private _locale;
 
-  constructor() { }
+  constructor() {
+
+  }
 
   get locale() {
+
     if (!this._locale) {
       let locale = window.navigator.language;
       if (locale.indexOf('-') !== -1 && locale !== 'en-GB') {
@@ -45,6 +48,7 @@ export class LocalizationService {
 
   public static registerCulture(culture: string) {
     console.log(culture);
+
     if (culture.indexOf('-') !== -1 && culture !== 'en-GB') {
       culture = culture.substr(0, culture.indexOf('-'));
     }
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 fd4a925..14ec34a 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
@@ -54,7 +54,7 @@
         Delete
       </button>
       </span>
-      <div class="action-wrapper" >
+      <div class="action-select-wrapper" >
         <span class="action-button-wrapper">
           <button
             type="button" class="butt actions-btn"
@@ -215,7 +215,7 @@
            <button type="button" class="close" (click)="closeUploadWindow()" [disabled]="isFileUploading" [ngClass]="{'not-allow': isFileUploading}" >&times;</button>
         </span>
       </header>
-      <ul class="upload-files">
+      <ul class="upload-files scrolling">
         <li class="file upload-table-header" *ngIf="addedFiles.length">
           <div class="name ellipsis" >File</div>
           <div class="second-block">
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 4a2bc04..fdde7ec 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
@@ -42,54 +42,6 @@
     }
   }
 
-  .action-wrapper{
-    position: relative;
-
-    .action-button-wrapper{
-      position: relative;
-      width: 160px;
-    }
-
-    .mat-raised-button.butt{
-      margin-bottom: 0;
-
-      &.actions-btn{
-        padding-right: 38px;
-
-        .material-icons{
-          transition: ease-in-out 1s;
-          font-size: 25px;
-          position: absolute;
-          top: 7px;
-          right: 30px;
-        }
-      }
-    }
-
-    .action-menu{
-      position: absolute;
-      margin: 0 10px;
-      text-align: center;
-
-      &-item.mat-raised-button.butt{
-        z-index: 1;
-        margin: 0;
-        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 0px 0px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-        width: 160px;
-        padding: 0 20px;
-        border-radius: 0;
-        font-style: normal;
-        font-weight: 600;
-        font-size: 15px;
-        font-family: 'Open Sans', sans-serif;
-        color: #577289;
-        position: relative;
-        overflow: hidden;
-        line-height: 36px;
-      }
-    }
-  }
-
   .path{
     margin: 0 4px 30px 0;
     padding: 4px 4px 4px 0;
@@ -143,7 +95,7 @@
       display: flex;
     }
 
-    .butt{
+    .butt:not(.action-menu-item){
       position: relative;
       overflow: hidden;
       margin: 10px;
@@ -181,15 +133,6 @@
           }
         }
       }
-
-      input[type="file"] {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        opacity: 0;
-      }
     }
   }
 }
@@ -282,6 +225,7 @@
       overflow-x: auto;
       overflow-y: overlay;
       max-height: 100%;
+      padding: 6px 15px 15px 15px;
 
       .name{
         width: 60%;
@@ -308,6 +252,7 @@
           }
           span.item-name{
             padding-left: 4px;
+
             &.removed-checkbox{
               padding-left: 4px;
             }
@@ -340,36 +285,9 @@
         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;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            opacity: 0;
-          }
-        }
-      }
     }
   }
 
-  .folder-tree {
-    padding: 0 15px;
-    padding-top: 6px;
-  }
-
   .folder-item{
      display: flex;
      align-items: center;
@@ -470,216 +388,13 @@
          }
        }
      }
-   }
-
-input[type='file'] {
-  opacity:1
-}
-
-.empty-checkbox {
-  min-width: 16px;
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  border: 2px solid lightgrey;
-  margin-top: 2px;
-  position: relative;
-
-  &.checked {
-    border-color: #35afd5;
-    background-color: #35afd5;
-  }
-
-  .checked-checkbox {
-    top: 0;
-    left: 4px;
-    width: 5px;
-    height: 10px;
-    border-bottom: 2px solid white;
-    border-right: 2px solid white;
-    position: absolute;
-    transform: rotate(45deg);
   }
-}
-
-.upload-window{
-  margin-top: 2vh;
-  border: 2px solid rgba(0,0,0,.12);
-  border-radius: 5px;
-  background-color: white;
-  height: 15vh;
-  color: black;
-
-  .upload-header{
-    padding-left: 8px;
-    background: #f6fafe;
-    height: 30px;
-    line-height: 30px;
-    position: relative;
-
-    .modal-title {
-      font-weight: 500;
-      color: #455c74;
-      font-size: 13px;
-      background: #f6fafe;
-  }
-
-    .close{
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 30px;
-      width: 30px;
-      font-size: 20px;
-      font-weight: 300;
-      border: 0;
-      background: none;
-      color: #577289;
-      outline: none;
-      cursor: pointer;
-      transition: all 0.45s ease-in-out;
-
-      &:hover{
-        color: #36afd5;
-      }
-    }
-
-  }
-
-  .upload-files{
-    padding: 5px 0;
-    height: calc(100% - 30px);
-    overflow: auto;
-    overflow-y: overlay;
-    width: 100%;
-    .file{
-      padding: 2px;
-      display: flex;
-      font-size: 12px;
-      position: relative;
-
-      &.upload-table-header{
-        font-size: 11px;
-      }
-
-      .name{
-        width: 33.3%;
-        padding-left: 5px;
-        position: relative;
-        display: flex;
-        span{
-          position: absolute;
-          max-width: calc(100% + 30px);
-        }
-      }
-
-      .second-block{
-        width: 66.7%;
-        display: flex;
-        padding: 0 14px 0 17px;
-        .upload-path{
-          width: 60%;
-          padding-left: 24px;
-          padding-right: 1%;
-          display: flex;
-        }
-
-        .size{
-          width: 15%;
-        }
-        .state{
-          width: 22%;
-          display: flex;
-          align-items: center;
-          .mat-raised-button{
-            width: 60px;
-            padding: 5px;
-            border-radius: 0;
-            font-style: normal;
-            font-weight: 600;
-            font-size: 11px;
-            font-family: "Open Sans", sans-serif;
-            color: #577289;
-            line-height: 8px;
-          }
-        }
-        .remove{
-          display: flex;
-          align-items: center;
-          width: 5%;
-          position: absolute;
-          right: 20px;
-          .close{
-            color: #577289;
-            font-size: 12px;
-            cursor: pointer;
-            position: absolute;
-            top: 3px;
-            right: 0;
-            height: 18px;
-            width: 14px;
-            transition: all 0.45s ease-in-out;
-
-            &:hover{
-              color: #f1696e;
-            }
-          }
-        }
-      }
-
-
-    }
-  }
-}
 
 .events-none{
   pointer-events: none;
 }
 
-@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: 53vh;
-    &.added-upload{
-      height: 36vh;
-    }
-  }
-}
-
-@media only screen and (max-height: 760px) {
-  .bucket-wrapper {
-    height: 51vh;
-    &.added-upload{
-      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 065e724..d0ba3fd 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
@@ -37,7 +37,7 @@ import {takeUntil} from 'rxjs/operators';
 @Component({
   selector: 'datalab-bucket-browser',
   templateUrl: './bucket-browser.component.html',
-  styleUrls: ['./bucket-browser.component.scss']
+  styleUrls: ['./bucket-browser.component.scss', './upload-window.component.scss']
 })
 export class BucketBrowserComponent implements OnInit, OnDestroy {
   private unsubscribe$ = new Subject();
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/upload-window.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/upload-window.component.scss
new file mode 100644
index 0000000..e8e9a1e
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/upload-window.component.scss
@@ -0,0 +1,196 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.upload-window{
+  margin-top: 2vh;
+  border: 2px solid rgba(0,0,0,.12);
+  border-radius: 5px;
+  background-color: white;
+  height: 15vh;
+  color: black;
+
+  .upload-header{
+    padding-left: 8px;
+    background: #f6fafe;
+    height: 30px;
+    line-height: 30px;
+    position: relative;
+
+    .modal-title {
+      font-weight: 500;
+      color: #455c74;
+      font-size: 13px;
+      background: #f6fafe;
+    }
+
+    .close{
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 30px;
+      width: 30px;
+      font-size: 20px;
+      font-weight: 300;
+      border: 0;
+      background: none;
+      color: #577289;
+      outline: none;
+      cursor: pointer;
+      transition: all 0.45s ease-in-out;
+
+      &:hover{
+        color: #36afd5;
+      }
+    }
+
+  }
+
+  .upload-files{
+    padding: 5px 0;
+    height: calc(100% - 30px);
+    overflow: auto;
+    overflow-y: overlay;
+    width: 100%;
+    .file{
+      padding: 2px;
+      display: flex;
+      font-size: 12px;
+      position: relative;
+
+      &.upload-table-header{
+        font-size: 11px;
+      }
+
+      .name{
+        width: 33.3%;
+        padding-left: 5px;
+        position: relative;
+        display: flex;
+
+        span{
+          position: absolute;
+          max-width: calc(100% + 30px);
+        }
+      }
+
+      .second-block{
+        width: 66.7%;
+        display: flex;
+        padding: 0 14px 0 17px;
+        .upload-path{
+          width: 60%;
+          padding-left: 24px;
+          padding-right: 1%;
+          display: flex;
+        }
+
+        .size{
+          width: 15%;
+        }
+        .state{
+          width: 22%;
+          display: flex;
+          align-items: center;
+          .mat-raised-button{
+            width: 60px;
+            padding: 5px;
+            border-radius: 0;
+            font-style: normal;
+            font-weight: 600;
+            font-size: 11px;
+            font-family: "Open Sans", sans-serif;
+            color: #577289;
+            line-height: 8px;
+          }
+        }
+        .remove{
+          display: flex;
+          align-items: center;
+          width: 5%;
+          position: absolute;
+          right: 20px;
+          .close{
+            color: #577289;
+            font-size: 12px;
+            cursor: pointer;
+            position: absolute;
+            top: 3px;
+            right: 0;
+            height: 18px;
+            width: 14px;
+            transition: all 0.45s ease-in-out;
+
+            &:hover{
+              color: #f1696e;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+@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: 53vh;
+    &.added-upload{
+      height: 36vh;
+    }
+  }
+}
+
+@media only screen and (max-height: 760px) {
+  .bucket-wrapper {
+    height: 51vh;
+    &.added-upload{
+      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/exploratory/install-libraries/install-libraries.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
index 8aa03dd..503e6b1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
@@ -50,99 +50,6 @@
   height: 285px;
 }
 
-.install-libraries {
-  height: 100%;
-  padding-bottom: 110px;
-
-  .dialog-header {
-    padding-left: 25px;
-  }
-
-  .dialog-content {
-    height: calc(100% - 50px);
-  }
-
-  .info {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .mat-list-item {
-    height: auto !important;
-    font-family: "Open Sans", sans-serif;
-    color: #718ba6 !important;
-    font-size: 13px !important;
-    font-weight: 300;
-
-    .mat-list-item-content {
-      height: auto !important;
-      min-height: 54px !important;
-      border-bottom: 1px solid #edf1f5;
-      padding-right: 10px;
-      padding-left: 0;
-    }
-  }
-
-  .lib-view-wrap {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .error {
-    padding: 15px 20px;
-  }
-
-  .uploading {
-    margin: 0 auto;
-  }
-
-  .list-selected {
-    padding: 10px;
-    font-family: 'Open Sans', sans-serif;
-    height: 130px;
-    overflow-y: auto;
-
-    h4 {
-      margin-bottom: 20px;
-      font-size: 14px;
-      text-align: center;
-      font-weight: 400;
-      color: #718ba6;
-    }
-
-    mat-chip-list .mat-chip-list-wrapper {
-      overflow-y: auto;
-      padding: 3px;
-    }
-  }
-
-  .loading-block {
-    height: 40%;
-    display: flex;
-    justify-content: center;
-
-    .uploading {
-      padding-top: 200px;
-      flex-direction: column;
-      align-items: center;
-      align-self: center;
-      list-style: none;
-      display: flex;
-
-      p {
-        font-size: 16px;
-      ;
-      }
-    }
-  }
-
-  .list-header{
-    line-height: 40px;
-  }
-}
-
 .list-item{
   display: flex;
   width: 100%;
@@ -312,156 +219,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
   position: relative;
 }
 
-.libs-info {
-  padding: 0 25px;
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 0;
-
-  .filter-row {
-    .filter-col{
-      padding-left: 0;
-      &.lib-name{
-        padding-left: 5px;
-        .filter-field{
-          padding-left: 15px;
-        }
-      }
-      .status{
-        text-transform: none;
-      }
-    }
-  }
 
-  .mat-list {
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: overlay;
-    position: relative;
-    height: 350px;
-    padding-top: 0;
-    margin-top: 8px;
-
-    .list-header{
-      line-height: 40px;
-      position: sticky;
-      top: 0;
-      z-index: 99;
-      background-color: #fff;
-    }
-
-    .filter-row{
-      position: sticky;
-      top: 56px;
-      z-index: 99;
-      background-color: #fff;
-    }
-
-
-    .scrollingList {
-      .info {
-        p {
-          text-align: center;
-          padding: 40px;
-        }
-      }
-    }
-  }
-
-  .lib-name {
-    width: 27%;
-    padding-right: 10px;
-    padding-left: 20px;
-
-    &-col{
-      display: flex;
-    }
-
-    .lib-name-wrapper{
-      overflow: hidden;
-      display: block;
-      text-overflow: ellipsis;
-    }
-
-    strong {
-      font-weight: 400;
-    }
-  }
-
-  .lib-group,
-  .lib-destination {
-    width: 17%;
-    padding-left: 15px;
-    padding-right: 10px;
-  }
-
-  .lib-status {
-    width: 17%;
-    padding-left: 15px;
-    padding-right: 10px;
-  }
-
-  .lib-resource-type {
-    width: 17%;
-    padding-left: 15px;
-    padding-right: 10px;
-  }
-
-  .lib-group-col {
-    width: 17%;
-    padding-left: 17px;
-    padding-right: 10px;
-  }
-
-  .st-group {
-    display: flex;
-    flex-direction: column;
-    width: 51%;
-
-    .wrap-col {
-      display: flex;
-      padding: 5px 0px;
-
-      .lib-destination-col {
-        width: 33.3%;
-        padding-left: 15px;
-      }
-
-      .lib-resource-type-col {
-        width: 33.3%;
-        color: #36afd5;
-        padding-left: 15px;
-      }
-
-      .lib-status-col {
-        position: relative;
-        width: 33.3%;
-        padding-left: 15px;
-
-        .warn-action {
-          position: absolute;
-          top: -3px;
-          right: -50px;
-
-          div {
-            display: inline-block;
-            cursor: pointer;
-            width: 25px;
-            pointer-events: auto;
-
-            span {
-              display: block;
-            }
-          }
-
-          .lib-error {
-            color: #35afd5;
-          }
-        }
-      }
-    }
-  }
-}
 
 .mat-dialog-container.mat-dialog-container .install-libraries#dialog-box {
   .mat-header-cell{
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.scss
new file mode 100644
index 0000000..f32d1d1
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.scss
@@ -0,0 +1,261 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.install-libraries {
+  height: 100%;
+  padding-bottom: 110px;
+
+  .dialog-header {
+    padding-left: 25px;
+  }
+
+  .dialog-content {
+    height: calc(100% - 50px);
+  }
+
+  .info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mat-list-item {
+    height: auto !important;
+    font-family: "Open Sans", sans-serif;
+    color: #718ba6 !important;
+    font-size: 13px !important;
+    font-weight: 300;
+
+    .mat-list-item-content {
+      height: auto !important;
+      min-height: 54px !important;
+      border-bottom: 1px solid #edf1f5;
+      padding-right: 10px;
+      padding-left: 0;
+    }
+  }
+
+  .lib-view-wrap {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .error {
+    padding: 15px 20px;
+  }
+
+  .uploading {
+    margin: 0 auto;
+  }
+
+  .list-selected {
+    padding: 10px;
+    font-family: 'Open Sans', sans-serif;
+    height: 130px;
+    overflow-y: auto;
+
+    h4 {
+      margin-bottom: 20px;
+      font-size: 14px;
+      text-align: center;
+      font-weight: 400;
+      color: #718ba6;
+    }
+
+    mat-chip-list .mat-chip-list-wrapper {
+      overflow-y: auto;
+      padding: 3px;
+    }
+  }
+
+  .loading-block {
+    height: 40%;
+    display: flex;
+    justify-content: center;
+
+    .uploading {
+      padding-top: 200px;
+      flex-direction: column;
+      align-items: center;
+      align-self: center;
+      list-style: none;
+      display: flex;
+
+      p {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .list-header{
+    line-height: 40px;
+  }
+}
+
+.libs-info {
+  padding: 0 25px;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+
+  .filter-row {
+    .filter-col{
+      padding-left: 0;
+      &.lib-name{
+        padding-left: 5px;
+        .filter-field{
+          padding-left: 15px;
+        }
+      }
+      .status{
+        text-transform: none;
+      }
+    }
+  }
+
+  .mat-list {
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: overlay;
+    position: relative;
+    height: 350px;
+    padding-top: 0;
+    margin-top: 8px;
+
+    .list-header{
+      line-height: 40px;
+      position: sticky;
+      top: 0;
+      z-index: 99;
+      background-color: #fff;
+    }
+
+    .filter-row{
+      position: sticky;
+      top: 56px;
+      z-index: 99;
+      background-color: #fff;
+    }
+
+
+    .scrollingList {
+      .info {
+        p {
+          text-align: center;
+          padding: 40px;
+        }
+      }
+    }
+  }
+
+  .lib-name {
+    width: 27%;
+    padding-right: 10px;
+    padding-left: 20px;
+
+    &-col{
+      display: flex;
+    }
+
+    .lib-name-wrapper{
+      overflow: hidden;
+      display: block;
+      text-overflow: ellipsis;
+    }
+
+    strong {
+      font-weight: 400;
+    }
+  }
+
+  .lib-group,
+  .lib-destination {
+    width: 17%;
+    padding-left: 15px;
+    padding-right: 10px;
+  }
+
+  .lib-status {
+    width: 17%;
+    padding-left: 15px;
+    padding-right: 10px;
+  }
+
+  .lib-resource-type {
+    width: 17%;
+    padding-left: 15px;
+    padding-right: 10px;
+  }
+
+  .lib-group-col {
+    width: 17%;
+    padding-left: 17px;
+    padding-right: 10px;
+  }
+
+  .st-group {
+    display: flex;
+    flex-direction: column;
+    width: 51%;
+
+    .wrap-col {
+      display: flex;
+      padding: 5px 0px;
+
+      .lib-destination-col {
+        width: 33.3%;
+        padding-left: 15px;
+      }
+
+      .lib-resource-type-col {
+        width: 33.3%;
+        color: #36afd5;
+        padding-left: 15px;
+      }
+
+      .lib-status-col {
+        position: relative;
+        width: 33.3%;
+        padding-left: 15px;
+
+        .warn-action {
+          position: absolute;
+          top: -3px;
+          right: -50px;
+
+          div {
+            display: inline-block;
+            cursor: pointer;
+            width: 25px;
+            pointer-events: auto;
+
+            span {
+              display: block;
+            }
+          }
+
+          .lib-error {
+            color: #35afd5;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
index 6ef7e50..55a5483 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
@@ -66,12 +66,12 @@ table.resources {
         align-items: center;
 
         &.name-col {
-          padding-right: 5px;
           padding-left: 21px;
-          cursor: pointer;
           overflow: hidden;
           text-overflow: ellipsis;
-          //min-width: 187px;
+          span{
+            cursor: pointer;
+          }
         }
 
         &.resources-col {
@@ -111,7 +111,6 @@ table.resources {
     padding-right: 5px;
     padding-left: 24px;
     background-color: inherit;
-    //min-width: 187px;
   }
 
   .project-name{
@@ -124,7 +123,6 @@ table.resources {
   .status-col,
   .shape-col {
     width: 11%;
-    //min-width: 105px;
   }
   .shape-col{
     color: #577289;
@@ -135,7 +133,6 @@ table.resources {
 
   .tag-col {
     width: 13%;
-    //min-width: 95px;
 
     mat-chip {
       min-height: 20px;
@@ -152,12 +149,10 @@ table.resources {
 
   .resources-col {
     width: 32%;
-    //min-width: 420px;
   }
 
   .cost-col {
     width: 10%;
-    //min-width: 95px;
     justify-content: space-between;
   }
 
@@ -188,7 +183,6 @@ table.resources {
   }
 
   .actions-col {
-    //width: 10%;
     padding-right: 24px;
     text-align: right;
     background-color: inherit;
@@ -201,105 +195,6 @@ table.resources {
     height: 0;
   }
 
-
-  .element-diagram {
-    min-width: 80px;
-    border: 2px solid black;
-    padding: 8px;
-    font-weight: lighter;
-    margin: 8px 0;
-    height: 104px;
-  }
-
-  .element-symbol {
-    font-weight: bold;
-    font-size: 40px;
-    line-height: normal;
-  }
-
-  .element-description {
-    padding: 16px;
-  }
-
-  .element-description-attribution {
-    opacity: 0.5;
-  }
-
-
-
-  .dashboard_table {
-    width: 100%;
-    table-layout: fixed;
-  }
-
-
-
-  .dashboard_table tr {
-    vertical-align: top;
-  }
-
-  .dashboard_table tr th span {
-    width: 50px;
-    text-align: center;
-    height: 100%;
-    line-height: 40px;
-  }
-
-  .dashboard_table tr td {
-    font-size: 13px;
-    padding: 20px 15px 16px;
-  }
-
-  .dashboard_table tr td,
-  .dashboard_table tr th {
-    border: 1px solid #d5dfea;
-    text-align: left;
-  }
-
-  .dashboard_table tr td:last-child {
-    text-align: center;
-  }
-
-  .dashboard_table_body td:first-child {
-    background: #f3fbfd;
-    color: #455c74;
-    font-weight: 600;
-    font-size: 16px;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .dashboard_table tr:nth-child(2n + 1) {
-    background: #f9fafb;
-  }
-
-  .dashboard_table tr.filter-row td {
-    padding: 10px;
-  }
-
-  .dashboard_table tr.filter-row td:first-child {
-    font-weight: 400;
-  }
-
-  .dashboard_table tr.filter-row td:last-child {
-    padding: 10px 0;
-  }
-
-  .dashboard_table tr:nth-child(2n + 1) td:first-child {
-    background: #edf6f9;
-  }
-
-  .dashboard_table th {
-    background: #a1b7d1;
-    color: #fff;
-    font-weight: 600;
-    line-height: 40px;
-    text-transform: uppercase;
-    padding-left: 12px;
-    font-size: 13px;
-  }
-
   &.data-grid .status-col .status {
     text-transform: capitalize;
   }
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
index c8e952a..78b1fa6 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
@@ -212,16 +212,8 @@ mat-dialog-container {
   }
 
   input[type=file] {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 100%;
-    min-height: 100%;
     font-size: 100px;
     text-align: right;
-    opacity: 0;
     outline: none;
     background: #fff;
     cursor: inherit;
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index a68e96c..76abce2 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -273,6 +273,15 @@
   height: 34px;
 }
 
+input[type="file"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
 span.mat-slide-toggle-content {
   // font: 100 16px/24px 'Open Sans', sans-serif;
   font-style: normal;
@@ -550,7 +559,6 @@ span.mat-slide-toggle-content {
     text-align: center;
     display: block;
     background-color: #fff;
-    top: 40px;
 
     &-item.mat-raised-button.butt{
       z-index: 101;
@@ -567,8 +575,6 @@ span.mat-slide-toggle-content {
       position: relative;
       overflow: hidden;
       line-height: 36px;
-      //padding-left: 45px;
-      //text-align: left;
       &.action-menu-item{
         &:hover{
           color:  #00bcd4;
@@ -1031,3 +1037,4 @@ mat-progress-bar {
 
 
 
+


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org