refactor(styles): rewrite block styles (#868)

* refactor(styles): rewrite PageTree styles * refactor(styles): rewrite some block styles (#1) refactor(styles): rewrite some block styles * Fix/new UI lc (#2) fix/new ui * fix some styles * fix some styles * fix styles * fix potential issue * refactor by comments * fix some issues * fix some style issues * fix some style issues
opentiny · Oct 25, 2024 · 4697f07 · 4697f07
1 parent fb00920
commit 4697f07
Show file tree

Hide file tree

Showing 24 changed files with 577 additions and 399 deletions.
diff --git a/packages/common/component/BindI18n.vue b/packages/common/component/BindI18n.vue
@@ -169,11 +169,10 @@ export default {
 
 <style lang="less" scoped>
 .languageContent {
-  width: 254px;
-  border-radius: 5px;
   text-align: center;
   z-index: 99;
   margin-top: 5px;
+  margin-bottom: 16px;
 
   .tiny-svg {
     margin-right: 10px;
@@ -184,7 +183,6 @@ export default {
     }
   }
   .tiny-button {
-    margin-top: 10px;
     max-width: initial;
     padding: 0 12px;
     background-color: var(--ti-lowcode-tabs-border-color);
@@ -196,18 +194,24 @@ export default {
     }
   }
   .addNewLanguage {
-    padding: 0px 5px 5px;
     .tiny-input {
       display: flex;
       margin-bottom: 10px;
+      padding: 0 8px;
       align-items: center;
       label {
-        width: 80px;
+        text-wrap: nowrap;
+        text-align: left;
+        width: 50px;
       }
       display: flex;
     }
+    .tiny-input__inner {
+      flex: 1;
+    }
     .add-btns {
       text-align: right;
+      padding: 0 8px;
     }
   }
 }

diff --git a/packages/common/component/BlockDescription.vue b/packages/common/component/BlockDescription.vue
@@ -1,7 +1,10 @@
 <template>
-  <meta-description class="description" type="warning">
+  <meta-description class="description">
     <template #content>
-      <div @click="openBlockSetting" class="setting-block"><span class="add-icon">+</span>设置区块暴露属性</div>
+      <div class="setting-block" @click="openBlockSetting">
+        <svg-icon name="block-add-prop"></svg-icon>
+        <span>设置区块暴露属性</span>
+      </div>
     </template>
   </meta-description>
 </template>
@@ -33,17 +36,28 @@ export default {
 
 <style lang="less" scoped>
 .description {
-  border-color: var(--ti-lowcode-description-color);
+  font-size: 12px;
+
+  &.wrapper {
+    height: 32px;
+    padding: 0 12px;
+    border-left: 0;
+    box-shadow: none;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    background-color: var(--te-common-bg-container);
+  }
 
   .setting-block {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     cursor: pointer;
   }
-  .add-icon {
-    padding: 0 3px;
-    margin: 0 5px;
-    color: var(--ti-lowcode-toolbar-icon-color);
-    border-radius: 50%;
-    background-color: var(--ti-lowcode-description-color);
+
+  .svg-icon {
+    font-size: 16px;
   }
 }
 </style>
diff --git a/packages/common/component/BlockLinkField.vue b/packages/common/component/BlockLinkField.vue
@@ -1,14 +1,27 @@
 <template>
-  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
+  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover" :visible-arrow="false">
     <template #reference>
-      <span class="link-icon">+</span>
+      <div>
+        <span class="icon-wrap bind-prop">
+          <svg-icon name="block-bind-prop"></svg-icon>
+        </span>
+        <span class="icon-wrap add-prop">
+          <svg-icon name="block-add-prop"></svg-icon>
+        </span>
+      </div>
     </template>
     <ul class="context-menu">
       <li v-if="isLinked" class="menu-item" @click="unLink(data)">取消关联</li>
-      <li v-else class="menu-item" @click="addProperty(data)">+ 新建属性</li>
-      <li class="menu-item" @click="openBlockSetting">管理属性</li>
-      <li v-for="item in properties" :key="item.property" class="menu-item">
-        {{ item.property }}
+      <li v-else class="menu-item" @click="addProperty(data)">
+        <svg-icon name="plus-circle"></svg-icon>
+        <span>创建并链接新属性</span>
+      </li>
+      <li class="menu-item" @click="openBlockSetting">
+        <svg-icon name="setting"></svg-icon>
+        <span>打开属性面板</span>
+      </li>
+      <li v-for="item in properties" :key="item.property" class="menu-item property">
+        <span>{{ item.property }}</span>
         <span v-if="item.property !== data?.linked?.blockProperty" class="link-item" @click="editProperty(item)">
           关联
         </span>
@@ -51,14 +64,12 @@ export default {
       state.newPropertyName = ''
 
       confirm({
-        title: '新建区块属性',
+        title: '属性名称',
         status: 'custom',
         message: {
           render() {
             return (
               <div>
-                <div>此新字段将自动链接到此属性</div>
-                <br />
                 <TinyInput placeholder="请输入字段名称" v-model={state.newPropertyName}></TinyInput>
               </div>
             )
@@ -141,49 +152,68 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.link-icon {
-  width: 16px;
-  height: 16px;
-  margin: 0 5px;
-  border-radius: 50%;
-  line-height: 16px;
-  text-align: center;
-  color: var(--ti-lowcode-block-link-field-link-icon-color);
-  background-color: var(--ti-lowcode-block-link-field-link-icon-bg-color);
-  cursor: pointer;
-  &:hover {
-    transform: scale(1.2);
+.icon-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+
+  .svg-icon {
+    font-size: 14px;
+  }
+
+  &:hover .svg-icon {
+    transform: scale(1.25);
+  }
+
+  &.bind-prop {
+    z-index: 30;
+    &:hover {
+      z-index: 10;
+    }
+  }
+
+  &.add-prop {
+    z-index: 20;
+    &:hover {
+      z-index: 30;
+    }
   }
 }
 
 .context-menu {
   width: 200px;
-  padding: 3px 0;
+  padding: 8px 0;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   .menu-item {
+    line-height: 18px;
     color: var(--ti-lowcode-attr-popover-menu-item-color);
     display: flex;
-    justify-content: space-between;
-    padding: 6px 15px;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
     cursor: pointer;
     &:hover {
       background: var(--ti-lowcode-attr-popover-menu-item-hover-bg-color);
     }
-
+    &.property {
+      justify-content: space-between;
+    }
     .link-item {
       cursor: pointer;
-      background-color: var(--ti-lowcode-attr-popover-menu-item-link-item-bg-color);
-      color: var(--ti-lowcode-attr-popover-menu-item-link-item-color);
-      padding: 2px 6px;
-      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
     }
   }
+
+  .svg-icon {
+    font-size: 16px;
+  }
 }
 </style>
 <style lang="less">
-.tiny-popover.tiny-popper.block-new-attr-popover {
+.tiny-popover.tiny-popper.tiny-popper.block-new-attr-popover[x-placement] {
   // 这里不知为啥要添加 max-height，后续确认无用可删除
   max-height: 65vh;
   padding: 0;

diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
@@ -533,15 +533,13 @@ export default {
     line-height: 18px;
   }
 
-  .linked {
-    background-color: var(--ti-lowcode-meta-config-item-link-color);
-  }
-
   .item-input {
     display: flex;
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
+    position: relative;
+    overflow: visible;
     &:has(.verify-failed) {
       align-items: flex-start;
     }

diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
@@ -265,23 +265,18 @@ export default {
   height: 16px;
   line-height: 16px;
 }
-.popover-list {
-  ul li:first-child {
-    margin-top: 8px;
-  }
-  ul li:last-child {
-    margin-bottom: 8px;
-  }
-}
 .life-cycle-alert {
   color: var(--ti-lowcode-life-cycle-alert-color);
   margin-left: 20px;
   margin-right: 20px;
 }
 
 .popover-list {
+  margin: 8px 0;
   li {
-    padding: 8px 30px 8px 16px;
+    padding: 0 12px;
+    margin: 0 -8px;
+    line-height: 24px;
     cursor: pointer;
     &:hover {
       background: var(--ti-lowcode-life-cycle-item-hover-bg);

diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue
@@ -36,24 +36,14 @@
                 ></template>
 
                 <template #reference>
-                  <tiny-tooltip class="item" effect="dark" :content="item.title" placement="top">
-                    <icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
-                  </tiny-tooltip>
+                  <icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
                 </template>
               </tiny-popover>
             </template>
             <template v-else>
-              <tiny-tooltip
-                class="item"
-                effect="dark"
-                :content="item.title"
-                placement="top"
-                @click="btnClick($event, item.type)"
-              >
-                <span class="item-icon">
-                  <component :is="item.icon"></component>
-                </span>
-              </tiny-tooltip>
+              <span class="item-icon" @click="btnClick($event, item.type)">
+                <component :is="item.icon"></component>
+              </span>
             </template>
           </template>
         </slot>