1
0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00

fix logo handling in UI

This commit is contained in:
checktheroads
2020-06-22 18:07:00 -07:00
parent 58cddc423e
commit f2fcf59bb1
2 changed files with 19 additions and 13 deletions

View File

@@ -431,7 +431,7 @@ vrfs = _build_vrfs()
networks = _build_networks()
frontend_networks = _build_frontend_networks()
frontend_devices = _build_frontend_devices()
_frontend_fields = {
_include_fields = {
"cache": {"show_text", "timeout"},
"debug": ...,
"developer_mode": ...,
@@ -445,7 +445,12 @@ _frontend_fields = {
"web": ...,
"messages": ...,
}
_frontend_params = params.dict(include=_frontend_fields)
_frontend_params = params.dict(include=_include_fields)
_frontend_params["web"]["logo"]["light_format"] = params.web.logo.light.suffix
_frontend_params["web"]["logo"]["dark_format"] = params.web.logo.dark.suffix
_frontend_params.update(
{
"hyperglass_version": __version__,

View File

@@ -59,21 +59,22 @@ const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => (
</Stack>
);
const Logo = ({ text, logo, showSubtitle }) => {
const Logo = ({ text, logo }) => {
const { colorMode } = useColorMode();
const logoColor = { light: logo.dark, dark: logo.light };
const logoPath = logoColor[colorMode];
return <Image src={logoPath} alt={text.title} width={logo.width ?? "auto"} />;
const logoExt = { light: logo.dark_format, dark: logo.light_format };
const logoName = { light: "dark", dark: "light" };
return (
<Image
alt={text.title}
width={logo.width ?? "auto"}
src={`/images/${logoName[colorMode]}${logoExt[colorMode]}`}
/>
);
};
const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
<>
<Logo
text={text}
logo={logo}
showSubtitle={showSubtitle}
mediaSize={mediaSize}
/>
<Logo text={text} logo={logo} mediaSize={mediaSize} />
<AnimatePresence>
{showSubtitle && (
<AnimatedSubtitle mt={6} text={text.subtitle} {...subtitleAnimation} />
@@ -84,7 +85,7 @@ const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
const All = ({ text, logo, mediaSize, showSubtitle }) => (
<>
<Logo text={text} logo={logo} showSubtitle={showSubtitle} />
<Logo text={text} logo={logo} />
<TextOnly
mediaSize={mediaSize}
showSubtitle={showSubtitle}