Merge pull request opencast#1079 from Arnei/redesign

Redesign
dennis531 · Sep 13, 2023 · 184e15b · 184e15b
2 parents 493243f + 52b0ac7
commit 184e15b
Show file tree

Hide file tree

Showing 48 changed files with 3,725 additions and 20,922 deletions.
diff --git a/editor-settings.toml b/editor-settings.toml
@@ -88,9 +88,9 @@ spanish = { lang = "es" }
 # A list of icons to be displayed for languages defined above.
 # Values are strings but should preferably be Unicode icons.
 # These are optional and you can also choose to have no icons.
-"de-DE" = "🇩🇪"
-"en-US" = "🇺🇸"
-"es" = "🇪🇸"
+"de-DE" = "DE"
+"en-US" = "EN"
+"es" = "ES"
 
 [subtitles.defaultVideoFlavor]
 # Specify the default video in the subtitle video player by flavor

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,17 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "^2.17.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fontsource-variable/roboto-flex": "^5.0.3",
     "@iarna/toml": "^2.2.5",
     "@mui/material": "^5.14.7",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@opencast/appkit": "^0.2.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^6.1.2",
     "@types/iarna__toml": "^2.0.2",
@@ -30,6 +26,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.4.2",
     "mui-rff": "^6.1.4",
+    "package-lock-only": "^0.0.4",
     "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-beforeunload": "^2.6.0",
@@ -39,6 +36,7 @@
     "react-final-form": "^6.5.9",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^13.2.1",
+    "react-icons": "^4.9.0",
     "react-indiana-drag-scroll": "^2.2.0",
     "react-player": "git+https://[email protected]/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
     "react-redux": "^8.1.2",

diff --git a/public/editor-settings.toml b/public/editor-settings.toml
@@ -35,9 +35,9 @@ spanish = { lang = "es" }
 
 
 [subtitles.icons]
-"de-DE" = "🇩🇪"
-"en-US" = "🇺🇸"
-"es" = "🇪🇸"
+"de-DE" = "DE"
+"en-US" = "EN"
+"es" = "ES"
 
 [thumbnail]
 show = true
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,10 @@
 import Body from './main/Body';
 import Header from './main/Header';
 import { GlobalStyle } from './cssStyles';
