style: adjust upload error icon #24160

xrkffgg · 2020-05-14T10:03:31Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

Before

After

📝 Changelog

Language	Changelog
🇺🇸 English	Adjust Upload icon default color to red in error status
🇨🇳 Chinese	调整 Upload 错误状态图标的颜色默认为红色

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

ant-design-bot · 2020-05-14T10:06:37Z

xrkffgg · 2020-05-14T10:12:18Z

是否需要调整这个 icon ，如果要改，我再更新 snap

zombieJ · 2020-05-14T14:39:00Z

双色改单色应该不是预期的，如果要调整颜色。应该也是双色变成红色才对。

xrkffgg · 2020-05-15T01:02:29Z

<PictureTwoTone twoToneColor=“#ff4d4f”/>

这样？

xrkffgg · 2020-05-15T01:07:21Z

这个颜色是 less 中使用了 @error-color;，在 tsx 中，只能使用 RGB 了

xrkffgg · 2020-05-15T01:18:37Z

PictureTwoTone 的效果图

xrkffgg · 2020-05-15T01:21:02Z

Out

Two

xrkffgg · 2020-05-15T01:26:16Z

Two 看起来更饱满一些，可以试下把 less 中的变量共享出来用，大佬你觉得呢？
@zombieJ

afc163 · 2020-05-15T02:39:15Z

ci failed

afc163 · 2020-05-15T06:12:34Z

components/style/themes/export.ts

@@ -0,0 +1,3 @@
+import defaultLess from './default.less';
+
+export default defaultLess;


这样可能有坑，用户没有 less-loader 就挂了。

afc163 · 2020-05-15T06:13:18Z

components/upload/UploadList.tsx

@@ -87,7 +89,9 @@ export default class UploadList extends React.Component<UploadListProps, any> {
      return iconRender(file, listType);
    }
    const isLoading = file.status === 'uploading';
-    const fileIcon = isImgUrl && isImgUrl(file) ? <PictureOutlined /> : <FileTwoTone />;
+    const { errorColor } = defaultLess;


errorColor 直接用 @ant-design/colors 里的 red 好了。

xrkffgg · 2020-05-15T06:26:20Z

/rebase

codecov · 2020-05-15T07:20:47Z

Codecov Report

Merging #24160 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #24160   +/-   ##
=======================================
  Coverage   98.81%   98.81%           
=======================================
  Files         363      363           
  Lines        7280     7280           
  Branches     2006     2016   +10     
=======================================
  Hits         7194     7194           
  Misses         86       86

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c99ecda...60ecddf. Read the comment docs.

afc163 · 2020-05-15T07:39:11Z

引入 ant-design colors 会增加一些体积，要不然直接覆盖定义 svg 样式好了，这样可以直接用 less 变量。

xrkffgg · 2020-05-15T07:49:38Z

下面 4 个 path ，中间 2 个 fill 是 #fff2f0 ，不一样啊

afc163 · 2020-05-15T08:08:40Z

下面 4 个 path ，中间 2 个 fill 是 #fff2f0 ，不一样啊

这些也是算出来。

xrkffgg · 2020-05-15T08:32:58Z

🥺🥺 找不到公式

afc163 · 2020-05-15T09:03:21Z

ant-design/components/style/themes/default.less

Line 110 in 9f633bc

@link-hover-color: color(~`colorPalette('@{link-color}', 5) `);

xrkffgg · 2020-05-15T09:30:28Z

components/style/themes/default.less

@@ -15,6 +15,7 @@
 @success-color: @green-6;
 @processing-color: @blue-6;
 @error-color: @red-5;
+@error-hover-color: color(~`colorPalette('@{error-color}', 1) `);


这个变量名字是不是不太好

不用起变量名，直接用就好了。

components/upload/style/index.less

afc163 · 2020-05-15T09:59:30Z

components/upload/style/index.less

