Skip to content

Commit ea73bff

Browse files
betterdancingbetterdancing
authored
feat(style-panel): modify this style-panel styles according to the design craft (opentiny#853)
* feat(style-panel): 根据设计稿修改样式面板的UI * feat(style-panel): 根据设计稿修改样式面板的UI * feat(style-panel): 根据设计稿修改样式面板的UI * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): add style-panel can be collapsed or expanded * feat(style-panel): modify tabGroupComponent style error; * feat(style-panel): 对其设计稿后修改部分样式 * feat(style-pane): 修复部分样式颜色和间距问题 * feat(style-panel): 修复eslint报错问题 * feat(style-panel): 修改review意见 * feat(style-panel): 修复AI的review意见 * feat(style-panel): use color variables insteads color values; * feat(style-panel): fix AI reviews; * feat(style-panel): fix AI reviews * feat(style-panel): 修改颜色变量--ti-base系列为--te-base * feat(style-panel): fix item width error * feat(style-panel): fix review error * feat(style-panel): use buttonGroup & dorpDown replace tabsGroupComponent elements; * feat(style-panel): adjust the spacing font to non-italic, the spacing of the ModalMask pop-window to 20px, and the closing icon to 16px; * feat(style-panel): fix the color variables; * feat(style-panel): Modified review comments: color variables; numeric component; optimized; * feat(style-panel): Resolved the remainning styles issues * feat(style-panel): fix some reviews * feat(style-panel): Resolved the remainning styles issues * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): add style panel collapsed or expand icon * Create style-panel-expand.svg feat(style-panel): add expand icon of style collapsed tab * Create style-pabel-collapsed.svg feat(style-panel): add collapsed icon of style panel collapsed tabs * Delete packages/design-core/assets/style-pabel-collapsed.svg * Create style-panel-collapsed.svg * feat(style-panel): modify some icon color * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews
1 parent ea0440b commit ea73bff

38 files changed

+1466
-885
lines changed

‎packages/common/component/MetaCodeEditor.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<div class="editor-wrap">
33
<slot :open="open">
44
<div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
5-
<span class="text-content text-ellipsis-multiple">{{ value === '' ? buttonLabel : value }}</span>
5+
<span class="text-content text-ellipsis-multiple text-line-clamp">{{
6+
value === '' ? buttonLabel : value
7+
}}</span>
68
<svg-icon class="edit-icon" name="to-edit"></svg-icon>
79
</div>
810
<tiny-button v-else class="edit-btn" @click="open">
@@ -298,7 +300,7 @@ export default {
298300
justify-content: space-between;
299301
align-items: center;
300302
width: 100%;
301-
height: 32px;
303+
height: 24px;
302304
padding: 4px;
303305
border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
304306
border-radius: 6px;
@@ -322,6 +324,10 @@ export default {
322324
color: var(--ti-lowcode-common-text-main-color);
323325
}
324326
}
327+
328+
.text-line-clamp {
329+
-webkit-line-clamp: 1;
330+
}
325331
:deep(.tiny-dialog-box__header) {
326332
padding-bottom: 15px;
327333
}

‎packages/configurator/src/color-configurator/ColorConfigurator.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<div class="background-input">
33
<tiny-input v-model="color" placeholder="请输入颜色" @change="change">
44
<template #prefix>
5-
<input v-model="color" type="color" class="input-color" @change="changeColor" />
5+
<input v-model="inputColor" type="color" class="input-color" @change="changeColor" />
66
</template>
77
</tiny-input>
88
</div>
99
</template>
1010

