llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-23 02:35:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve avatar upload UI.

Browse Source
This commit is contained in:
Yang Luo 2021-04-26 18:21:28 +08:00
parent d586efc242
commit 085f0ca239
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/CropperDiv.js
View File

@ -87,20 +87,20 @@ export const CropperDiv = (props) => {
okText={"Crop and Upload Avatar"}
confirmLoading={confirmLoading}
onCancel={handleCancel}
width={1000}
width={600}
footer={
[<Button block type="primary" onClick={handleOk}>Crop and Submit</Button>]
[<Button block type="primary" onClick={handleOk}>Set new profile picture</Button>]
}
>
<Col>
<Row>
<Col style={{margin: "20px auto 100px auto", width: 1000}}>
<Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
<Row style={{width: "100%", marginBottom: "20px"}}>
<input style={{display: "none"}} name="fileupload" type="file" onChange={onChange}/>
<Button block onClick={selectFile}>Select File</Button>
<Button block onClick={selectFile}>Select a phone...</Button>
</Row>
<Cropper
style={{height: 400}}
style={{height: "100%"}}
initialAspectRatio={1}
preview=".img-preview"
src={image}

10
web/src/UserEditPage.js
View File

@ -224,27 +224,27 @@ class UserEditPage extends React.Component {
</Col>
<Col span={22} >
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={1}>
<Col style={{marginTop: '5px'}} span={2}>
URL:
</Col>
<Col span={23} >
<Col span={22} >
<Input prefix={<LinkOutlined/>} value={this.state.user.avatar} onChange={e => {
this.updateUserField('avatar', e.target.value);
}} />
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={1}>
<Col style={{marginTop: '5px'}} span={2}>
{i18next.t("general:Preview")}:
</Col>
<Col span={23} >
<Col span={22} >
<a target="_blank" rel="noreferrer" href={this.state.user.avatar}>
<img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: '20px'}}/>
</a>
</Col>
</Row>
<Row style={{marginTop: '20px'}}>
<CropperDiv buttonText={"Upload Avatar"} title={"Upload Avatar"} targetFunction={UserBackend.uploadAvatar} />
<CropperDiv buttonText={"Upload a phone..."} title={"Crop your new profile picture"} targetFunction={UserBackend.uploadAvatar} />
</Row>
</Col>
</Row>