+        svg path[fill="#e6f7ff"] {
+          fill: color(~`colorPalette('@{error-color}', 1) `);
+          &:first-child,
+          &:last-child[fill="#1890ff"] {


不要加 first-child，last-child

xrkffgg · 2020-05-15T10:15:38Z

/rebase

afc163 · 2020-05-15T14:59:27Z

ci 挂了

Co-authored-by: 偏右 <afc163@gmail.com>

xrkffgg · 2020-05-18T01:58:09Z

@afc163 @zombieJ need you review

reviewflow bot assigned xrkffgg May 14, 2020

pr-triage bot added the PR: unreviewed label May 14, 2020

xrkffgg requested review from zombieJ and afc163 May 14, 2020 10:12

xrkffgg changed the title ~~fix: adjust uoload error icon~~ [WIP] fix: adjust uoload error icon May 15, 2020

pr-triage bot removed the PR: unreviewed label May 15, 2020

afc163 reviewed May 15, 2020

View reviewed changes

xrkffgg changed the title ~~[WIP] fix: adjust uoload error icon~~ fix: adjust uoload error icon May 15, 2020

pr-triage bot added the PR: unreviewed label May 15, 2020

github-actions bot force-pushed the adj-upload branch from 4ce7ec1 to d4662ed Compare May 15, 2020 06:27

xrkffgg commented May 15, 2020

View reviewed changes

afc163 changed the title ~~fix: adjust uoload error icon~~ fix: adjust upload error icon May 15, 2020

afc163 changed the title ~~fix: adjust upload error icon~~ style: adjust upload error icon May 15, 2020

xrkffgg commented May 15, 2020

View reviewed changes

components/upload/style/index.less Outdated Show resolved Hide resolved

afc163 reviewed May 15, 2020

View reviewed changes

xrkffgg requested a review from afc163 May 15, 2020 10:08

xrkffgg and others added 13 commits May 18, 2020 09:05

fix: adjust uoload error icon

ca1aba4

use less var

77fa812

use antd-color

681be99

fix: adjust uoload error icon

480880e

use less var

3d6e896

use antd-color

25a8fc2

up snap

e0bbde7

fix package

f28708d

use svg fill

edd30aa

fix error

f98827f

Update components/upload/style/index.less

5eb1259

Co-authored-by: 偏右 <afc163@gmail.com>

Update components/upload/style/index.less

1049172

fix fill

39fb14e

xrkffgg force-pushed the adj-upload branch from 6c153f9 to 39fb14e Compare May 18, 2020 01:08

fix snap

60ecddf

zombieJ approved these changes May 18, 2020

View reviewed changes

pr-triage bot added PR: partially-approved and removed PR: unreviewed labels May 18, 2020

xrkffgg merged commit 8cb146b into master May 18, 2020

xrkffgg deleted the adj-upload branch May 18, 2020 02:31

pr-triage bot added PR: merged and removed PR: partially-approved labels May 18, 2020

zombieJ mentioned this pull request May 18, 2020

docs: 4.2.4 changelog #24244

Merged

13 tasks

zombieJ unassigned xrkffgg Feb 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style: adjust upload error icon #24160

style: adjust upload error icon #24160

xrkffgg commented May 14, 2020 •

edited

Loading

ant-design-bot commented May 14, 2020 •

edited

Loading

xrkffgg commented May 14, 2020

zombieJ commented May 14, 2020

xrkffgg commented May 15, 2020

xrkffgg commented May 15, 2020

xrkffgg commented May 15, 2020

xrkffgg commented May 15, 2020

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

afc163 May 15, 2020

afc163 May 15, 2020

xrkffgg commented May 15, 2020

codecov bot commented May 15, 2020 •

edited

Loading

afc163 commented May 15, 2020 •

edited

Loading

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

xrkffgg May 15, 2020

afc163 May 15, 2020

afc163 May 15, 2020

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

xrkffgg commented May 18, 2020

		@@ -0,0 +1,3 @@
		import defaultLess from './default.less';

		export default defaultLess;

style: adjust upload error icon #24160

style: adjust upload error icon #24160

Conversation

xrkffgg commented May 14, 2020 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

Before

After

📝 Changelog

☑️ Self Check before Merge

ant-design-bot commented May 14, 2020 • edited Loading

xrkffgg commented May 14, 2020

zombieJ commented May 14, 2020

xrkffgg commented May 15, 2020

xrkffgg commented May 15, 2020

xrkffgg commented May 15, 2020

xrkffgg commented May 15, 2020

Out

Two

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

afc163 May 15, 2020

Choose a reason for hiding this comment

afc163 May 15, 2020

Choose a reason for hiding this comment

xrkffgg commented May 15, 2020

codecov bot commented May 15, 2020 • edited Loading

Codecov Report

afc163 commented May 15, 2020 • edited Loading

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

xrkffgg May 15, 2020

Choose a reason for hiding this comment

afc163 May 15, 2020

Choose a reason for hiding this comment

afc163 May 15, 2020

Choose a reason for hiding this comment

xrkffgg commented May 15, 2020

afc163 commented May 15, 2020

xrkffgg commented May 18, 2020

xrkffgg commented May 14, 2020 •

edited

Loading

ant-design-bot commented May 14, 2020 •

edited

Loading

codecov bot commented May 15, 2020 •

edited

Loading

afc163 commented May 15, 2020 •

edited

Loading