1111
<script>
1212
import { Input } from '@opentiny/vue'
13-
import { ref, watchEffect } from 'vue'
13+
import { ref, computed, watchEffect } from 'vue'
1414
1515
export default {
1616
components: {
@@ -29,6 +29,7 @@ export default {
2929
emits: ['change', 'update:modelValue'],
3030
setup(props, { emit }) {
3131
const color = ref(props.modelValue)
32+
const inputColor = computed(() => color.value || '#FFFFFF')
3233
3334
const change = (value) => {
3435
emit('update:modelValue', value)
@@ -45,6 +46,7 @@ export default {
4546
4647
return {
4748
color,
49+
inputColor,
4850
change,
4951
changeColor
5052
}
@@ -57,7 +59,7 @@ export default {
5759
width: 100%;
5860
5961
.input-color {
60-
width: 22px;
62+
width: 20px;
6163
height: 24px;
6264
border: none;
6365
background: transparent;

‎packages/configurator/src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import SliderConfigurator from './slider-configurator/SliderConfigurator.vue'
2626
import SlotConfigurator from './slot-configurator/SlotConfigurator.vue'
2727
import SwitchConfigurator from './switch-configurator/SwitchConfigurator.vue'
2828
import TableColumnsConfigurator from './table-columns-configurator/TableColumnsConfigurator.vue'
29+
import TabsGroupConfigurator from './tabs-group-configurator/TabsGroupConfigurator.vue'
2930
import VariableConfigurator from './variable-configurator/VariableConfigurator.vue'
3031

3132
import { I18nInput, MetaCodeEditor } from '@opentiny/tiny-engine-common'
@@ -59,6 +60,7 @@ export {
5960
SlotConfigurator,
6061
SwitchConfigurator,
6162
TableColumnsConfigurator,
63+
TabsGroupConfigurator,
6264
VariableConfigurator,
6365
MetaCodeEditor,
6466
I18nInput as I18nConfigurator,

‎packages/configurator/src/number-configurator/NumberConfigurator.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,9 @@ export default {
169169
:deep(.tiny-numeric__input-inner) {
170170
text-align: left;
171171
}
172-
172+
:deep(.is-disabled) {
173+
background-color: var(--te-common-bg-disabled);
174+
}
173175
&.is-without-controls {
174176
:deep(.tiny-numeric__input-inner) {
175177
padding-left: 8px;
@@ -181,15 +183,18 @@ export default {
181183
}
182184
}
183185
.meta-numeric-unit {
186+
position: absolute;
187+
top: 2px;
188+
height: calc(100% - 2px);
184189
span {
185190
color: var(--ti-lowcode-numeric-unit-text-color);
186191
font-size: 14px;
187192
padding: 4px;
188193
}
189194
:deep(.tiny-select) {
190195
width: 100%;
191-
float: right;
192196
.tiny-input__inner {
197+
height: 100%;
193198
color: var(--ti-lowcode-numeric-unit-text-color);
194199
padding: 2px;
195200
border: none;
@@ -200,7 +205,7 @@ export default {
200205
display: none;
201206
}
202207
.tiny-input.is-disabled .tiny-input__inner {
203-
background: var(--ti-lowcode-input-bg);
208+
background-color: var(--te-common-bg-container);
204209
}
205210
}
206211
}

‎packages/configurator/src/slider-configurator/SliderConfigurator.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,20 +133,21 @@ export default {
133133
padding: 0;
134134
cursor: pointer;
135135
border: 0;
136-
background-color: transparent;
136+
background-color: var(--te-common-border-bg-divider);
137137
position: relative;
138138
outline: 0;
139139
-webkit-appearance: none;
140140
-moz-appearance: none;
141141
appearance: none;
142142
}
143+
143144
input[type='range']::-webkit-slider-thumb {
144145
width: 10px;
145146
height: 10px;
146147
border-radius: 50%;
147148
border: 0;
148-
background-color: #fff;
149-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
149+
background-color: var(--te-common-bg-default);
150+
box-shadow: 0 0 2px 0 var(--te-common-border-default);
150151
-webkit-transition: border-color 0.15s, background-color 0.15s;
151152
transition: border-color 0.15s, background-color 0.15s;
152153
cursor: pointer;
@@ -158,7 +159,7 @@ export default {
158159
}
159160
input[type='range']::-webkit-slider-thumb:active {
160161
border: 0;
161-
background-color: #fff;
162+
background-color: var(--te-common-bg-default);
162163
}
163164
}
164165
</style>

0 commit comments

Comments
 (0)