ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

M: Improve coloring of constituents and statuses

Browse Source
This commit is contained in:
Ivan 2024-09-23 11:48:13 +03:00
parent 990b340705
commit 00a1deda32
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
View File

@ -1,6 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { IConstituenta } from '@/models/rsform'; import { CstClass, IConstituenta } from '@/models/rsform';
import { isMockCst } from '@/models/rsformAPI'; import { isMockCst } from '@/models/rsformAPI';
import { colorFgCstStatus, IColorTheme } from '@/styling/color'; import { colorFgCstStatus, IColorTheme } from '@/styling/color';
@ -28,7 +28,11 @@ function BadgeConstituenta({ value, prefixID, className, style, theme }: BadgeCo
style={{ style={{
borderColor: colorFgCstStatus(value.status, theme), borderColor: colorFgCstStatus(value.status, theme),
color: colorFgCstStatus(value.status, theme), color: colorFgCstStatus(value.status, theme),
backgroundColor: isMockCst(value) ? theme.bgWarning : theme.bgInput, backgroundColor: isMockCst(value)
? theme.bgWarning
: value.cst_class === CstClass.BASIC
? theme.bgGreen25
: theme.bgInput,
...style ...style
}} }}
> >

7
rsconcept/frontend/src/styling/color.ts
View File

@ -36,6 +36,7 @@ export interface IColorTheme {
bgTeal: string; bgTeal: string;
bgOrange: string; bgOrange: string;
bgGreen25: string;
bgGreen50: string; bgGreen50: string;
bgOrange50: string; bgOrange50: string;
@ -77,6 +78,7 @@ export const lightT: IColorTheme = {
bgTeal: 'hsl(192, 089%, 081%)', bgTeal: 'hsl(192, 089%, 081%)',
bgOrange: 'hsl(028, 100%, 075%)', bgOrange: 'hsl(028, 100%, 075%)',
bgGreen25: 'hsl(100, 100%, 096%)',
bgGreen50: 'hsl(100, 100%, 090%)', bgGreen50: 'hsl(100, 100%, 090%)',
bgOrange50: 'hsl(028, 100%, 090%)', bgOrange50: 'hsl(028, 100%, 090%)',
@ -118,6 +120,7 @@ export const darkT: IColorTheme = {
bgTeal: 'hsl(192, 080%, 030%)', bgTeal: 'hsl(192, 080%, 030%)',
bgOrange: 'hsl(035, 100%, 035%)', bgOrange: 'hsl(035, 100%, 035%)',
bgGreen25: 'hsl(100, 080%, 009%)',
bgGreen50: 'hsl(100, 080%, 017%)', bgGreen50: 'hsl(100, 080%, 017%)',
bgOrange50: 'hsl(035, 100%, 016%)', bgOrange50: 'hsl(035, 100%, 016%)',
@ -382,11 +385,11 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
export function colorBgCstStatus(status: ExpressionStatus, colors: IColorTheme): string { export function colorBgCstStatus(status: ExpressionStatus, colors: IColorTheme): string {
// prettier-ignore // prettier-ignore
switch (status) { switch (status) {
case ExpressionStatus.VERIFIED: return colors.bgGreen; case ExpressionStatus.VERIFIED: return colors.bgGreen50;
case ExpressionStatus.INCORRECT: return colors.bgRed; case ExpressionStatus.INCORRECT: return colors.bgRed;
case ExpressionStatus.INCALCULABLE: return colors.bgOrange; case ExpressionStatus.INCALCULABLE: return colors.bgOrange;
case ExpressionStatus.PROPERTY: return colors.bgTeal; case ExpressionStatus.PROPERTY: return colors.bgTeal;
case ExpressionStatus.UNKNOWN: return colors.bgBlue; case ExpressionStatus.UNKNOWN: return colors.bgSelected;
case ExpressionStatus.UNDEFINED: return colors.bgBlue; case ExpressionStatus.UNDEFINED: return colors.bgBlue;
} }
} }