Reduce main menu min width

On narrow resolutions, the main menu takes up *a lot* of space. Now it takes less than half of what it took before.
opencast · Sep 26, 2023 · 60939d9 · 60939d9
1 parent 7d12e82
commit 60939d9
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 16 deletions.
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
@@ -7,6 +7,9 @@ import emotionNormalize from 'emotion-normalize';
 import { checkFlexGapSupport } from './util/utilityFunctions';
 import { createTheme } from '@mui/material/styles';
 import { Theme, useTheme } from './themes';
+import {
+  DEFAULT_CONFIG as APPKIT_CONFIG,
+} from "@opencast/appkit";
 
 /**
  * An emotion component that inserts styles globally
@@ -35,8 +38,8 @@ export const globalStyle = (theme: Theme) => css({
 
 
 // When to switch behaviour based on screen width
-export const BREAKPOINT_SMALL = 450;
-export const BREAKPOINT_MEDIUM = 650;
+/** Breakpoint values */
+export const BREAKPOINTS = APPKIT_CONFIG.breakpoints;
 
 
 /**

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { BREAKPOINT_MEDIUM, basicButtonStyle, customIconStyle, undisplay } from '../cssStyles'
+import { BREAKPOINTS, basicButtonStyle, customIconStyle, undisplay } from '../cssStyles'
 
 import { IconType } from "react-icons";
 import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash, LuMoveHorizontal} from "react-icons/lu";
@@ -150,7 +150,7 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
         } }}
       >
         <Icon />
-        <span css={undisplay(BREAKPOINT_MEDIUM)}>{actionName}</span>
+        <span css={undisplay(BREAKPOINTS.medium)}>{actionName}</span>
       </div>
     </ThemedTooltip>
   );
@@ -184,7 +184,7 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHand
         } }}
       >
         {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle(theme)} /> }
-        <span css={undisplay(BREAKPOINT_MEDIUM)}>{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}</span>
+        <span css={undisplay(BREAKPOINTS.medium)}>{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}</span>
       </div>
     </ThemedTooltip>
   );

diff --git a/src/main/Header.tsx b/src/main/Header.tsx
@@ -9,7 +9,7 @@ import { LuMoon, LuSun } from "react-icons/lu";
 import { HiOutlineTranslate } from "react-icons/hi";
 import { LuKeyboard } from "react-icons/lu";
 import { MainMenuStateNames } from "../types";
-import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle, undisplay } from '../cssStyles'
+import { basicButtonStyle, BREAKPOINTS, flexGapReplacementStyle, undisplay } from '../cssStyles'
 
 import { ReactComponent as LogoSvg } from '../img/opencast-editor.svg';
 import { ReactComponent as LogoSvgNarrow } from '../img/opencast-editor-narrow.svg';
@@ -70,7 +70,7 @@ function Header() {
       color: `${theme.header_text}`
     },
 
-    [screenWidthAtMost(BREAKPOINT_MEDIUM)]: {
+    [screenWidthAtMost(BREAKPOINTS.medium)]: {
       fontSize: 0,
     },
   })
@@ -174,7 +174,7 @@ const LanguageButton: React.FC = () => {
       menu={{
         label,
         items: menuItems,
-        breakpoint: BREAKPOINT_SMALL,
+        breakpoint: BREAKPOINTS.small,
       }}
     >
       <HeaderButton Icon={HiOutlineTranslate} label={label} />
@@ -200,7 +200,7 @@ const ThemeButton: React.FC = () => {
       menu={{
         label: t("theme.appearance"),
         items: menuItems,
-        breakpoint: BREAKPOINT_MEDIUM,
+        breakpoint: BREAKPOINTS.medium,
       }}>
       <HeaderButton
         Icon={scheme === "light" || scheme === "light-high-contrast" ? LuMoon : LuSun}
@@ -258,7 +258,7 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
         css={[basicButtonStyle(theme), themeSelectorButtonStyle]}
       >
         <Icon css={iconStyle} />
-        <span css={undisplay(BREAKPOINT_MEDIUM)}>{label}</span>
+        <span css={undisplay(BREAKPOINTS.medium)}>{label}</span>
       </ProtoButton>
     )
   })

diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
@@ -13,7 +13,7 @@ import { setPageNumber } from '../redux/finishSlice'
 
 import { MainMenuStateNames } from '../types'
 import { settings } from '../config'
-import { basicButtonStyle, flexGapReplacementStyle } from '../cssStyles'
+import { basicButtonStyle, BREAKPOINTS, flexGapReplacementStyle } from '../cssStyles'
 import { setIsPlaying } from "../redux/videoSlice";
 
 import { useTranslation } from 'react-i18next';
@@ -22,6 +22,7 @@ import { resetPostRequestState } from "../redux/workflowPostSlice";
 import { setIsDisplayEditView } from "../redux/subtitleSlice";
 
 import { useTheme } from "../themes";
+import { screenWidthAtMost } from "@opencast/appkit";
 
 /**
  * A container for selecting the functionality shown in the main part of the app
@@ -43,6 +44,10 @@ const MainMenu: React.FC = () => {
     overflowY: 'auto',
     background: `${theme.menu_background}`,
     ...(flexGapReplacementStyle(30, false)),
+    [screenWidthAtMost(BREAKPOINTS.large)]: {
+      minWidth: '60px',
+      padding: '20px 10px',
+    },
   });
 
   return (
@@ -144,6 +149,10 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
       boxShadow: `${theme.boxShadow}`,
     },
     flexDirection: 'column',
+    [screenWidthAtMost(BREAKPOINTS.large)]: {
+      height: '60px',
+      minHeight: '40px',
+    },
   });
 
   return (
@@ -160,7 +169,14 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
         width: '36px',
         height: 'auto'
       }}/>
-      {bottomText && <div>{bottomText}</div>}
+      {bottomText &&
+      <div css={{
+        [screenWidthAtMost(BREAKPOINTS.large)]: {
+          display: 'none',
+        },
+      }}>
+        {bottomText}
+      </div>}
     </li>
   );
 };

diff --git a/src/main/VideoControls.tsx b/src/main/VideoControls.tsx
@@ -11,7 +11,7 @@ import {
 } from '../redux/videoSlice'
 
 import { convertMsToReadableString } from '../util/utilityFunctions'
-import { BREAKPOINT_MEDIUM, basicButtonStyle, flexGapReplacementStyle, undisplay } from "../cssStyles";
+import { BREAKPOINTS, basicButtonStyle, flexGapReplacementStyle, undisplay } from "../cssStyles";
 
 import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { useTranslation } from 'react-i18next';
@@ -154,7 +154,7 @@ const PreviewMode: React.FC<{
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " ") {
           switchPlayPreview(undefined)
         } }}>
-        <div css={[previewModeTextStyle(theme), undisplay(BREAKPOINT_MEDIUM)]}>
+        <div css={[previewModeTextStyle(theme), undisplay(BREAKPOINTS.medium)]}>
           {t("video.previewButton")}
         </div>
         {isPlayPreview ? <FaToggleOn css={[basicButtonStyle(theme), switchIconStyle]} />
@@ -253,9 +253,9 @@ const TimeDisplay: React.FC<{
           {new Date((currentlyAt ? currentlyAt : 0)).toISOString().substr(11, 10)}
         </time>
       </ThemedTooltip>
-      <div css={undisplay(BREAKPOINT_MEDIUM)}>{" / "}</div>
+      <div css={undisplay(BREAKPOINTS.medium)}>{" / "}</div>
       <ThemedTooltip title={t("video.time-duration-tooltip")}>
-        <div css={[timeTextStyle(theme), undisplay(BREAKPOINT_MEDIUM)]}
+        <div css={[timeTextStyle(theme), undisplay(BREAKPOINTS.medium)]}
           tabIndex={0} aria-label={t("video.duration-aria") + ": " + convertMsToReadableString(duration)}>
           {new Date((duration ? duration : 0)).toISOString().substr(11, 10)}
         </div>