From 0e9b1d31f5c4bd2ca28a8b8160f34be1d396d0bc Mon Sep 17 00:00:00 2001 From: MNZhu Date: Tue, 7 Mar 2023 10:02:33 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(timeline):=20timeline=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/base/basic-var.less | 8 +- src/steps/index.js | 36 +++++ src/steps/index.less | 338 ++++++++++++++++++++++++++++++++++++++++ src/steps/vars.less | 36 +++++ 4 files changed, 417 insertions(+), 1 deletion(-) create mode 100644 src/steps/index.js create mode 100644 src/steps/index.less create mode 100644 src/steps/vars.less diff --git a/src/base/basic-var.less b/src/base/basic-var.less index b0ba2e8..933cbc8 100644 --- a/src/base/basic-var.less +++ b/src/base/basic-var.less @@ -74,6 +74,7 @@ --ti-mobile-common-color-text-white: var(--ti-mobile-base-color-common-12); /* 文本_白色*/ --ti-mobile-common-color-text-placeholder-primary: #dbe5fc; /* placeholder_主要*/ --ti-mobile-common-color-text-placeholder-gray: #acacac; /* placeholder_灰*/ + --ti-mobile-common-color-text-highlight: var(--ti-mobile-base-color-brand-1); /* 文本_高亮*/ /* 文本链接色*/ --ti-mobile-common-color-link-dark: var(--ti-mobile-base-color-common-2); /* 文本_链接__深色*/ @@ -91,11 +92,16 @@ --ti-mobile-common-color-mask-light: rgba(0, 0, 0, 0.5); /* 蒙层_相对浅*/ --ti-mobile-common-color-mask-dark: rgba(0, 0, 0, 0.75); /* 蒙层_相对深*/ - /* 蒙层色*/ + /* 背景色*/ --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/ --ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/ --ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/ --ti-mobile-common-bg-color-blue-1: var(--ti-mobile-base-color-brand-2); /* 背景_蓝*/ --ti-mobile-common-bg-color-disabled: #e8e8e8; /* 背景_禁用*/ --ti-mobile-common-bg-color-dark-gray: var(--ti-mobile-base-color-bg-1); /* 背景_深灰*/ + --ti-mobile-common-bg-color-weaken: var(--ti-mobile-base-color-common-8); /* 背景_弱化色*/ + --ti-mobile-common-status-bg-color-success: #5bd475; /* 背景_成功/通过*/ + --ti-mobile-common-status-bg-color-error: #eb5454; /* 背景_失败/驳回*/ + --ti-mobile-common-status-bg-color-normal: #fff; /* 背景_默认*/ + --ti-mobile-common-status-bg-color-handing: var(--ti-mobile-base-color-brand-1); /* 背景_进行中*/ } diff --git a/src/steps/index.js b/src/steps/index.js new file mode 100644 index 0000000..c914a77 --- /dev/null +++ b/src/steps/index.js @@ -0,0 +1,36 @@ +/** + * 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 default { + "tiny-mobile-steps-timeline-date-time-text-color": "#191919", + "tiny-mobile-steps-advanced-line-height": "28px", + "tiny-mobile-steps-advanced-li-bg-color": "#fff", + "tiny-mobile-steps-advanced-active-bg-color": "#4a79fe", + "tiny-mobile-steps-advanced-li-text-color": "#fff", + "tiny-mobile-steps-line-bg-color": "#dbdbdb", + "tiny-mobile-steps-icon-size": "20px", + "tiny-mobile-steps-icon-bg-color": "#fff", + "tiny-mobile-steps-unselected-text-color": "#c2c2c2", + "tiny-mobile-steps-font-size-base": "12px", + "tiny-mobile-steps-done-text-color": " #4a79fe", + "tiny-mobile-steps-done-icon-bg-color": "#fff", + "tiny-mobile-steps-done-icon-fill-color": "#4a79fe", + "tiny-mobile-steps-done-active-border-color": "#4a79fe", + "tiny-mobile-steps-line-active-bg-color": "#4a79fe", + "tiny-mobile-steps-line-height": "1px", + "tiny-mobile-steps-timeline-name-font-size": "14px", + "tiny-mobile-steps-timeline-bg-color-normal": "#fff", + "tiny-mobile-steps-timeline-bg-color-success": "#5bd475", + "tiny-mobile-steps-timeline-bg-color-error": "#eb5454", + "tiny-mobile-steps-timeline-bg-color-handing": "#4a79fe", + "tiny-mobile-steps-arrow-btn-border-color": "#999", +}; diff --git a/src/steps/index.less b/src/steps/index.less new file mode 100644 index 0000000..07e13ea --- /dev/null +++ b/src/steps/index.less @@ -0,0 +1,338 @@ +/** +* 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. +* +*/ + +@import '../custom.less'; +@import './vars.less'; + +@steps-prefix-cls: ~'@{css-prefix}mobile-steps'; + +.@{steps-prefix-cls} { + .component-css-vars-steps(); + + color: var(--ti-mobile-steps-timeline-date-time-text-color); + + .line { + background: var(--ti-mobile-steps-line-bg-color); + } + + .icon { + width: var(--ti-mobile-steps-icon-size); + height: var(--ti-mobile-steps-icon-size); + line-height: var(--ti-mobile-steps-icon-size); + position: relative; + text-align: center; + left: ~'calc(50% - 10px)'; + top: 4px; + border-radius: 50%; + background: var(--ti-mobile-steps-icon-bg-color); + color: var(--ti-mobile-steps-unselected-text-color); + cursor: pointer; + z-index: 15; + } + + .date-time { + text-align: center; + } + + .node-description { + position: relative; + margin-top: 4px; + overflow: hidden; + text-align: center; + + .name { + font-size: var(--ti-mobile-steps-font-size-base); + float: left; + width: 100%; + } + + .status { + font-size: var(--ti-mobile-steps-font-size-base); + float: left; + width: 100%; + } + } + + .process-done { + .node-description { + color: var(--ti-mobile-steps-done-text-color); + } + + .icon { + background: var(--ti-mobile-steps-done-icon-bg-color); + color: var(--ti-mobile-steps-done-icon-fill-color); + width: var(--ti-mobile-steps-icon-size); + height: var(--ti-mobile-steps-icon-size); + line-height: var(--ti-mobile-steps-icon-size); + font-size: var(--ti-mobile-steps-icon-size); + + .@{css-prefix}svg { + fill: var(--ti-mobile-steps-done-icon-fill-color); + vertical-align: baseline; + border: 1px solid var(--ti-mobile-steps-done-active-border-color); + border-radius: 50%; + padding: 2px; + } + } + + .line { + background: var(--ti-mobile-steps-line-active-bg-color); + } + } + + .process-current { + .node-description { + color: var(--ti-mobile-steps-done-text-color); + } + + .icon { + border: none; + background: var(--ti-mobile-steps-advanced-active-bg-color); + color: var(--ti-mobile-steps-advanced-li-text-color); + font-size: var(--ti-mobile-steps-font-size-base); + } + } + + .process-wait { + .icon { + border: 1px solid var(--ti-mobile-steps-unselected-text-color); + box-sizing: border-box; + font-size: var(--ti-mobile-steps-font-size-base); + } + } + + .reverse { + .process-current { + .line { + background: var(--ti-mobile-steps-line-active-bg-color); + } + } + } + + & &-normal { + overflow: hidden; + + .normal { + display: block; + float: left; + } + + .line { + height: var(--ti-mobile-steps-line-height); + left: 50%; + top: -6px; + position: relative; + } + + .line-end { + width: 0; + } + + .process-done { + .line { + background: var(--ti-mobile-steps-line-active-bg-color); + } + } + + .process-current { + .name { + color: var(--ti-mobile-steps-advanced-active-bg-color); + font-weight: bold; + } + } + + .icon { + font-weight: 600; + span { + display: inline-block; + } + } + } + + & &-timeline { + overflow: hidden; + font-size: var(--ti-mobile-steps-timeline-name-font-size); + color: var(--ti-mobile-steps-timeline-date-time-text-color); + + .timeline { + li { + position: relative; + } + + .header { + display: flex; + align-items: center; + font-weight: 500; + + .date-time-vertical { + width: 100px; + font-size: 10px; + line-height: 1.2; + text-align: right; + padding-right: 10px; + box-sizing: border-box; + } + + .round { + position: relative; + height: 100%; + width: 7px; + height: 7px; + border-radius: 50%; + + &-normal { + border: 1px solid var(--ti-mobile-steps-unselected-text-color); + box-sizing: border-box; + background: var(--ti-mobile-steps-timeline-bg-color-normal); + } + + &-success { + background: var(--ti-mobile-steps-timeline-bg-color-success); + } + + &-error { + background: var(--ti-mobile-steps-timeline-bg-color-error); + } + + &-handing { + background: var(--ti-mobile-steps-timeline-bg-color-handing); + } + } + + .name { + margin-left: 12px; + height: 36px; + line-height: 36px; + } + + .arrow-btn { + position: absolute; + cursor: pointer; + right: 16px; + width: 8px; + height: 8px; + border-color: var(--ti-mobile-steps-arrow-btn-border-color); + border-style: solid; + border-width: 1.5px 1.5px 0 0; + transform: rotate(-45deg); + + &-fold { + transform: rotate(135deg); + } + } + } + + .content { + margin-left: 19px; + margin-right: 10px; + &-left-margin { + margin-left: 119px; + } + } + + .line { + width: var(--ti-mobile-steps-line-height); + position: absolute; + left: 3px; + top: 0; + bottom: 0; + z-index: -1; + + .@{css-prefix}svg { + vertical-align: baseline; + } + } + + .line-left-margin { + left: 103px; + } + + &:first-child .line { + top: 18px; + } + + &:last-child .line { + height: 18px; + } + + .date-time { + width: 100px; + float: left; + padding-right: 20px; + text-align: right; + + .time { + display: block; + line-height: 1; + } + + .date { + display: block; + line-height: 1; + margin-bottom: 4px; + } + } + + &.process-done { + color: var(--ti-mobile-steps-done-text-color); + } + + &.process-current { + color: var(--ti-mobile-steps-advanced-active-bg-color); + } + + .name { + float: left; + margin-left: 20px; + line-height: 1.45em; + } + + .icon { + top: 0px; + } + } + } + + &.mobile { + padding-left: 10%; + + .@{steps-prefix-cls}-timeline { + overflow: inherit; + + .@{css-prefix-iconfont} { + font-size: 45px; + } + + .timeline { + .line { + .icon { + width: 45px; + line-height: 45px; + height: 45px; + font-size: var(--ti-mobile-steps-font-size-7); + position: relative; + left: -20px; + } + } + + .name { + margin-left: 30px; + font-size: 26px; + } + + & > div { + margin-left: 20px; + } + } + } + } +} diff --git a/src/steps/vars.less b/src/steps/vars.less new file mode 100644 index 0000000..41fe554 --- /dev/null +++ b/src/steps/vars.less @@ -0,0 +1,36 @@ +/** +* 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. +* +*/ + +.component-css-vars-steps() { + --ti-mobile-steps-timeline-date-time-text-color: var(--ti-mobile-common-color-text-primary, #191919); + --ti-mobile-steps-advanced-line-height: 28px; + --ti-mobile-steps-advanced-li-bg-color: var(--ti-mobile-common-bg-color-white, #fff); + --ti-mobile-steps-advanced-active-bg-color: var(--ti-mobile-common-bg-color-main, #4a79fe); + --ti-mobile-steps-advanced-li-text-color: var(--ti-mobile-common-color-text-white, #fff); + --ti-mobile-steps-line-bg-color: var(--ti-mobile-common-bg-color-weaken, #dbdbdb); + --ti-mobile-steps-icon-size: 20px; + --ti-mobile-steps-icon-bg-color: var(--ti-mobile-common-bg-color-white, #fff); + --ti-mobile-steps-unselected-text-color: var(--ti-mobile-common-color-text-weaken-ligtht, #c2c2c2); + --ti-mobile-steps-font-size-base: 12px; + --ti-mobile-steps-done-text-color: var(--ti-mobile-common-color-text-highlight, #4a79fe); + --ti-mobile-steps-done-icon-bg-color: var(--ti-mobile-common-bg-color-white, #fff); + --ti-mobile-steps-done-icon-fill-color: var(--ti-mobile-common-bg-color-main, #4a79fe); + --ti-mobile-steps-done-active-border-color: var(--ti-mobile-common-bg-color-main, #4a79fe); + --ti-mobile-steps-line-active-bg-color: var(--ti-mobile-common-bg-color-main, #4a79fe); + --ti-mobile-steps-line-height: 1px; + --ti-mobile-steps-timeline-name-font-size: 14px; + --ti-mobile-steps-timeline-bg-color-normal: var(--ti-mobile-common-status-bg-color-normal, #fff); + --ti-mobile-steps-timeline-bg-color-success: var(--ti-mobile-common-status-bg-color-success, #5bd475); + --ti-mobile-steps-timeline-bg-color-error: var(--ti-mobile-common-status-bg-color-error, #eb5454); + --ti-mobile-steps-timeline-bg-color-handing: var(--ti-mobile-common-status-bg-color-handing, #4a79fe); + --ti-mobile-steps-arrow-btn-border-color: var(--ti-mobile-common-color-text-weaken-dark, #999); +} From bfeac90d7b4aeb7b55de3df7b0254fe083550c88 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Thu, 9 Mar 2023 17:18:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(timeline):=20timeline=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/base/basic-var.less | 2 +- src/steps/vars.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/base/basic-var.less b/src/base/basic-var.less index 933cbc8..0f26d33 100644 --- a/src/base/basic-var.less +++ b/src/base/basic-var.less @@ -74,7 +74,7 @@ --ti-mobile-common-color-text-white: var(--ti-mobile-base-color-common-12); /* 文本_白色*/ --ti-mobile-common-color-text-placeholder-primary: #dbe5fc; /* placeholder_主要*/ --ti-mobile-common-color-text-placeholder-gray: #acacac; /* placeholder_灰*/ - --ti-mobile-common-color-text-highlight: var(--ti-mobile-base-color-brand-1); /* 文本_高亮*/ + --ti-mobile-common-color-text-high-light: var(--ti-mobile-base-color-brand-1); /* 文本_高亮*/ /* 文本链接色*/ --ti-mobile-common-color-link-dark: var(--ti-mobile-base-color-common-2); /* 文本_链接__深色*/ diff --git a/src/steps/vars.less b/src/steps/vars.less index 41fe554..f0cd39c 100644 --- a/src/steps/vars.less +++ b/src/steps/vars.less @@ -21,7 +21,7 @@ --ti-mobile-steps-icon-bg-color: var(--ti-mobile-common-bg-color-white, #fff); --ti-mobile-steps-unselected-text-color: var(--ti-mobile-common-color-text-weaken-ligtht, #c2c2c2); --ti-mobile-steps-font-size-base: 12px; - --ti-mobile-steps-done-text-color: var(--ti-mobile-common-color-text-highlight, #4a79fe); + --ti-mobile-steps-done-text-color: var(--ti-mobile-common-color-text-high-light, #4a79fe); --ti-mobile-steps-done-icon-bg-color: var(--ti-mobile-common-bg-color-white, #fff); --ti-mobile-steps-done-icon-fill-color: var(--ti-mobile-common-bg-color-main, #4a79fe); --ti-mobile-steps-done-active-border-color: var(--ti-mobile-common-bg-color-main, #4a79fe);