seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace panel tileKey with a direct color prop.

Browse Source 
Drop theme panelTiles keys and the ArticleView update callback wiring.
This commit is contained in:
seb
2026-08-05 18:38:21 +02:00
parent 1fda43b20d
commit 4ccc92c01f
15 changed files with 20 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/article/ArticlePhotoTile.jsx
View File

@@ -78,7 +78,7 @@ class ArticlePhotoTile extends Component {
wide = 1,
minHeight = 200,
sx,
tileKey,
color,
} = this.props;
const { busy, editOpen } = this.state;
const photo = primaryPhoto(articleData);
@@ -90,7 +90,7 @@ class ArticlePhotoTile extends Component {
wide={wide}
minHeight={minHeight}
sx={sx}
tileKey={tileKey}
color={color}
action={
hasPhoto
? {

4
src/components/article/ArticleTileTab.jsx
View File

@@ -123,7 +123,6 @@ class ArticleTileTab extends Component {
wide = 3,
minHeight = 200,
sx,
tileKey,
tab = DEFAULT_ARTICLE_TAB,
} = this.props;
const { preferredTab } = this.state;
@@ -255,12 +254,11 @@ class ArticleTileTab extends Component {
<PanelTile
wide={wide}
minHeight={minHeight}
tileKey={tileKey}
color={activeColor}
elevation={0}
sx={{
gridColumn: 'auto',
width: '100%',
bgcolor: activeColor,
borderTopLeftRadius: 0,
borderTopRightRadius: (theme) =>
`${(theme.shape.borderRadius || 4) * PANEL_TILE_BORDER_RADIUS}px`,

30
src/components/article/ArticleView.jsx
View File

@@ -1,7 +1,6 @@
import { Component } from 'react';
import { PanelTileGrid } from '../panels';
import { StorageManagerContext } from '../../api/storageManagerContext';
import { PANEL_TILE_KEYS } from '../../theme';
import withNavigate from '../withNavigate';
import {
buildCategoryPath,
@@ -54,11 +53,6 @@ class ArticleView extends Component {
}
}
handleArticleUpdated = (next) => {
this.context.setArticle(next);
this.setState({ article: next });
};
handleArticleDeleted = () => {
const { navigate } = this.props;
const { article, categories, rootCategoryId } = this.state;
@@ -87,39 +81,25 @@ class ArticleView extends Component {
return (
<PanelTileGrid>
<ArticleViewName
article={article}
onArticleUpdated={this.handleArticleUpdated}
/>
<ArticleViewName article={article} />
<ArticlePhotoTile
wide={1}
tileKey={PANEL_TILE_KEYS.photo}
color="#fde68a"
sx={{ minHeight: 0 }}
article={article}
onArticleUpdated={this.handleArticleUpdated}
/>
<ArticleViewStock article={article} />
<ArticleViewBrand
article={article}
onArticleUpdated={this.handleArticleUpdated}
/>
<ArticleViewBrand article={article} />
<ArticleViewEANs
article={article}
onArticleUpdated={this.handleArticleUpdated}
/>
<ArticleViewEANs article={article} />
<ArticleViewPrice
article={article}
onArticleUpdated={this.handleArticleUpdated}
/>
<ArticleViewPrice article={article} />
<ArticleTileTab
wide={3}
tileKey={PANEL_TILE_KEYS.content}
minHeight={200}
article={article}
tab={resolvedTab}

1
src/components/article/boxes/ArticleViewBrand.jsx
View File

@@ -141,6 +141,7 @@ export default class ArticleViewBrand extends Component {
<EditablePanelTile
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#e9d5ff"
value={value}
onSave={this.handleSave}
isDirty={brandDraftDirty}

1
src/components/article/boxes/ArticleViewEANs.jsx
View File

@@ -105,6 +105,7 @@ export default class ArticleViewEANs extends Component {
<EditablePanelTile
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#e2e8f0"
contentAlignItems="flex-start"
value={value}
onSave={this.handleSave}

2
src/components/article/boxes/ArticleViewLists.jsx
View File

@@ -39,7 +39,7 @@ export default class ArticleViewLists extends Component {
render() {
const { article: articleData } = this.props;
return (
<PanelTile wide={1} minHeight={200}>
<PanelTile wide={1} minHeight={200} color="#fbcfe8">
<RelationLine label="Vaterartikel" active={articleData.childCount > 0}>
{articleData.childCount}
</RelationLine>

1
src/components/article/boxes/ArticleViewName.jsx
View File

@@ -239,6 +239,7 @@ export default class ArticleViewName extends Component {
wide={3}
minHeight={0}
sx={headerTileSx}
color="#ffffff"
value={value}
onSave={this.handleSave}
isDirty={draftDirty}

1
src/components/article/boxes/ArticleViewPrice.jsx
View File

@@ -506,6 +506,7 @@ export default class ArticleViewPrice extends Component {
<EditablePanelTile
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#bfdbfe"
contentAlignItems="flex-start"
value={priceValue}
onSave={this.handleSave}

2
src/components/article/boxes/ArticleViewStock.jsx
View File

@@ -29,7 +29,7 @@ export default class ArticleViewStock extends Component {
render() {
const { article: articleData } = this.props;
return (
<PanelTile wide={1} minHeight={SECOND_ROW_MIN_HEIGHT}>
<PanelTile wide={1} minHeight={SECOND_ROW_MIN_HEIGHT} color="#bbf7d0">
<PanelValue>
{articleData.stock != null ? formatStock(articleData.stock) : null}
</PanelValue>

4
src/components/panels/EditablePanelTile.jsx
View File

@@ -227,7 +227,7 @@ class EditablePanelTileBase extends Component {
wide = 1,
sx,
minHeight = 120,
tileKey,
color,
contentAlignItems = 'center',
} = this.props;
const { editing, error } = this.state;
@@ -243,7 +243,7 @@ class EditablePanelTileBase extends Component {
minHeight,
editing,
pending,
tileKey,
color,
theme,
})}
>

4
src/components/panels/PanelTile.jsx
View File

@@ -74,7 +74,7 @@ class PanelTileBase extends Component {
children,
sx,
minHeight = 120,
tileKey,
color,
action,
elevation = 4,
} = this.props;
@@ -87,7 +87,7 @@ class PanelTileBase extends Component {
wide,
sx,
minHeight,
tileKey,
color,
theme,
})}
>

11
src/components/panels/panelTileLayout.js
View File

@@ -29,11 +29,6 @@ export const tileActionIconSx = {
fontSize: 28,
};
export function panelTileBackground(theme, tileKey) {
if (!tileKey || !theme?.panelTiles) return undefined;
return theme.panelTiles[tileKey];
}
export const PANEL_TILE_BORDER_RADIUS = 4;
function tileRingBoxShadow(ringColor, elevationShadow) {
@@ -47,11 +42,9 @@ export function panelTilePaperSx({
minHeight = 120,
editing = false,
pending = false,
tileKey,
color,
theme,
}) {
const tileBg = panelTileBackground(theme, tileKey);
const elevationShadow = theme?.shadows?.[4];
const ringColor = pending
? PENDING_EDIT_BORDER
@@ -68,7 +61,7 @@ export function panelTilePaperSx({
flexDirection: 'column',
border: 'none',
borderRadius: PANEL_TILE_BORDER_RADIUS,
...(tileBg ? { bgcolor: tileBg } : {}),
...(color ? { bgcolor: color } : {}),
...(ringColor
? {
boxShadow: tileRingBoxShadow(ringColor, elevationShadow),

1
src/theme/index.js
View File

@@ -1,4 +1,3 @@
export { PANEL_TILE_KEYS } from './panelTiles';
export {
getActiveTheme,
getActiveThemeId,

11
src/theme/panelTiles.js
View File

@@ -1,11 +0,0 @@
/** Semantic keys for article view panel tile backgrounds. */
export const PANEL_TILE_KEYS = {
name: 'name',
photo: 'photo',
stock: 'stock',
brand: 'brand',
identifiers: 'identifiers',
price: 'price',
content: 'content',
lists: 'lists',
};

13
src/theme/themes/default.js
View File

@@ -1,6 +1,5 @@
import { createTheme } from '@mui/material/styles';
import { MAIN_BACKGROUND } from '../../colors';
import { PANEL_TILE_KEYS } from '../panelTiles';
const nav = {
background: '#1a3533',
@@ -13,17 +12,6 @@ const nav = {
itemActiveAccent: '#2dd4bf',
};
const panelTiles = {
[PANEL_TILE_KEYS.name]: '#ffffff',
[PANEL_TILE_KEYS.photo]: '#fde68a',
[PANEL_TILE_KEYS.stock]: '#bbf7d0',
[PANEL_TILE_KEYS.brand]: '#e9d5ff',
[PANEL_TILE_KEYS.identifiers]: '#e2e8f0',
[PANEL_TILE_KEYS.price]: '#bfdbfe',
[PANEL_TILE_KEYS.content]: '#99f6e4',
[PANEL_TILE_KEYS.lists]: '#fbcfe8',
};
export const defaultThemeId = 'default';
export function createDefaultTheme() {
@@ -37,6 +25,5 @@ export function createDefaultTheme() {
},
},
nav,
panelTiles,
});
}