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"} okText={"Crop and Upload Avatar"}
confirmLoading={confirmLoading} confirmLoading={confirmLoading}
onCancel={handleCancel} onCancel={handleCancel}
width={1000} width={600}
footer={ footer={
[<Button block type="primary" onClick={handleOk}>Crop and Submit</Button>] [<Button block type="primary" onClick={handleOk}>Set new profile picture</Button>]
} }
> >
<Col> <Col>
<Row> <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"}}> <Row style={{width: "100%", marginBottom: "20px"}}>
<input style={{display: "none"}} name="fileupload" type="file" onChange={onChange}/> <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> </Row>
<Cropper <Cropper
style={{height: 400}} style={{height: "100%"}}
initialAspectRatio={1} initialAspectRatio={1}
preview=".img-preview" preview=".img-preview"
src={image} src={image}

10
web/src/UserEditPage.js
View File

@ -224,27 +224,27 @@ class UserEditPage extends React.Component {
</Col> </Col>
<Col span={22} > <Col span={22} >
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={1}> <Col style={{marginTop: '5px'}} span={2}>
URL: URL:
</Col> </Col>
<Col span={23} > <Col span={22} >
<Input prefix={<LinkOutlined/>} value={this.state.user.avatar} onChange={e => { <Input prefix={<LinkOutlined/>} value={this.state.user.avatar} onChange={e => {
this.updateUserField('avatar', e.target.value); this.updateUserField('avatar', e.target.value);
}} /> }} />
</Col> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={1}> <Col style={{marginTop: '5px'}} span={2}>
{i18next.t("general:Preview")}: {i18next.t("general:Preview")}:
</Col> </Col>
<Col span={23} > <Col span={22} >
<a target="_blank" rel="noreferrer" href={this.state.user.avatar}> <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'}}/> <img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: '20px'}}/>
</a> </a>
</Col> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}}> <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> </Row>
</Col> </Col>
</Row> </Row>