@cmstops/pro-compo 0.1.8 → 0.1.9

package/lib/resourceModal/style/MainContent.less

@@ -0,0 +1,200 @@
+.simple-resources {
+  .arco-scrollbar {
+    height: 100%;
+
+    .dialog-media-selection-scroll {
+      height: 100%;
+      overflow: auto;
+
+      .file-wrap {
+        .folder-list {
+          display: flex;
+          flex-wrap: wrap;
+          padding-left: 20px;
+
+          .folder-item {
+            width: 20%;
+            cursor: pointer;
+
+            .wrap {
+              margin: 0 20px 10px 0;
+              background: #fff;
+              border: 1px solid #ebeef5;
+              border-radius: 4px;
+
+              &:hover,
+              &.active {
+                background: #ecf2ff;
+
+                .thumb {
+                  border-color: #4886ff;
+                  transition: ease-out 0.3s;
+                }
+
+                h4 {
+                  color: #1a67d2;
+                }
+              }
+
+              .thumb {
+                height: 46px;
+                overflow: hidden;
+                font-size: 0;
+                background: url('../assets/selection/folder.png') no-repeat 13px
+                  center;
+                background-size: 17px auto;
+                border: solid 2px transparent;
+                border-radius: 4px;
+              }
+
+              h4 {
+                margin: 0;
+                padding-left: 43px;
+                overflow: hidden;
+                color: #000;
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 42px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                word-wrap: normal;
+                opacity: 0.85;
+              }
+            }
+          }
+        }
+
+        .file-list {
+          display: flex;
+          flex-wrap: wrap;
+          padding-left: 20px;
+
+          .item {
+            position: relative;
+            width: 20%;
+            overflow: hidden;
+            cursor: pointer;
+
+            .move-action {
+              opacity: 0.5;
+            }
+
+            .shadow-wrap {
+              position: relative;
+              margin: 0 20px 18px 0;
+              overflow: hidden;
+              background: #fff;
+              border: 1px solid #ebeef5;
+              border-radius: 4px;
+
+              &:hover {
+                box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+              }
+
+              &.active {
+                border: 2px solid #4886ff;
+
+                h4 {
+                  color: #1a67d2;
+                }
+              }
+
+              .transcoding-in-progress {
+                position: absolute;
+                top: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                color: floralwhite;
+                background: rgba(0, 0, 0, 0.3);
+              }
+
+              .thumb-wrap {
+                position: relative;
+                width: 100%;
+                background: url('../assets/selection/picBg.png');
+              }
+
+              h4,
+              p {
+                margin-top: 4px;
+                margin-bottom: 2px;
+                padding: 0 10px;
+                overflow: hidden;
+                color: rgba(0, 0, 0, 0.85);
+                font-size: 14px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                word-wrap: normal;
+
+                i,
+                svg {
+                  margin-right: 4px;
+                  color: #e75258;
+                  font-size: 16px;
+                  vertical-align: middle;
+                }
+
+                svg {
+                  margin-right: 4px;
+                  font-size: 16px;
+                  vertical-align: middle;
+                }
+
+                span {
+                  vertical-align: middle;
+                }
+              }
+
+              p {
+                margin-bottom: 4px;
+                font-weight: normal;
+                font-size: 12px;
+                line-height: 1em;
+                opacity: 0.65;
+              }
+            }
+          }
+
+          &::after {
+            height: 50px;
+          }
+        }
+
+        .load_more_title {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 40px;
+
+          .loadmore_tips,
+          .nomore_tips {
+            color: #949494;
+          }
+        }
+
+        .null-file {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -70%);
+
+          .null-pic {
+            display: block;
+            width: 30%;
+            margin: 20px auto;
+          }
+
+          p {
+            color: #a2a3a7;
+            font-size: 14px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/resourceModal/style/MediaPreviewer.less

@@ -0,0 +1,71 @@
+.media-previewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .viewer-close {
+    position: absolute;
+    top: 36px;
+    right: 36px;
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    color: #fff;
+    font-size: 14px;
+    line-height: 32px;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .viewer-canvas {
+    display: -webkit-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    -webkit-box-pack: center;
+    -webkit-box-align: center;
+
+    .video {
+      z-index: 101;
+      width: 1000px;
+      max-height: 90vh;
+      object-fit: contain;
+      overflow: clip;
+      overflow-clip-margin: content-box;
+    }
+
+    .audio {
+      width: 400px;
+      height: 54px;
+    }
+
+    .other {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 240px;
+      height: 200px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .text {
+        color: #fff;
+        font-size: 18px;
+      }
+    }
+  }
+}

package/lib/resourceModal/style/MediaSelection.less

@@ -0,0 +1,59 @@
+.media-selection {
+  width: 100%;
+  height: 100%;
+  // 禁止浏览器选中文字
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  .media-selection-section {
+    width: 100%;
+    height: 100%;
+
+    .components-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+
+      .media-tabs {
+        width: 100%;
+        min-width: 350px;
+        margin-top: 15px;
+
+        .arco-tabs-nav-tab {
+          padding-left: 5px;
+        }
+      }
+    }
+
+    .resources {
+      .simple-resources {
+        height: 100%;
+
+        .directory-breadcrumb {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .tool-search-box {
+            width: 100%;
+            padding: 10px 20px 20px;
+
+            .back {
+              margin-right: 10px;
+            }
+          }
+        }
+
+        .breadcrumb {
+          margin: 10px 20px;
+          font-size: 14px;
+
+          .breadcrumbItem {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/resourceModal/style/ToolbarSearch.less

@@ -0,0 +1,40 @@
+.toolbar-search-container {
+  width: 100%;
+
+  .top-container {
+    display: flex;
+
+    .filter-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      .filter-item {
+        width: auto;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.keywordsSelection {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 10px;
+
+  .selection-item {
+    padding: 8px 20px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.active {
+      color: #3a65ff;
+      background: #f2f3f8;
+      border-radius: 15px;
+    }
+  }
+}