From 78adbda8489594ffa8349e109cb4e1ab0f37b85f Mon Sep 17 00:00:00 2001 From: Lars Kiesow Date: Mon, 10 Apr 2023 21:23:00 +0200 Subject: [PATCH 1/4] Make Studio and Editor look alike Opencast Studio and the Opencast Editor are some of the most prominent new tools of Opencast. It would be nice if the look and feel of both would be more similar so that it feels like they belong to the same service. This patch is a first step. It introduces a header and logo similar to Studio. In the future, we can also use this to give users easy access to language options and other settings like with Studio. But that is something for future patches. --- public/opencast-editor.svg | 95 ++++++++++++++++++++++++++++++++++++++ src/App.tsx | 16 ++++++- 2 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 public/opencast-editor.svg diff --git a/public/opencast-editor.svg b/public/opencast-editor.svg new file mode 100644 index 000000000..339c59ce5 --- /dev/null +++ b/public/opencast-editor.svg @@ -0,0 +1,95 @@ + + + +image/svg+xmlEDITOR +q diff --git a/src/App.tsx b/src/App.tsx index dd598e36e..00402219c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,12 +4,26 @@ import { GlobalStyle } from './cssStyles'; import { useSelector } from 'react-redux'; import { selectThemeState } from './redux/themeSlice'; +import { css } from '@emotion/react' + function App() { const theme = useSelector(selectThemeState); - + + const header = css({ + height: '48px', + backgroundColor: '#333333', + }); + + const logo = css({ + height: '48px', + }) + return (
+
+ Opencast Editor +
); From 76c27c9e775942a65891fcafa5947320edb0c72d Mon Sep 17 00:00:00 2001 From: Lars Kiesow Date: Sat, 15 Apr 2023 23:41:03 +0200 Subject: [PATCH 2/4] Adjust body height for header This patch adjust the content height to address the problem of the overall height being too much, which would always cause scroll bars to appear. This also moves the Header code to a separate file in anticipation of more code being added there later. --- src/App.tsx | 16 ++-------------- src/main/Body.tsx | 2 +- src/main/Header.tsx | 22 ++++++++++++++++++++++ src/main/Timeline.tsx | 2 +- 4 files changed, 26 insertions(+), 16 deletions(-) create mode 100644 src/main/Header.tsx diff --git a/src/App.tsx b/src/App.tsx index 00402219c..ad371acd2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,29 +1,17 @@ import React from 'react'; import Body from './main/Body'; +import Header from './main/Header'; import { GlobalStyle } from './cssStyles'; import { useSelector } from 'react-redux'; import { selectThemeState } from './redux/themeSlice'; -import { css } from '@emotion/react' - function App() { const theme = useSelector(selectThemeState); - const header = css({ - height: '48px', - backgroundColor: '#333333', - }); - - const logo = css({ - height: '48px', - }) - return (
-
- Opencast Editor -
+
); diff --git a/src/main/Body.tsx b/src/main/Body.tsx index 3d69bfe5e..b4eb2ab65 100644 --- a/src/main/Body.tsx +++ b/src/main/Body.tsx @@ -47,7 +47,7 @@ const Body: React.FC<{}> = () => { const bodyStyle = css({ display: 'flex', flexDirection: 'row', - height: '100%', + height: 'calc(100% - 48px)', }); return ( diff --git a/src/main/Header.tsx b/src/main/Header.tsx new file mode 100644 index 000000000..ef22b24b4 --- /dev/null +++ b/src/main/Header.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import { css } from '@emotion/react' + +function Header() { + const header = css({ + height: '48px', + backgroundColor: '#333333', + }); + + const logo = css({ + height: '48px', + }) + + return ( +
+ Opencast Editor +
+ ); +} + +export default Header; diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx index 72af50132..1575c9cd8 100644 --- a/src/main/Timeline.tsx +++ b/src/main/Timeline.tsx @@ -42,7 +42,7 @@ const Timeline: React.FC<{ setCurrentlyAt: ActionCreatorWithPayload, setIsPlaying: ActionCreatorWithPayload, }> = ({ - timelineHeight = 250, + timelineHeight = 200, styleByActiveSegment = true, selectCurrentlyAt, selectIsPlaying, From 3727853331eb7295fbd62fe5cc812e08169962ae Mon Sep 17 00:00:00 2001 From: Lars Kiesow Date: Sat, 15 Apr 2023 23:51:52 +0200 Subject: [PATCH 3/4] Header high-contrast mode With this patch, if in high contrast mode, the header gets a pure back background instead of the gray one. --- src/main/Header.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index ef22b24b4..c19e3aa2f 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { useSelector } from "react-redux" +import { selectThemeState } from "../redux/themeSlice" import { css } from '@emotion/react' function Header() { + const themeState = useSelector(selectThemeState); + const header = css({ height: '48px', - backgroundColor: '#333333', + backgroundColor: themeState.startsWith('high-contrast-') ? '#000' : '#333333', }); const logo = css({ From 2b2180199ceb718290caef2725f2343617eaa228 Mon Sep 17 00:00:00 2001 From: Lars Kiesow Date: Mon, 17 Apr 2023 20:13:46 +0200 Subject: [PATCH 4/4] Border in High Contrast Mode This patch adds an additional border to the bottom of the header when the editor is in high contrast mode. --- src/main/Header.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index c19e3aa2f..95d8bcc4b 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -7,10 +7,16 @@ import { css } from '@emotion/react' function Header() { const themeState = useSelector(selectThemeState); - const header = css({ + const header = themeState.startsWith('high-contrast-') + ? css({ + height: '46px', + backgroundColor: '#000', + borderBottom: '2px solid white' + }) + : css({ height: '48px', - backgroundColor: themeState.startsWith('high-contrast-') ? '#000' : '#333333', - }); + backgroundColor: '#333333', + }) const logo = css({ height: '48px',