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

Improve image upload UI

Browse Source
This commit is contained in:
Yang Luo 2023-12-08 19:00:10 +08:00
parent ce72a172b0
commit 4eb725d47a
1 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/UserEditPage.js
View File

@ -374,12 +374,9 @@ class UserEditPage extends React.Component {
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}> <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("general:Avatar"), i18next.t("general:Avatar - Tooltip"))} : {Setting.getLabel(i18next.t("general:Avatar"), i18next.t("general:Avatar - Tooltip"))} :
</Col> </Col>
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}> {
{i18next.t("general:Preview")}: this.renderImage(this.state.user.avatar, i18next.t("user:Upload a photo"), i18next.t("user:Set new profile picture"), "avatar", false)
</Col> }
<Col>
{this.renderImage(this.state.user.avatar, i18next.t("user:Upload a photo"), i18next.t("user:Set new profile picture"), "avatar", false)}
</Col>
</Row> </Row>
); );
} else if (accountItem.name === "User type") { } else if (accountItem.name === "User type") {
@ -550,9 +547,6 @@ 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={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Preview")}:
</Col>
{ {
[ [
{name: "ID card front", value: "idCardFront"}, {name: "ID card front", value: "idCardFront"},
@ -975,7 +969,7 @@ class UserEditPage extends React.Component {
renderImage(imgUrl, title, set, tag, disabled) { renderImage(imgUrl, title, set, tag, disabled) {
return ( return (
<Col span={4} style={{textAlign: "center", margin: "auto"}} key={tag}> <Col span={4} style={{textAlign: "center", margin: "auto", marginLeft: "20px"}} key={tag}>
{ {
imgUrl ? imgUrl ?
<div style={{marginBottom: "10px"}}> <div style={{marginBottom: "10px"}}>
@ -986,7 +980,7 @@ class UserEditPage extends React.Component {
: :
<Col style={{height: "78%", border: "1px dotted grey", borderRadius: 3, marginBottom: "10px"}}> <Col style={{height: "78%", border: "1px dotted grey", borderRadius: 3, marginBottom: "10px"}}>
<div style={{fontSize: 30, margin: 10}}>+</div> <div style={{fontSize: 30, margin: 10}}>+</div>
<div style={{verticalAlign: "middle", marginBottom: 10}}>{`Upload ${title}...`}</div> <div style={{verticalAlign: "middle", marginBottom: 10}}>{`(${i18next.t("general:empty")})`}</div>
</Col> </Col>
} }
<CropperDivModal disabled={disabled} tag={tag} setTitle={set} buttonText={`${title}...`} title={title} user={this.state.user} organization={this.state.organizations.find(organization => organization.name === this.state.organizationName)} /> <CropperDivModal disabled={disabled} tag={tag} setTitle={set} buttonText={`${title}...`} title={title} user={this.state.user} organization={this.state.organizations.find(organization => organization.name === this.state.organizationName)} />