eoss-ui 0.5.81-beta → 0.5.81-beta10

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

@@ -4,26 +4,36 @@
   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;
@@ -45,7 +55,7 @@
   }
   .es-simplicity-side-app {
     text-align: center;
-    color: #fff;
+    color: rgba(255, 255, 255, 0.3);
     height: 64px;
     padding: 6px 0;
     position: relative;
@@ -56,6 +66,37 @@
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
+    .el-badge {
+      padding: 8px 0;
+    }
+    .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 {
     width: 100%;
@@ -63,10 +104,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;
   }
 }
@@ -74,6 +116,7 @@
   width: 100%;
   border-radius: 50%;
   vertical-align: top;
+  background: transparent;
 }
 .es-simplicity-main {
   height: 100%;
@@ -81,19 +124,48 @@
   overflow: hidden;
   position: relative;
   .es-simplicity-apps,
+  .es-simplicity-message,
+  .es-simplicity-message-modal,
   .es-simplicity-subMenus,
-  .es-simplicity-apps-modal {
+  .es-simplicity-apps-modal,
+  .es-simplicity-public-drawer {
     position: absolute;
     top: $--main-simplicity-header-height;
+    height: calc(100% - #{$--main-simplicity-header-height});
   }
   .es-simplicity-apps {
     .el-drawer__body {
       background-color: #f4f4f4;
+      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;
+    overflow: visible;
+    right: auto;
+    .el-drawer {
+      box-shadow: none;
+      overflow: visible;
+      border-right: 1px solid #dfebf6;
+    }
+  }
+
+  .es-simplicity-message {
+    .el-drawer {
+      background-color: #f4f4f4;
     }
   }
 }
@@ -133,13 +205,22 @@
       margin-bottom: 16px;
       color: $--color-primary;
     }
+    .es-simplicity_apps-search {
+      width: 200px;
+      .el-input__inner {
+        border-radius: 16px;
+      }
+    }
   }
   .es-simplicity_apps-title {
     font-weight: 500;
     font-size: 20px;
     color: #15224c;
-    line-height: 24px;
+    line-height: 32px;
     padding: 6px 12px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   .es-simplicity_apps-box {
     position: relative;
@@ -169,6 +250,9 @@
   }
   .es-simplicity_apps-icon {
     font-size: 34px;
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
   }
   .es-simplicity_apps-text {
     font-weight: 400;
@@ -189,7 +273,7 @@
     bottom: 0;
     left: 0;
     z-index: -1;
-    background-color: rgba($--color-primary, 0.85);
+    background-color: $--color-primary-light-5;
     color: #fff;
   }
   .es-simplicity_apps-pagination {
@@ -327,51 +411,105 @@
     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-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;
@@ -390,62 +528,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;
-  }
-  .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;
+    background-color: #fff;
+    & > .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: rgba($--color-primary, 0.08);
+      .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 {
+      padding-left: $--main-simplicity-menu-width;
+    }
+    &.is-fold {
+      & > .el-tabs__content {
+        padding-left: 48px;
+      }
+    }
+  }
 }
 
 .es-simplicity-handler {
@@ -494,7 +661,7 @@
   }
   .es-simplicity-online-num {
     font-weight: 700;
-    color: #ffea00;
+    color: $--color-primary;
     font-size: 15px;
   }
   .es-simplicity-handler-item {
@@ -510,7 +677,7 @@
     cursor: pointer;
     &:hover {
       color: #fff;
-      background: $--color-primary-light-4;
+      background: $--color-primary-light-5;
       box-shadow: 0px 4px 16px 0px $--color-primary-light-1;
     }
   }
@@ -543,3 +710,139 @@
     }
   }
 }
+.es-simplicity-drawer-close {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+  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/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';
       }

package/src/index.js

@@ -121,7 +121,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.5.81-beta',
+  version: '0.5.81-beta10',
   install,
   Button,
   ButtonGroup,