Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: adjust upload error icon #24160

Merged
merged 14 commits into from May 18, 2020
Merged

style: adjust upload error icon #24160

merged 14 commits into from May 18, 2020

Conversation

xrkffgg
Copy link
Member

@xrkffgg xrkffgg commented May 14, 2020

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Perfermance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other

🔗 Related issue link

💡 Background and solution

Before

image

After

image

📝 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
Copy link
Contributor

@ant-design-bot ant-design-bot commented May 14, 2020

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 14, 2020

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

@xrkffgg xrkffgg requested review from zombieJ and afc163 May 14, 2020
@zombieJ
Copy link
Member

@zombieJ zombieJ commented May 14, 2020

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

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

<PictureTwoTone twoToneColor=“#ff4d4f”/>

这样?

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

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

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

PictureTwoTone 的效果图

image

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

Out

image

Two

image

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

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

@xrkffgg xrkffgg changed the title fix: adjust uoload error icon [WIP] fix: adjust uoload error icon May 15, 2020
@afc163
Copy link
Member

@afc163 afc163 commented May 15, 2020

ci failed

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

export default defaultLess;
Copy link
Member

@afc163 afc163 May 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -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;
Copy link
Member

@afc163 afc163 May 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@xrkffgg xrkffgg changed the title [WIP] fix: adjust uoload error icon fix: adjust uoload error icon May 15, 2020
@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

/rebase

@codecov
Copy link

@codecov codecov bot commented May 15, 2020

Codecov Report

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

Impacted file tree graph

@@           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
Copy link
Member

@afc163 afc163 commented May 15, 2020

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

image

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

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

@afc163
Copy link
Member

@afc163 afc163 commented May 15, 2020

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

这些也是算出来。

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

🥺🥺 找不到 公式

@afc163
Copy link
Member

@afc163 afc163 commented May 15, 2020

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

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

@xrkffgg xrkffgg May 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@afc163 afc163 May 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@afc163 afc163 changed the title fix: adjust uoload error icon fix: adjust upload error icon May 15, 2020
@afc163 afc163 changed the title fix: adjust upload error icon style: adjust upload error icon May 15, 2020
components/upload/style/index.less Outdated Show resolved Hide resolved
svg path[fill="#e6f7ff"] {
fill: color(~`colorPalette('@{error-color}', 1) `);
&:first-child,
&:last-child[fill="#1890ff"] {
Copy link
Member

@afc163 afc163 May 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不要加 first-child,last-child

@xrkffgg xrkffgg requested a review from afc163 May 15, 2020
@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 15, 2020

/rebase

@afc163
Copy link
Member

@afc163 afc163 commented May 15, 2020

ci 挂了

@xrkffgg
Copy link
Member Author

@xrkffgg xrkffgg commented May 18, 2020

@afc163 @zombieJ need you review

@xrkffgg xrkffgg merged commit 8cb146b into master May 18, 2020
32 of 33 checks passed
@xrkffgg xrkffgg deleted the adj-upload branch May 18, 2020
@zombieJ zombieJ mentioned this pull request May 18, 2020
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants