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 resume = useAppSelector((state) => state.resume);
const isDesktop = useMediaQuery(theme.breakpoints.up('sm')); const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
const pages = useAppSelector((state) => state.resume.metadata.layout);
const { left, right } = useAppSelector((state) => state.build.sidebar); const { left, right } = useAppSelector((state) => state.build.sidebar);
const orientation = useAppSelector((state) => state.build.page.orientation); const orientation = useAppSelector((state) => state.build.page.orientation);
@ -96,15 +97,17 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
{isDesktop && ( {isDesktop && (
<> <>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}> {pages.length > 1 && (
<ButtonBase onClick={handleTogglePageOrientation}> <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
{orientation === 'vertical' ? ( <ButtonBase onClick={handleTogglePageOrientation}>
<AlignHorizontalCenter fontSize="medium" /> {orientation === 'vertical' ? (
) : ( <AlignHorizontalCenter fontSize="medium" />
<AlignVerticalCenter fontSize="medium" /> ) : (
)} <AlignVerticalCenter fontSize="medium" />
</ButtonBase> )}
</Tooltip> </ButtonBase>
</Tooltip>
)}
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}> <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}>
<ButtonBase onClick={handleTogglePageBreakLine}> <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 resume = useAppSelector((state) => state.resume);
const theme = useAppSelector((state) => state.build.theme); const theme = useAppSelector((state) => state.build.theme);
const pages = useAppSelector((state) => state.resume.metadata.layout);
const breakLine = useAppSelector((state) => state.build.page.breakLine); const breakLine = useAppSelector((state) => state.build.page.breakLine);
const orientation = useAppSelector((state) => state.build.page.orientation); const orientation = useAppSelector((state) => state.build.page.orientation);
@ -151,10 +152,15 @@ const Settings = () => {
<ListItem> <ListItem>
<ListItemText <ListItemText
primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')} 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 <Switch
color="secondary" color="secondary"
disabled={pages.length === 1}
checked={orientation === 'horizontal'} checked={orientation === 'horizontal'}
onChange={() => dispatch(togglePageOrientation())} onChange={() => dispatch(togglePageOrientation())}
/> />

12
client/public/locales/de/builder.json
View File

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

13
client/public/locales/en/builder.json
View File

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