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

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

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,6 +97,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
{isDesktop && (
<>
{pages.length > 1 && (
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
<ButtonBase onClick={handleTogglePageOrientation}>
{orientation === 'vertical' ? (
@ -105,6 +107,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
)}
</ButtonBase>
</Tooltip>
)}
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}>
<ButtonBase onClick={handleTogglePageBreakLine}>

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())}
/>

View File

@ -61,18 +61,18 @@
"page": "Seite"
},
"list": {
"empty-text": "Diese Liste ist leer.",
"actions": {
"edit": "Bearbeiten",
"delete": "Löschen",
"duplicate": "Duplizieren",
"delete": "Löschen"
}
"edit": "Bearbeiten"
},
"empty-text": "Diese Liste ist leer."
},
"tooltip": {
"delete-item": "Sind Sie sicher, dass Sie dieses Element löschen möchten? Dies ist eine unumkehrbare Aktion.",
"delete-section": "Abschnitt löschen",
"rename-section": "Abschnitt umbenennen",
"toggle-visibility": "Sichtbarkeit umschalten",
"delete-item": "Sind Sie sicher, dass Sie dieses Element löschen möchten? Dies ist eine unumkehrbare Aktion."
"toggle-visibility": "Sichtbarkeit umschalten"
}
},
"controller": {

View File

@ -61,18 +61,18 @@
"page": "Page"
},
"list": {
"empty-text": "This list is empty.",
"actions": {
"edit": "Edit",
"delete": "Delete",
"duplicate": "Duplicate",
"delete": "Delete"
}
"edit": "Edit"
},
"empty-text": "This list is empty."
},
"tooltip": {
"delete-item": "Are you sure you want to delete this item? This is an irreversible action.",
"delete-section": "Delete Section",
"rename-section": "Rename Section",
"toggle-visibility": "Toggle Visibility",
"delete-item": "Are you sure you want to delete this item? This is an irreversible action."
"toggle-visibility": "Toggle Visibility"
}
},
"controller": {
@ -290,6 +290,7 @@
},
"heading": "Page",
"orientation": {
"disabled": "Has no effect when there is only one page",
"primary": "Orientation",
"secondary": "Whether to display pages horizontally or vertically"
}