Skip to content

Commit 4697f07

Browse files
gene9831gene9831
authored
refactor(styles): rewrite block styles (opentiny#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
1 parent fb00920 commit 4697f07

24 files changed

Lines changed: 577 additions & 399 deletions

‎packages/common/component/BindI18n.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,10 @@ export default {
169169
170170
<style lang="less" scoped>
171171
.languageContent {
172-
width: 254px;
173-
border-radius: 5px;
174172
text-align: center;
175173
z-index: 99;
176174
margin-top: 5px;
175+
margin-bottom: 16px;
177176
178177
.tiny-svg {
179178
margin-right: 10px;
@@ -184,7 +183,6 @@ export default {
184183
}
185184
}
186185
.tiny-button {
187-
margin-top: 10px;
188186
max-width: initial;
189187
padding: 0 12px;
190188
background-color: var(--ti-lowcode-tabs-border-color);
@@ -196,18 +194,24 @@ export default {
196194
}
197195
}
198196
.addNewLanguage {
199-
padding: 0px 5px 5px;
200197
.tiny-input {
201198
display: flex;
202199
margin-bottom: 10px;
200+
padding: 0 8px;
203201
align-items: center;
204202
label {
205-
width: 80px;
203+
text-wrap: nowrap;
204+
text-align: left;
205+
width: 50px;
206206
}
207207
display: flex;
208208
}
209+
.tiny-input__inner {
210+
flex: 1;
211+
}
209212
.add-btns {
210213
text-align: right;
214+
padding: 0 8px;
211215
}
212216
}
213217
}

‎packages/common/component/BlockDescription.vue‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
2-
<meta-description class="description" type="warning">
2+
<meta-description class="description">
33
<template #content>
4-
<div @click="openBlockSetting" class="setting-block"><span class="add-icon">+</span>设置区块暴露属性</div>
4+
<div class="setting-block" @click="openBlockSetting">
5+
<svg-icon name="block-add-prop"></svg-icon>
6+
<span>设置区块暴露属性</span>
7+
</div>
58
</template>
69
</meta-description>
710
</template>
@@ -33,17 +36,28 @@ export default {
3336

3437
<style lang="less" scoped>
3538
.description {
36-
border-color: var(--ti-lowcode-description-color);
39+
font-size: 12px;
40+
41+
&.wrapper {
42+
height: 32px;
43+
padding: 0 12px;
44+
border-left: 0;
45+
box-shadow: none;
46+
border-radius: 4px;
47+
display: flex;
48+
align-items: center;
49+
background-color: var(--te-common-bg-container);
50+
}
3751
3852
.setting-block {
53+
display: flex;
54+
align-items: center;
55+
gap: 4px;
3956
cursor: pointer;
4057
}
41-
.add-icon {
42-
padding: 0 3px;
43-
margin: 0 5px;
44-
color: var(--ti-lowcode-toolbar-icon-color);
45-
border-radius: 50%;
46-
background-color: var(--ti-lowcode-description-color);
58+
59+
.svg-icon {
60+
font-size: 16px;
4761
}
4862
}
4963
</style>

‎packages/common/component/BlockLinkField.vue‎

Lines changed: 60 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
<template>
2-
<tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
2+
<tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover" :visible-arrow="false">
33
<template #reference>
4-
<span class="link-icon">+</span>
4+
<div>
5+
<span class="icon-wrap bind-prop">
6+
<svg-icon name="block-bind-prop"></svg-icon>
7+
</span>
8+
<span class="icon-wrap add-prop">
9+
<svg-icon name="block-add-prop"></svg-icon>
10+
</span>
11+
</div>
512
</template>
613
<ul class="context-menu">
714
<li v-if="isLinked" class="menu-item" @click="unLink(data)">取消关联</li>
8-
<li v-else class="menu-item" @click="addProperty(data)">+ 新建属性</li>
9-
<li class="menu-item" @click="openBlockSetting">管理属性</li>
10-
<li v-for="item in properties" :key="item.property" class="menu-item">
11-
{{ item.property }}
15+
<li v-else class="menu-item" @click="addProperty(data)">
16+
<svg-icon name="plus-circle"></svg-icon>
17+
<span>创建并链接新属性</span>
18+
</li>
19+
<li class="menu-item" @click="openBlockSetting">
20+
<svg-icon name="setting"></svg-icon>
21+
<span>打开属性面板</span>
22+
</li>
23+
<li v-for="item in properties" :key="item.property" class="menu-item property">
24+
<span>{{ item.property }}</span>
1225
<span v-if="item.property !== data?.linked?.blockProperty" class="link-item" @click="editProperty(item)">
1326
关联
1427
</span>
@@ -51,14 +64,12 @@ export default {
5164
state.newPropertyName = ''
5265
5366
confirm({
54-
title: '新建区块属性',
67+
title: '属性名称',
5568
status: 'custom',
5669
message: {
5770
render() {
5871
return (
5972
<div>
60-
<div>此新字段将自动链接到此属性</div>
61-
<br />
6273
<TinyInput placeholder="请输入字段名称" v-model={state.newPropertyName}></TinyInput>
6374
</div>
6475
)
@@ -141,49 +152,68 @@ export default {
141152
}
142153
</script>
143154
<style lang="less" scoped>
144-
.link-icon {
145-
width: 16px;
146-
height: 16px;
147-
margin: 0 5px;
148-
border-radius: 50%;
149-
line-height: 16px;
150-
text-align: center;
151-
color: var(--ti-lowcode-block-link-field-link-icon-color);
152-
background-color: var(--ti-lowcode-block-link-field-link-icon-bg-color);
153-
cursor: pointer;
154-
&:hover {
155-
transform: scale(1.2);
155+
.icon-wrap {
156+
position: absolute;
157+
top: 0;
158+
left: 0;
159+
transform: translate(-50%, -50%);
160+
161+
.svg-icon {
162+
font-size: 14px;
163+
}
164+
165+
&:hover .svg-icon {
166+
transform: scale(1.25);
167+
}
168+
169+
&.bind-prop {
170+
z-index: 30;
171+
&:hover {
172+
z-index: 10;
173+
}
174+
}
175+
176+
&.add-prop {
177+
z-index: 20;
178+
&:hover {
179+
z-index: 30;
180+
}
156181
}
157182
}
158183
159184
.context-menu {
160185
width: 200px;
161-
padding: 3px 0;
186+
padding: 8px 0;
162187
border-radius: 3px;
163188
display: flex;
164189
flex-direction: column;
165190
.menu-item {
191+
line-height: 18px;
166192
color: var(--ti-lowcode-attr-popover-menu-item-color);
167193
display: flex;
168-
justify-content: space-between;
169-
padding: 6px 15px;
194+
align-items: center;
195+
gap: 4px;
196+
padding: 4px 12px;
170197
cursor: pointer;
171198
&:hover {
172199
background: var(--ti-lowcode-attr-popover-menu-item-hover-bg-color);
173200
}
174-
201+
&.property {
202+
justify-content: space-between;
203+
}
175204
.link-item {
176205
cursor: pointer;
177-
background-color: var(--ti-lowcode-attr-popover-menu-item-link-item-bg-color);
178-
color: var(--ti-lowcode-attr-popover-menu-item-link-item-color);
179-
padding: 2px 6px;
180-
border-radius: 2px;
206+
color: var(--te-common-text-emphasize);
181207
}
182208
}
209+
210+
.svg-icon {
211+
font-size: 16px;
212+
}
183213
}
184214
</style>
185215
<style lang="less">
186-
.tiny-popover.tiny-popper.block-new-attr-popover {
216+
.tiny-popover.tiny-popper.tiny-popper.block-new-attr-popover[x-placement] {
187217
// 这里不知为啥要添加 max-height，后续确认无用可删除
188218
max-height: 65vh;
189219
padding: 0;

‎packages/common/component/ConfigItem.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -533,15 +533,13 @@ export default {
533533
line-height: 18px;
534534
}
535535
536-
.linked {
537-
background-color: var(--ti-lowcode-meta-config-item-link-color);
538-
}
539-
540536
.item-input {
541537
display: flex;
542538
justify-content: space-between;
543539
align-items: center;
544540
overflow: hidden;
541+
position: relative;
542+
overflow: visible;
545543
&:has(.verify-failed) {
546544
align-items: flex-start;
547545
}

‎packages/common/component/LifeCycles.vue‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -265,23 +265,18 @@ export default {
265265
height: 16px;
266266
line-height: 16px;
267267
}
268-
.popover-list {
269-
ul li:first-child {
270-
margin-top: 8px;
271-
}
272-
ul li:last-child {
273-
margin-bottom: 8px;
274-
}
275-
}
276268
.life-cycle-alert {
277269
color: var(--ti-lowcode-life-cycle-alert-color);
278270
margin-left: 20px;
279271
margin-right: 20px;
280272
}
281273
282274
.popover-list {
275+
margin: 8px 0;
283276
li {
284-
padding: 8px 30px 8px 16px;
277+
padding: 0 12px;
278+
margin: 0 -8px;
279+
line-height: 24px;
285280
cursor: pointer;
286281
&:hover {
287282
background: var(--ti-lowcode-life-cycle-item-hover-bg);

‎packages/common/component/MetaListItem.vue‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,24 +36,14 @@
3636
></template>
3737

3838
<template #reference>
39-
<tiny-tooltip class="item" effect="dark" :content="item.title" placement="top">
40-
<icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
41-
</tiny-tooltip>
39+
<icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
4240
</template>
4341
</tiny-popover>
4442
</template>
4543
<template v-else>
46-
<tiny-tooltip
47-
class="item"
48-
effect="dark"
49-
:content="item.title"
50-
placement="top"
51-
@click="btnClick($event, item.type)"
52-
>
53-
<span class="item-icon">
54-
<component :is="item.icon"></component>
55-
</span>
56-
</tiny-tooltip>
44+
<span class="item-icon" @click="btnClick($event, item.type)">
45+
<component :is="item.icon"></component>
46+
</span>
5747
</template>
5848
</template>
5949
</slot>

0 commit comments

Comments
 (0)