You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
7.0 KiB
182 lines
7.0 KiB
from dash import html, dcc
|
|
import feffery_utils_components as fuc
|
|
import feffery_antd_components as fac
|
|
from flask import session
|
|
|
|
from config.global_config import ApiBaseUrlConfig
|
|
import callbacks.system_c.user_c.profile_c.avatar_c
|
|
|
|
|
|
def render():
|
|
return [
|
|
html.Div(
|
|
[
|
|
fac.AntdImage(
|
|
id='user-avatar-image-info',
|
|
src=f"{ApiBaseUrlConfig.BaseUrl}{session.get('user_info').get('avatar')}&token={session.get('Authorization')}",
|
|
preview=False,
|
|
height='120px',
|
|
width='120px',
|
|
style={
|
|
'borderRadius': '50%'
|
|
}
|
|
)
|
|
],
|
|
id='avatar-edit-click',
|
|
className='user-info-head'
|
|
),
|
|
fuc.FefferyStyle(
|
|
rawStyle='''
|
|
.user-info-head {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 120px;
|
|
}
|
|
|
|
.user-info-head:hover:after {
|
|
content: '+';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
color: #eee;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
font-size: 24px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
cursor: pointer;
|
|
line-height: 110px;
|
|
border-radius: 50%;
|
|
}
|
|
'''
|
|
),
|
|
fac.AntdModal(
|
|
[
|
|
fac.AntdRow(
|
|
[
|
|
fac.AntdCol(
|
|
[
|
|
html.Div(
|
|
[
|
|
|
|
fuc.FefferyImageCropper(
|
|
id='avatar-cropper',
|
|
alt='avatar',
|
|
aspectRatio=1,
|
|
dragMode='move',
|
|
cropBoxMovable=False,
|
|
cropBoxResizable=False,
|
|
wheelZoomRatio=0.01,
|
|
preview='#user-avatar-image-preview',
|
|
style={
|
|
'width': '100%',
|
|
'height': '100%'
|
|
}
|
|
)
|
|
],
|
|
id='avatar-cropper-container',
|
|
style={
|
|
'height': '350px',
|
|
'width': '100%'
|
|
}
|
|
),
|
|
],
|
|
span=12
|
|
),
|
|
fac.AntdCol(
|
|
[
|
|
html.Div(
|
|
id='user-avatar-image-preview',
|
|
className='avatar-upload-preview'
|
|
),
|
|
fuc.FefferyStyle(
|
|
rawStyle="""
|
|
.avatar-upload-preview {
|
|
margin: 18% auto;
|
|
width: 220px;
|
|
height: 220px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 4px #ccc;
|
|
overflow: hidden;
|
|
}
|
|
"""
|
|
)
|
|
],
|
|
span=12
|
|
)
|
|
]
|
|
),
|
|
html.Br(),
|
|
fac.AntdRow(
|
|
[
|
|
fac.AntdCol(
|
|
fac.AntdUpload(
|
|
id='avatar-upload-choose',
|
|
apiUrl=f'{ApiBaseUrlConfig.BaseUrl}/common/upload',
|
|
apiUrlExtraParams={'taskPath': 'avatarUpload'},
|
|
downloadUrl=f"{ApiBaseUrlConfig.BaseUrl}/common/caches",
|
|
downloadUrlExtraParams={'taskPath': 'avatarUpload', 'token': session.get('Authorization')},
|
|
headers={'Authorization': 'Bearer ' + session.get('Authorization')},
|
|
fileMaxSize=10,
|
|
showUploadList=False,
|
|
fileTypes=['jpeg', 'jpg', 'png'],
|
|
buttonContent='选择'
|
|
),
|
|
span=4
|
|
),
|
|
fac.AntdCol(
|
|
fac.AntdButton(
|
|
id='zoom-out',
|
|
icon=fac.AntdIcon(
|
|
icon='antd-plus'
|
|
)
|
|
),
|
|
span=2
|
|
),
|
|
fac.AntdCol(
|
|
fac.AntdButton(
|
|
id='zoom-in',
|
|
icon=fac.AntdIcon(
|
|
icon='antd-minus'
|
|
)
|
|
),
|
|
span=2
|
|
),
|
|
fac.AntdCol(
|
|
fac.AntdButton(
|
|
icon=fac.AntdIcon(
|
|
id='rotate-left',
|
|
icon='antd-undo'
|
|
)
|
|
),
|
|
span=2
|
|
),
|
|
fac.AntdCol(
|
|
fac.AntdButton(
|
|
icon=fac.AntdIcon(
|
|
id='rotate-right',
|
|
icon='antd-redo'
|
|
)
|
|
),
|
|
span=7
|
|
),
|
|
fac.AntdCol(
|
|
fac.AntdButton(
|
|
'提交',
|
|
id='change-avatar-submit',
|
|
type='primary'
|
|
),
|
|
span=7
|
|
),
|
|
],
|
|
gutter=10
|
|
)
|
|
],
|
|
id='avatar-cropper-modal',
|
|
title='修改头像',
|
|
width=850,
|
|
mask=False
|
|
)
|
|
]
|
|
|