fix(comp:timeline): modify timeline style according to design

IDuxFE · Mar 23, 2023 · 602f106 · 602f106
1 parent 703122f
commit 602f106
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 30 deletions.
diff --git a/packages/components/timeline/src/TimelineItem.tsx b/packages/components/timeline/src/TimelineItem.tsx
@@ -5,8 +5,6 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { CSSProperties } from 'vue'
-
 import { computed, defineComponent, getCurrentInstance, inject, normalizeClass } from 'vue'
 
 import { hasSlot } from '@idux/cdk/utils'
@@ -52,6 +50,16 @@ export default defineComponent({
       }
     })
 
+    /* eslint-disable indent */
+    const dotInnerStyle = computed(() =>
+      isPresetOrStatusColor.value
+        ? {}
+        : {
+            'background-color': props.color,
+          },
+    )
+    /* eslint-enable indent */
+
     const classes = computed(() => {
       const prefixCls = `${mergedPrefixCls.value}-item`
       const placement = itemPlacement.value
@@ -62,13 +70,15 @@ export default defineComponent({
       })
     })
 
+    const isCustomDot = computed(() => hasSlot(slots, 'dot') || !!props.dot)
+
     const dotClass = computed(() => {
       const prefixCls = `${mergedPrefixCls.value}-item-head`
-      const { dot, color } = props
+      const { color } = props
 
       return normalizeClass({
         [`${prefixCls}-dot`]: true,
-        [`${prefixCls}-dot-custom`]: hasSlot(slots, 'dot') || !!dot,
+        [`${prefixCls}-dot-custom`]: isCustomDot.value,
         [`${prefixCls}-dot-${color}`]: isPresetOrStatusColor.value,
       })
     })
@@ -83,13 +93,14 @@ export default defineComponent({
         <li class={classes.value}>
           <div class={`${prefixCls}-head`}>
             <div class={`${prefixCls}-head-line`}></div>
-            <div class={dotClass.value} style={dotStyle.value as CSSProperties}>
+            <div class={dotClass.value} style={dotStyle.value}>
               {dotNode}
+              {!isCustomDot.value && <div class={`${prefixCls}-head-dot-inner`} style={dotInnerStyle.value}></div>}
             </div>
           </div>
           <div class={`${prefixCls}-content`}>
-            {labelNode && <div class={`${prefixCls}-content-label`}>{labelNode}</div>}
             {slots.default && <div class={`${prefixCls}-content-desc`}>{slots.default()}</div>}
+            {labelNode && <div class={`${prefixCls}-content-label`}>{labelNode}</div>}
           </div>
         </li>
       )

diff --git a/packages/components/timeline/style/index.less b/packages/components/timeline/style/index.less
@@ -8,7 +8,6 @@
   line-height: @timeline-line-height;
   display: flex;
   flex-direction: column;
-
 
   .@{timeline-item-prefix} {
     position: relative;
@@ -29,26 +28,46 @@
       }
 
       &-dot {
+        border: none;
+        background-color: @color-white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: @timeline-dot-size;
         height: @timeline-dot-size;
-        border: @timeline-dot-border;
-        border-radius: 50%;
         font-size: @timeline-dot-font-size;
 
-        .timeline-color-classes(@preset-colors);
-        .timeline-color-classes(@status-colors);
+        &-inner {
+          width: 50%;
+          height: 50%;
+          background-color: @color-primary;
+          border-radius: 50%;
+        }
 
         &-custom {
           position: absolute;
-          border: none;
           background-color: @color-white;
           display: flex;
           align-items: center;
-          justify-content: center
+          justify-content: center;
         }
       }
     }
 
+    &:first-child .@{timeline-item-prefix}-head-dot {
+      border: @timeline-dot-border;
+      border-radius: 50%;
+      background: transparent;
+
+      &-custom {
+        border: none;
+      }
+
+      &-inner {
+        display: none;
+      }
+    }
+
     &:last-child {
       .@{timeline-item-prefix}-head-line {
         display: none;
@@ -59,22 +78,24 @@
       position: relative;
       color: @timeline-content-color;
       margin-bottom: @timeline-content-margin-bottom;
-      
+
       &-label {
         color: @timeline-content-label-color;
+        margin-top: @timeline-content-label-margin-top;
       }
     }
   }
 
