From 80c5f836cdd15825d45ed46c1fcf8aa09d93308e Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Fri, 15 Dec 2023 12:38:36 +0800 Subject: [PATCH 1/4] refactor: update sass file use variable --- .../Components/Timeline/Timeline.razor.scss | 179 +++++++++--------- .../wwwroot/scss/theme/bootstrap.blazor.scss | 6 + 2 files changed, 95 insertions(+), 90 deletions(-) diff --git a/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss b/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss index ee236317dc6..fa1c834aac2 100644 --- a/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss +++ b/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss @@ -1,95 +1,94 @@ -.timeline { +.timeline { + --bb-timeline-item-padding: #{$bb-timeline-item-padding}; + --bb-timeline-line-width: #{$bb-timeline-line-width}; + --bb-timeline-node-bg: #{$bb-timeline-node-bg}; + --bb-timeline-timestamp-color: #{$bb-timeline-timestamp-color}; margin: 0; padding: 0; list-style: none; } - .timeline .time-line-item { - position: relative; - padding-bottom: 1rem; - } - - .timeline .time-line-item:last-child { - padding-bottom: 0; - } - - .timeline .time-line-item .time-line-item-tail { - position: absolute; - left: 4px; - height: 100%; - border-left: 2px solid #e4e7ed; - } - - .timeline .time-line-item:last-child .time-line-item-tail { - display: none - } - - .timeline .timeline-item-node-normal { - left: -1px; - width: 12px; - height: 12px; - } - - .timeline .timeline-item-node { - position: absolute; - background-color: #e4e7ed; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - } - - .timeline .timeline-item-node.is-icon { - background-color: transparent; - } - - .timeline .timeline-item-wrapper { - position: relative; - padding-left: 1.5rem; - top: -4px; - } - - .timeline .timeline-item-content { - color: #303133; - } - - .timeline .timeline-item-timestamp { - margin-top: 0.5rem; - color: #909399; - } - - .timeline.is-alternate .time-line-item-tail, - .timeline.is-alternate .timeline-item-node { - left: 50%; - } - - .timeline.is-alternate .timeline-item-node { - margin-left: -5px; - } - - .timeline.is-alternate .time-line-item:nth-child(odd) .timeline-item-wrapper { - left: calc(50% - 5px); - width: calc(50% - 1rem); - text-align: left; - } - - .timeline.is-alternate .time-line-item:nth-child(even) .timeline-item-wrapper { - width: calc(50% - 1rem); - margin: 0; - text-align: right; - } - - .timeline.is-left .time-line-item-tail, - .timeline.is-left .timeline-item-node { - left: 100%; - } - - .timeline.is-left .timeline-item-node { - margin-left: -5px; - } - - .timeline.is-left .time-line-item .timeline-item-wrapper { - width: calc(100% - 1rem); - margin: 0; - text-align: right; - } +.timeline .time-line-item { + position: relative; +} + +.timeline .time-line-item:not(:last-child) { + padding: var(--bb-timeline-item-padding); +} + +.timeline .time-line-item .time-line-item-tail { + position: absolute; + left: 4px; + height: 100%; + border-left: var(--bb-timeline-line-width) solid var(--bs-border-color); +} + +.timeline .time-line-item:last-child .time-line-item-tail { + display: none +} + +.timeline .timeline-item-node-normal { + left: -1px; + width: 12px; + height: 12px; +} + +.timeline .timeline-item-node { + position: absolute; + background-color: var(--bb-timeline-node-bg); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.timeline .timeline-item-node.is-icon { + background-color: transparent; +} + +.timeline .timeline-item-wrapper { + position: relative; + padding-left: 1.5rem; + top: -4px; +} + +.timeline .timeline-item-timestamp { + margin-top: 0.5rem; + color: var(--bb-timeline-timestamp-color); +} + +.timeline.is-alternate .time-line-item-tail, +.timeline.is-alternate .timeline-item-node { + left: 50%; +} + +.timeline.is-alternate .timeline-item-node { + margin-left: -5px; +} + +.timeline.is-alternate .time-line-item:nth-child(odd) .timeline-item-wrapper { + left: calc(50% - 5px); + width: calc(50% - 1rem); + text-align: left; +} + +.timeline.is-alternate .time-line-item:nth-child(even) .timeline-item-wrapper { + width: calc(50% - 1rem); + margin: 0; + text-align: right; +} + +.timeline.is-left .time-line-item-tail, +.timeline.is-left .timeline-item-node { + left: 100%; +} + +.timeline.is-left .timeline-item-node { + margin-left: -5px; +} + +.timeline.is-left .time-line-item .timeline-item-wrapper { + width: calc(100% - 1rem); + margin: 0; + text-align: right; +} diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss index ccce15baf76..4195c52329a 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss @@ -569,4 +569,10 @@ $bb-tag-line-height: 30px; $bb-tag-font-size: 12px; $bb-tag-align: center; +// Timeline +$bb-timeline-item-padding: 0 0 1rem 0; +$bb-timeline-line-width: 2px; +$bb-timeline-node-bg: #e4e7ed; +$bb-timeline-timestamp-color: #c0c4cc; + @import "../components.scss"; From 61625814fe1bb88e874e8960f8c736ffad6ccbd6 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Fri, 15 Dec 2023 12:41:03 +0800 Subject: [PATCH 2/4] doc: update sample code --- .../Components/Samples/Timelines.razor | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Timelines.razor b/src/BootstrapBlazor.Server/Components/Samples/Timelines.razor index 20ad5c41dc8..b0d716d9ddf 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Timelines.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Timelines.razor @@ -5,40 +5,30 @@

@Localizer["TimelinesSubTitle"]

- -
+ +
@Localizer["TimelinesNormalDescription"]
-
+ - + - -

@((MarkupString)Localizer["TimelinesLeftDescription"].Value)

+ +
@((MarkupString)Localizer["TimelinesLeftDescription"].Value)
 - -

@((MarkupString)Localizer["TimelinesAlternateDescription"].Value)

+ +
@((MarkupString)Localizer["TimelinesAlternateDescription"].Value)
 - -

@((MarkupString)Localizer["TimelinesDisplayCustomComponentDescription"].Value)

+ +
@((MarkupString)Localizer["TimelinesDisplayCustomComponentDescription"].Value)
 From 4609416f5d1d636a9e890778ae91a73f88e9c5cc Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Fri, 15 Dec 2023 12:41:12 +0800 Subject: [PATCH 3/4] chore: update dict --- exclusion.dic | 1 + 1 file changed, 1 insertion(+) diff --git a/exclusion.dic b/exclusion.dic index 1ad05d9bec0..f9a5c8045ac 100644 --- a/exclusion.dic +++ b/exclusion.dic @@ -56,3 +56,4 @@ Foos Localizer onchange Render +nowrap From 74eacfa6e86a02d3174428c931efdd12a67f03e4 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Fri, 15 Dec 2023 12:44:02 +0800 Subject: [PATCH 4/4] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Locales/en.json | 2 +- src/BootstrapBlazor.Server/Locales/zh.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Server/Locales/en.json b/src/BootstrapBlazor.Server/Locales/en.json index 84ac5793ca4..b865e6f91b6 100644 --- a/src/BootstrapBlazor.Server/Locales/en.json +++ b/src/BootstrapBlazor.Server/Locales/en.json @@ -3953,7 +3953,7 @@ "TimelinesTitle": "Timeline", "TimelinesSubTitle": "Visualize time flow information", "TimelinesNormalTitle": "Basic usage", - "TimelinesNormalIntro": "Timeline can be split into multiple activities arranged in positive or reverse order of timestamps, which are an important feature that distinguishes them from other controls, and should be used with care to distinguish them from steps bar.", + "TimelinesNormalIntro": "Timeline can be split into multiple activities arranged in positive or reverse order of timestamps, which are an important feature that distinguishes them from other controls, and should be used with care to distinguish them from Step component.", "TimelinesNormalDescription": "sort:", "TimelinesCustomNodeStyleTitle": "Customize the node style", "TimelinesCustomNodeStyleIntro": "You can customize the node color according to the actual scene, or use the icon directly.", diff --git a/src/BootstrapBlazor.Server/Locales/zh.json b/src/BootstrapBlazor.Server/Locales/zh.json index 9ca1d8b97e0..b877996b1d1 100644 --- a/src/BootstrapBlazor.Server/Locales/zh.json +++ b/src/BootstrapBlazor.Server/Locales/zh.json @@ -3953,7 +3953,7 @@ "TimelinesTitle": "Timeline 时间线", "TimelinesSubTitle": "可视化地呈现时间流信息", "TimelinesNormalTitle": "基础用法", - "TimelinesNormalIntro": "Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。", + "TimelinesNormalIntro": "Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。", "TimelinesNormalDescription": "排序：", "TimelinesCustomNodeStyleTitle": "⾃定义节点样式", "TimelinesCustomNodeStyleIntro": "可根据实际场景⾃定义节点颜⾊，或直接使⽤图标。",