From 07112ca0e5df3e9ba260b015d5bf9b7a802e7b98 Mon Sep 17 00:00:00 2001 From: Hubert Date: Tue, 13 May 2025 11:39:35 +0200 Subject: [PATCH 1/5] beta button info --- src/components/Core/ShellBar.tsx | 125 +++++++++++++++++++++++++------ 1 file changed, 101 insertions(+), 24 deletions(-) diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx index e8912880..11d719da 100644 --- a/src/components/Core/ShellBar.tsx +++ b/src/components/Core/ShellBar.tsx @@ -1,5 +1,8 @@ import { Avatar, + Button, + ButtonDomRef, + Icon, List, ListItemStandard, Popover, @@ -18,7 +21,11 @@ import { generateInitialsForEmail } from '../Helper/GenerateInitialsForEmail'; export function ShellBarComponent() { const auth = useAuth(); const profilePopoverRef = useRef(null); + const betaPopoverRef = useRef(null); const [profilePopoverOpen, setProfilePopoverOpen] = useState(false); + const [betaPopoverOpen, setBetaPopoverOpen] = useState(false); + + const betaButtonRef = useRef(null); const onProfileClick = ( e: Ui5CustomEvent, @@ -27,6 +34,13 @@ export function ShellBarComponent() { setProfilePopoverOpen(!profilePopoverOpen); }; + const onBetaClick = () => { + if (betaButtonRef.current) { + betaPopoverRef.current!.opener = betaButtonRef.current; + setBetaPopoverOpen(!betaPopoverOpen); + } + }; + return ( <> } + startButton={ + + } onProfileClick={onProfileClick} /> setProfilePopoverOpen(b)} + setOpen={setProfilePopoverOpen} popoverRef={profilePopoverRef} /> + ); } @@ -62,28 +118,49 @@ const ProfilePopover = ({ const { t } = useTranslation(); return ( - <> - { - setOpen(false); - }} - > - - { - setOpen(false); - auth.removeUser(); - }} - > - {t('ShellBar.signOutButton')} - - - - + setOpen(false)} + > + + { + setOpen(false); + auth.removeUser(); + }} + > + {t('ShellBar.signOutButton')} + + + + ); +}; + +const BetaPopover = ({ + open, + setOpen, + popoverRef, +}: { + open: boolean; + setOpen: (arg0: boolean) => void; + popoverRef: RefObject; +}) => { + return ( + setOpen(false)} + > +
+ This web app is currently in Beta, and may not ready for productive use. + We're actively improving the experience and would love your + feedback—your input helps shape the future of the app! +
+ ); }; From 67772bce23919f7ffff9ef79342b188828439c76 Mon Sep 17 00:00:00 2001 From: Hubert Date: Tue, 13 May 2025 16:32:04 +0200 Subject: [PATCH 2/5] Shellbar changes --- src/components/Core/ShellBar.module.css | 3 + src/components/Core/ShellBar.tsx | 96 ++++++++++++++++--------- 2 files changed, 67 insertions(+), 32 deletions(-) create mode 100644 src/components/Core/ShellBar.module.css diff --git a/src/components/Core/ShellBar.module.css b/src/components/Core/ShellBar.module.css new file mode 100644 index 00000000..936805a6 --- /dev/null +++ b/src/components/Core/ShellBar.module.css @@ -0,0 +1,3 @@ +ui5-shellbar::part(overflowContainerLeft) { + background-color: red !important; +} \ No newline at end of file diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx index 11d719da..a88e0e84 100644 --- a/src/components/Core/ShellBar.tsx +++ b/src/components/Core/ShellBar.tsx @@ -12,11 +12,12 @@ import { Ui5CustomEvent, } from '@ui5/webcomponents-react'; import { useAuth } from 'react-oidc-context'; -import { RefObject, useRef, useState } from 'react'; +import { RefObject, useEffect, useRef, useState } from 'react'; import { ShellBarProfileClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBar.js'; import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import { useTranslation } from 'react-i18next'; import { generateInitialsForEmail } from '../Helper/GenerateInitialsForEmail'; +import styles from './ShellBar.module.css'; export function ShellBarComponent() { const auth = useAuth(); @@ -41,11 +42,21 @@ export function ShellBarComponent() { } }; + useEffect(() => { + const shellbar = document.querySelector('ui5-shellbar'); + const el = shellbar?.shadowRoot?.querySelector( + '.ui5-shellbar-overflow-container-left', + ); + + if (el) { + (el as HTMLElement).style.backgroundColor = 'red'; + } + }, []); + return ( <> } - primaryTitle="MCP" + className={styles.TestShellbar} profile={ } startButton={ - + > + + BETA + + + } onProfileClick={onProfileClick} /> + Date: Wed, 14 May 2025 11:18:10 +0200 Subject: [PATCH 3/5] moving css to other file --- src/components/Core/ShellBar.module.css | 54 +++++++++++++++++++-- src/components/Core/ShellBar.tsx | 64 +++++++------------------ 2 files changed, 67 insertions(+), 51 deletions(-) diff --git a/src/components/Core/ShellBar.module.css b/src/components/Core/ShellBar.module.css index 936805a6..de04cea2 100644 --- a/src/components/Core/ShellBar.module.css +++ b/src/components/Core/ShellBar.module.css @@ -1,3 +1,51 @@ -ui5-shellbar::part(overflowContainerLeft) { - background-color: red !important; -} \ No newline at end of file +.container { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.logoWrapper { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.logo { + height: 1.5rem; +} + +.logoText { + font-weight: bold; + font-size: 1rem; + color: var(--sapTextColor); +} + +.betaButton { + background-color: #FFF3CD; + color: #856404; + padding: 4px 10px; + border-radius: 12px; + border: 1px solid #FFEB99; + font-weight: bold; + font-size: 0.75rem; + height: 1.75rem; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.betaContent { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.betaIcon { + font-size: 1rem; + color: #0A6ED1; +} + +.betaText { + font-size: 0.875rem; +} diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx index a88e0e84..6e4f5f17 100644 --- a/src/components/Core/ShellBar.tsx +++ b/src/components/Core/ShellBar.tsx @@ -18,6 +18,7 @@ import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js' import { useTranslation } from 'react-i18next'; import { generateInitialsForEmail } from '../Helper/GenerateInitialsForEmail'; import styles from './ShellBar.module.css'; +import { ThemingParameters } from '@ui5/webcomponents-react-base'; export function ShellBarComponent() { const auth = useAuth(); @@ -64,58 +65,19 @@ export function ShellBarComponent() { /> } startButton={ -
- {/* Logo + Tytuł */} -
- MCP - - MCP - +
+
+ MCP + MCP
- - {/* BETA Button */}
@@ -188,7 +150,13 @@ const BetaPopover = ({ open={open} onClose={() => setOpen(false)} > -
+
This web app is currently in Beta, and may not ready for productive use. We're actively improving the experience and would love your feedback—your input helps shape the future of the app! From 51800f65ac04340715248d0bb9fcb4f1cb779ea4 Mon Sep 17 00:00:00 2001 From: Hubert Date: Thu, 15 May 2025 10:22:44 +0200 Subject: [PATCH 4/5] moving button text --- public/locales/en.json | 1 + src/components/Core/ShellBar.tsx | 7 +++---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index d81e383e..77b0852e 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -93,6 +93,7 @@ "subtitleMessage": "Looks like this page is not opened inside of the Hyperspace Portal. Contact admins for help." }, "ShellBar": { + "betaButtonDescription": "This web app is currently in Beta, and may not ready for productive use. We're actively improving the experience and would love your feedback — your input helps shape the future of the app!", "signOutButton": "Sign Out" }, "CreateProjectDialog": { diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx index 6e4f5f17..473c0917 100644 --- a/src/components/Core/ShellBar.tsx +++ b/src/components/Core/ShellBar.tsx @@ -26,7 +26,6 @@ export function ShellBarComponent() { const betaPopoverRef = useRef(null); const [profilePopoverOpen, setProfilePopoverOpen] = useState(false); const [betaPopoverOpen, setBetaPopoverOpen] = useState(false); - const betaButtonRef = useRef(null); const onProfileClick = ( @@ -143,6 +142,8 @@ const BetaPopover = ({ setOpen: (arg0: boolean) => void; popoverRef: RefObject; }) => { + const { t } = useTranslation(); + return ( - This web app is currently in Beta, and may not ready for productive use. - We're actively improving the experience and would love your - feedback—your input helps shape the future of the app! + {t('ShellBar.betaButtonDescription')},
); From 802586d9fce231ec7a5e1a4af2a742a5415b082b Mon Sep 17 00:00:00 2001 From: Hubert Date: Thu, 15 May 2025 11:19:17 +0200 Subject: [PATCH 5/5] removing comma --- src/components/Core/ShellBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx index 473c0917..61bb4155 100644 --- a/src/components/Core/ShellBar.tsx +++ b/src/components/Core/ShellBar.tsx @@ -158,7 +158,7 @@ const BetaPopover = ({ fontFamily: ThemingParameters.sapFontFamily, }} > - {t('ShellBar.betaButtonDescription')}, + {t('ShellBar.betaButtonDescription')}
);