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

feat(date-picker): [date-picker] Adapting to the SMB themes (#1975) 

* feat(date-picker): [date-picker] Adapting to the SMB theme

* feat(date-picker): [date-picker] Adpating to the SMB theme
This commit is contained in:
东风使命必达 2024-08-25 23:43:29 -07:00 committed by GitHub
parent a2ac6daa3c
commit b84449a485
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 105 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/theme-saas/src/theme.config.js
View File

@ -34,7 +34,7 @@ export default [
'drop-times',
'date-panel',
'date-picker',
'data-range',
'date-range',
'date-table',
'fall-menu',
'form-item',

21
packages/theme/src/date-panel/index.less
View File

@ -14,6 +14,7 @@
@import './vars.less';
@picker-panel-prefix-cls: ~'@{css-prefix}picker-panel';
@button-primary-prefix-cls: ~'@{css-prefix}button--primary';
.@{picker-panel-prefix-cls} {
.component-css-vars-picker-panel();
@ -48,7 +49,7 @@
&__footer {
border-top: 1px solid var(--ti-picker-panel-border-color);
padding: 6px 16px;
padding: var(--ti-picker-panel-footer-padding-verticals) 16px;
background-color: var(--ti-picker-panel-bg-color);
display: flex;
justify-content: space-between;
@ -120,6 +121,14 @@
cursor: pointer;
outline: 0;
svg {
fill: var(--ti-picker-panel-svg-fill);
}
svg:hover {
fill: var(--ti--picker-panel-svg-hover-fill)
}
&:hover {
fill: var(--ti-picker-panel-icon-color-btn-hover);
}
@ -133,8 +142,16 @@
}
}
&__link-btn {
.@{button-primary-prefix-cls}&__link-btn {
vertical-align: middle;
background-color: var(--ti-picker-panel-link-btn-bg-color);
color: var(--ti-picker-panel-link-btn-text-color);
border-color: var(--ti-picker-panel-link-btn-border-color);
}
.@{button-primary-prefix-cls}&__link-btn:hover{
color: var(--ti-picker-panel-link-btn-text-color);
background-color: var(--ti-picker-panel-link-btn-hover-bg-color);
border-color: var(--ti-picker-panel-link-btn-hover-border-color);
}
[slot='sidebar'],

11
packages/theme/src/date-panel/smb-theme.js
View File

@ -3,5 +3,14 @@ export const tinyDatePanelSmbTheme = {
'ti-picker-panel-content-padding-top': '12px',
'ti-picker-panel-content-padding-left': '16px',
'ti-picker-panel-content-padding-right': '16px',
'ti-picker-panel-icon-btn-line-height': '20px'
'ti-picker-panel-icon-btn-line-height': '20px',
'ti-picker-panel-font-size': 'var(--ti-common-font-size-2)',
'ti-picker-panel-svg-fill': 'var(--ti-common-color-text-weaken)',
'ti-picker-panel-svg-hover-fill': 'var(--ti-common-color-text-primary)',
'ti-picker-panel-footer-padding-verticals': '16px',
'ti-picker-panel-link-btn-bg-color': 'var(--ti-common-color-bg-minor)',
'ti-picker-panel-link-btn-hover-bg-color': 'var(--ti-common-color-bg-minor-hover)',
'ti-picker-panel-link-btn-text-color': 'var(--ti-common-color-text-primary)',
'ti-picker-panel-link-btn-border-color': 'var(--ti-common-color-bg-primary-hover)',
'ti-picker-panel-link-btn-hover-border-color': 'var(--ti-common-color-line-normal)'
}

11
packages/theme/src/date-panel/vars.less
View File

@ -30,8 +30,19 @@
--ti-picker-panel-content-padding-left: 0;
--ti-picker-panel-content-padding-right: 0;
--ti-picker-panel-icon-btn-line-height: 30px;
--ti--picker-panel-footer-padding-verticals: 6px;
// 无用(hide)
--ti-picker-panel-shortcut-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
// 无用(hide)
--ti-picker-panel-shortcut-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
// svg
--ti-picker-panel-svg-fill: var(--ti-common-color-icon-normal);
--ti--picker-panel-svg-hover-fill: var(--ti-common-color-icon-hover, #5e7ce0);
// footer btn
--ti-picker-panel-footer-padding-verticals: var(--ti-common-space-6);
--ti-picker-panel-link-btn-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
--ti-picker-panel-link-btn-text-color: var(--ti-common-color-light, #fff);
--ti-picker-panel-link-btn-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
--ti-picker-panel-link-btn-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
--ti-picker-panel-link-btn-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
}

2
packages/theme/src/date-picker/index.less
View File

@ -56,7 +56,7 @@
}
&__header {
margin: 12px;
margin: 12px var(--ti-date-picker-header-margin-horizontals);
text-align: center;
line-height: var(--ti-date-picker-header-line-height);
}

15
packages/theme/src/date-picker/smb-theme.js
View File

@ -1,6 +1,19 @@
/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
export const tinyDatePickerSmbTheme = {
'ti-date-picker-width': '284px',
'ti-date-picker-header-line-height': '20px',
'ti-date-picker-header-label-hover-text-color': 'var(--ti-base-color-brand-2)',
'ti-date-picker-border-color': 'transparent'
'ti-date-picker-border-color': 'transparent',
'ti-date-picker-header-margin-horizontals': 'var(--ti-common-space-4x)'
}

1
packages/theme/src/date-picker/vars.less
View File

@ -29,4 +29,5 @@
--ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa);
--ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7, #526ecc);
--ti-date-picker-header-line-height: 32px;
--ti-date-picker-header-margin-horizontals: var(--ti-common-space-3x);
}

5
packages/theme/src/date-range/index.less
View File

@ -10,6 +10,7 @@
*
*/
@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';
@ -40,7 +41,9 @@
&__header {
position: relative;
text-align: center;
height: 28px;
height: var(--ti-date-range-picker-header-height);
margin-bottom: var(--ti-date-range-picker-header-margin-bottom);
line-height: var(--ti-date-range-picker-header-line-height);
[class*='arrow-left'] {
float: left;

17
packages/theme/src/date-range/smb-theme.js Normal file
View File

@ -0,0 +1,17 @@
/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
export const tinyDateRangeSmbTheme = {
'ti-date-range-picker-header-height': 'calc(var(--ti-common-size-height-normal) + 2px)',
'ti-date-range-picker-header-line-height': 'var(--ti-common-line-height-1)',
'ti-date-range-picker-header-margin-bottom': 'var(--ti-common-space-3x)'
}

4
packages/theme/src/date-range/vars.less
View File

@ -13,4 +13,8 @@
.component-css-vars-date-range-picker() {
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2, 16px);
--ti-date-range-picker-time-header-icon-color: #303133;
// header 高度
--ti-date-range-picker-header-height: var(--ti-common-line-height-3);
--ti-date-range-picker-header-line-height: var(--ti-common-line-height-3);
--ti-date-range-picker-header-margin-bottom: unset;
}

16
packages/theme/src/date-table/index.less
View File

@ -68,7 +68,7 @@
}
}
&__week {
height: 32px;
height: var(--ti-date-table-week-height);
line-height: var(--ti-date-table-tr-line-height);
}
td {
@ -147,6 +147,12 @@
border-radius: var(--ti-date-table-border-radius-current-select);
border-color: transparent;
}
&.current.available:not(.today):hover span {
color: var(--ti-date-table-td-normal-text-color);
background-color: var(--ti-date-table-bg-color-current-select);
border-radius: var(--ti-date-table-border-radius-current-select);
border-color: transparent;
}
&.current:not(.disabled) {
span {
@ -271,4 +277,12 @@
border-top-right-radius: var(--ti-date-table-td-disabled-border-radius);
border-bottom-right-radius: var(--ti-date-table-td-disabled-border-radius);
}
&__row td:nth-child(1 of .available.in-range) div{
border-top-left-radius: var(--ti-date-table-td-disabled-border-radius);
border-bottom-left-radius: var(--ti-date-table-td-disabled-border-radius);
}
&__row td:nth-last-child(1 of .available.in-range) div{
border-top-right-radius: var(--ti-date-table-td-disabled-border-radius);
border-bottom-right-radius: var(--ti-date-table-td-disabled-border-radius);
}
}

