qms-angular 1.1.26 → 1.1.28

package/src/lib/components/select-department-tree/select-department-tree.component.scss

@@ -3,6 +3,7 @@
 @import "../../../themes/theme/mixins";
 @import "../../../themes/qms-icon-font";
 
+
 .qms-select-department-tree-container {
   .mr10 {
     margin-right: 10px;
@@ -84,8 +85,6 @@
     font-weight: 500;
     color: theme-apply($ws-text-primary);
     font-size: 16px;
-    display: flex;
-    align-items: center;
     .header-view{
       padding: 4px 0;
     }
@@ -104,16 +103,15 @@
     grid-template-columns: 1fr 200px;
     column-gap: 2px;
     padding: 4px 12px 4px 0;
-    .header-view:nth-child(1){
-      padding-left: 12px;
-    }
   }
 
   .tree-department-wrapper {
+    height: 375px;
     padding-right: 4px;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
     position: relative;
-    transition: height .3s ease-in-out;
+    transition: height .1s ease-in-out;
     .tree-view{
       &.active-mode-external-view{
         width: 100%;
@@ -144,7 +142,7 @@
           .external-list-item-container{
             .node-external{
               overflow: hidden;
-              transition: all .1s ease-in-out;
+              transition: .1s ease-in-out;
               .node-external-content {
                   padding: 5px 15px 5px 15px;
                   height: calc(100% - 2px);
@@ -165,131 +163,104 @@
     }
   }
 
-  .mask-overlay{
-    z-index: 1000;
-    background-color: rgba(0,0,0,0.1);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
+  // Tree
+  .mat-tree.select-department-tree {
     height: 100%;
-    border-radius: 4px;
-    overflow: hidden;
-    display: grid;
-    place-items: center;
-    &> .qms-load-more-row {
-      // height: 0;
-      line-height: 35px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-      transform: translateY(-15px);
-      span {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        background: theme-apply($primary-light-12-opacity);
-        border-radius: 50px;
-        animation: up-down-animate 0.5s ease-in-out infinite alternate;
-        &:nth-child(2) {
-          background: theme-apply($primary-light-24-opacity);
-          animation-delay: 0.16s;
-        }
-        &:nth-child(3) {
-          background: theme-apply($primary-light-32-opacity);
-          animation-delay: 0.32s;
+    &.has-checkbox-all{
+      max-height: calc(100% - 47px);
+      overflow-y: auto;
+    }
+    .mat-tree-node {
+      border-radius: 4px;
+      &:hover {
+        background: black(0.08);
+      }
+
+      &:active {
+        background: black(0.12);
+      }
+
+      &.active {
+        color: theme-apply($primary);
+        background: theme-apply($primary-light-6-opacity);
+
+        &:active {
+          background: theme-apply($primary-light-12-opacity);
         }
-        &:nth-child(4) {
-          background: theme-apply($primary-light-38-opacity);
-          animation-delay: 0.48s;
+
+        button,
+        .mat-icon-rtl-mirror,
+        .type-icon,
+        .text-name {
+          color: theme-apply($primary);
         }
       }
-      @keyframes up-down-animate {
-        0% {
-          transform: translateY(-8px);
+    }
+
+    .mat-tree-node.collapse-node:not(.selected-theme) {
+      &.active {
+        button,
+        .mat-icon-rtl-mirror,
+        .type-icon,
+        .text-name {
+          color: theme-apply($primary);
         }
 
-        100% {
-          transform: translateY(8px);
+        &:hover {
+          background: theme-apply($primary-light-6-opacity);
+        }
+
+        &:active {
+          background: theme-apply($primary-light-12-opacity);
         }
       }
     }
-  }
-  //Custom tree
-  .select-department-tree{
-    & > .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{
-      padding: 0 4px !important;
+
+    .mat-tree-node.selected-theme{
+      background: theme-apply($primary-light-12-opacity);
     }
-    .qms-tree-node{
-      display: flex;
-      align-items: center;
-      border-radius: 4px;
-      &:hover{
-        background-color: rgba(0,0,0,.08);
-      }
-      &> .node-expand-area{
-        width: 48px;
-        height: 48px;
-        position: relative;
-      }
-      &.active-external-view{
-        .mat-checkbox.qms-group-options{
-          width: calc(100% - 250px) ;
-        }
+
+    .mat-tree-node.expand-node {
+      color: theme-apply($primary);
+
+      button,
+      .mat-icon-rtl-mirror,
+      .type-icon,
+      .text-name {
+        color: theme-apply($primary);
       }
-      &.node-loading{
+
+      &:hover {
         background: theme-apply($primary-light-6-opacity);
       }
-      &> .external-view-node{
-        flex-basis: 200px;
-        overflow: hidden;
-        .node-external{
-          overflow: hidden;
-          transition: all .1s ease-in-out;
-          display: block;
-          .node-external-content {
-              padding: 5px 15px 5px 15px;
-              height: calc(100% - 2px);
-              color: theme-apply($default-color);
-              font-size: 14px;
-              display: flex;
-              align-items: center;
-              span{
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-              }
-            }
-        }
-      }
-      &.expand-node {
-            color: theme-apply($primary);
-            &:hover {
-              background: theme-apply($primary-light-6-opacity);
-            }
 
-            &:active {
-              background: theme-apply($primary-light-12-opacity);
-            }
-        }
-      .node-without-checkbox{
-        cursor: pointer;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .mat-icon{
-          color: theme-apply($primary);
-          margin-right: 4px;
-        }
-      }
-      &.selected-theme{
+      &:active {
         background: theme-apply($primary-light-12-opacity);
       }
+    }
+
+    .type-icon {
+      margin-right: 5px;
+      color: theme-apply($ws-action-active);
+    }
 
-          &.mat-tree-node-disabled-all {
+    .text-name {
+      color: theme-apply($default-color);
+    }
+
+    .mat-icon-rtl-mirror {
+      color: black(0.6);
+    }
+
+    .mat-icon-button.btn-toggle {
+      width: 35px;
+      height: 35px;
+      line-height: 35px;
+    }
+
+
+    .mat-tree-node {
+      &.mat-tree-node-disabled-all {
         cursor: default !important;
         pointer-events: none;
         user-select: none;
@@ -313,8 +284,66 @@
           background-color: transparent;
         }
       }
+
+      &.mat-tree-node-disabled {
+
+        button.mat-button-disabled,
+        .type-icon {
+          color: black(0.38);
+        }
+
+        .text-name {
+          &.disabled {
+            color: black(0.38);
+            cursor: default !important;
+            pointer-events: none;
+            user-select: none;
+          }
+        }
+
+        &.active,
+        &:hover,
+        &:active,
+        &.expand-node:hover,
+        &.expand-node:active {
+          background-color: transparent;
+        }
+      }
+
+      .node-without-checkbox{
+        cursor: pointer;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .mat-icon{
+          color: theme-apply($primary);
+          margin-right: 4px;
+        }
+      }
+
+      &>.node-content-wraper {
+        width: fit-content;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &>.mat-progress-bar {
+          height: 3px;
+          width: 100%;
+          position: absolute;
+          bottom: 0;
+          left: 10px;
+
+          .mat-progress-bar-fill::after {
+            background: theme-apply($primary);
+          }
+        }
+      }
     }
   }
+
   .text-name {
     position: relative;
     overflow: hidden;
@@ -331,10 +360,7 @@
   }
 
   .ml5 {
-    margin-left: 15px !important;
-  }
-  .pl-10{
-    padding-left: 10px;
+    margin-left: 10px !important;
   }
 
   ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row {
@@ -351,90 +377,51 @@
   }
 
   .qms-view-search-result{
+    height: 100%;
     width: 100%;
     overflow: hidden;
-    &__header{
-      position: relative;
-      &::after{
-        position: absolute;
-        content: "";
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 1px;
-        background-color: black(.1);
+    .result {
+      max-height: calc(100% - 44px);
+      overflow-y: auto;
+      margin-bottom: 4px;
+      padding-right: 4px;
+      &.active-paging{
+        max-height: calc(100% - 95px);
+      }
+      &.no-result{
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
-      .header-title{
-        padding: 8px 0;
-        display: inline-block;
-        &:nth-child(1){
-          padding-left: 12px;
-        }
-        &:nth-child(2){
-        flex-basis: 200px;
-        }
+      &.no-result{
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
     }
-    &__wrapper{
-      height: calc(100% - 50px);
-      &.active-external{
-        height: calc(100% - 90px) !important;
+    .result-item{
+      border-radius: 4px;
+      display: grid;
+      grid-template-columns: 45px 1fr;
+      align-items: center;
+      cursor: pointer;
+      transition: background .3s ease;
+      &:not(:nth-child(1)){
+        margin-top: 4px !important;
       }
-      width: 100%;
-      .result {
-        max-height: calc(100% - 44px);
-        overflow-y: auto;
-        margin-bottom: 4px;
-        padding-right: 4px;
-        &.active-paging{
-          max-height: calc(100% - 40px);
-        }
-        &.no-result{
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        &.no-result{
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
+      &:hover{
+        background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
       }
-      .result-item{
-        border-radius: 4px;
-        display: grid;
-        grid-template-columns: 45px 1fr;
-        align-items: center;
-        cursor: pointer;
-        transition: background .3s ease;
-        &:not(:nth-child(1)){
-          margin-top: 4px !important;
-        }
-        &:hover{
-          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
-        }
-        &.active{
-          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
-        }
-        &__content{
-          display: flex;
-          align-items: center;
-          .item-result-content-wraper{
-            padding: 5px 15px 5px 15px;
-            width: 100%;
-          }
-          .external-name{
-            flex-basis: 200px;
-            span{
-              width: 200px;
-              display: inline-block;
-            }
-          }
-        }
+      &.active{
+        background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
+      }
+      .item-result-content-wraper{
+        padding: 5px 15px 5px 15px;
       }
     }
+
     ::ng-deep .mat-checkbox.qms-group-options{
       display: flex;
       height: 100%;
@@ -513,7 +500,6 @@
     color: rgba(0, 0, 0, 0.6);
     font-weight: 400;
     font-size: 14px;
-    max-width: 250px;
   }
 
   ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{
@@ -570,189 +556,4 @@
       }
     }
   }
-
-  .qms-spinner {
-    font-size: 20px;
-    position: relative;
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    &.center {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      margin: auto;
-    }
-    &> .qms-spinner-blade {
-      position: absolute;
-      left: 0.4629em;
-      bottom: 0;
-      width: 0.074em;
-      height: 0.2777em;
-      border-radius: 0.0555em;
-      background-color: transparent;
-      -webkit-transform-origin: center -0.2222em;
-      -ms-transform-origin: center -0.2222em;
-      transform-origin: center -0.2222em;
-      animation: spinner-animation 1s infinite linear;
-      &:nth-child(1) {
-        -webkit-animation-delay: 0s;
-        animation-delay: 0s;
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-      }
-      &:nth-child(2) {
-        -webkit-animation-delay: 0.083s;
-        animation-delay: 0.083s;
-        -webkit-transform: rotate(30deg);
-        -ms-transform: rotate(30deg);
-        transform: rotate(30deg);
-      }
-      &:nth-child(3) {
-        -webkit-animation-delay: 0.166s;
-        animation-delay: 0.166s;
-        -webkit-transform: rotate(60deg);
-        -ms-transform: rotate(60deg);
-        transform: rotate(60deg);
-      }
-      &:nth-child(4) {
-        -webkit-animation-delay: 0.249s;
-        animation-delay: 0.249s;
-        -webkit-transform: rotate(90deg);
-        -ms-transform: rotate(90deg);
-        transform: rotate(90deg);
-      }
-      &:nth-child(5) {
-        -webkit-animation-delay: 0.332s;
-        animation-delay: 0.332s;
-        -webkit-transform: rotate(120deg);
-        -ms-transform: rotate(120deg);
-        transform: rotate(120deg);
-      }
-      &:nth-child(6) {
-        -webkit-animation-delay: 0.415s;
-        animation-delay: 0.415s;
-        -webkit-transform: rotate(150deg);
-        -ms-transform: rotate(150deg);
-        transform: rotate(150deg);
-      }
-      &:nth-child(7) {
-        -webkit-animation-delay: 0.498s;
-        animation-delay: 0.498s;
-        -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        transform: rotate(180deg);
-      }
-      &:nth-child(8) {
-        -webkit-animation-delay: 0.581s;
-        animation-delay: 0.581s;
-        -webkit-transform: rotate(210deg);
-        -ms-transform: rotate(210deg);
-        transform: rotate(210deg);
-      }
-      &:nth-child(9) {
-        -webkit-animation-delay: 0.664s;
-        animation-delay: 0.664s;
-        -webkit-transform: rotate(240deg);
-        -ms-transform: rotate(240deg);
-        transform: rotate(240deg);
-      }
-      &:nth-child(10) {
-        -webkit-animation-delay: 0.747s;
-        animation-delay: 0.747s;
-        -webkit-transform: rotate(270deg);
-        -ms-transform: rotate(270deg);
-        transform: rotate(270deg);
-      }
-      &:nth-child(11) {
-        -webkit-animation-delay: 0.83s;
-        animation-delay: 0.83s;
-        -webkit-transform: rotate(300deg);
-        -ms-transform: rotate(300deg);
-        transform: rotate(300deg);
-      }
-      &:nth-child(12) {
-        -webkit-animation-delay: 0.913s;
-        animation-delay: 0.913s;
-        -webkit-transform: rotate(330deg);
-        -ms-transform: rotate(330deg);
-        transform: rotate(330deg);
-      }
-      @keyframes spinner-animation {
-        0% {
-          background-color: theme-apply($primary-light-32-opacity);
-        }
-
-        100% {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-  // Responsive
-  @media screen and (max-width: 600px) {
-    .external-view-node {
-      flex-basis: 65px !important;
-    }
-
-    .qms-tree-node.active-external-view .mat-checkbox.qms-group-options {
-      width: calc(100% - 110px)!important ;
-    }
-
-    .header-view-tree {
-      grid-template-columns: 1fr 80px !important;
-    }
-
-    ::ng-deep .cdk-virtual-scroll-content-wrapper{
-      right: 0 !important;
-    }
-    .header-title{
-      font-size: 14px !important;
-    }
-    .text-name, .node-external, .text-label, .text-label+span{
-      font-size: 12px;
-    }
-    .node-expand-area{
-      width: 30px !important;
-      height: 30px !important;
-      .qms-btn-icon{
-        width: 30px;
-        height: 30px;
-        line-height: 30px;
-      }
-    }
-    .fs-base{
-      font-size: 12px !important;
-    }
-    .qms-select-department-tree-container .breadcrumb-container{
-      flex-wrap: nowrap !important;
-    }
-    ::ng-deep .qms-breadcrumb-item-text{
-      font-size: 12px !important;
-      max-width: 175px !important;
-    }
-
-    ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{
-      display: none !important;
-    }
-
-    ::ng-deep .qms-paginator .size-small .mat-paginator-container{
-      justify-content: center !important;
-    }
-
-    .qms-view-search-result__header > .header-title:nth-child(2){
-      flex-basis: 120px !important;
-    }
-
-    .result-item__content .external-name{
-      flex-basis: 75px !important;
-      span{
-        width: 75px !important;
-      }
-    }
-  }
 }
-

package/src/lib/qms-ckeditor-components/components/qms-ckeditor-load-template/qms-ckeditor-load-template.component.scss

@@ -3,4 +3,8 @@
     .template-checkbox{
         padding-top: 20px;
     }
+
+    .option {
+        padding-left: 15px;
+    }
 }

package/src/lib/qms-ckeditor-components/qms-ckeditor.component.scss

@@ -13,6 +13,10 @@
   .ck-editor__editable {
     overflow-y: auto;
   }
+
+  p {
+    line-height: normal;
+  }
 }
 
 .qms-ckeditor {