eoss-ui 0.5.81-beta2 → 0.5.81-beta21

package/packages/theme-chalk/src/simplicity.scss

@@ -1,29 +1,55 @@
 @import './common/var.scss';
 @import './base.scss';
+@keyframes open-submenu {
+  0% {
+    padding-left: 0;
+  }
+  100% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+}
+@keyframes close-submenu {
+  0% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+  100% {
+    padding-left: 48px;
+  }
+}
 .es-simplicity-side {
   width: $--main-simplicity-side-width;
   height: 100%;
   float: left;
-  padding: 8px;
+  padding: 16px 8px 8px 8px;
   @extend .es-flex-vertical;
   @if $--main-simplicity-side-background-color != '' {
     background-color: $--main-simplicity-side-background-color;
   } @else {
     background-color: $--color-primary-light-9;
   }
-  .es-simplicity-side-item + .es-simplicity-side-item {
-    margin-top: 16px;
-  }
   .es-simplicity-logo {
-    width: $--main-simplicity-side-width - 16px;
+    width: $--main-simplicity-side-width - 24px;
+    margin: 0 auto;
+  }
+  .es-simplicity-org-name {
+    font-weight: 500;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 16px;
+    margin-bottom: 32px;
+  }
+  .es-simplicity-user-popover {
+    margin-bottom: 32px;
   }
   .es-simplicity-portrait {
-    width: $--main-simplicity-side-width - 16px;
-    height: $--main-simplicity-side-width - 16px;
+    width: $--main-simplicity-side-width - 24px;
+    height: $--main-simplicity-side-width - 24px;
     border-radius: 50%;
     overflow: hidden;
-    padding: 8px;
+    margin: 0 auto;
     cursor: pointer;
+    position: relative;
   }
   .es-simplicity-side-Application {
     flex: 1;
@@ -59,13 +85,33 @@
     .el-badge {
       padding: 8px 0;
     }
-    &.is-active {
+    .es-icon_image {
+      opacity: 0.3;
+    }
+    &.is-active,
+    &:hover {
       color: #fff;
       .el-badge {
         padding: 8px 0;
         background-color: rgba(255, 255, 255, 0.12);
         border-radius: 9px;
       }
+      .es-icon_image {
+        opacity: 1;
+      }
+    }
+    .el-icon-circle-close {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 2px;
+      display: none;
+    }
+    &:hover {
+      .el-icon-circle-close {
+        display: block;
+        z-index: 999;
+      }
     }
   }
   .el-badge {
@@ -74,10 +120,11 @@
   .es-simplicity-side-app-icon {
     font-size: 24px;
     &.es-icon_image {
-      width: $--main-simplicity-side-width - 32px;
+      width: 20px;
     }
   }
   .es-simplicity-side-app-text {
+    font-size: 12px;
     @extend .es-text-ellipsis;
   }
 }
@@ -85,6 +132,7 @@
   width: 100%;
   border-radius: 50%;
   vertical-align: top;
+  background: transparent;
 }
 .es-simplicity-main {
   height: 100%;
@@ -92,8 +140,10 @@
   overflow: hidden;
   position: relative;
   .es-simplicity-apps,
-  .es-simplicity-subMenus,
-  .es-simplicity-apps-modal {
+  .es-simplicity-message,
+  .es-simplicity-message-modal,
+  .es-simplicity-apps-modal,
+  .es-simplicity-public-drawer {
     position: absolute;
     top: $--main-simplicity-header-height;
     height: calc(100% - #{$--main-simplicity-header-height});
@@ -104,12 +154,37 @@
       padding: 20px;
     }
   }
-  .es-simplicity-subMenus {
+  .es-simplicity-public-drawer {
+    .el-drawer__header {
+      padding: 10px 0 0;
+      margin: 0;
+    }
+  }
+  .es-simplicity-subMenus,
+  .es-simplicity-public-drawer {
     .el-drawer__body {
       padding: 0;
       position: relative;
     }
   }
+  .es-simplicity-subMenus {
+    width: auto;
+    height: 100%;
+    overflow: visible;
+    right: auto;
+    position: absolute;
+    .el-drawer {
+      box-shadow: none;
+      overflow: visible;
+      border-right: 1px solid #dfebf6;
+    }
+  }
+
+  .es-simplicity-message {
+    .el-drawer {
+      background-color: #f4f4f4;
+    }
+  }
 }
 .es-simplicity_apps {
   height: 100%;
@@ -193,6 +268,8 @@
   .es-simplicity_apps-icon {
     font-size: 34px;
     width: 34px;
+    height: 34px;
+    line-height: 34px;
   }
   .es-simplicity_apps-text {
     font-weight: 400;
@@ -351,51 +428,115 @@
     height: 100px;
   }
 }
+.es-simplicity-unfold {
+  position: fixed;
+  left: $--main-simplicity-side-width;
+  top: $--main-simplicity-header-height;
+  z-index: 9999;
+  .el-icon-s-unfold {
+    font-size: 32px;
+    cursor: move;
+    background-color: #fff;
+    border-radius: 10px;
+  }
+}
 .es-simplicity-menus {
   height: 100%;
   display: flex;
   .es-simplicity-menus-box {
-    width: 296px;
+    width: 220px;
     height: 100%;
     position: relative;
-    & + .es-simplicity-menus-box {
-      border-left: 1px solid #dfebf6;
-    }
     .es-simplicity-menus-title {
       font-weight: bold;
-      font-size: 20px;
-      color: #15224c;
       line-height: 30px;
-      padding: 24px;
+      padding: 7px 7px 7px 14px;
       border-bottom: 1px solid #dfebf6;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .es-simplicity-menus-title-text {
+        flex: 1;
+        font-size: 20px;
+        color: #15224c;
+      }
+      .es-simplicity-menus-title-icon {
+        font-size: 24px;
+        color: #b9bdc9;
+        cursor: pointer;
+      }
     }
-    .el-scrollbar {
+    .es-simplicity-menus-scrollbar {
       position: absolute;
-      top: 79px;
+      top: 45px;
       right: 0;
       bottom: 0;
       left: 0;
-      .el-scrollbar__view {
-        padding: 12px;
+    }
+  }
+  .es-simplicity-menus-view {
+    border-left: 1px solid #dfebf6;
+    display: flex;
+    .es-simplicity-menus-box + .es-simplicity-menus-box {
+      border-left: 1px solid #dfebf6;
+    }
+  }
+  &.es-simplicity-menus-plus {
+    .es-simplicity-menus-box {
+      .es-simplicity-menus-title {
+        padding: 13px 7px 13px 14px;
+      }
+      .es-simplicity-menus-scrollbar {
+        top: 57px;
       }
     }
   }
 }
+.es-simplicity-menus-lists {
+  padding: 8px 0;
+  &.is-fold {
+    padding: 4px 0;
+  }
+}
 .es-simplicity-menus-item {
   height: 48px;
   display: flex;
   align-items: center;
-  padding: 8px 12px;
+  padding: 8px 24px;
   position: relative;
   cursor: pointer;
   overflow: hidden;
-  border-radius: 6px;
   color: #15224c;
+  &.is-fold {
+    height: 40px;
+    padding: 4px 12px;
+    .es-simplicity_apps-icon {
+      margin-right: 0;
+    }
+    .es-simplicity-menus-tips {
+      top: 0;
+      right: 0;
+      color: #ff0000;
+      font-size: 12px;
+    }
+    &:hover {
+      &::before {
+        inset: 0 4px;
+      }
+    }
+    &.is-active {
+      &::before {
+        inset: 0 4px;
+      }
+    }
+  }
   .es-simplicity_apps-icon {
+    height: 24px;
     padding: 4px;
     border-radius: 3px;
     margin-right: 12px;
     color: $--color-primary;
+    z-index: 1;
   }
   .es-simplicity-menus-tips {
     font-size: 14px;
@@ -414,63 +555,91 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    position: relative;
   }
   &:hover {
     color: $--color-primary;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0 12px;
+      background-color: $--color-primary-light-2;
+      border-radius: 6px;
+      z-index: 0;
+    }
   }
   &.is-active {
-    background-color: $--color-primary-light-1;
     color: $--color-primary;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0 12px;
+      background-color: $--color-primary-light-2;
+      border-radius: 6px;
+      z-index: 0;
+    }
   }
 }
 .es-simplicity-iframe {
   height: 100%;
-  .el-tabs__header {
+  & > .el-tabs__header {
     height: $--main-simplicity-header-height;
     padding: ($--main-simplicity-header-height - 36px)/2 0;
     margin: 0;
     border-bottom: 1px solid #dfebf6;
     background-color: #fff;
-  }
-  .el-tabs__nav-main {
-    margin: 0 10px;
-  }
-  .el-tabs__nav-next,
-  .el-tabs__nav-prev {
-    height: 36px;
-    font-size: 16px;
-    padding: 0 6px;
-  }
-  .el-tabs__nav-wrap {
-    padding: 0 10px;
-    &.is-scrollable {
-      padding: 0 28px;
+    & > .el-tabs__nav-main {
+      margin: 0 10px;
     }
-    &::after {
-      content: none;
-    }
-    .el-tabs__item {
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
       height: 36px;
-      line-height: 36px;
-      padding: 0 12px !important;
-      background: #f2f2f2;
-      border-radius: 6px;
-      color: #737a94;
-      & + .el-tabs__item {
-        margin-left: 12px;
+      font-size: 16px;
+      padding: 0 6px;
+    }
+    .el-tabs__nav-wrap {
+      padding: 0 10px;
+      &.is-scrollable {
+        padding: 0 28px;
+      }
+      &::after {
+        content: none;
       }
-      &.is-active {
-        color: $--color-primary;
-        background-color: $--color-primary-light-1;
+      .el-tabs__item {
+        height: 36px;
+        line-height: 36px;
+        padding: 0 12px !important;
+        background: #f2f2f2;
+        border-radius: 6px;
+        color: #737a94;
+        & + .el-tabs__item {
+          margin-left: 12px;
+        }
+        &.is-active {
+          color: $--color-primary;
+          background-color: $--color-primary-light-1;
+        }
       }
     }
   }
-  .el-tabs__content {
+  & > .el-tabs__content {
     height: calc(100% - #{$--main-simplicity-header-height});
     .el-tab-pane {
       height: 100%;
     }
   }
+  &.is-open {
+    & > .el-tabs__content {
+      animation: open-submenu 0.3s 1ms forwards;
+    }
+    &.is-fold {
+      & > .el-tabs__content {
+        animation: close-submenu 0.1s 0ms forwards;
+      }
+    }
+  }
 }
 
 .es-simplicity-handler {
@@ -519,7 +688,7 @@
   }
   .es-simplicity-online-num {
     font-weight: 700;
-    color: #ffea00;
+    color: $--color-primary;
     font-size: 15px;
   }
   .es-simplicity-handler-item {
@@ -576,3 +745,131 @@
   color: #6e7c98;
   z-index: 9999;
 }
+.es-simplicity-message {
+  .el-drawer__body {
+    @extend .es-flex-vertical;
+    padding: 20px;
+  }
+  .es-simplicity-message-header {
+    padding-bottom: 20px;
+    .es-simplicity-message-title {
+      font-weight: bold;
+      font-size: 20px;
+      color: #15224c;
+      line-height: 24px;
+    }
+  }
+  .es-simplicity-message-overlook,
+  .es-simplicity-message-handler {
+    margin-left: 12px;
+  }
+  .es-simplicity-message-lists-box {
+    flex: 1;
+    position: relative;
+    .es-simplicity-message-lists {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+  .es-simplicity-message-total {
+    padding-top: 20px;
+    font-size: 14px;
+    color: #6e7c98;
+    line-height: 14px;
+  }
+}
+.es-simplicity-message-overlook,
+.es-simplicity-message-handler {
+  font-size: 14px;
+  color: #737a94;
+  float: right;
+  cursor: pointer;
+}
+.es-simplicity-message-handler {
+  color: #2591f7;
+}
+.es-simplicity-message-lists {
+  .es-simplicity-message-item {
+    background: #ffffff;
+    box-shadow: 0px 12px 24px 0px rgba(33, 70, 141, 0.1);
+    border-radius: 9px;
+    padding: 16px 24px;
+    & + .es-simplicity-message-item {
+      margin-top: 20px;
+    }
+    .es-simplicity-message-item-title {
+      font-weight: bold;
+      font-size: 14px;
+      color: #15224c;
+      line-height: 16px;
+      margin-bottom: 8px;
+    }
+    .es-simplicity-message-item-time {
+      font-size: 12px;
+      color: #737a94;
+      line-height: 14px;
+    }
+  }
+  .es-simplicity-message-tips {
+    font-size: 14px;
+    color: #6e7c98;
+    text-align: center;
+    padding-top: 20px;
+  }
+}
+.es-simplicity-notice-box {
+  width: 420px;
+  padding: 80px 24px 54px 24px;
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  z-index: 9999;
+  background-color: #f5fbff;
+  border-radius: 9px;
+  //animation: ltr-drawer-out 0.3s;
+  animation: rtl-drawer-out 0.3s;
+  overflow: hidden;
+  &.es-in {
+    //animation: ltr-drawer-in 0.3s 1ms;
+    animation: rtl-drawer-in 0.3s 1ms;
+  }
+  .es-simplicity-message-overlook,
+  .es-simplicity-message-handler {
+    margin-left: 12px;
+  }
+  .es-simplicity-notice-header {
+    height: 56px;
+    font-size: 16px;
+    color: #ffffff;
+    padding: 16px 24px;
+    background-color: #2591f7;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+  .es-simplicity-notice-lists {
+    height: 304px;
+  }
+  .es-notice-footer {
+    border-top: 1px solid #dfebf6;
+    padding: 20px 44px 16px;
+    font-size: 14px;
+    color: #737a94;
+    line-height: 17px;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    left: 24px;
+    right: 24px;
+    bottom: 0;
+  }
+}
+.el-popover.es-simplicity-menus-hide {
+  display: none !important;
+  opacity: 0;
+  z-index: -999;
+}

package/packages/theme-chalk/src/tabs.scss

@@ -1,7 +1,7 @@
 @import './common/var.scss';
 .es-tabs {
   &:not(.el-tabs--card):not(.el-tabs--border-card):not(.el-tabs--left) {
-    .el-tabs__nav-wrap {
+    .el-tabs__nav-wrap:not(.is-scrollable) {
       padding: 5px 8px 0 8px;
       .is-top {
         .el-tabs__item {
@@ -26,36 +26,32 @@
     }
   }
   &.el-tabs--border-card {
-    .el-tabs__header {
+    & > .el-tabs__header {
       height: 44px;
       border-bottom: $--border-base;
-    }
-    .el-tabs__nav-scroll {
-      padding: 9px 10px 0 10px;
-      .el-tabs__item {
-        height: 36px;
-        line-height: 36px;
-        .el-badge {
-          position: absolute;
-          right: 0;
-          top: 0;
-          line-height: 0;
-          .el-badge__content {
-            display: block;
-            line-height: 16px;
-            font-weight: 200;
-            width: 16px;
-            height: 16px;
-            padding: 0;
-            border: 0;
+      .el-tabs__nav-scroll {
+        padding: 9px 10px 0 10px;
+        .el-tabs__item {
+          height: 36px;
+          line-height: 36px;
+          .el-badge {
+            .el-badge__content {
+              display: block;
+              line-height: 16px;
+              font-weight: 200;
+              width: 16px;
+              height: 16px;
+              padding: 0;
+              border: 0;
+            }
+          }
+          &.is-active {
+            border-top-color: #d9d9d9;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            font-weight: bold;
+            color: $--color-primary;
           }
-        }
-        &.is-active {
-          border-top-color: #d9d9d9;
-          border-top-left-radius: 2px;
-          border-top-right-radius: 2px;
-          font-weight: bold;
-          color: $--color-primary;
         }
       }
     }

package/packages/theme-chalk/src/toolbar.scss

@@ -12,12 +12,23 @@
       .el-button {
         padding: 4px 8px;
         & + .el-button,
-        & + .es-button-badge {
+        & + .es-button-badge,
+        & + .es-upload,
+        & + .el-dropdown,
+        & + .es-selector {
           margin-left: 6px;
         }
       }
-      .es-button-badge + .el-button {
-        margin-left: 6px;
+      .es-button-badge,
+      .es-upload,
+      .es-selector {
+        & + .el-button,
+        & + .es-button-badge,
+        & + .es-upload,
+        & + .el-dropdown,
+        & + .es-selector {
+          margin-left: 6px;
+        }
       }
     }
     .es-form {
@@ -108,7 +119,8 @@
     }
   }
   .es-form-search-small {
-    .el-form-item__content {
+    .el-form-item__content,
+    .el-input-number {
       line-height: 32px !important;
     }
     .el-form-item__label {

package/packages/theme-chalk/src/tree.scss

@@ -53,7 +53,8 @@
       right: 0;
       bottom: 0;
     }
-    .el-tooltip {
+    .el-tooltip,
+    .es-icon-node {
       width: 100%;
       height: 20px;
       line-height: 20px;
@@ -72,7 +73,8 @@
   }
   .el-tree-node.is-current > .el-tree-node__content {
     background-color: transparent;
-    .el-tooltip {
+    .el-tooltip,
+    .es-icon-node {
       background-color: #f0f7ff;
     }
   }

package/packages/upload/src/main.vue

@@ -694,7 +694,9 @@ export default {
         let pb =
           parseInt(util.getStyle(this.$el.parentNode, 'padding-bottom'), 10) ||
           0;
-        let btn = this.$refs.upload.$children[0].$el.offsetHeight || 0;
+        let btn = this.$refs.upload
+          ? this.$refs.upload.$children[0].$el.offsetHeight || 0
+          : 0;
         this.boxHeight =
           this.$el.parentNode.offsetHeight - pt - pb - btn + 'px';
       }