+  .timeline-dot-color-classes(@preset-colors);
+  .timeline-dot-color-classes(@status-colors);
+
   &-pending:not(&-reverse) {
-
     .@{timeline-item-prefix}:nth-last-child(2) {
       .timeline-dotted-line();
     }
   }
 
   &-pending&-reverse {
-
     .@{timeline-item-prefix} {
       &-pending {
         .timeline-dotted-line();
@@ -92,7 +113,6 @@
 
   &-start {
     .@{timeline-item-prefix} {
-
       &-head {
         right: 0;
         width: @timeline-dot-size;
@@ -103,7 +123,6 @@
         }
 
         &-dot {
-
           &-custom {
             right: @timeline-custom-dot-gap;
             transform: translate(50%, -50%);
@@ -119,14 +138,11 @@
   }
 
   &-alternate {
-
     .timeline-line-align-center();
 
     .@{timeline-item-prefix} {
-
       &-start {
         .@{timeline-item-prefix} {
-
           &-content {
             width: calc(50% - @timeline-content-gap);
             text-align: right;
@@ -136,7 +152,6 @@
 
       &-end {
         .@{timeline-item-prefix} {
-
           &-content {
             margin-left: calc(50% + @timeline-content-gap);
             width: 50%;
@@ -158,17 +173,17 @@
   }
 
   &-not-both {
-
     .timeline-line-align-center();
 
     .@{timeline-item-prefix} {
-
       &-content {
         &-label {
           position: absolute;
+          margin-top: 0;
+          top: 0;
         }
       }
-      
+
       &-start {
         .@{timeline-item-prefix} {
           &-content {

diff --git a/packages/components/timeline/style/mixin.less b/packages/components/timeline/style/mixin.less
@@ -1,10 +1,31 @@
-.timeline-color-classes(@colors, @i: length(@colors)) when (@i > 0) {
-  .timeline-color-classes(@colors, @i - 1);
+.timeline-first-dot-color-classes(@colors, @i: length(@colors)) when (@i > 0) {
+  .timeline-first-dot-color-classes(@colors, @i - 1);
   @color: extract(@colors, @i);
   @color-name: 'color-@{color}';
-  &-@{color} {
-    border-color: @@color-name;
+
+  .@{timeline-item-prefix}:first-child .@{timeline-item-prefix}-head-dot {
+    &-@{color} {
+      border-color: @@color-name;
+      color: @@color-name;
+    }
+  }
+}
+
+.timeline-dot-color-classes(@colors, @i: length(@colors)) when (@i > 0) {
+  .timeline-dot-color-classes(@colors, @i - 1);
+
+  @color: extract(@colors, @i);
+  @color-name: 'color-@{color}';
+  @dot-class: ~'@{timeline-item-prefix}-head-dot';
+
+  .@{timeline-item-prefix} .@{dot-class}.@{dot-class}-@{color} {
     color: @@color-name;
+    .@{dot-class}-inner {
+      background-color: @@color-name;
+    }
+  }
+  .@{timeline-item-prefix} .@{dot-class}.@{dot-class}-@{color} {
+    border-color: @@color-name;
   }
 }
 
@@ -25,7 +46,6 @@
 
 .timeline-dotted-line() {
   .@{timeline-item-prefix} {
-
     &-head-line {
       background: @timeline-dotted-line-background;
       background-size: @timeline-dotted-line-background-size;

diff --git a/packages/components/timeline/style/themes/default.variable.less b/packages/components/timeline/style/themes/default.variable.less
@@ -14,6 +14,7 @@
 @timeline-content-gap: @timeline-item-timeline-width;
 @timeline-content-color: @text-color;
 @timeline-content-label-color: @color-graphite;
+@timeline-content-label-margin-top: 0;
 
 @timeline-line-gap: ((@timeline-dot-size - @timeline-dot-border-width) / 2);
 @timeline-line-width: 2px;

diff --git a/packages/components/timeline/style/themes/seer.variable.less b/packages/components/timeline/style/themes/seer.variable.less
@@ -1 +1,4 @@
 @import './default.variable.less';
+
+@timeline-line-height: 1;
+@timeline-content-label-margin-top: 8px;