Refactor SystemVersionComponent styles
parent
f29f159cc3
commit
1a53110db1
|
@ -1,6 +1,5 @@
|
||||||
import React, { useMemo, useEffect, useState } from "react";
|
import React, { useMemo, useEffect, useState } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import { makeStyles } from "@mui/material/styles";
|
|
||||||
import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material";
|
import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material";
|
||||||
import Avatar from "@mui/material/Avatar";
|
import Avatar from "@mui/material/Avatar";
|
||||||
import WebAssetIcon from "@mui/icons-material/WebAsset";
|
import WebAssetIcon from "@mui/icons-material/WebAsset";
|
||||||
|
@ -9,37 +8,37 @@ import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import packageData from "../../../../package.json";
|
import packageData from "../../../../package.json";
|
||||||
import Paper from "@mui/material/Paper";
|
import Paper from "@mui/material/Paper";
|
||||||
|
import { useTheme } from "@mui/material/styles";
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => {
|
const getStyles = theme => ({
|
||||||
return {
|
horizontally: {
|
||||||
horizontally: {
|
display: "flex",
|
||||||
display: "flex",
|
flexDirection: "row",
|
||||||
flexDirection: "row",
|
padding: 0
|
||||||
padding: 0
|
},
|
||||||
},
|
vertical: {
|
||||||
vertical: {
|
width: "100%"
|
||||||
width: "100%"
|
},
|
||||||
},
|
value: {
|
||||||
value: {
|
fontSize: "0.9rem",
|
||||||
fontSize: "0.9rem",
|
fontWeight: theme.typography.fontWeightMedium
|
||||||
fontWeight: theme.typography.fontWeightMedium
|
},
|
||||||
},
|
versionAvatar: {
|
||||||
versionAvatar: {
|
backgroundColor: theme.palette.secondary.main
|
||||||
backgroundColor: theme.palette.secondary.main
|
}
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const SystemVersionComponent = ({ data }) => {
|
const SystemVersionComponent = ({ data }) => {
|
||||||
const classes = useStyles();
|
const [listClass, setListClass] = useState(styles.horizontally);
|
||||||
const [listClass, setListClass] = useState(classes.horizontally);
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const theme = useTheme();
|
||||||
|
const styles = getStyles(theme);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const mediaQuery = window.matchMedia("(max-width: 800px)");
|
const mediaQuery = window.matchMedia("(max-width: 800px)");
|
||||||
|
|
||||||
function handleMatches(event) {
|
function handleMatches(event) {
|
||||||
const cssClass = event.matches ? classes.vertical : classes.horizontally;
|
const cssClass = event.matches ? styles.vertical : styles.horizontally;
|
||||||
setListClass(cssClass);
|
setListClass(cssClass);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,7 +48,7 @@ const SystemVersionComponent = ({ data }) => {
|
||||||
return () => {
|
return () => {
|
||||||
mediaQuery.removeListener(handleMatches);
|
mediaQuery.removeListener(handleMatches);
|
||||||
};
|
};
|
||||||
}, [classes.horizontally, classes.vertical]);
|
}, []);
|
||||||
|
|
||||||
const lastReleaseDate = useMemo(() => {
|
const lastReleaseDate = useMemo(() => {
|
||||||
const format = "DD-MM-YYYY HH:mm:ss";
|
const format = "DD-MM-YYYY HH:mm:ss";
|
||||||
|
@ -79,16 +78,16 @@ const SystemVersionComponent = ({ data }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Paper variant="outlined">
|
<Paper variant="outlined">
|
||||||
<List className={listClass}>
|
<List sx={listClass}>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar className={classes.versionAvatar}>
|
<Avatar sx={styles.versionAvatar}>
|
||||||
<DeveloperBoardIcon />
|
<DeveloperBoardIcon />
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primary={
|
primary={
|
||||||
<span className={classes.value}>
|
<span style={styles.value}>
|
||||||
{t("About.System.Version.Server", {
|
{t("About.System.Version.Server", {
|
||||||
version: data.server.version
|
version: data.server.version
|
||||||
})}
|
})}
|
||||||
|
@ -101,13 +100,13 @@ const SystemVersionComponent = ({ data }) => {
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar className={classes.versionAvatar}>
|
<Avatar sx={styles.versionAvatar}>
|
||||||
<SettingsInputSvideoIcon />
|
<SettingsInputSvideoIcon />
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primary={
|
primary={
|
||||||
<span className={classes.value}>
|
<span style={styles.value}>
|
||||||
{t("About.System.Version.Api", {
|
{t("About.System.Version.Api", {
|
||||||
version: data.api.version
|
version: data.api.version
|
||||||
})}
|
})}
|
||||||
|
@ -120,13 +119,13 @@ const SystemVersionComponent = ({ data }) => {
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar className={classes.versionAvatar}>
|
<Avatar sx={styles.versionAvatar}>
|
||||||
<WebAssetIcon />
|
<WebAssetIcon />
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primary={
|
primary={
|
||||||
<span className={classes.value}>
|
<span style={styles.value}>
|
||||||
{t("About.System.Version.Frontend", {
|
{t("About.System.Version.Frontend", {
|
||||||
version: process.env.APP_VERSION ?? packageData.version
|
version: process.env.APP_VERSION ?? packageData.version
|
||||||
})}
|
})}
|
||||||
|
|
Loading…
Reference in New Issue