SanshuiLiu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(color-select-panel): [color-select-panel]modify smb-theme (#1837) 

* fix(color-select-panel): modify smb-theme

* fix: modify conflict
This commit is contained in:
James 2024-08-07 23:14:26 -07:00 committed by GitHub
parent 4dc86c2e3a
commit 3c2e2626ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 80 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/theme/src/color-select-panel/index.less
View File

@ -7,22 +7,30 @@
display: flex;
flex-direction: column;
position: absolute;
max-width: 300px;
max-width: 264px;
z-index: var(--ti-color-select-panel__wrapper-zindex);
background: var(--ti-color-select-panel__wrapper-bg-color);
background: var(--ti-color-select-panel-bg-color);
gap: var(--ti-color-select-panel-spacing);
padding: var(--ti-color-select-panel-padding-vertical) var(--ti-color-select-panel-padding-horizontal);
box-shadow: var(--ti-color-select-panel-box-shadow);
&__tools {
display: flex;
line-height: var(--ti-color-select-panel-tools-line-height);
.tiny-input {
flex: 1 0 0;
}
.tiny-button-group {
margin: var(--ti-color-select-panel-btn-margin);
flex: 0 0 auto;
> .tiny-button {
border-color: var(--ti-color-select-panel-btn-border-color);
border-radius: var(--ti-color-select-panel-border-radius-xs);
&:hover {
border-color: var(--ti-color-select-panel-btn-border-hover-color);
}
}
}
}
@ -30,8 +38,8 @@
display: flex;
gap: 12px;
&__color-select {
width: 280px;
height: 180px;
width: 220px;
height: 142px;
position: relative;
.white {
@ -61,7 +69,7 @@
&__hue-select {
position: relative;
width: 18px;
width: 8px;
border-radius: var(--ti-color-select-panel-border-radius-xs);
background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
@ -79,13 +87,14 @@
&__alpha {
position: relative;
width: 100%;
height: 20px;
width: 240px;
height: 8px;
border-radius: var(--ti-color-select-panel-border-radius-xs);
margin-top: var(--ti-color-select-panel-alpha-margin-top);
&__slider {
width: 100%;
height: 100%;
border-radius: var(--ti-color-select-panel-border-radius-xs);
}
&__thumb {
@ -99,17 +108,26 @@
border-radius: 1px;
}
}
.tiny-collapse-item__wrap{
background: transparent;
}
.tiny-collapse-item{
background: transparent;
border: none;
padding-left: 0;
padding-right: 0;
.tiny-collapse {
border-bottom: 0;
.tiny-collapse-item__header {
color: var(--ti-color-select-panel-collapse-color);
border: 0;
background: transparent;
padding: 0;
.tiny-collapse-item {
background: transparent;
border: none;
padding-left: 0;
padding-right: 0;
}
}
.tiny-collapse-item__content{
background: transparent;
padding-left: 0;
padding-right: 0;
border: 0;
.@{color-select-panel-prefix-cls}__history,
.@{color-select-panel-prefix-cls}__predefine{
display: flex;
@ -119,8 +137,17 @@
&__color-block{
width: 20px;
height: 20px;
border-radius: var(--ti-color-select-panel-border-radius-sm);;
border-radius: var(--ti-color-select-panel-border-radius-sm);
margin-right: 8px;
margin: 0 4px 4px 0;
}
}
}
.tiny-collapse-item__wrap{
background: transparent;
}
.tiny-collapse-item__arrow {
display: none;
}
}
}

8
packages/theme/src/color-select-panel/smb-theme.js Normal file
View File

@ -0,0 +1,8 @@
export const tinyColorSelectPanelSmbTheme = {
'ti-color-select-panel-border-radius-xs': 'var(--ti-common-border-radius-4)',
'ti-color-select-panel-border-radius-sm': 'var(--ti-common-border-radius-2)',
'ti-color-select-panel-tools-line-height': 'var(--ti-common-size-height-medium)',
'ti-color-select-panel-btn-margin': '8px',
'ti-color-select-panel-collapse-color': 'var(--ti-common-color-primary-normal)',
'ti-color-select-panel-btn-border-hover-color': 'var(--ti-common-color-border-hover)'
}

12
packages/theme/src/color-select-panel/vars.less
View File

@ -24,5 +24,15 @@
// 弹出框元素层级(hide)
--ti-color-select-panel__wrapper-zindex: 10;
// 弹出框背景色
--ti-color-select-panel__wrapper-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
--ti-color-select-panel-bg-color: var(--ti-common-color-light);
// 弹窗按钮颜色
--ti-color-select-panel-btn-border-color: var(--ti-common-color-line-normal);
// 弹窗按钮悬浮颜色
--ti-color-select-panel-btn-border-hover-color: var(--ti-common-color-border-hover);
// 颜色工具栏高度
--ti-color-select-panel-tools-line-height: var(--ti-common-size-height-large);
// 弹窗按钮外边距
--ti-color-select-panel-btn-margin: 9px;
// 弹窗折叠字体颜色
--ti-color-select-panel-collapse-color: var(--ti-common-color-primary-normal);
}

4
packages/theme/src/theme/infinity-theme/component-vars.js
View File

@ -376,5 +376,7 @@ export const infinityConcat = {
'ti-option-selected-bg-color': 'var(--ti-base-color-brand-1)',
// form-item
'ti-form-item-error-text-color': 'var(--ti-base-color-error-3)',
'ti-form-item-error-bg-color': '#ffd5d4'
'ti-form-item-error-bg-color': '#ffd5d4',
// color-select-panel
'ti-color-select-panel-btn-margin': '8px'
}

4
packages/theme/src/vars.less
View File

@ -67,4 +67,6 @@
@import './year-table/vars.less';
@import './transfer/vars.less';
@import './skeleton/vars.less';
@import './skeleton-item/vars.less'
@import './skeleton-item/vars.less';
@import './color-picker/vars.less';
@import './color-select-panel/vars.less';

22
packages/vue/src/color-select-panel/src/pc.vue
View File

@ -3,48 +3,48 @@
<hue-select :color="state.color" @hue-update="onHueUpdate" @sv-update="onSVUpdate" />
<alpha-select v-if="alpha" :color="state.color" @alpha-update="onAlphaUpdate" />
<div class="tiny-color-select-panel__tools">
<tiny-input v-model="state.res" />
<tiny-input v-model="state.res" size="small" />
<tiny-button-group>
<tiny-button type="text" @click="onCancel">
<tiny-button size="small" @click="onCancel">
{{ t('ui.colorSelectPanel.cancel') }}
</tiny-button>
<tiny-button @click="onConfirm">
<tiny-button size="small" @click="onConfirm">
{{ t('ui.colorSelectPanel.confirm') }}
</tiny-button>
</tiny-button-group>
</div>
<tiny-collapse>
<tiny-collapse-item :title="t('ui.colorSelectPanel.history')" name="history" v-if="state.enableHistory">
<div class="tiny-color-select-panel__history">
<div class="tiny-color-select-panel__history" v-if="state.stack.length">
<div
class="tiny-color-select-panel__history__color-block"
v-if="state.stack.length"
v-for="color in state.stack"
v-for="(color, key) in state.stack"
:key="key"
:style="{
background: color
}"
@click="() => onHistoryClick(color)"
></div>
<span v-else>{{ t('ui.colorSelectPanel.empty') }}</span>
</div>
<div v-if="!state.stack.length">{{ t('ui.colorSelectPanel.empty') }}</div>
</tiny-collapse-item>
<tiny-collapse-item
:title="t('ui.colorSelectPanel.predefine')"
name="predefine"
v-if="state.enablePredefineColor"
>
<div class="tiny-color-select-panel__predefine">
<div class="tiny-color-select-panel__predefine" v-if="state.predefineStack.length">
<div
class="tiny-color-select-panel__predefine__color-block"
v-if="state.predefineStack.length"
v-for="color in state.predefineStack"
v-for="(color, key) in state.predefineStack"
:key="key"
:style="{
background: color
}"
@click="() => onPredefineColorClick(color)"
></div>
<span v-else>{{ t('ui.colorSelectPanel.empty') }}</span>
</div>
<div v-if="!state.predefineStack.length">{{ t('ui.colorSelectPanel.empty') }}</div>
</tiny-collapse-item>
</tiny-collapse>
</div>