From 8fed013106d5fc962036096b55eeb2a2b6e2e3f9 Mon Sep 17 00:00:00 2001 From: Carolina Ziegler Date: Mon, 15 Apr 2024 14:12:05 +0200 Subject: [PATCH 1/8] Make editor logo changable --- public/editor-logo.svg | 55 ++++++++++++++++++++++++++++++++++++++++++ src/main/Header.tsx | 36 ++++++++++++++++++++++++--- 2 files changed, 88 insertions(+), 3 deletions(-) create mode 100644 public/editor-logo.svg diff --git a/public/editor-logo.svg b/public/editor-logo.svg new file mode 100644 index 000000000..ae5702bba --- /dev/null +++ b/public/editor-logo.svg @@ -0,0 +1,55 @@ + + + diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 01650a78f..c5e127794 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -12,7 +12,7 @@ import { LuKeyboard } from "react-icons/lu"; import { MainMenuStateNames } from "../types"; import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle } from "../cssStyles"; -import LogoSvg from "../img/opencast-editor.svg?react"; + import { selectIsEnd } from "../redux/endSlice"; import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit"; import { IconType } from "react-icons"; @@ -91,20 +91,50 @@ function Header() { ); } +const LogoPicture: React.FC = () => { + /*Should I import defines plugin, like it is in studio? How?*/ + const path = (filename:string) => "/" + filename; + + return ( +
+ *": { + height: "calc(100% - 0.5px)", + }, + }}> + + Opencast Editor Logo + + ; +
+ ) +} + const Logo: React.FC = () => { - const { t } = useTranslation(); + const {t } = useTranslation(); const { scheme } = useColorScheme(); + + const logo = css({ paddingLeft: "8px", opacity: scheme === "dark" ? "0.8" : "1", + display: "flex", + height: "100%", "> *": { height: "calc(100% - 12px)", }, + alignItems: "center", + // Unset a bunch of CSS to keep the logo clean outline: "unset", "&:hover": { @@ -117,7 +147,7 @@ const Logo: React.FC = () => { return ( Date: Wed, 8 May 2024 14:20:56 +0200 Subject: [PATCH 2/8] Make editor logo changeable --- src/main/Header.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index c5e127794..249f6364b 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -17,6 +17,7 @@ import { selectIsEnd } from "../redux/endSlice"; import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit"; import { IconType } from "react-icons"; import i18next from "i18next"; +import {defineConfig} from "vite"; function Header() { const theme = useTheme(); @@ -92,8 +93,7 @@ function Header() { } const LogoPicture: React.FC = () => { - /*Should I import defines plugin, like it is in studio? How?*/ - const path = (filename:string) => "/" + filename; + const path = (filename:string) => import.meta.env.BASE_URL + filename; return (
@@ -110,7 +110,6 @@ const LogoPicture: React.FC = () => { Opencast Editor Logo - ;
) } From 7d6a9e0221d6f0d8cbab8c0d82b32d842cde4b88 Mon Sep 17 00:00:00 2001 From: Carolina Ziegler Date: Wed, 8 May 2024 14:31:19 +0200 Subject: [PATCH 3/8] Deleted empty lines --- src/main/Header.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 249f6364b..005e6b757 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -12,12 +12,10 @@ import { LuKeyboard } from "react-icons/lu"; import { MainMenuStateNames } from "../types"; import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle } from "../cssStyles"; - import { selectIsEnd } from "../redux/endSlice"; import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit"; import { IconType } from "react-icons"; import i18next from "i18next"; -import {defineConfig} from "vite"; function Header() { const theme = useTheme(); @@ -94,7 +92,6 @@ function Header() { const LogoPicture: React.FC = () => { const path = (filename:string) => import.meta.env.BASE_URL + filename; - return (
{ const Logo: React.FC = () => { - const {t } = useTranslation(); + const { t } = useTranslation(); const { scheme } = useColorScheme(); - - const logo = css({ paddingLeft: "8px", opacity: scheme === "dark" ? "0.8" : "1", - display: "flex", - height: "100%", "> *": { height: "calc(100% - 12px)", }, - alignItems: "center", // Unset a bunch of CSS to keep the logo clean From 2932d464de2d8e00a1cb3b559256ae636901db8b Mon Sep 17 00:00:00 2001 From: Carolina Ziegler Date: Wed, 15 May 2024 11:23:11 +0200 Subject: [PATCH 4/8] Moved opencast-editor.svg to public folder and used it in Header.tsx, deleted editor-logo.svg --- public/editor-logo.svg | 55 ------------------------- {src/img => public}/opencast-editor.svg | 0 src/main/Header.tsx | 4 +- 3 files changed, 2 insertions(+), 57 deletions(-) delete mode 100644 public/editor-logo.svg rename {src/img => public}/opencast-editor.svg (100%) diff --git a/public/editor-logo.svg b/public/editor-logo.svg deleted file mode 100644 index ae5702bba..000000000 --- a/public/editor-logo.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - diff --git a/src/img/opencast-editor.svg b/public/opencast-editor.svg similarity index 100% rename from src/img/opencast-editor.svg rename to public/opencast-editor.svg diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 005e6b757..493c02300 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -104,8 +104,8 @@ const LogoPicture: React.FC = () => { height: "calc(100% - 0.5px)", }, }}> - - Opencast Editor Logo + + Opencast Editor Logo
) From e2d3bfd744e6da2f767ae8ab2703597a7da1add8 Mon Sep 17 00:00:00 2001 From: Carolina Ziegler Date: Wed, 12 Jun 2024 12:58:18 +0200 Subject: [PATCH 5/8] applied PR comments, fixed checkstyle issues --- src/main/Header.tsx | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 493c02300..0d975959d 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -94,19 +94,15 @@ const LogoPicture: React.FC = () => { const path = (filename:string) => import.meta.env.BASE_URL + filename; return (
- *": { - height: "calc(100% - 0.5px)", - }, - }}> - - Opencast Editor Logo - + *": { + height: "calc(100% - 0.5px)", + }, + }}> + + Opencast Editor Logo +
) } From 8f16f1682d13e1494668eb4f4f4b1112e113576c Mon Sep 17 00:00:00 2001 From: Carolina Ziegler Date: Wed, 12 Jun 2024 13:05:49 +0200 Subject: [PATCH 6/8] forgot about one checkstyle issue --- src/main/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 0d975959d..632dba862 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -105,7 +105,7 @@ const LogoPicture: React.FC = () => { ) -} +}; const Logo: React.FC = () => { From aab00610bea428b067c53474a3adb33debc3f38f Mon Sep 17 00:00:00 2001 From: Carolina Ziegler Date: Mon, 1 Jul 2024 08:56:40 +0200 Subject: [PATCH 7/8] tried to fix the checkstyle issues --- src/main/Header.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 632dba862..7df3e7a5b 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -93,17 +93,17 @@ function Header() { const LogoPicture: React.FC = () => { const path = (filename:string) => import.meta.env.BASE_URL + filename; return ( -
- *": { - height: "calc(100% - 0.5px)", - }, - }}> - - Opencast Editor Logo - -
+
+ *": { + height: "calc(100% - 0.5px)", + }, + }}> + + Opencast Editor Logo + +
) }; From 6a7cd3458f626b079aea4dcdb6b3289f0f30c7ed Mon Sep 17 00:00:00 2001 From: Carolina Ziegler Date: Mon, 1 Jul 2024 09:10:44 +0200 Subject: [PATCH 8/8] fixed checkstyle issues finally --- src/main/Header.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/main/Header.tsx b/src/main/Header.tsx index 7df3e7a5b..7bff4bb65 100644 --- a/src/main/Header.tsx +++ b/src/main/Header.tsx @@ -94,17 +94,17 @@ const LogoPicture: React.FC = () => { const path = (filename:string) => import.meta.env.BASE_URL + filename; return (
- *": { - height: "calc(100% - 0.5px)", - }, - }}> - - Opencast Editor Logo - + *": { + height: "calc(100% - 0.5px)", + }, + }}> + + Opencast Editor Logo +
- ) + ); }; const Logo: React.FC = () => {