yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-27 09:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change Profile page dom

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2021-03-31 09:47:32 +02:00
parent 4ba04f8b10
commit 6394d33a6d
3 changed files with 104 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/strapi-admin/admin/src/containers/ProfilePage/components.js
View File

@ -1,11 +1,9 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Label, Text } from '@buffetjs/core'; import { Label } from '@buffetjs/core';
export const Title = styled(Text)` const ProfilePageLabel = styled(Label)`
text-transform: uppercase;
color: ${({ theme }) => theme.main.colors.grey};
`;
export const ProfilePageLabel = styled(Label)`
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left: 15px;
`; `;
export default ProfilePageLabel;

105
packages/strapi-admin/admin/src/containers/ProfilePage/index.js
View File

@ -1,23 +1,21 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { BackHeader, BaselineAlignment, auth, Select, Option, Row } from 'strapi-helper-plugin'; import { BaselineAlignment, auth, Select, Option } from 'strapi-helper-plugin';
import { Padded, Text } from '@buffetjs/core'; import { Padded, Text } from '@buffetjs/core';
import { Col } from 'reactstrap'; import { Col } from 'reactstrap';
import { useHistory } from 'react-router-dom';
import { get } from 'lodash'; import { get } from 'lodash';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { languages, languageNativeNames } from '../../i18n';
import ContainerFluid from '../../components/ContainerFluid'; import ContainerFluid from '../../components/ContainerFluid';
import PageTitle from '../../components/PageTitle'; import PageTitle from '../../components/PageTitle';
import SizedInput from '../../components/SizedInput'; import SizedInput from '../../components/SizedInput';
import { Header } from '../../components/Settings'; import { Header } from '../../components/Settings';
import FormBloc from '../../components/FormBloc';
import { useSettingsForm } from '../../hooks'; import { useSettingsForm } from '../../hooks';
import { form, schema } from './utils';
import useChangeLanguage from '../LanguageProvider/hooks/useChangeLanguage'; import useChangeLanguage from '../LanguageProvider/hooks/useChangeLanguage';
import { languages, languageNativeNames } from '../../i18n'; import ProfilePageLabel from './components';
import { Title, ProfilePageLabel } from './components'; import { form, schema } from './utils';
import Bloc from '../../components/Bloc';
const ProfilePage = () => { const ProfilePage = () => {
const { goBack } = useHistory();
const changeLanguage = useChangeLanguage(); const changeLanguage = useChangeLanguage();
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@ -50,12 +48,9 @@ const ProfilePage = () => {
}, [modifiedData]); }, [modifiedData]);
return ( return (
<form onSubmit={handleSubmit}> <>
<PageTitle title="User profile" /> <PageTitle title="User profile" />
<BackHeader onClick={goBack} /> <form onSubmit={handleSubmit}>
<BaselineAlignment top size="2px" />
<ContainerFluid padding="18px 30px 0 30px"> <ContainerFluid padding="18px 30px 0 30px">
<Header <Header
isLoading={showHeaderLoader} isLoading={showHeaderLoader}
@ -65,25 +60,12 @@ const ProfilePage = () => {
onCancel={handleCancel} onCancel={handleCancel}
showHeaderButtonLoader={showHeaderButtonLoader} showHeaderButtonLoader={showHeaderButtonLoader}
/> />
</ContainerFluid> <BaselineAlignment top size="3px" />
<BaselineAlignment top size="5px" />
{/* Experience block */} {/* Experience block */}
<Padded size="md" left right bottom> <FormBloc
<Bloc isLoading={isLoading}> isLoading={isLoading}
<Padded size="sm" top left right bottom> title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
<Col> >
<Padded size="sm" top bottom>
<Title>
{formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
</Title>
</Padded>
</Col>
<BaselineAlignment top size="9px" />
<Row>
{Object.keys(form).map(key => ( {Object.keys(form).map(key => (
<SizedInput <SizedInput
{...form[key]} {...form[key]}
@ -94,28 +76,16 @@ const ProfilePage = () => {
value={get(modifiedData, key, '')} value={get(modifiedData, key, '')}
/> />
))} ))}
</Row> </FormBloc>
</Padded> <BaselineAlignment top size="2px" />
</Bloc>
</Padded>
<BaselineAlignment top size="13px" />
{/* Password block */} {/* Password block */}
<Padded size="md" left right bottom> {!isLoading && (
<Bloc> <>
<Padded size="sm" top left right bottom> <Padded top size="md">
<Col> <FormBloc
<Padded size="sm" top bottom> title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
<Title> >
{formatMessage({ id: 'Settings.profile.form.section.password.title' })}
</Title>
</Padded>
</Col>
<BaselineAlignment top size="9px" />
<Row>
<SizedInput <SizedInput
label="Auth.form.password.label" label="Auth.form.password.label"
type="password" type="password"
@ -136,34 +106,22 @@ const ProfilePage = () => {
onChange={handleChange} onChange={handleChange}
value={get(modifiedData, 'confirmPassword', '')} value={get(modifiedData, 'confirmPassword', '')}
/> />
</Row> </FormBloc>
</Padded>
</Bloc>
</Padded> </Padded>
<BaselineAlignment top size="13px" /> <BaselineAlignment top size="13px" />
{/* Interface block */} {/* Interface block */}
<Padded size="md" left right bottom> <Padded top size="smd">
<Bloc> <FormBloc
<Padded size="sm" top left right bottom> title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
<Col> >
<Padded size="sm" top bottom>
<Title>
{formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
</Title>
</Padded>
</Col>
<BaselineAlignment top size="7px" />
<div className="col-6">
<ProfilePageLabel htmlFor=""> <ProfilePageLabel htmlFor="">
{formatMessage({ {formatMessage({
id: 'Settings.profile.form.section.experience.interfaceLanguage', id: 'Settings.profile.form.section.experience.interfaceLanguage',
})} })}
</ProfilePageLabel> </ProfilePageLabel>
<Col xs="6">
<Select <Select
aria-labelledby="interface-language" aria-labelledby="interface-language"
selectedValue={get(modifiedData, 'preferedLanguage')} selectedValue={get(modifiedData, 'preferedLanguage')}
@ -187,13 +145,14 @@ const ProfilePage = () => {
})} })}
</Text> </Text>
</Padded> </Padded>
</div> </Col>
</FormBloc>
</Padded> </Padded>
</Bloc> </>
</Padded> )}
</ContainerFluid>
<BaselineAlignment top size="80px" />
</form> </form>
</>
); );
}; };

1
packages/strapi-helper-plugin/lib/src/components/Select/styles.js
View File

@ -101,6 +101,7 @@ const getStyles = theme => {
...base, ...base,
padding: '2px 10px 4px 10px', // These value don't exist in the theme padding: '2px 10px 4px 10px', // These value don't exist in the theme
fontSize: sizes.fonts.md, fontSize: sizes.fonts.md,
lineHeight: '18px',
}), }),
indicatorsContainer: base => ({ indicatorsContainer: base => ({
...base, ...base,