feat(client): disable "Toggle Page Orientation" when there's only one…

… page on the artboard fix #655
AmruthPillai · Mar 12, 2022 · 01da1a0 · 01da1a0
1 parent 82bf44d
commit 01da1a0
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/client/components/build/Center/ArtboardController.tsx b/client/components/build/Center/ArtboardController.tsx
@@ -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}>

diff --git a/client/components/build/RightSidebar/sections/Settings.tsx b/client/components/build/RightSidebar/sections/Settings.tsx
@@ -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())}
             />

diff --git a/client/public/locales/de/builder.json b/client/public/locales/de/builder.json
@@ -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": {

diff --git a/client/public/locales/en/builder.json b/client/public/locales/en/builder.json
@@ -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"
           }