Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 08:13:49 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(client): disable "Toggle Page Orientation" when there's only one page on the artboard

Browse Source 
fix #655
This commit is contained in:
Amruth Pillai
2022-03-12 11:59:14 +01:00
parent 82bf44daa2
commit 01da1a06b8
4 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/components/build/Center/ArtboardController.tsx
View File

@ -33,6 +33,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
const resume = useAppSelector((state) => state.resume);
const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
const pages = useAppSelector((state) => state.resume.metadata.layout);
const { left, right } = useAppSelector((state) => state.build.sidebar);
const orientation = useAppSelector((state) => state.build.page.orientation);
@ -96,15 +97,17 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
{isDesktop && (
<>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
<ButtonBase onClick={handleTogglePageOrientation}>
{orientation === 'vertical' ? (
<AlignHorizontalCenter fontSize="medium" />
) : (
<AlignVerticalCenter fontSize="medium" />
)}
</ButtonBase>
</Tooltip>
{pages.length > 1 && (
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
<ButtonBase onClick={handleTogglePageOrientation}>
{orientation === 'vertical' ? (
<AlignHorizontalCenter fontSize="medium" />
) : (
<AlignVerticalCenter fontSize="medium" />
)}
</ButtonBase>
</Tooltip>
)}
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}>
<ButtonBase onClick={handleTogglePageBreakLine}>

8
client/components/build/RightSidebar/sections/Settings.tsx
View File

@ -38,6 +38,7 @@ const Settings = () => {
const resume = useAppSelector((state) => state.resume);
const theme = useAppSelector((state) => state.build.theme);
const pages = useAppSelector((state) => state.resume.metadata.layout);
const breakLine = useAppSelector((state) => state.build.page.breakLine);
const orientation = useAppSelector((state) => state.build.page.orientation);
@ -151,10 +152,15 @@ const Settings = () => {
<ListItem>
<ListItemText
primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')}
secondary={t('builder.rightSidebar.sections.settings.page.orientation.secondary')}
secondary={
pages.length === 1
? t('builder.rightSidebar.sections.settings.page.orientation.disabled')
: t('builder.rightSidebar.sections.settings.page.orientation.secondary')
}
/>
<Switch
color="secondary"
disabled={pages.length === 1}
checked={orientation === 'horizontal'}
onChange={() => dispatch(togglePageOrientation())}
/>