aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2023-06-09 07:17:58 -0700
committerAnton Tananaev <anton@traccar.org>2023-06-09 07:17:58 -0700
commitcb7106f4bfd6856470861890ea5e4c0bbc4703ac (patch)
tree188f14584d56854b2d8a1ae4a3bd179d4623aedb /modern/src
parenta9aeaac17718096ba11208e6c7ce4902ab355050 (diff)
downloadtrackermap-web-cb7106f4bfd6856470861890ea5e4c0bbc4703ac.tar.gz
trackermap-web-cb7106f4bfd6856470861890ea5e4c0bbc4703ac.tar.bz2
trackermap-web-cb7106f4bfd6856470861890ea5e4c0bbc4703ac.zip
Add inverted logo option
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/common/attributes/useServerAttributes.js4
-rw-r--r--modern/src/login/LogoImage.js20
-rw-r--r--modern/src/resources/l10n/en.json1
3 files changed, 17 insertions, 8 deletions
diff --git a/modern/src/common/attributes/useServerAttributes.js b/modern/src/common/attributes/useServerAttributes.js
index f70fd220..74749991 100644
--- a/modern/src/common/attributes/useServerAttributes.js
+++ b/modern/src/common/attributes/useServerAttributes.js
@@ -13,6 +13,10 @@ export default (t) => useMemo(() => ({
name: t('serverLogo'),
type: 'string',
},
+ logoInverted: {
+ name: t('serverLogoInverted'),
+ type: 'string',
+ },
colorPrimary: {
name: t('serverColorPrimary'),
type: 'string',
diff --git a/modern/src/login/LogoImage.js b/modern/src/login/LogoImage.js
index f8de13e2..f4c7969c 100644
--- a/modern/src/login/LogoImage.js
+++ b/modern/src/login/LogoImage.js
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTheme, useMediaQuery } from '@mui/material';
import { useSelector } from 'react-redux';
import { makeStyles } from '@mui/styles';
import { ReactComponent as Logo } from '../resources/images/logo.svg';
@@ -14,18 +15,21 @@ const useStyles = makeStyles(() => ({
}));
const LogoImage = ({ color }) => {
+ const theme = useTheme();
const classes = useStyles();
- const imageFile = useSelector((state) => state.session.server.attributes?.logo);
+ const expanded = !useMediaQuery(theme.breakpoints.down('lg'));
- if (imageFile) {
- return (
- <img className={classes.image} src={imageFile} alt="" />
- );
+ const logo = useSelector((state) => state.session.server.attributes?.logo);
+ const logoInverted = useSelector((state) => state.session.server.attributes?.logoInverted);
+
+ if (logo) {
+ if (expanded && logoInverted) {
+ return <img className={classes.image} src={logoInverted} alt="" />;
+ }
+ return <img className={classes.image} src={logo} alt="" />;
}
- return (
- <Logo className={classes.image} style={{ color }} />
- );
+ return <Logo className={classes.image} style={{ color }} />;
};
export default LogoImage;
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index d5125657..d30cad7e 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -311,6 +311,7 @@
"serverColorPrimary": "Color Primary",
"serverColorSecondary": "Color Secondary",
"serverLogo": "Logo Image",
+ "serverLogoInverted": "Inverted Logo Image",
"serverChangeDisable": "Disable Server Change",
"mapTitle": "Map",
"mapActive": "Active Maps",