7
packages/theme/src/date-table/smb-theme.js
View File

@ -5,8 +5,8 @@ export const tinyDateTableSmbTheme = {
'ti-date-table-bg-color-current-select': 'var(--ti-base-color-brand-2)',
'ti-date-table-week-bg-color-current-select': 'var(--ti-base-color-brand-8)',
'ti-date-table-week-bg-color-current-hover': 'var(--ti-base-color-brand-8)',
'ti-date-table-td-today-width': '26px',
'ti-date-table-td-today-height': '26px',
'ti-date-table-td-today-width': 'calc(var(--ti-common-size-width-mini) + 4px)',
'ti-date-table-td-today-height': 'calc(var(--ti-common-size-height-mini) + 4px)',
'ti-date-table-td-today-border-radius': '13px',
'ti-date-table-td-today-circle-border-color': 'var(--ti-base-color-brand)',
'ti-date-table-td-today-circle-border-width': '1px',
@ -21,7 +21,8 @@ export const tinyDateTableSmbTheme = {
'ti-date-table-start-date-border-radius': '14px',
'ti-date-table-td-today-border-color': 'transparent',
'ti-date-table-cell-selected-border-radius': '14px',
'ti-date-table-tr-line-height': '16px',
'ti-date-table-week-height': 'var(--ti-common-size-height-normal)',
'ti-date-table-tr-line-height': 'var(--ti-common-line-height-1)',
'ti-date-table-td-disabled-border-radius': '50%',
'ti-date-table-td-row-disabled-border-radius': 'unset'
}

1
packages/theme/src/date-table/vars.less
View File

@ -51,4 +51,5 @@
--ti-date-table-tr-line-height: 32px;
--ti-date-table-td-disabled-border-radius: 0;
--ti-date-table-td-row-disabled-border-radius: 0;
--ti-date-table-week-height: var(--ti-common-size-height-normal);
}

2
packages/theme/src/theme.config.js
View File

@ -39,7 +39,7 @@ export default {
'drop-times': 'drop-times',
'date-panel': 'date-panel',
'date-picker': 'date-picker',
'data-range': 'data-range',
'date-range': 'date-range-picker',
'date-table': 'date-table',
'date-editor': 'date-editor',
'fall-menu': 'fall-menu',

3
packages/theme/src/time-spinner/smb-theme.js
View File

@ -8,5 +8,6 @@ export const tinyTimeSpinnerSmbTheme = {
'ti-time-spinner-list-margin-top': '10px',
'ti-time-spinner-selected-bg-color': '#deedff',
'ti-time-spinner-item-bg-color': '#deedff',
'ti-time-spinner-selected-border-radius': '16px'
'ti-time-spinner-selected-border-radius': '16px',
'ti-time-spinner-item-font-weight': 'var(--ti-common-font-weight-normal)'
}