u
This commit is contained in:
seb
@@ -8,6 +8,7 @@ import ButtonBase from '@mui/material/ButtonBase';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import UserMenu from './UserMenu';
|
||||
import HelpBadge from './HelpBadge';
|
||||
import { NAV_ITEMS, SUB_NAV, resolveActiveNav, resolveActiveSub } from '../nav';
|
||||
import { artikelQueryPath } from './article/artikelQuery';
|
||||
import { defaultCategoryPath } from './category/categoryRoute';
|
||||
@@ -56,7 +57,7 @@ class AppSidebar extends PureComponent {
|
||||
})}
|
||||
>
|
||||
<List disablePadding sx={{ flexGrow: 1 }}>
|
||||
{NAV_ITEMS.map(({ path, label, icon: Icon }) => {
|
||||
{NAV_ITEMS.map(({ path, label, help, icon: Icon }) => {
|
||||
const active = path === activeNav;
|
||||
|
||||
return (
|
||||
@@ -106,7 +107,9 @@ class AppSidebar extends PureComponent {
|
||||
})}
|
||||
>
|
||||
<ListItemIcon sx={{ minWidth: 36 }}>
|
||||
<Icon />
|
||||
<HelpBadge title={label} help={help} placement="right">
|
||||
<Icon />
|
||||
</HelpBadge>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={label} />
|
||||
</ListItemButton>
|
||||
@@ -153,7 +156,7 @@ class AppSubNav extends PureComponent {
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
{subNav.map(({ segment, label, icon: Icon }) => {
|
||||
{subNav.map(({ segment, label, title, help, icon: Icon }) => {
|
||||
const active = segment === activeSub;
|
||||
|
||||
return (
|
||||
@@ -195,7 +198,9 @@ class AppSubNav extends PureComponent {
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Icon sx={{ fontSize: 32 }} />
|
||||
<HelpBadge title={title || label} help={help} placement="right">
|
||||
<Icon sx={{ fontSize: 32 }} />
|
||||
</HelpBadge>
|
||||
{label ? (
|
||||
<Typography
|
||||
variant="caption"
|
||||
|
||||
259
src/components/HelpBadge.jsx
Normal file
259
src/components/HelpBadge.jsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Badge from '@mui/material/Badge';
|
||||
import Box from '@mui/material/Box';
|
||||
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Popper from '@mui/material/Popper';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { helpAutomat } from '../automats';
|
||||
|
||||
/**
|
||||
* Reusable reactive badge that appears on UI elements (navigation icons, tabs, etc.)
|
||||
* when systemwide Help mode is enabled via helpAutomat.
|
||||
*
|
||||
* The red "?" badge does not move on hover.
|
||||
* Clicking the "?" badge opens an explanatory Popper anchored to the badge.
|
||||
* When Help mode is disabled, it transparently renders its children with zero overhead.
|
||||
*/
|
||||
class HelpBadge extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
enabled: helpAutomat.state?.enabled ?? false,
|
||||
anchorEl: null,
|
||||
};
|
||||
this.handleBadgeClick = this.handleBadgeClick.bind(this);
|
||||
this.handleBadgeKeyDown = this.handleBadgeKeyDown.bind(this);
|
||||
this.handleClosePopper = this.handleClosePopper.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unsub = helpAutomat.subscribe(this, (state) => ({
|
||||
enabled: Boolean(state?.enabled),
|
||||
anchorEl: state?.enabled ? this.state.anchorEl : null,
|
||||
}));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unsub?.();
|
||||
this.unsub = null;
|
||||
}
|
||||
|
||||
handleBadgeClick(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const currentTarget = event.currentTarget;
|
||||
this.setState((prev) => ({
|
||||
anchorEl: prev.anchorEl ? null : currentTarget,
|
||||
}));
|
||||
}
|
||||
|
||||
handleBadgeKeyDown(event) {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const currentTarget = event.currentTarget;
|
||||
this.setState((prev) => ({
|
||||
anchorEl: prev.anchorEl ? null : currentTarget,
|
||||
}));
|
||||
} else if (event.key === 'Escape' && this.state.anchorEl) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.setState({ anchorEl: null });
|
||||
}
|
||||
}
|
||||
|
||||
handleClosePopper(event) {
|
||||
if (this.state.anchorEl && event?.target && this.state.anchorEl.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ anchorEl: null });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { enabled, anchorEl } = this.state;
|
||||
const {
|
||||
children,
|
||||
title,
|
||||
text,
|
||||
help,
|
||||
placement = 'right-start',
|
||||
badgeContent = '?',
|
||||
anchorOrigin = { vertical: 'top', horizontal: 'right' },
|
||||
badgeSx,
|
||||
sx,
|
||||
} = this.props;
|
||||
|
||||
const helpText = text || help;
|
||||
|
||||
if (!enabled || !helpText) {
|
||||
return children;
|
||||
}
|
||||
|
||||
const isOpen = Boolean(anchorEl);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge
|
||||
badgeContent={
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`${title ? `${title}: ` : ''}Hilfe anzeigen`}
|
||||
title="Hilfe anzeigen"
|
||||
onClick={this.handleBadgeClick}
|
||||
onKeyDown={this.handleBadgeKeyDown}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{badgeContent}
|
||||
</span>
|
||||
}
|
||||
anchorOrigin={anchorOrigin}
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
'& .MuiBadge-badge': {
|
||||
bgcolor: '#dc2626',
|
||||
color: '#ffffff',
|
||||
fontWeight: 800,
|
||||
fontSize: '0.8rem',
|
||||
width: 22,
|
||||
height: 22,
|
||||
minWidth: 22,
|
||||
borderRadius: '50%',
|
||||
boxShadow: '0 2px 5px rgba(0,0,0,0.35)',
|
||||
cursor: 'pointer',
|
||||
p: 0,
|
||||
transition: 'background-color 0.15s ease',
|
||||
'&:hover': {
|
||||
bgcolor: '#b91c1c',
|
||||
},
|
||||
...badgeSx,
|
||||
},
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Badge>
|
||||
|
||||
<Popper
|
||||
open={isOpen}
|
||||
anchorEl={anchorEl}
|
||||
placement={placement}
|
||||
disablePortal={false}
|
||||
modifiers={[
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 8],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: 'viewport',
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
]}
|
||||
sx={{ zIndex: 1400 }}
|
||||
>
|
||||
<ClickAwayListener onClickAway={this.handleClosePopper}>
|
||||
<Paper
|
||||
elevation={8}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Escape') this.handleClosePopper(e);
|
||||
}}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
width: 260,
|
||||
maxWidth: 'calc(100vw - 32px)',
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
boxShadow: '0 8px 28px rgba(0,0,0,0.2)',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 0.75,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minWidth: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 18,
|
||||
height: 18,
|
||||
borderRadius: '50%',
|
||||
bgcolor: '#dc2626',
|
||||
color: '#ffffff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 800,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
?
|
||||
</Box>
|
||||
{title ? (
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
noWrap
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
fontSize: '0.85rem',
|
||||
color: 'text.primary',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
) : null}
|
||||
</Box>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={this.handleClosePopper}
|
||||
sx={{
|
||||
p: 0.25,
|
||||
color: 'text.secondary',
|
||||
'&:hover': { color: 'text.primary', bgcolor: 'action.hover' },
|
||||
}}
|
||||
aria-label="Schließen"
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: '0.78rem',
|
||||
lineHeight: 1.45,
|
||||
color: 'text.secondary',
|
||||
}}
|
||||
>
|
||||
{helpText}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</ClickAwayListener>
|
||||
</Popper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HelpBadge;
|
||||
@@ -9,8 +9,12 @@ import ListItemText from '@mui/material/ListItemText';
|
||||
import LogoutIcon from '@mui/icons-material/Logout';
|
||||
import BusinessIcon from '@mui/icons-material/Business';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import { StorageManagerContext } from '../api/storageManagerContext';
|
||||
import authAutomat from '../automats/authAutomat';
|
||||
import { helpAutomat, toggleHelp } from '../automats';
|
||||
import CompanySettingsDialog from './CompanySettingsDialog';
|
||||
import SettingsDialog from './settings/SettingsDialog';
|
||||
import { notifyError } from '../utils/notify';
|
||||
@@ -25,6 +29,7 @@ class UserMenu extends PureComponent {
|
||||
settingsOpen: false,
|
||||
numbersOpen: false,
|
||||
user: authAutomat.state.user,
|
||||
helpEnabled: helpAutomat.state?.enabled ?? false,
|
||||
};
|
||||
this.handleOpenMenu = this.handleOpenMenu.bind(this);
|
||||
this.handleCloseMenu = this.handleCloseMenu.bind(this);
|
||||
@@ -32,15 +37,20 @@ class UserMenu extends PureComponent {
|
||||
this.handleCloseSettings = this.handleCloseSettings.bind(this);
|
||||
this.handleOpenNumbers = this.handleOpenNumbers.bind(this);
|
||||
this.handleCloseNumbers = this.handleCloseNumbers.bind(this);
|
||||
this.handleToggleHelp = this.handleToggleHelp.bind(this);
|
||||
this.handleLogout = this.handleLogout.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.unsubscribe = authAutomat.subscribe(this, 'user');
|
||||
this.unsubscribeAuth = authAutomat.subscribe(this, 'user');
|
||||
this.unsubscribeHelp = helpAutomat.subscribe(this, (state) => ({
|
||||
helpEnabled: Boolean(state?.enabled),
|
||||
}));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unsubscribe?.();
|
||||
this.unsubscribeAuth?.();
|
||||
this.unsubscribeHelp?.();
|
||||
}
|
||||
|
||||
handleOpenMenu(event) {
|
||||
@@ -67,6 +77,12 @@ class UserMenu extends PureComponent {
|
||||
this.setState({ numbersOpen: false });
|
||||
}
|
||||
|
||||
handleToggleHelp(e) {
|
||||
e?.preventDefault?.();
|
||||
e?.stopPropagation?.();
|
||||
toggleHelp();
|
||||
}
|
||||
|
||||
async handleLogout() {
|
||||
this.setState({ anchorEl: null });
|
||||
try {
|
||||
@@ -78,7 +94,7 @@ class UserMenu extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { user, anchorEl, settingsOpen, numbersOpen } = this.state;
|
||||
const { user, anchorEl, settingsOpen, numbersOpen, helpEnabled } = this.state;
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const pictureSrc = (() => {
|
||||
@@ -124,6 +140,19 @@ class UserMenu extends PureComponent {
|
||||
</ListItemIcon>
|
||||
<ListItemText>Einstellungen</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={this.handleToggleHelp}>
|
||||
<ListItemIcon>
|
||||
<HelpOutlineRoundedIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Hilfe</ListItemText>
|
||||
<Switch
|
||||
edge="end"
|
||||
size="small"
|
||||
checked={helpEnabled}
|
||||
sx={{ pointerEvents: 'none' }}
|
||||
/>
|
||||
</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={this.handleLogout}>
|
||||
<ListItemIcon>
|
||||
<LogoutIcon fontSize="small" />
|
||||
|
||||
@@ -33,22 +33,43 @@ import ArticleLabelTab from './tabs/ArticleLabelTab';
|
||||
import ArticleSeoTab from './tabs/ArticleSeoTab';
|
||||
import ArticleSettingsTab from './tabs/ArticleSettingsTab';
|
||||
import ArticleSupplierTab from './tabs/ArticleSupplierTab';
|
||||
import HelpBadge from '../HelpBadge';
|
||||
|
||||
const ALWAYS_TABS = [
|
||||
{ id: ARTICLE_TAB.history, label: 'History', color: '#fed7aa', Icon: HistoryIcon },
|
||||
{ id: ARTICLE_TAB.supplier, label: 'Supplier', color: '#bbf7d0', Icon: LocalShippingIcon },
|
||||
{
|
||||
id: ARTICLE_TAB.history,
|
||||
label: 'History',
|
||||
color: '#fed7aa',
|
||||
Icon: HistoryIcon,
|
||||
help: 'Historie aller Änderungen, Buchungen und Ereignisse zu diesem Artikel',
|
||||
},
|
||||
{
|
||||
id: ARTICLE_TAB.supplier,
|
||||
label: 'Supplier',
|
||||
color: '#bbf7d0',
|
||||
Icon: LocalShippingIcon,
|
||||
help: 'Zugeordnete Lieferanten, Einkaufspreise und Lieferanten-Artikelnummern',
|
||||
},
|
||||
{
|
||||
id: ARTICLE_TAB.seo,
|
||||
label: 'SEO & Beschreibung',
|
||||
color: '#99f6e4',
|
||||
Icon: ManageSearchIcon,
|
||||
help: 'Shop-Texte, Beschreibungen und Suchmaschinen-Metadaten',
|
||||
},
|
||||
{
|
||||
id: ARTICLE_TAB.label,
|
||||
label: 'Label',
|
||||
color: '#fde68a',
|
||||
Icon: LabelIcon,
|
||||
help: 'Barcode- und Preisetiketten für diesen Artikel gestalten und drucken',
|
||||
},
|
||||
{ id: ARTICLE_TAB.label, label: 'Label', color: '#fde68a', Icon: LabelIcon },
|
||||
{
|
||||
id: ARTICLE_TAB.attributes,
|
||||
label: 'Attribute und Merkmale',
|
||||
color: '#bfdbfe',
|
||||
Icon: CategoryIcon,
|
||||
help: 'Zusatzattribute, technische Merkmale und Filtereigenschaften',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -57,6 +78,7 @@ const COMPOUND_TAB = {
|
||||
label: 'Compound Editor',
|
||||
color: '#e9d5ff',
|
||||
Icon: AccountTreeIcon,
|
||||
help: 'Stückliste und Unterartikel für diesen Set-Artikel verwalten',
|
||||
};
|
||||
|
||||
const SETTINGS_TAB = {
|
||||
@@ -64,6 +86,7 @@ const SETTINGS_TAB = {
|
||||
label: 'Einstellungen',
|
||||
color: '#fca5a5',
|
||||
Icon: SettingsIcon,
|
||||
help: 'Artikeleinstellungen, Einheiten, Steuersatz und Löschen',
|
||||
};
|
||||
|
||||
function visibleTabs(article) {
|
||||
@@ -260,7 +283,15 @@ class ArticleTileTab extends PureComponent {
|
||||
value={row.id}
|
||||
aria-label={row.label}
|
||||
title={row.label}
|
||||
icon={<Icon sx={{ fontSize: 40 }} />}
|
||||
icon={
|
||||
<HelpBadge
|
||||
title={row.label}
|
||||
help={row.help}
|
||||
placement="top"
|
||||
>
|
||||
<Icon sx={{ fontSize: 40 }} />
|
||||
</HelpBadge>
|
||||
}
|
||||
sx={{
|
||||
minHeight: 56,
|
||||
minWidth: 64,
|
||||
|
||||
Reference in New Issue
Block a user