mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
Fix upload and badge styles
This commit is contained in:
afc163
parent
274985d320
commit
c5ffc3b4f0
@ -26,7 +26,6 @@
|
||||
font-size: @badge-font-size;
|
||||
white-space: nowrap;
|
||||
transform-origin: -10% center;
|
||||
font-family: tahoma;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
a,
|
||||
a:hover {
|
||||
|
||||
@ -5,7 +5,7 @@ exports[`renders ./components/upload/demo/avatar.md correctly 1`] = `
|
||||
class="avatar-uploader"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture-card"
|
||||
style="display:"
|
||||
/>
|
||||
</span>
|
||||
@ -119,17 +119,16 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/drag.md correctly 1`] = `
|
||||
<div
|
||||
style="margin-top:16px;height:180px"
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-drag"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload ant-upload-drag"
|
||||
/>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
|
||||
|
||||
@ -39,31 +39,41 @@ function beforeUpload(file) {
|
||||
}
|
||||
|
||||
class Avatar extends React.Component {
|
||||
state = {};
|
||||
|
||||
state = {
|
||||
loading: false,
|
||||
};
|
||||
handleChange = (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
this.setState({ loading: true });
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
|
||||
getBase64(info.file.originFileObj, imageUrl => this.setState({
|
||||
imageUrl,
|
||||
loading: false,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const uploadButton = (
|
||||
<div>
|
||||
<Icon type={this.state.loading ? 'loading' : 'plus'} />
|
||||
<div className="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
);
|
||||
const imageUrl = this.state.imageUrl;
|
||||
return (
|
||||
<Upload
|
||||
className="avatar-uploader"
|
||||
name="avatar"
|
||||
listType="picture-card"
|
||||
className="avatar-uploader"
|
||||
showUploadList={false}
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
beforeUpload={beforeUpload}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{
|
||||
imageUrl ?
|
||||
<img src={imageUrl} alt="" className="avatar" /> :
|
||||
<Icon type="plus" className="avatar-uploader-trigger" />
|
||||
}
|
||||
{imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
|
||||
</Upload>
|
||||
);
|
||||
}
|
||||
@ -73,26 +83,8 @@ ReactDOM.render(<Avatar />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.avatar-uploader,
|
||||
.avatar-uploader-trigger,
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
display: block;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
}
|
||||
.avatar-uploader:hover {
|
||||
border: 1px dashed #1890ff;
|
||||
}
|
||||
.avatar-uploader-trigger {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
.avatar-uploader > .ant-upload {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
````
|
||||
|
||||
@ -24,7 +24,6 @@ const Dragger = Upload.Dragger;
|
||||
const props = {
|
||||
name: 'file',
|
||||
multiple: true,
|
||||
showUploadList: false,
|
||||
action: '//jsonplaceholder.typicode.com/posts/',
|
||||
onChange(info) {
|
||||
const status = info.file.status;
|
||||
@ -40,14 +39,12 @@ const props = {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={{ marginTop: 16, height: 180 }}>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
|
||||
</Dragger>
|
||||
</div>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
|
||||
</Dragger>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
@upload-prefix-cls: ~"@{ant-prefix}-upload";
|
||||
@upload-item: ~"@{ant-prefix}-upload-list-item";
|
||||
@upload-pictrue-card-size: 96px;
|
||||
@upload-pictrue-card-size: 104px;
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
.reset-component;
|
||||
@ -32,20 +32,22 @@
|
||||
width: @upload-pictrue-card-size;
|
||||
height: @upload-pictrue-card-size;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #fbfbfb;
|
||||
background-color: @background-color-light;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s ease;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
display: table;
|
||||
|
||||
> .@{upload-prefix-cls} {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 0;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -88,10 +90,10 @@
|
||||
|
||||
p.@{upload-prefix-cls}-drag-icon {
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 60px;
|
||||
font-size: 48px;
|
||||
color: @primary-5;
|
||||
}
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p.@{upload-prefix-cls}-text {
|
||||
font-size: @font-size-lg;
|
||||
@ -120,22 +122,21 @@
|
||||
.reset-component;
|
||||
overflow: hidden;
|
||||
&-item {
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
height: 24px;
|
||||
height: 22px;
|
||||
&-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: @font-size-base + 4px;
|
||||
padding-left: @font-size-base + 8px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-info {
|
||||
line-height: 24px;
|
||||
height: 100%;
|
||||
padding: 0 12px 0 4px;
|
||||
transition: background-color .3s;
|
||||
|
||||
@ -148,7 +149,7 @@
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
position: absolute;
|
||||
top: @font-size-base / 2 - 0.5px;
|
||||
top: @font-size-base / 2 - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,7 +162,7 @@
|
||||
top: 0;
|
||||
right: 4px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 24px;
|
||||
line-height: 22px;
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
@ -191,7 +192,8 @@
|
||||
font-size: @font-size-base;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
bottom: -12px;
|
||||
padding-left: @font-size-base + 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -236,7 +238,6 @@
|
||||
height: 48px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
|
||||
@ -266,7 +267,7 @@
|
||||
.@{upload-item}-progress {
|
||||
padding-left: 56px;
|
||||
margin-top: 0;
|
||||
bottom: 24px;
|
||||
bottom: 14px;
|
||||
width: ~"calc(100% - 24px)";
|
||||
}
|
||||
|
||||
@ -353,7 +354,7 @@
|
||||
|
||||
.@{upload-item}-uploading {
|
||||
&.@{upload-item} {
|
||||
background-color: #fbfbfb;
|
||||
background-color: @background-color-light;
|
||||
}
|
||||
|
||||
.@{upload-item}-info {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user