Commit 28e37620 authored by Florent Chehab's avatar Florent Chehab

Merge branch 'fix/badgePosition#71' into 'master'

Fixed #71

Closes #71

See merge request !62
parents 85d181ad 17e37ebd
Pipeline #36169 passed with stages
in 4 minutes and 35 seconds
import React from "react";
import Badge from "@material-ui/core/Badge";
import { withStyles } from "@material-ui/core";
// fix positioning of the badge that was a bit too high
const styles = theme => ({
badge: {
top: "8px",
right: "9px",
border: `1px solid ${theme.palette.background.paper}`,
}
});
/**
......@@ -9,14 +20,19 @@ import Badge from "@material-ui/core/Badge";
* @param {object} props
* @returns
*/
export default function MyBadge(props) {
if (props.badgeContent > 1) {
export default withStyles(styles, { withTheme: true })(function MyBadge(props) {
if (props.badgeContent >= props.minNumber) {
return (
<Badge badgeContent={props.badgeContent} color={props.color} max={5} >
<Badge
classes={{ badge: props.classes.badge }}
badgeContent={props.badgeContent}
color={props.color}
max={5}
>
{props.children}
</Badge>
);
} else {
return (props.children);
}
}
});
......@@ -325,12 +325,6 @@ const styles = theme => ({
justifyContent: "flex-start",
flexWrap: "wrap",
},
badge: {
// margin: 0.5 * theme.spacing.unit,
top: -0.5 * theme.spacing.unit,
right: -0.5 * theme.spacing.unit,
border: `2px solid ${theme.palette.background.paper}`,
},
green: {
color: green.A700,
},
......
......@@ -41,7 +41,7 @@ export default function renderFirstRow(userCanModerate) {
<Tooltip title={moderTooltip} placement="top">
<div style={{ display: "inline-block" }}> {/* Needed to fire events for the tooltip when below is disabled! when below is disabled!! */}
<MyBadge className={classes.badge} badgeContent={nbPendingModeration} color="secondary">
<MyBadge badgeContent={nbPendingModeration} color="secondary" minNumber={1}>
<IconButton aria-label="Modération" disabled={moderClass == "disabled" || moderClass == "green"} onClick={() => this.openPendingModerationPanel()} className={classes.button}>
<VerifiedUserIcon className={classes[moderClass]} />
</IconButton>
......@@ -59,7 +59,7 @@ export default function renderFirstRow(userCanModerate) {
<Tooltip title={versionTooltip} placement="top">
<div style={{ display: "inline-block" }}> {/* Needed to fire events for the tooltip when below is disabled!! */}
<MyBadge className={classes.badge} badgeContent={nbVersions} color="secondary">
<MyBadge badgeContent={nbVersions} color="secondary" minNumber={2}>
<IconButton aria-label="Restorer" disabled={versionClass == "disabled"} className={classes.button} onClick={() => this.setState({ historyOpen: true })}>
<SettingsBackRestoreIcon className={classes[versionClass]} />
</IconButton>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment