martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling remaining profile modals

Browse Source
This commit is contained in:
Roland Osborne 2024-02-23 23:21:58 -08:00
parent 606b8c4122
commit 82c8221f2e
4 changed files with 126 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
net/web/src/session/account/profile/Profile.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useCallback } from 'react';
import { Modal, Input, Button, Switch } from 'antd';
import { LogoutContent, ProfileWrapper, ProfileDetailsWrapper, ProfileImageWrapper, EditFooter } from './Profile.styled';
import { LogoutContent, ProfileWrapper, ProfileDetailsWrapper, ProfileImageWrapper } from './Profile.styled';
import { useProfile } from './useProfile.hook';
import { Logo } from 'logo/Logo';
import { AccountAccess } from './accountAccess/AccountAccess';
@ -70,17 +70,6 @@ export function Profile({ closeProfile }) {
});
}
const editImageFooter = (
<EditFooter>
<input type='file' id='file' accept="image/*" ref={imageFile} onChange={e => selected(e)} style={{display: 'none'}}/>
<div className="select">
<Button key="select" className="pic" onClick={() => imageFile.current.click()}>Select Image</Button>
</div>
<Button key="back" onClick={actions.clearEditProfileImage}>Cancel</Button>
<Button key="save" type="primary" onClick={saveImage} loading={state.busy}>Save</Button>
</EditFooter>
);
const onCropComplete = useCallback((area, crop) => {
actions.setEditImageCrop(crop.width, crop.height, crop.x, crop.y)
// eslint-disable-next-line
@ -156,12 +145,23 @@ export function Profile({ closeProfile }) {
<div className="contentFill" />
</div>
)}
<Modal title="Profile Image" centered visible={state.editProfileImage} footer={editImageFooter}
bodyStyle={{ padding: 16 }} onCancel={actions.clearEditProfileImage}>
<Modal centered closable={false} visible={state.editProfileImage} footer={null}
bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileImage}>
<ProfileImageWrapper>
<Cropper image={state.editImage} crop={state.crop} zoom={state.zoom} aspect={1}
onCropChange={actions.setCrop} onCropComplete={onCropComplete} onZoomChange={actions.setZoom} />
<div className="title">Profile Image</div>
<div className="cropper">
<Cropper image={state.editImage} crop={state.crop} zoom={state.zoom} aspect={1}
onCropChange={actions.setCrop} onCropComplete={onCropComplete} onZoomChange={actions.setZoom} />
</div>
<div className="controls">
<input type='file' id='file' accept="image/*" ref={imageFile} onChange={e => selected(e)} style={{display: 'none'}}/>
<div className="select">
<Button key="select" className="pic" onClick={() => imageFile.current.click()}>Select Image</Button>
</div>
<Button key="back" onClick={actions.clearEditProfileImage}>Cancel</Button>
<Button key="save" type="primary" onClick={saveImage} loading={state.busy}>Save</Button>
</div>
</ProfileImageWrapper>
</Modal>

40
net/web/src/session/account/profile/Profile.styled.js
View File

@ -229,15 +229,6 @@ export const LogoutContent = styled.div`
}
`
export const EditFooter = styled.div`
width: 100%;
display: flex;
.select {
display: flex;
flex-grow: 1;
}
`
export const ProfileDetailsWrapper = styled.div`
display: flex;
flex-direction: column;
@ -287,11 +278,34 @@ export const ProfileDetailsWrapper = styled.div`
`;
export const ProfileImageWrapper = styled.div`
position: relative;
height: 256px;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
gap: 16px;
.cropper {
position: relative;
height: 256px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 1.2rem;
display: flex;
justify-content: center;
}
.controls {
display: flex;
justify-content: flex-end;
gap: 16px;
.select {
flex-grow: 1;
}
}
`;

41
net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
View File

@ -52,22 +52,6 @@ export function AccountAccess() {
}
}
const editSealFooter = (
<div>
<div className="select"></div>
<Button key="back" onClick={actions.clearEditSeal}>Cancel</Button>
{ state.sealMode === 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} loading={state.busy}>Forget</Button>
)}
{ state.sealMode === 'unlocking' && (
<Button key="save" type="primary" onClick={saveSeal} disabled={!actions.canSaveSeal()} loading={state.busy}>Unlock</Button>
)}
{ state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} disabled={!actions.canSaveSeal()} loading={state.busy}>Save</Button>
)}
</div>
);
return (
<AccountAccessWrapper>
{ modalContext }
@ -127,42 +111,55 @@ export function AccountAccess() {
</div>
</div>
</div>
<Modal title="Topic Sealing Key" centered visible={state.editSeal} footer={editSealFooter} onCancel={actions.clearEditSeal} bodyStyle={{ padding: 16 }}>
<Modal centered closable={false} visible={state.editSeal} footer={null} onCancel={actions.clearEditSeal} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }}>
<SealModal>
<div className="title">Topic Sealing Key</div>
<div className="switch">
<Switch size="small" checked={state.sealEnabled} onChange={enable => actions.enableSeal(enable)} />
<div className="switchLabel">Enable Sealed Topics</div>
</div>
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
<div className="sealPassword">
<div className="sealChange">
<Input.Password placeholder="New Password" spellCheck="false" onChange={(e) => actions.setSealPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
</div>
)}
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
<div className="sealPassword">
<div className="sealChange">
<Input.Password placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setSealConfirm(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
</div>
)}
{ state.sealMode === 'disabling' && (
<div className="sealPassword">
<div className="sealChange">
<Input placeholder="Type 'delete' to remove key" spellCheck="false" onChange={(e) => actions.setSealDelete(e.target.value)}
prefix={<ExclamationCircleOutlined />} />
</div>
)}
{ state.sealMode === 'enabled' && (
<div className="sealPassword" onClick={() => actions.updateSeal()}>
<div className="sealChange" onClick={() => actions.updateSeal()}>
<Input.Password defaultValue="xxxxxxxxxx" disabled={true} prefix={<LockOutlined />} />
<div className="editPassword" />
</div>
)}
{ state.sealMode === 'unlocking' && (
<div className="sealPassword">
<div className="sealChange">
<Input.Password placeholder="Password" spellCheck="false" onChange={(e) => actions.setSealUnlock(e.target.value)}
prefix={<LockOutlined />} />
</div>
)}
<div className="controls">
<Button key="back" onClick={actions.clearEditSeal}>Cancel</Button>
{ state.sealMode === 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} loading={state.busy}>Forget</Button>
)}
{ state.sealMode === 'unlocking' && (
<Button key="save" type="primary" onClick={saveSeal} className={actions.canSaveSeal() ? 'saveEnabled' : 'saveDisabled'} disabled={!actions.canSaveSeal()} loading={state.busy}>Unlock</Button>
)}
{ state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} className={actions.canSaveSeal() ? 'saveEnabled' : 'saveDisabled'} disabled={!actions.canSaveSeal()} loading={state.busy}>Save</Button>
)}
</div>
</SealModal>
</Modal>
<Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>

81
net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
View File

@ -91,16 +91,17 @@ export const AccountAccessWrapper = styled.div`
export const SealModal = styled.div`
display: flex;
flex-direction: column;
padding-bottom: 8px;
gap: 16px;
.title {
font-size: 1.2rem;
display: flex;
justify-content: center;
}
.switch {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
align-items: center;
justify-content: center;
padding-top: 8px;
.switchLabel {
color: ${props => props.theme.mainText};
@ -109,19 +110,65 @@ export const SealModal = styled.div`
}
}
.sealPassword {
padding-top: 4px;
padding-bottom: 4px;
position: relative;
.controls {
width: 100%;
display: flex;
justify-content: flex-end;
gap: 16px;
.editPassword {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
.saveDisabled {
background-color: ${props => props.theme.disabledArea};
button {
color: ${props => props.theme.idleText};
}
}
.saveEnabled {
background-color: ${props => props.theme.enabledArea};
button {
color: ${props => props.theme.activeText};
}
}
}
.sealChange {
width: 100%;
background-color: ${props => props.theme.inputArea};
color: ${props => props.theme.mainText};
border-radius: 8px;
.ant-input-affix-wrapper {
background-color: ${props => props.theme.inputArea};
}
.anticon {
color: ${props => props.theme.placeholderText};
&:hover {
color: ${props => props.theme.linkText};
}
}
input {
padding-left: 8px;
background-color: ${props => props.theme.inputArea};
color: ${props => props.theme.mainText};
}
input::placeholder {
color: ${props => props.theme.placeholderText};
}
}
.editPassword {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
`