@tmagic/editor 1.0.0-beta.9 → 1.0.0-rc.11

package/README.md

@@ -0,0 +1 @@
+# [文档](https://tencent.github.io/tmagic-editor/docs/)

package/dist/style.css

@@ -48,12 +48,15 @@
   display: flex !important;
   transition: all 0.3s ease 0s;
   border-bottom: 2px solid transparent;
-  margin: 0 5px;
+  margin: 0;
 }
 .m-editor-nav-menu .menu-item .is-disabled {
   opacity: 0.5;
 }
-.m-editor-nav-menu .menu-item .el-button--text,
+.m-editor-nav-menu .menu-item .is-text {
+  padding: 5px;
+}
+.m-editor-nav-menu .menu-item .is-text,
 .m-editor-nav-menu .menu-item i {
   color: #070303;
 }
@@ -153,7 +156,7 @@
   border: 0;
   height: auto;
   padding: 8px;
-  color: white;
+  color: rgb(255, 255, 255);
   box-sizing: border-box;
 }
 .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {
@@ -174,7 +177,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {
-  color: white;
+  color: rgb(255, 255, 255);
 }
 .m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {
   font-size: 12px;
@@ -251,6 +254,7 @@
 }
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
+  overflow: hidden;
 }
 .magic-editor-layer-panel .cus-tree-node-hover {
   background-color: #f3f5f9;
@@ -286,6 +290,7 @@
   top: 0;
   left: 0;
   box-sizing: border-box;
+  z-index: 1;
 }
 .ui-component-panel .search-input .el-input__prefix {
   padding: 10px;
@@ -327,6 +332,7 @@
   color: #070303;
   flex-direction: column;
   width: 42px;
+  cursor: pointer;
 }
 .ui-component-panel .el-collapse-item__wrap .component-item i {
   font-size: 20px;
@@ -408,6 +414,9 @@
   width: 100%;
   user-select: none;
 }
+.m-editor-workspace:focus-visible {
+  outline: 0;
+}
 .m-editor-page-bar {
   position: fixed;
   bottom: 0;
@@ -416,91 +425,118 @@
   width: 100%;
   height: 32px;
   line-height: 32px;
-  background-color: #f3f3f3;
   color: #070303;
+  background-color: #f3f3f3;
   border-top: 1px solid #d9dbdd;
   z-index: 2;
   overflow: hidden;
 }
-.m-editor-page-bar .m-editor-page-bar-item {
+.m-editor-page-bar-items {
+  display: flex;
+  transition: transform 0.3s;
+}
+.m-editor-page-bar-item {
   padding: 0 10px;
   cursor: pointer;
   border-right: 1px solid #d9dbdd;
   display: flex;
   justify-items: center;
   align-items: center;
+  background-color: #f3f3f3;
+  white-space: nowrap;
 }
-.m-editor-page-bar .m-editor-page-bar-item.active {
+.m-editor-page-bar-item.active {
   background-color: #fff;
   cursor: text;
 }
-.m-editor-page-bar .m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {
+.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {
   cursor: pointer;
 }
-.m-editor-page-bar .m-editor-page-bar-item .m-editor-page-bar-title {
+.m-editor-page-bar-item-icon {
+  position: relative;
+  z-index: 1;
+}
+.m-editor-page-bar-item-title {
   max-width: 150px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
+.page-bar-popover.el-popper.el-popover {
+  padding: 10px 0;
+}
+.page-bar-popover .menu-item {
+  cursor: pointer;
+  transition: all 0.2s ease 0s;
+  padding: 5px 14px;
+}
+.page-bar-popover .menu-item .el-button--text,
+.page-bar-popover .menu-item i {
+  color: #070303;
+}
+.page-bar-popover .menu-item:hover {
+  background-color: #f3f5f9;
+}
 .m-editor-props-panel {
   padding: 0 10px;
 }
-.m-editor-props-panel .el-form-item__label {
+.m-editor-props-panel.small .el-form-item__label {
   font-size: 12px;
 }
-.m-editor-props-panel .m-fieldset legend {
+.m-editor-props-panel.small .m-fieldset legend {
   font-size: 12px;
 }
-.m-editor-props-panel .el-tabs__item {
+.m-editor-props-panel.small .el-tabs__item {
   font-size: 12px;
 }
-.m-editor-props-panel span,
-.m-editor-props-panel a,
-.m-editor-props-panel p {
-  font-size: 12px;
+.m-editor-props-panel .el-input__wrapper {
+  border-radius: 0;
 }
-.m-editor-props-panel-popper span,
-.m-editor-props-panel-popper a,
-.m-editor-props-panel-popper p {
+.m-editor-props-panel-popper.small span,
+.m-editor-props-panel-popper.small a,
+.m-editor-props-panel-popper.small p {
   font-size: 12px;
 }
 .magic-editor-content-menu {
   position: fixed;
   font-size: 12px;
   background: #fff;
-  color: #333;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
   z-index: 9999;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
+  overflow: auto;
+  max-height: 100%;
 }
-.magic-editor-content-menu .separation {
-  width: 100%;
-  height: 0;
-  border-color: rgba(155, 155, 155, 0.1);
-}
-.magic-editor-content-menu .subMenu {
-  position: absolute;
-  right: 0;
-  transform: translate(100%, 0);
-  background-color: #fff;
+.magic-editor-content-menu .menu-item {
   color: #333;
-  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-  top: 0;
-  height: 223px;
-}
-.magic-editor-content-menu-item {
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   cursor: pointer;
   min-width: 140px;
   transition: all 0.2s ease 0s;
-  padding: 10px 14px;
+  padding: 5px 14px;
   border-left: 2px solid transparent;
 }
+.magic-editor-content-menu .menu-item .el-button {
+  width: 100%;
+  justify-content: flex-start;
+}
+.magic-editor-content-menu .menu-item .el-button--text,
+.magic-editor-content-menu .menu-item i {
+  color: #070303;
+}
+.magic-editor-content-menu .menu-item.divider {
+  padding: 0 14px;
+}
+.magic-editor-content-menu .menu-item.divider .el-divider {
+  margin: 0;
+}
+.magic-editor-content-menu .menu-item:hover {
+  background-color: #f3f5f9;
+}
 .m-editor-stage {
   position: relative;
   width: 100%;