Merge pull request #1387 from JulianKniephoff/remove-flex-gap-polyfill

Remove flex gap polyfill

src/cssStyles.tsx

@@ -4,7 +4,6 @@
 import { css, Global, keyframes } from "@emotion/react";
 import React from "react";
 import emotionNormalize from "emotion-normalize";
-import { checkFlexGapSupport } from "./util/utilityFunctions";
 import { createTheme } from "@mui/material/styles";
 import { Theme, useTheme } from "./themes";
 import { StylesConfig } from "react-select";
@@ -39,43 +38,6 @@ export const globalStyle = (theme: Theme) => css({
 export const BREAKPOINT_SMALL = 450;
 export const BREAKPOINT_MEDIUM = 650;
 
-
-/**
- * CSS for replacing flexbox gap in browers that do not support it
- * Does not return a css prop, but is meant as a direct replacement for "gap"
- * Example: ...(flexGapReplacementStyle(30, false))
- */
-export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow: boolean) => {
-
-  const half = flexGapValue / 2;
-  const quarter = flexGapValue / 4;
-
-  return (
-    {
-      // Use gap if supported
-      ...(checkFlexGapSupport()) && { gap: `${flexGapValue}px` },
-      // Else use margins
-      ...(!checkFlexGapSupport()) &&
-      {
-        ">*": { // For each child
-          marginTop: `${quarter}px`,
-          marginBottom: `${quarter}px`,
-          marginRight: `${half}px`,
-          marginLeft: `${half}px`,
-        },
-        ...(flexDirectionIsRow) && {
-          ">*:first-of-type": {
-            marginLeft: "0px",
-          },
-          ">*:last-child": {
-            marginRight: "0px",
-          },
-        },
-      },
-    }
-  );
-};
-
 /**
  * CSS for buttons
  */
@@ -94,7 +56,7 @@ export const basicButtonStyle = (theme: Theme) => css({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  ...(flexGapReplacementStyle(10, false)),
+  gap: "10px",
   textAlign: "center" as const,
   outline: `${theme.button_outline}`,
 });
@@ -110,7 +72,7 @@ export const deactivatedButtonStyle = css({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  ...(flexGapReplacementStyle(10, false)),
+  gap: "10px",
   textAlign: "center" as const,
 });
 
@@ -131,7 +93,7 @@ export const navigationButtonStyle = (theme: Theme) => css({
 export const backOrContinueStyle = css(({
   display: "flex",
   flexDirection: "row",
-  ...(flexGapReplacementStyle(20, false)),
+  gap: "20px",
 }));
 
 /**
@@ -143,7 +105,7 @@ export const tileButtonStyle = (theme: Theme) => css({
   display: "flex",
   flexDirection: "column",
   fontWeight: "bold",
-  ...(flexGapReplacementStyle(30, false)),
+  gap: "30px",
   boxShadow: `${theme.boxShadow_tiles}`,
   background: `${theme.element_bg}`,
   placeSelf: "center",
@@ -460,7 +422,7 @@ export const videosStyle = (theme: Theme) => css(({
   marginTop: "24px",
   boxSizing: "border-box",
   padding: "10px",
-  ...(flexGapReplacementStyle(10, false)),
+  gap: "10px",
 }));
 
 export const backgroundBoxStyle = (theme: Theme) => css(({
@@ -469,5 +431,5 @@ export const backgroundBoxStyle = (theme: Theme) => css(({
   boxShadow: `${theme.boxShadow_tiles}`,
   boxSizing: "border-box",
   padding: "20px",
-  ...(flexGapReplacementStyle(25, false)),
+  gap: "25px",
 }));

src/main/Discard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { css } from "@emotion/react";
-import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle } from "../cssStyles";
 
 import { LuChevronLeft, LuXCircle } from "react-icons/lu";
 
@@ -28,7 +28,7 @@ const Discard: React.FC = () => {
     display: finishState !== "Discard changes" ? "none" : "flex",
     flexDirection: "column" as const,
     alignItems: "center",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (

src/main/Error.tsx

@@ -6,7 +6,6 @@ import { LuFrown } from "react-icons/lu";
 
 import { useAppSelector } from "../redux/store";
 import { selectErrorDetails, selectErrorIcon, selectErrorMessage, selectErrorTitle } from "../redux/errorSlice";
-import { flexGapReplacementStyle } from "../cssStyles";
 
 import { useTranslation } from "react-i18next";
 
@@ -36,7 +35,7 @@ const Error: React.FC = () => {
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
   });
 
   return (

src/main/FinishMenu.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { css } from "@emotion/react";
-import { basicButtonStyle, flexGapReplacementStyle, tileButtonStyle } from "../cssStyles";
+import { basicButtonStyle, tileButtonStyle } from "../cssStyles";
 
 import { IconType } from "react-icons";
 import { LuSave, LuDatabase, LuXCircle } from "react-icons/lu";
@@ -22,7 +22,7 @@ const FinishMenu: React.FC = () => {
     flexDirection: "row",
     justifyContent: "center",
     flexWrap: "wrap",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (

src/main/Header.tsx

@@ -10,7 +10,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 } from "../cssStyles";
+import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL } from "../cssStyles";
 
 import LogoSvg from "../img/opencast-editor.svg?react";
 import { selectIsEnd } from "../redux/endSlice";
@@ -48,14 +48,14 @@ function Header() {
     height: "100%",
     alignItems: "center",
     paddingRight: "24px",
-    ...(flexGapReplacementStyle(16, false)),
+    gap: "16px",
   });
 
   const settingsButtonCSS = css({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    ...(flexGapReplacementStyle(8, false)),
+    gap: "8px",
 
     fontSize: 16,
     fontFamily: "inherit",
@@ -215,7 +215,7 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
     const themeSelectorButtonStyle = css({
       display: "flex",
       alignItems: "center",
-      ...(flexGapReplacementStyle(8, false)),
+      gap: "8px",
 
       fontSize: 16,
       fontFamily: "inherit",

src/main/KeyboardControls.tsx

@@ -4,7 +4,6 @@ import { ParseKeys } from "i18next";
 import React from "react";
 
 import { useTranslation, Trans } from "react-i18next";
-import { flexGapReplacementStyle } from "../cssStyles";
 import { getGroupName, KEYMAP, rewriteKeys } from "../globalKeys";
 import { useTheme } from "../themes";
 import { titleStyle, titleStyleBold } from "../cssStyles";
@@ -52,7 +51,7 @@ const Entry: React.FC<{ name: string, sequences: string[][]; }> = ({ name, seque
     justifyContent: "left",
     width: "100%",
     padding: "10px 0px",
-    ...(flexGapReplacementStyle(10, true)),
+    gap: "10px",
   });
 
   const labelStyle = css({
@@ -66,7 +65,7 @@ const Entry: React.FC<{ name: string, sequences: string[][]; }> = ({ name, seque
   const sequenceStyle = css({
     display: "flex",
     flexDirection: "row",
-    ...(flexGapReplacementStyle(10, true)),
+    gap: "10px",
   });
 
   const singleKeyStyle = css({
@@ -121,7 +120,7 @@ const KeyboardControls: React.FC = () => {
     flexDirection: "row" as const,
     flexWrap: "wrap",
     justifyContent: "center",
-    ...(flexGapReplacementStyle(30, true)),
+    gap: "30px",
   });
 
   const render = () => {

src/main/MainContent.tsx

@@ -14,7 +14,6 @@ import { useAppSelector } from "../redux/store";
 import { selectMainMenuState } from "../redux/mainMenuSlice";
 
 import { MainMenuStateNames } from "../types";
-import { flexGapReplacementStyle } from "../cssStyles";
 
 import { useBeforeunload } from "react-beforeunload";
 import { selectHasChanges as videoSelectHasChanges } from "../redux/videoSlice";
@@ -48,7 +47,7 @@ const MainContent: React.FC = () => {
     width: "100%",
     paddingRight: "20px",
     paddingLeft: "20px",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
     background: `${theme.background}`,
     overflow: "auto",
   });

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 } from "../cssStyles";
 import { setIsPlaying } from "../redux/videoSlice";
 
 import { useTranslation } from "react-i18next";
@@ -42,7 +42,7 @@ const MainMenu: React.FC = () => {
     overflowX: "hidden",
     overflowY: "auto",
     background: `${theme.menu_background}`,
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (

src/main/Save.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { css } from "@emotion/react";
 import {
   basicButtonStyle, backOrContinueStyle, ariaLive, errorBoxStyle,
-  navigationButtonStyle, flexGapReplacementStyle, spinningStyle,
+  navigationButtonStyle, spinningStyle,
 } from "../cssStyles";
 
 import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck } from "react-icons/lu";
@@ -57,7 +57,7 @@ const Save: React.FC = () => {
     display: finishState !== "Save changes" ? "none" : "flex",
     flexDirection: "column" as const,
     alignItems: "center",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   const render = () => {

src/main/SubtitleEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { css } from "@emotion/react";
-import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle } from "../cssStyles";
 import { LuChevronLeft, LuDownload, LuUpload } from "react-icons/lu";
 import {
   selectSubtitlesFromOpencastById,
@@ -98,14 +98,14 @@ const SubtitleEditor: React.FC = () => {
     justifyContent: "space-between",
     alignItems: "center",
     width: "100%",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
     padding: "15px",
   });
 
   const topRightButtons = css({
     display: "flex",
     flexDirection: "row",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
   });
 
   const subAreaStyle = css({
@@ -117,7 +117,7 @@ const SubtitleEditor: React.FC = () => {
     width: "100%",
     paddingTop: "10px",
     paddingBottom: "10px",
-    ...(flexGapReplacementStyle(30, true)),
+    gap: "30px",
     borderBottom: `${theme.menuBorder}`,
   });
 

src/main/SubtitleListEditor.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { shallowEqual } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle } from "../cssStyles";
 import { KEYMAP } from "../globalKeys";
 import {
   addCueAtIndex,
@@ -90,24 +90,9 @@ const SubtitleListEditor: React.FC = () => {
     flexDirection: "column",
     height: "100%",
     width: "60%",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
   });
 
-  // Old CSS for not yet implemented buttons
-  // const headerStyle = css({
-  //   display: "flex",
-  //   flexDirection: "row",
-  //   justifyContent: "flex-end",
-  //   flexWrap: "wrap",
-  //   ...(flexGapReplacementStyle(20, false)),
-  //   paddingRight: "20px",
-  // })
-
-  // const cuttingActionButtonStyle = {
-  //   padding: "16px",
-  //   boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
-  // };
-
   const calcEstimatedSize = React.useCallback(() => {
     return segmentHeight;
   }, []);
@@ -320,7 +305,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     flexDirection: "row",
     justifyContent: "space-around",
     alignItems: "center",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
     // Make function buttons visible when hovered or focused
     "&:hover": {
       "& .functionButtonAreaStyle": {
@@ -353,7 +338,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "center",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
     flexGrow: "0.5",
     minWidth: "20px",
     // Hackily moves buttons beyond the segment border.

src/main/SubtitleSelect.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from "react";
 import { css } from "@emotion/react";
 import {
   basicButtonStyle,
-  flexGapReplacementStyle,
   tileButtonStyle,
   disableButtonAnimation,
   subtitleSelectStyle,
@@ -103,7 +102,7 @@ const SubtitleSelect: React.FC = () => {
     flexDirection: "row",
     justifyContent: "center",
     flexWrap: "wrap",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   const renderButtons = () => {
@@ -250,7 +249,7 @@ const SubtitleAddButton: React.FC<{
   const subtitleAddFormStyle = css({
     display: !isPlusDisplay ? "flex" : "none",
     flexDirection: "column" as const,
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
     width: "80%",
     padding: "20px",
   });