-import { useSelector } from 'react-redux';
-import { selectThemeState } from './redux/themeSlice';
 
 function App() {
-  const theme = useSelector(selectThemeState);
-
   return (
-    <div className="App" css={theme}>
+    <div className="App">
       <GlobalStyle />
       <Header />
       <Body />

diff --git a/src/config.ts b/src/config.ts
@@ -113,6 +113,16 @@ export let settings: iSettings
  * 3. Default values
  */
 export const init = async () => {
+
+  // Get color scheme from local storage, otherwise set auto scheme based on preference
+  let scheme = window.localStorage.getItem("colorScheme");
+  if (scheme === null || !["light", "dark", "light-high-contrast", "dark-high-contrast"].includes(scheme)) {
+    const lightness = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    const contrast = window.matchMedia("(prefers-contrast: more)").matches ? "-high-contrast" : "";
+    scheme = `${lightness}${contrast}`;
+  }
+  document.documentElement.dataset.colorScheme = scheme;
+
   // Get settings from config file
   await loadContextSettings().then(result => {
     configFileSettings = validate(result, false, SRC_SERVER, "from server settings file")

diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
@@ -1,20 +1,19 @@
 /**
  * This file contains general css stylings
  */
-import { css, Global } from '@emotion/react'
+import { css, Global, keyframes } from '@emotion/react'
 import React from "react";
 import emotionNormalize from 'emotion-normalize';
 import { checkFlexGapSupport } from './util/utilityFunctions';
-import { useSelector } from 'react-redux';
-import { selectTheme, Theme } from './redux/themeSlice';
 import { createTheme } from '@mui/material/styles';
+import { Theme, useTheme } from './themes';
 
 /**
  * An emotion component that inserts styles globally
  * Is removed when the styles change or when the Global component unmounts.
  */
 export const GlobalStyle: React.FC = () => {
-  const theme = useSelector(selectTheme);
+  const theme = useTheme();
   return (
     <Global styles={globalStyle(theme)} />
   );
@@ -35,6 +34,11 @@ export const globalStyle = (theme: Theme) => css({
 });
 
 
+// When to switch behaviour based on screen width
+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"
@@ -75,27 +79,23 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
  * CSS for buttons
  */
 export const basicButtonStyle = (theme: Theme) => css({
-  borderRadius: '10px',
+  borderRadius: '5px',
   cursor: "pointer",
-  // Animation
-  transitionDuration: "0.3s",
-  transitionProperty: "transform",
   "&:hover": {
-    transform: 'scale(1.1)',
+    backgroundColor: `${theme.button_color}`,
+    color: `${theme.inverted_text}`,
   },
   "&:focus": {
-    transform: 'scale(1.1)',
-  },
-  "&:active": {
-    transform: 'scale(0.9)',
+    backgroundColor: `${theme.button_color}`,
+    color: `${theme.inverted_text}`,
   },
   // Flex position child elements
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   ...(flexGapReplacementStyle(10, false)),
   textAlign: 'center' as const,
-  outline: `${theme.button_outline}`
+  outline: `${theme.button_outline}`,
 });
 
 /**
@@ -104,7 +104,7 @@ export const basicButtonStyle = (theme: Theme) => css({
 export const deactivatedButtonStyle = css({
   borderRadius: '10px',
   cursor: "pointer",
-  opacity: "0.4",
+  opacity: "0.6",
   // Flex position child elements
   display: 'flex',
   justifyContent: 'center',
@@ -129,23 +129,22 @@ export const navigationButtonStyle = (theme: Theme) => css({
  */
 export const backOrContinueStyle = css(({
   display: 'flex',
-  flexDirection: 'row' as const,
+  flexDirection: 'row',
   ...(flexGapReplacementStyle(20, false)),
 }))
 
 /**
  * CSS for big buttons in a dynamic grid
  */
 export const tileButtonStyle = (theme: Theme) => css({
-  width: '250px',
+  width: '290px',
   height: '220px',
   display: 'flex',
-  flexDirection: 'column' as const,
-  fontSize: "x-large",
+  flexDirection: 'column',
+  fontWeight: "bold",
   ...(flexGapReplacementStyle(30, false)),
-  boxShadow: `${theme.boxShadow}`,
+  boxShadow: `${theme.boxShadow_tiles}`,
   background: `${theme.element_bg}`,
-  alignItems: 'unset',  // overwrite from basicButtonStyle to allow for textOverflow to work
   placeSelf: 'center',
 });
 
@@ -167,23 +166,24 @@ export const disableButtonAnimation = css({
 /**
  * CSS for a title
  */
-export const titleStyle = css(({
+export const titleStyle = (theme: Theme) => css(({
   display: 'inline-block',
   padding: '15px',
-  overflow: 'hidden',
   whiteSpace: "nowrap",
   textOverflow: 'ellipsis',
   maxWidth: '100%',
+  color: `${theme.text}`,
 }))
 
 /**
  * Addendum for the titleStyle
  * Used for page titles
  */
-export const titleStyleBold = css({
+export const titleStyleBold = (theme: Theme) => css({
   fontWeight: 'bold',
   fontSize: '24px',
   verticalAlign: '-2.5px',
+  color: `${theme.text}`,
 })
 
 /**
@@ -214,13 +214,19 @@ export const errorBoxStyle = (errorStatus: boolean, theme: Theme) => {
 
 export function selectFieldStyle(theme: Theme) {
   return {
-    control: (provided: any) => ({
+    control: (provided: any, state: any) => ({
       ...provided,
-      background: theme.element_bg,
+      background: theme.menu_background,
+      ...(state.isFocused && {borderColor: theme.metadata_highlight}),
+      ...(state.isFocused && {boxShadow: `0 0 0 1px ${theme.metadata_highlight}`}),
+      "&:hover": {
+        borderColor: theme.menu_background,
+        boxShadow: `0 0 0 1px ${theme.metadata_highlight}`
+      },
     }),
     menu: (provided: any) => ({
       ...provided,
-      background: theme.element_bg,
+      background: theme.menu_background,
       outline: theme.dropdown_border,
       // kill the gap
       marginTop: 0,
@@ -231,18 +237,18 @@ export function selectFieldStyle(theme: Theme) {
     }),
     multiValue: (provided: any) => ({
       ...provided,
-      color: theme.selected_text,
+      color: theme.inverted_text,
       background: theme.multiValue,
       cursor: 'default',
     }),
     multiValueLabel: (provided: any) => ({
       ...provided,
-      color: theme.selected_text,
+      color: theme.inverted_text,
     }),
     option: (provided: any, state: any) => ({
       ...provided,
-      background: state.isFocused ? theme.focused : theme.background
-        && state.isSelected ? theme.selected : theme.background,
+      background: state.isFocused ? theme.focused : theme.menu_background
+        && state.isSelected ? theme.selected : theme.menu_background,
       ...(state.isFocused && {color: theme.focus_text}),
       color: state.isFocused ? theme.focus_text : theme.text
         && state.isSelected ? theme.selected_text : theme.text,
@@ -279,7 +285,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
         root: {
           /* Modal */
           outline: `${theme.dropdown_border} !important`,
-          background: `${theme.background}`,
+          background: `${theme.menu_background}`,
           color: `${theme.text}`,
 
           /* Calendar-modal */
@@ -323,7 +329,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
       styleOverrides: {
         root: {
           /* Calendar- and Clock-modal -> arrows, icon, days  */
-          color: `${theme.icon_color} !important`,
+          color: `${theme.text} !important`,
           '&.MuiPickersDay-root': {
             background: 'transparent !important',
             color: `${theme.text} !important`,
@@ -422,3 +428,39 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
     }
   }
 })
+
+export const spinningStyle = css({
+  animation: `2s linear infinite none ${keyframes({
+    "0%": { transform: "rotate(0)" },
+    "100%": { transform: "rotate(360deg)" },
+  })}`,
+})
+
+export const customIconStyle = (theme: Theme) => css(({
+  maxWidth: '16px',
+  height: 'auto',
+  color: theme.text,
+}))
+
+export const videosStyle = (theme: Theme) => css(({
+  display: 'flex',
+  flexDirection: 'column',
+
+  width: '100%',
+  background: `${theme.menu_background}`,
+  borderRadius: '5px',
+  boxShadow: `${theme.boxShadow_tiles}`,
+  marginTop: '24px',
+  boxSizing: "border-box",
+  padding: '10px',
+  ...(flexGapReplacementStyle(10, false)),
+}))
+
+export const backgroundBoxStyle = (theme: Theme) => css(({
+  background: `${theme.menu_background}`,
+  borderRadius: '7px',
+  boxShadow: `${theme.boxShadow_tiles}`,
+  boxSizing: "border-box",
+  padding: '20px',
+  ...(flexGapReplacementStyle(25, false)),
+}))
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -58,7 +58,9 @@
       "info-text": "The video will not be processed but all cutting information will be stored in Opencast. You can continue your edit later.",
       "success-text": "Changes saved successfully! You can now close the editor or continue working.",
       "success-tooltip-aria": "Saved successfully",
-      "saveArea-tooltip": "Save Area"
+      "saveArea-tooltip": "Save Area",
+      "confirm-success": "Okay",
+      "cancel-save": "Don't save"
     },
 
     "discard": {
@@ -131,7 +133,7 @@
       },
       "language": {
         "LANGUAGES-SLOVENIAN": "Slovenian",
-        "LANGUAGES-PORTUGUESE": "Portuguese",
+        "LANGUAGES-PORTUGESE": "Portuguese",
         "LANGUAGES-ROMANSH": "Romansh",
         "LANGUAGES-ARABIC": "Arabic",
         "LANGUAGES-POLISH": "Polish",
@@ -218,7 +220,7 @@
     },
 
     "trackSelection": {
-      "description": "Select or deselect which tracks are used for processing and publication.",
+      "title": "Select track(s) for processing",
       "trackInactive": "inactive",
       "deleteTrackText": "Delete Track",
       "restoreTrackText": "Restore Track",
@@ -265,7 +267,7 @@
     },
 
     "keyboardControls": {
-      "header": "Keyboard Controls",
+      "header": "Shortcuts",
       "defaultGroupName": "General",
       "missingLabel": "Unknown",
       "groupVideoPlayer": "Video Player",
@@ -283,11 +285,14 @@
 
     "theme": {
       "appearance": "Appearance",
-      "selectThemesLabel": "Appearances",
-      "darkmode": "Dark mode",
-      "lightmode": "Light mode",
-      "system": "System design",
-      "high-contrast-dark": "High contrast (Dark mode)",
-      "high-contrast-light": "High contrast (Light mode)"
+      "dark": "Dark",
+      "light": "Light",
+      "auto": "Auto",
+      "dark-high-contrast": "Dark (High contrast)",
+      "light-high-contrast": "Light (High contrast)"
+    },
+
+    "language": {
+      "language": "Language"
     }
   }