style(color-picker): update color-picker style

Tencent · Aug 4, 2022 · 492d477 · 492d477
1 parent 0d28363
commit 492d477
Show file tree

Hide file tree

Showing 11 changed files with 429 additions and 244 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/color-picker/panel/alpha.tsx b/src/color-picker/panel/alpha.tsx
@@ -48,6 +48,7 @@ export default defineComponent({
         rail-style={this.railStyle}
         max-value={100}
         disabled={this.disabled}
+        type="alpha"
       />
     );
   },

diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx
@@ -72,7 +72,8 @@ export default defineComponent({
       <div class={`${baseClassName}__format`}>
         <div class={`${baseClassName}__format--item`}>
           <t-select
-            autoWidth={true}
+            size="small"
+            class={`${baseClassName}__format-mode-select`}
             {...selectInputProps}
             popupProps={{
               overlayClassName: `${baseClassName}__select-options`,

diff --git a/src/color-picker/panel/format/inputs.tsx b/src/color-picker/panel/format/inputs.tsx
@@ -150,6 +150,7 @@ export default defineComponent({
               <t-input
                 {...inputProps}
                 align="center"
+                size="small"
                 disabled={this.disabled}
                 v-model={this.modelValues[config.key]}
                 maxlength={this.format === 'HEX' ? 9 : undefined}
@@ -162,6 +163,7 @@ export default defineComponent({
                 {...inputProps}
                 align="center"
                 theme="normal"
+                size="small"
                 disabled={this.disabled}
                 v-model={this.modelValues[config.key]}
                 title={this.modelValues[config.key]}

diff --git a/src/color-picker/panel/header.tsx b/src/color-picker/panel/header.tsx
@@ -32,9 +32,6 @@ export default defineComponent({
   setup(props) {
     const baseClassName = useBaseClassName();
     const modeValue = ref(props.mode);
-    const handleClosePopup = () => {
-      props.togglePopup?.(false);
-    };
     watch(
       () => props.mode,
       (v) => {
@@ -44,10 +41,12 @@ export default defineComponent({
     return {
       baseClassName,
       modeValue,
-      handleClosePopup,
     };
   },
   render() {
+    if (this.colorModes?.length === 1) {
+      return null;
+    }
     const { baseClassName } = this;
     return (
       <div class={`${baseClassName}__head`}>
@@ -69,15 +68,6 @@ export default defineComponent({
             </t-radio-group>
           )}
         </div>
-        {this.closeBtn ? (
-          <span
-            role="button"
-            class={[`${baseClassName}__icon`, `${baseClassName}__close`]}
-            onClick={this.handleClosePopup}
-          >
-            <close-icon />
-          </span>
-        ) : null}
       </div>
     );
   },

diff --git a/src/color-picker/panel/hue.tsx b/src/color-picker/panel/hue.tsx
@@ -26,6 +26,7 @@ export default defineComponent({
         value={this.color.hue}
         handleChange={this.handleChange}
         disabled={this.disabled}
+        type="hue"
       />
     );
   },

diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
@@ -323,6 +323,8 @@ export default defineComponent({
       );
     };
 
+    const isGradient = this.mode === 'linear-gradient';
+
     return (
       <div class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}>
         <panel-header
@@ -335,14 +337,27 @@ export default defineComponent({
           handleModeChange={this.handleModeChange}
         />
         <div class={[`${baseClassName}__body`]}>
-          {this.mode === 'linear-gradient' ? (
+          {isGradient ? (
             <linear-gradient color={this.color} disabled={this.disabled} handleChange={this.handleGradientChange} />
           ) : null}
           <saturation-panel color={this.color} disabled={this.disabled} handleChange={this.handleSatAndValueChange} />
-          <hue-slider color={this.color} disabled={this.disabled} handleChange={this.handleHueChange} />
-          {this.enableAlpha ? (
-            <alpha-slider color={this.color} disabled={this.disabled} handleChange={this.handleAlphaChange} />
-          ) : null}
+          <div class={[`${baseClassName}__sliders-wrapper`]}>
+            <div class={[`${baseClassName}__sliders`]}>
+              <hue-slider color={this.color} disabled={this.disabled} handleChange={this.handleHueChange} />
+              {this.enableAlpha ? (
+                <alpha-slider color={this.color} disabled={this.disabled} handleChange={this.handleAlphaChange} />
+              ) : null}
+            </div>
+            <div class={[`${baseClassName}__sliders-preview`, `${baseClassName}--bg-alpha`]}>
+              <span
+                class={`${baseClassName}__sliders-preview-inner`}
+                style={{
+                  background: isGradient ? this.color.linearGradient : this.color.rgba,
+                }}
+              />
+            </div>
+          </div>
+
           <format-panel
             {...{
               props: {

diff --git a/src/color-picker/panel/linear-gradient.tsx b/src/color-picker/panel/linear-gradient.tsx
@@ -272,6 +272,7 @@ export default defineComponent({
         <div class={`${baseClassName}__gradient-degree`} title={`${degree}deg`}>
           <t-input-number
             theme="normal"
+            size="small"
             min={0}
             max={360}
             step={1}

diff --git a/src/color-picker/panel/slider.tsx b/src/color-picker/panel/slider.tsx
@@ -30,6 +30,10 @@ export default defineComponent({
     railStyle: {
       type: Object as PropType<any>,
     },
+    type: {
+      type: String as PropType<'hue' | 'alpha'>,
+      default: 'hue',
+    },
   },
   setup(props, { emit }) {
     const baseClassName = useBaseClassName();
@@ -96,12 +100,18 @@ export default defineComponent({
   },
   render() {
     const {
-      baseClassName, className, railStyle, styles,
+      baseClassName, className, railStyle, styles, type, color,
     } = this;
+    const paddingStyle = {
+      background: `linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ${color.rgb} 93%, ${color.rgb} 100%)`,
+    };
     return (
-      <div class={[`${baseClassName}__slider`, className]} ref="refPanel">
-        <div class={`${baseClassName}__rail`} style={railStyle}></div>
-        <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+      <div class={[`${baseClassName}__slider-wrapper`, `${baseClassName}__slider-wrapper--${type}-type`]}>
+        {type === 'alpha' && <div class={`${baseClassName}__slider-padding`} style={paddingStyle} />}
+        <div class={[`${baseClassName}__slider`, className]} ref="refPanel">
+          <div class={`${baseClassName}__rail`} style={railStyle}></div>
+          <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+        </div>
       </div>
     );
   },
+60 −0		docs/web/api/image-viewer.md
+9 −0		docs/web/api/rate.md
+19 −0		docs/web/api/timeline.md
+0 −0		docs/web/design/image-viewer.md
+4 −4		js/color-picker/constants.ts
+2 −0		style/web/components/_index.less
+108 −60		style/web/components/color-picker/_index.less
+15 −13		style/web/components/color-picker/_var.less
+476 −0		style/web/components/image-viewer/_index.less
+0 −0		style/web/components/image-viewer/_mixin.less
+18 −0		style/web/components/image-viewer/_var.less
+96 −0		style/web/components/image-viewer/index.html
+3 −6		style/web/components/input/_index.less
+11 −0		style/web/components/input/_mixin.less
+5 −0		style/web/components/input/_var.less
+327 −0		style/web/components/timeline/_index.less
+7 −0		style/web/components/timeline/_var.less
+41 −0		style/web/components/timeline/index.html