Added dropdown menu for selecting page width metric between pixels an…

…d percentage. Modified further code to add appropriate states, variables and styling changes.
xgi · Dec 19, 2023 · 8b400b1 · 8b400b1
1 parent 829f13d
commit 8b400b1
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 18 deletions.
diff --git a/src/components/reader/ReaderViewer.tsx b/src/components/reader/ReaderViewer.tsx
@@ -20,6 +20,7 @@ import {
   pageGapState,
   optimizeContrastState,
   maxPageWidthState,
+  pageWidthMetricState,
 } from '../../state/settingStates';
 import ExtensionImage from '../general/ExtensionImage';
 
@@ -46,6 +47,7 @@ const ReaderViewer: React.FC<Props> = (props: Props) => {
   const hideScrollbar = useRecoilValue(hideScrollbarState);
   const pageGap = useRecoilValue(pageGapState);
   const maxPageWidth = useRecoilValue(maxPageWidthState);
+  const pageWidthMetric = useRecoilValue(pageWidthMetricState);
   const optimizeContrast = useRecoilValue(optimizeContrastState);
 
   const viewerContainerClickHandler = (e: React.MouseEvent) => {
@@ -263,7 +265,7 @@ const ReaderViewer: React.FC<Props> = (props: Props) => {
         className={`
           ${styles.container}
           ${hideScrollbar ? styles.noScrollbar : ''}`}
-        style={{ ['--USER-MAX-PAGE-WIDTH' as string]: `${maxPageWidth}%` }}
+        style={{ ['--USER-MAX-PAGE-WIDTH' as string]: `${maxPageWidth}${pageWidthMetric}` }}
         onClick={(e) => viewerContainerClickHandler(e)}
       >
         {pageStyle === PageStyle.LongStrip ? getSeparatePageContainers() : getSinglePageContainer()}

diff --git a/src/components/settings/ReaderSettings.tsx b/src/components/settings/ReaderSettings.tsx
@@ -12,6 +12,7 @@ import {
   Group,
   Radio,
   Slider,
+  Menu,
 } from '@mantine/core';
 import {
   IconArrowBigLeft,
@@ -48,6 +49,7 @@ import {
   pageGapState,
   offsetPagesState,
   maxPageWidthState,
+  pageWidthMetricState,
   optimizeContrastState,
   keyToggleOffsetDoubleSpreadsState,
   keyToggleFullscreenState,
@@ -88,8 +90,27 @@ const ReaderSettings: React.FC<Props> = (props: Props) => {
   const [pageGap, setPageGap] = useRecoilState(pageGapState);
   const [offsetPages, setOffsetPages] = useRecoilState(offsetPagesState);
   const [maxPageWidth, setMaxPageWidth] = useRecoilState(maxPageWidthState);
+  const [pageWidthMetric, setPageWidthMetric] = useRecoilState(pageWidthMetricState);
   const [optimizeContrast, setOptimizeContrast] = useRecoilState(optimizeContrastState);
 
+  const buttonStyles = (theme: MantineTheme) => ({
+    root: {
+      height: 24,
+      fontSize: 12,
+      color: theme.colors.gray[4],
+      backgroundColor: theme.colors.dark[7],
+      '&:hover': {
+        backgroundColor: theme.colors.dark[4],
+      },
+    },
+    leftIcon: {
+      marginRight: 4,
+    },
+    rightIcon: {
+      marginLeft: 0,
+    },
+  });
+
   const updateReaderSetting = (readerSetting: ReaderSetting, value: any) => {
     switch (readerSetting) {
       case ReaderSetting.ReadingDirection:
@@ -158,6 +179,9 @@ const ReaderSettings: React.FC<Props> = (props: Props) => {
       case ReaderSetting.MaxPageWidth:
         setMaxPageWidth(value);
         break;
+      case ReaderSetting.PageWidthMetric:
+        setPageWidthMetric(value);
+        break;
       case ReaderSetting.OptimizeContrast:
         setOptimizeContrast(value);
         break;
@@ -306,24 +330,44 @@ const ReaderSettings: React.FC<Props> = (props: Props) => {
         checked={fitStretch}
         onChange={(e) => updateReaderSetting(ReaderSetting.FitStretch, e.target.checked)}
       />
-      <Text size="sm" ml="sm">
-        Max page width
-      </Text>
+
+      <Group position="left" align="left" spacing="xs" noWrap>
+        <Text size="sm" ml="sm">
+                Max page width
+        </Text>
+        <Menu shadow="md" width={50} trigger="hover">
+              <Menu.Target>
+                <Button compact styles={buttonStyles} radius={0} px={4} pb={2}>
+                  {pageWidthMetric}
+                </Button>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Item  onClick={() => {updateReaderSetting(ReaderSetting.PageWidthMetric, '%')}}>
+                  %
+                </Menu.Item>
+                <Menu.Item  onClick={() => {updateReaderSetting(ReaderSetting.PageWidthMetric, 'px')}}>
+                  px
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+      </Group>
+
       <Slider
-        label={`${maxPageWidth}%`}
-        mx="sm"
-        min={10}
-        max={100}
-        step={10}
-        marks={Array.from({ length: 10 }, (_v, k) => (k + 1) * 10).map((i: number) => ({
-          value: i,
-        }))}
-        styles={{ markLabel: { display: 'none' } }}
-        maw={400}
-        disabled={!fitContainToWidth}
-        defaultValue={maxPageWidth}
-        onChange={(value) => updateReaderSetting(ReaderSetting.MaxPageWidth, value)}
-      />
+              label={`${maxPageWidth}${pageWidthMetric}`}
+              mx="sm"
+              min={10}
+              max={pageWidthMetric === '%' ? 100 : window.innerWidth}
+              step={10}
+              styles={{ markLabel: { display: 'none' } }}
+              maw={400}
+              marks={pageWidthMetric === '%' ? Array.from({ length: 10 }, (_v, k) => (k + 1) * 10).map((i: number) => ({
+                value: i,
+              })) : []}
+              disabled={!fitContainToWidth}
+              defaultValue={maxPageWidth}
+              onChange={(value) => updateReaderSetting(ReaderSetting.MaxPageWidth, value)}
+            />
+
 
       <Text py="xs">Rendering</Text>
       <Checkbox

diff --git a/src/models/types.ts b/src/models/types.ts
@@ -144,6 +144,7 @@ export enum ReaderSetting {
   KeyCloseOrBack = 'KeyCloseOrBack',
   PageGap = 'PageGap',
   MaxPageWidth = 'MaxPageWidth',
+  PageWidthMetric = 'PageWidthMetric',
   OffsetPages = 'OffsetPages',
   OptimizeContrast = 'OptimizeContrast',
   KeyToggleOffsetDoubleSpreads = 'KeyToggleOffsetDoubleSpreads',
@@ -212,6 +213,7 @@ export const SettingTypes = {
   [ReaderSetting.HideScrollbar]: SettingType.BOOLEAN,
   [ReaderSetting.PageGap]: SettingType.BOOLEAN,
   [ReaderSetting.MaxPageWidth]: SettingType.NUMBER,
+  [ReaderSetting.PageWidthMetric]: SettingType.STRING,
   [ReaderSetting.OffsetPages]: SettingType.STRING,
   [ReaderSetting.OptimizeContrast]: SettingType.BOOLEAN,
   [ReaderSetting.KeyPageLeft]: SettingType.STRING,
@@ -263,6 +265,7 @@ export const DefaultSettings = {
   [ReaderSetting.HideScrollbar]: false,
   [ReaderSetting.PageGap]: false,
   [ReaderSetting.MaxPageWidth]: 100,
+  [ReaderSetting.PageWidthMetric]: '%',
   [ReaderSetting.OffsetPages]: OffsetPages.None,
   [ReaderSetting.OptimizeContrast]: false,
   [ReaderSetting.KeyPageLeft]: 'left',

diff --git a/src/state/settingStates.ts b/src/state/settingStates.ts
@@ -96,6 +96,7 @@ export const keyExitState = atomFromSetting<string>(ReaderSetting.KeyExit);
 export const keyCloseOrBackState = atomFromSetting<string>(ReaderSetting.KeyCloseOrBack);
 export const pageGapState = atomFromSetting<boolean>(ReaderSetting.PageGap);
 export const maxPageWidthState = atomFromSetting<number>(ReaderSetting.MaxPageWidth);
+export const pageWidthMetricState = atomFromSetting<string>(ReaderSetting.PageWidthMetric);
 export const offsetPagesState = atomFromSetting<OffsetPages>(ReaderSetting.OffsetPages);
 export const optimizeContrastState = atomFromSetting<boolean>(ReaderSetting.OptimizeContrast);