Commit 0de2ac77 authored by Boiget Boiget's avatar Boiget Boiget

Modify PersonalPage in mobile mode

parent e2f4771a
Pipeline #2196 failed with stages
in 1 minute and 57 seconds
......@@ -74,7 +74,7 @@ const useStyles = ({ type }, member, candidate) =>
},
}));
function GroupDetailsPersSpace({ group = {}, member, candidate, admin, animator }) {
function GroupDetailsPersSpace({ group = {}, member, candidate, admin, animator, isMobile }) {
const { type } = group;
const classes = useStyles(group, member || animator, candidate)();
......@@ -120,7 +120,13 @@ function GroupDetailsPersSpace({ group = {}, member, candidate, admin, animator
<Avatar className={classes.avatar}>{iconHeader}</Avatar>
)}
<CardContent className={classes.cardContent}>
<Typography className={classes.serviceName} gutterBottom noWrap variant="h6" component="h2">
<Typography
className={classes.serviceName}
gutterBottom
noWrap={isMobile ? false : true}
variant="h6"
component="h2"
>
{group.name}
</Typography>
</CardContent>
......@@ -162,6 +168,7 @@ GroupDetailsPersSpace.propTypes = {
candidate: PropTypes.bool.isRequired,
admin: PropTypes.bool.isRequired,
animator: PropTypes.bool.isRequired,
isMobile: PropTypes.bool.isRequired,
};
export default GroupDetailsPersSpace;
......@@ -69,7 +69,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
function PersonalLinkDetails({ link, globalEdit, delLink, updateLink }) {
function PersonalLinkDetails({ link, globalEdit, delLink, updateLink, isMobile }) {
const { title = '', url = '', element_id: elementId } = link;
const classes = useStyles();
......@@ -125,10 +125,16 @@ function PersonalLinkDetails({ link, globalEdit, delLink, updateLink }) {
</Avatar>
)}
<CardContent className={globalEdit ? classes.cardContentEdit : classes.cardContent}>
<Typography className={classes.linkName} gutterBottom noWrap variant="h6" component="h2">
<Typography
className={classes.linkName}
gutterBottom
noWrap={isMobile ? false : true}
variant="h6"
component="h2"
>
{state.title || i18n.__('components.PersonalLinkDetails.titleLabel')}
</Typography>
<Typography variant="body2" className={classes.linkUrl} noWrap component="p">
<Typography variant="body2" className={classes.linkUrl} noWrap={isMobile ? false : true} component="p">
{state.url || i18n.__('components.PersonalLinkDetails.urlLabel')}
</Typography>
</CardContent>
......@@ -168,6 +174,7 @@ PersonalLinkDetails.propTypes = {
globalEdit: PropTypes.bool.isRequired,
updateLink: PropTypes.func.isRequired,
delLink: PropTypes.func.isRequired,
isMobile: PropTypes.bool.isRequired,
};
export default PersonalLinkDetails;
......@@ -149,7 +149,7 @@ const PersonalZone = ({
setExpanded,
}) => {
const classes = useStyles();
const [{ userId }] = useAppContext();
const [{ userId, isMobile }] = useAppContext();
const [localIsExpanded, setIsExpanded] = useState(isExpanded || true);
const memberGroups = useTracker(() => Roles.getScopesForUser(userId, 'member'));
......@@ -312,7 +312,7 @@ const PersonalZone = ({
lg={3}
>
<div className={customDrag ? classes.handle : null} />
<ServiceDetailsPersSpace service={myservice} customDrag={customDrag} />
<ServiceDetailsPersSpace service={myservice} customDrag={customDrag} isMobile={isMobile} />
</Grid>
);
}
......@@ -331,6 +331,7 @@ const PersonalZone = ({
<div className={customDrag ? classes.handle : null} />
<GroupDetailsPersSpace
group={mygroup}
isMobile={isMobile}
candidate={candidateGroups.includes(elem.element_id)}
member={memberGroups.includes(elem.element_id)}
animator={animatorGroups.includes(elem.element_id)}
......@@ -353,6 +354,7 @@ const PersonalZone = ({
<div className={customDrag ? classes.handle : null} />
<PersonalLinkDetails
link={elem}
isMobile={isMobile}
globalEdit={customDrag}
updateLink={(linkId) => updatePersonalLink(index, linkId)}
delLink={(newLink) => delPersonalLink(index, newLink)}
......
......@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
function ServiceDetailsPersSpace({ service, customDrag }) {
function ServiceDetailsPersSpace({ service, customDrag, isMobile }) {
const classes = useStyles();
const history = useHistory();
const favButtonLabel = i18n.__('components.ServiceDetails.favButtonLabelNoFav');
......@@ -92,7 +92,7 @@ function ServiceDetailsPersSpace({ service, customDrag }) {
<Typography
className={service.state === 5 ? classes.serviceNameDiasbled : classes.serviceName}
gutterBottom
noWrap
noWrap={isMobile ? false : true}
variant="h6"
component="h2"
>
......@@ -123,6 +123,7 @@ function ServiceDetailsPersSpace({ service, customDrag }) {
ServiceDetailsPersSpace.propTypes = {
service: PropTypes.objectOf(PropTypes.any).isRequired,
customDrag: PropTypes.bool.isRequired,
isMobile: PropTypes.bool.isRequired,
};
export default ServiceDetailsPersSpace;
......@@ -19,84 +19,88 @@ import Services from '../../api/services/services';
import Spinner from '../components/system/Spinner';
import PersonalSpaces from '../../api/personalspaces/personalspaces';
import PersonalZone from '../components/personalspace/PersonalZone';
import { useAppContext } from '../contexts/context';
const useStyles = makeStyles((theme) => ({
flex: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
cardGrid: {
paddingTop: theme.spacing(0),
paddingBottom: theme.spacing(2),
},
chip: {
margin: theme.spacing(1),
},
badge: { position: 'inherit' },
gridItem: {
position: 'relative',
'&.sortable-ghost': { opacity: 0.3 },
},
ghost: {
opacity: '1 !important',
},
spaceBetween: {
display: 'flex',
justifyContent: 'space-between',
},
handle: {
cursor: 'grab',
position: 'absolute',
textAlign: 'center',
width: 'calc(100% - 32px)',
backgroundColor: theme.palette.primary.main,
opacity: 0.2,
height: 20,
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius,
'&::after': {
content: '""',
width: '80%',
height: '3px',
backgroundColor: 'white',
display: 'inline-block',
marginBottom: '3px',
borderRadius: theme.shape.borderRadius,
const useStyles = (isMobile) =>
makeStyles((theme) => ({
flex: {
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
justifyContent: 'space-between',
alignItems: isMobile ? 'flex-start' : 'center',
},
},
zoneButton: {
color: theme.palette.primary.main,
opacity: 0.5,
cursor: 'pointer',
'&:hover': {
opacity: 1,
color: theme.palette.error.main,
cardGrid: {
paddingTop: theme.spacing(0),
paddingBottom: theme.spacing(2),
},
},
zoneButtonEnd: {
marginTop: 30,
opacity: 0.5,
cursor: 'pointer',
'&:hover': {
opacity: 1,
color: theme.palette.error.main,
chip: {
margin: theme.spacing(1),
},
},
divider: {
marginTop: 30,
marginBottom: 10,
},
goIcon: {
marginLeft: 8,
verticalAlign: 'bottom',
},
}));
badge: { position: 'inherit' },
gridItem: {
position: 'relative',
'&.sortable-ghost': { opacity: 0.3 },
},
ghost: {
opacity: '1 !important',
},
spaceBetween: {
display: 'flex',
justifyContent: 'space-between',
},
handle: {
cursor: 'grab',
position: 'absolute',
textAlign: 'center',
width: 'calc(100% - 32px)',
backgroundColor: theme.palette.primary.main,
opacity: 0.2,
height: 20,
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius,
'&::after': {
content: '""',
width: '80%',
height: '3px',
backgroundColor: 'white',
display: 'inline-block',
marginBottom: '3px',
borderRadius: theme.shape.borderRadius,
},
},
zoneButton: {
color: theme.palette.primary.main,
opacity: 0.5,
cursor: 'pointer',
'&:hover': {
opacity: 1,
color: theme.palette.error.main,
},
},
zoneButtonEnd: {
marginTop: 30,
opacity: 0.5,
cursor: 'pointer',
'&:hover': {
opacity: 1,
color: theme.palette.error.main,
},
},
divider: {
marginTop: 30,
marginBottom: 10,
},
goIcon: {
marginLeft: 8,
verticalAlign: 'bottom',
},
}));
function PersonalPage({ personalspace, isLoading, allServices, allGroups }) {
const AUTOSAVE_INTERVAL = 3000;
const classes = useStyles();
const [{ isMobile }] = useAppContext();
const [customDrag, setcustomDrag] = useState(false);
const classes = useStyles(isMobile)();
const handleCustomDrag = (event) => {
setcustomDrag(event.target.checked);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment