From 2feebec64ddab412923fdb1dd23627de615b1e8b Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Sun, 27 Aug 2023 00:19:19 +0300 Subject: [PATCH] Improve UI, start refactoring colors --- .vscode/settings.json | 8 ++ README.md | 2 +- rsconcept/frontend/src/components/Footer.tsx | 2 +- .../frontend/src/components/GraphThemes.ts | 98 +++++++++++++++++++ .../src/components/Help/InfoCstClass.tsx | 15 ++- .../src/components/Help/InfoCstStatus.tsx | 14 ++- .../frontend/src/context/LibraryContext.tsx | 19 ++-- .../frontend/src/context/ThemeContext.tsx | 9 +- .../src/pages/LibraryPage/SearchPanel.tsx | 30 ++++-- .../frontend/src/pages/LibraryPage/index.tsx | 13 ++- .../src/pages/RSFormPage/EditorItems.tsx | 9 +- .../src/pages/RSFormPage/EditorRSForm.tsx | 2 +- .../src/pages/RSFormPage/EditorTermGraph.tsx | 33 ++++--- .../frontend/src/pages/RSFormPage/RSTabs.tsx | 2 +- .../pages/RSFormPage/elements/StatusBar.tsx | 8 +- .../elements/ViewSideConstituents.tsx | 14 +-- .../src/pages/UserProfilePage/UserTabs.tsx | 2 +- rsconcept/frontend/src/utils/color.ts | 34 +++++++ rsconcept/frontend/src/utils/models.ts | 7 +- rsconcept/frontend/src/utils/staticUI.ts | 56 ++++------- 20 files changed, 276 insertions(+), 101 deletions(-) create mode 100644 rsconcept/frontend/src/components/GraphThemes.ts create mode 100644 rsconcept/frontend/src/utils/color.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f99defc..25dbb65d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -29,5 +29,13 @@ "name": "django", "depth": 5 } + ], + "colorize.include": [".tsx", ".jsx", ".ts", ".js"], + "colorize.languages": [ + "typescript", + "javascript", + "css", + "typescriptreact", + "javascriptreact" ] } \ No newline at end of file diff --git a/README.md b/README.md index 5dee022a..062a43b8 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ This readme file is used mostly to document project dependencies VS Code plugins 
   - ESLint
-  - 
+  - Colorize
diff --git a/rsconcept/frontend/src/components/Footer.tsx b/rsconcept/frontend/src/components/Footer.tsx index c476ba77..feffc5e2 100644 --- a/rsconcept/frontend/src/components/Footer.tsx +++ b/rsconcept/frontend/src/components/Footer.tsx @@ -11,7 +11,7 @@ function Footer() { Справка
- Центр Концепт +

Центр Концепт

© 2023 ЦИВТ КОНЦЕПТ

diff --git a/rsconcept/frontend/src/components/GraphThemes.ts b/rsconcept/frontend/src/components/GraphThemes.ts new file mode 100644 index 00000000..039fff99 --- /dev/null +++ b/rsconcept/frontend/src/components/GraphThemes.ts @@ -0,0 +1,98 @@ +export const lightTheme = { + canvas: { + background: '#f9fafb', + }, + node: { + fill: '#7CA0AB', + activeFill: '#1DE9AC', + opacity: 1, + selectedOpacity: 1, + inactiveOpacity: 0.2, + label: { + color: '#2A6475', + stroke: '#fff', + activeColor: '#1DE9AC' + } + }, + lasso: { + border: '1px solid #55aaff', + background: 'rgba(75, 160, 255, 0.1)' + }, + ring: { + fill: '#D8E6EA', + activeFill: '#1DE9AC' + }, + edge: { + fill: '#D8E6EA', + activeFill: '#1DE9AC', + opacity: 1, + selectedOpacity: 1, + inactiveOpacity: 0.1, + label: { + stroke: '#fff', + color: '#2A6475', + activeColor: '#1DE9AC' + } + }, + arrow: { + fill: '#D8E6EA', + activeFill: '#1DE9AC' + }, + cluster: { + stroke: '#D8E6EA', + label: { + stroke: '#fff', + color: '#2A6475' + } + } +} + + +export const darkTheme = { + canvas: { + background: '#1f2937' + }, + node: { + fill: '#7A8C9E', + activeFill: '#1DE9AC', + opacity: 1, + selectedOpacity: 1, + inactiveOpacity: 0.2, + label: { + stroke: '#1E2026', + color: '#ACBAC7', + activeColor: '#1DE9AC' + } + }, + lasso: { + border: '1px solid #55aaff', + background: 'rgba(75, 160, 255, 0.1)' + }, + ring: { + fill: '#54616D', + activeFill: '#1DE9AC' + }, + edge: { + fill: '#474B56', + activeFill: '#1DE9AC', + opacity: 1, + selectedOpacity: 1, + inactiveOpacity: 0.1, + label: { + stroke: '#1E2026', + color: '#ACBAC7', + activeColor: '#1DE9AC' + } + }, + arrow: { + fill: '#474B56', + activeFill: '#1DE9AC' + }, + cluster: { + stroke: '#474B56', + label: { + stroke: '#1E2026', + color: '#ACBAC7' + } + } +} \ No newline at end of file diff --git a/rsconcept/frontend/src/components/Help/InfoCstClass.tsx b/rsconcept/frontend/src/components/Help/InfoCstClass.tsx index d1d39be3..262bd9a4 100644 --- a/rsconcept/frontend/src/components/Help/InfoCstClass.tsx +++ b/rsconcept/frontend/src/components/Help/InfoCstClass.tsx @@ -1,19 +1,26 @@ +import { useConceptTheme } from '../../context/ThemeContext'; import { prefixes } from '../../utils/constants'; -import { mapCstClassInfo } from '../../utils/staticUI'; +import { getCstClassColor, mapCstClassInfo } from '../../utils/staticUI'; interface InfoCstClassProps { title?: string } function InfoCstClass({ title }: InfoCstClassProps) { + const { colors } = useConceptTheme(); + return (
{ title &&

{title}

} - { [... mapCstClassInfo.values()].map( - (info, index) => { + { [... mapCstClassInfo.entries()].map( + ([cstClass, info], index) => { return (

- + {info.text} - diff --git a/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx b/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx index d2e05005..76599c60 100644 --- a/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx +++ b/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx @@ -1,19 +1,25 @@ +import { useConceptTheme } from '../../context/ThemeContext'; import { prefixes } from '../../utils/constants'; -import { mapStatusInfo } from '../../utils/staticUI'; +import { getCstStatusColor, mapStatusInfo } from '../../utils/staticUI'; interface InfoCstStatusProps { title?: string } function InfoCstStatus({ title }: InfoCstStatusProps) { + const { colors } = useConceptTheme(); + return (

{ title &&

{title}

} - { [... mapStatusInfo.values()].map( - (info, index) => { + { [... mapStatusInfo.entries()].map( + ([status, info], index) => { return (

- + {info.text} - diff --git a/rsconcept/frontend/src/context/LibraryContext.tsx b/rsconcept/frontend/src/context/LibraryContext.tsx index 5ff2c251..dcb8e1fe 100644 --- a/rsconcept/frontend/src/context/LibraryContext.tsx +++ b/rsconcept/frontend/src/context/LibraryContext.tsx @@ -43,16 +43,23 @@ export const LibraryState = ({ children }: LibraryStateProps) => { const filter = useCallback( (params: ILibraryFilter) => { let result = items; - if (params.ownedBy) { - result = result.filter(item => - item.owner === params.ownedBy - || user?.subscriptions.includes(item.id)); + if (params.is_owned) { + result = result.filter(item => item.owner === user?.id); } if (params.is_common !== undefined) { result = result.filter(item => item.is_common === params.is_common); } - if (params.queryMeta) { - result = result.filter(item => matchLibraryItem(params.queryMeta!, item)); + if (params.is_canonical !== undefined) { + result = result.filter(item => item.is_canonical === params.is_canonical); + } + if (params.is_subscribed !== undefined) { + result = result.filter(item => user?.subscriptions.includes(item.id)); + } + if (params.is_personal !== undefined) { + result = result.filter(item => user?.subscriptions.includes(item.id) || item.owner === user?.id); + } + if (params.query) { + result = result.filter(item => matchLibraryItem(params.query!, item)); } return result; }, [items, user]); diff --git a/rsconcept/frontend/src/context/ThemeContext.tsx b/rsconcept/frontend/src/context/ThemeContext.tsx index c7208b7e..2a308e5e 100644 --- a/rsconcept/frontend/src/context/ThemeContext.tsx +++ b/rsconcept/frontend/src/context/ThemeContext.tsx @@ -1,12 +1,14 @@ import { createContext, useContext, useLayoutEffect, useMemo, useState } from 'react'; import useLocalStorage from '../hooks/useLocalStorage'; +import { darkT, IColorTheme, lightT } from '../utils/color'; interface IThemeContext { darkMode: boolean noNavigation: boolean viewportHeight: string mainHeight: string + colors: IColorTheme toggleDarkMode: () => void toggleNoNavigation: () => void } @@ -28,6 +30,7 @@ interface ThemeStateProps { export const ThemeState = ({ children }: ThemeStateProps) => { const [darkMode, setDarkMode] = useLocalStorage('darkMode', false); + const [colors, setColors] = useState(lightT); const [noNavigation, setNoNavigation] = useState(false); const setDarkClass = (isDark: boolean) => { @@ -44,6 +47,10 @@ export const ThemeState = ({ children }: ThemeStateProps) => { setDarkClass(darkMode) }, [darkMode]); + useLayoutEffect(() => { + setColors(darkMode ? darkT : lightT) + }, [darkMode, setColors]); + const mainHeight = useMemo( () => { return !noNavigation ? @@ -60,7 +67,7 @@ export const ThemeState = ({ children }: ThemeStateProps) => { return ( setDarkMode(prev => !prev), toggleNoNavigation: () => setNoNavigation(prev => !prev), diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx index 532f20ca..765fe209 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx @@ -6,15 +6,29 @@ import { useAuth } from '../../context/AuthContext'; import { ILibraryFilter } from '../../utils/models'; interface SearchPanelProps { - filter: ILibraryFilter setFilter: React.Dispatch> } -function SearchPanel({ filter, setFilter }: SearchPanelProps) { +function SearchPanel({ setFilter }: SearchPanelProps) { const search = useLocation().search; const { user } = useAuth(); - const [query, setQuery] = useState('') + const [query, setQuery] = useState(''); + + function handleChangeQuery(event: React.ChangeEvent) { + const newQuery = event.target.value; + setQuery(newQuery); + setFilter(prev => { + return { + query: newQuery, + is_owned: prev.is_owned, + is_common: prev.is_common, + is_canonical: prev.is_canonical, + is_subscribed: prev.is_subscribed, + is_personal: prev.is_personal + }; + }); + } useLayoutEffect(() => { const filterType = new URLSearchParams(search).get('filter'); @@ -26,23 +40,23 @@ function SearchPanel({ filter, setFilter }: SearchPanelProps) { } else if (filterType === 'personal' && user) { setQuery(''); setFilter({ - ownedBy: user.id! + is_personal: true }); } }, [user, search, setQuery, setFilter]); return ( -

-
+
+
setQuery(data.target.value)} + onChange={handleChangeQuery} />
diff --git a/rsconcept/frontend/src/pages/LibraryPage/index.tsx b/rsconcept/frontend/src/pages/LibraryPage/index.tsx index 1c0f1974..7589d821 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/index.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/index.tsx @@ -10,13 +10,13 @@ import ViewLibrary from './ViewLibrary'; function LibraryPage() { const library = useLibrary(); - const [ filterParams, setFilterParams ] = useState({}); + const [ filter, setFilter ] = useState({}); const [ items, setItems ] = useState([]); - useLayoutEffect(() => { - const filter = filterParams; + useLayoutEffect( + () => { setItems(library.filter(filter)); - }, [library, filterParams]); + }, [library, filter, filter.query]); return (
@@ -25,11 +25,10 @@ function LibraryPage() { { !library.loading && library.items &&
setFilterParams({})} + cleanQuery={() => setFilter({})} items={items} />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx index 2bfebf0d..ee21a08e 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx @@ -8,9 +8,10 @@ import Divider from '../../components/Common/Divider'; import HelpRSFormItems from '../../components/Help/HelpRSFormItems'; import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons'; import { useRSForm } from '../../context/RSFormContext'; +import { useConceptTheme } from '../../context/ThemeContext'; import { prefixes } from '../../utils/constants'; import { CstType, IConstituenta, ICstCreateData, ICstMovetoData } from '../../utils/models' -import { getCstTypePrefix, getCstTypeShortcut, getCstTypificationLabel, mapStatusInfo } from '../../utils/staticUI'; +import { getCstStatusColor, getCstTypePrefix, getCstTypeShortcut, getCstTypificationLabel, mapStatusInfo } from '../../utils/staticUI'; interface EditorItemsProps { onOpenEdit: (cstID: number) => void @@ -19,6 +20,7 @@ interface EditorItemsProps { } function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps) { + const { colors } = useConceptTheme(); const { schema, isEditable, cstMoveTo, resetAliases } = useRSForm(); const [selected, setSelected] = useState([]); const nothingSelected = useMemo(() => selected.length === 0, [selected]); @@ -180,7 +182,8 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps) return (<>
{cst.alias}
@@ -248,7 +251,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps) reorder: true, hide: 1800 } - ], []); + ], [colors]); return (
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx index 4b56bccc..0e4a12e6 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx @@ -79,7 +79,7 @@ function EditorRSForm({ onDestroy, onClaim, onShare, onDownload }: EditorRSFormP }; return ( -
+
('graph_layout', 'treeTd2d'); const [ coloringScheme, setColoringScheme ] = useLocalStorage('graph_coloring', 'none'); @@ -171,13 +173,13 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra if (cst) { result.push({ id: String(node.id), - fill: getCstNodeColor(cst, coloringScheme, darkMode), + fill: getCstNodeColor(cst, coloringScheme, darkMode, colors), label: cst.term.resolved && !noTerms ? `${cst.alias}: ${cst.term.resolved}` : cst.alias }); } }); return result; - }, [schema, coloringScheme, filtered.nodes, darkMode, noTerms]); + }, [schema, coloringScheme, filtered.nodes, darkMode, noTerms, colors]); const edges: GraphEdge[] = useMemo( () => { @@ -337,8 +339,8 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra const canvasHeight = useMemo( () => { return !noNavigation ? - 'calc(100vh - 9.8rem)' - : 'calc(100vh - 1.8rem)'; + 'calc(100vh - 10.1rem)' + : 'calc(100vh - 2.1rem)'; }, [noNavigation]); const dismissedStyle = useCallback( @@ -354,7 +356,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra initial={getOptions()} onConfirm={handleChangeOptions} />} -
+
{hoverCst &&
setShowOptions(true)} /> toggleDismissed(cstID)} onDoubleClick={() => onOpenEdit(cstID)} > @@ -458,7 +463,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx index 7be5de4b..a69235f9 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx @@ -283,7 +283,7 @@ function RSTabs() { defaultFocus={true} selectedTabClassName='font-bold' > - + { if (isModified) { return ExpressionStatus.UNKNOWN; @@ -24,7 +26,9 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) { const data = mapStatusInfo.get(status)!; return (
+ className='text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle' + style={{backgroundColor: getCstStatusColor(status, colors)}} + > Статус: [ {data.text} ]
) diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx index 33bad802..fc1167c4 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx @@ -6,7 +6,7 @@ import { useConceptTheme } from '../../../context/ThemeContext'; import useLocalStorage from '../../../hooks/useLocalStorage'; import { prefixes } from '../../../utils/constants'; import { applyGraphFilter, CstMatchMode, CstType, DependencyMode, extractGlobals, IConstituenta, matchConstituenta } from '../../../utils/models'; -import { getCstDescription, getMockConstituenta, mapStatusInfo } from '../../../utils/staticUI'; +import { getCstDescription, getCstStatusColor, getMockConstituenta } from '../../../utils/staticUI'; import ConstituentaTooltip from './ConstituentaTooltip'; import DependencyModePicker from './DependencyModePicker'; import MatchModePicker from './MatchModePicker'; @@ -26,7 +26,7 @@ function isMockCst(cst: IConstituenta) { } function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }: ViewSideConstituentsProps) { - const { darkMode, noNavigation } = useConceptTheme(); + const { darkMode, noNavigation, colors } = useConceptTheme(); const { schema } = useRSForm(); const [filterMatch, setFilterMatch] = useLocalStorage('side-filter-match', CstMatchMode.ALL); @@ -97,11 +97,11 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }: name: 'ID', id: 'alias', cell: (cst: IConstituenta) => { - const info = mapStatusInfo.get(cst.status)!; return (<>
{cst.alias}
@@ -145,7 +145,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }: } ] } - ], []); + ], [colors]); const maxHeight = useMemo( () => { @@ -156,13 +156,13 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }: }, [noNavigation, baseHeight]); return (<> -
+
setFilterText(event.target.value)} diff --git a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx index a4a3f2e5..9a89bc98 100644 --- a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx +++ b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx @@ -16,7 +16,7 @@ function UserTabs() { const { user: auth } = useAuth(); const { items } = useLibrary(); - const [showSubs, setShowSubs] = useState(true); + const [showSubs, setShowSubs] = useState(false); const subscriptions = useMemo( () => { diff --git a/rsconcept/frontend/src/utils/color.ts b/rsconcept/frontend/src/utils/color.ts new file mode 100644 index 00000000..057c393e --- /dev/null +++ b/rsconcept/frontend/src/utils/color.ts @@ -0,0 +1,34 @@ +export interface IColorTheme { + red: string + green: string + blue: string + teal: string + orange: string + + // bg100: string + // bg70: string + // bg50: string + + // fg100: string + // fg70: string + // fg50: string + + // primary: string + // secondary: string +} + +export const lightT: IColorTheme = { + red: '#ffc9c9', + green: '#aaff80', + blue: '#b3bdff', + teal: '#a5e9fa', + orange: '#ffbb80', +}; + +export const darkT: IColorTheme = { + red: '#bf0d00', + green: '#2b8000', + blue: '#394bbf', + teal: '#0099bf', + orange: '#964600', +}; diff --git a/rsconcept/frontend/src/utils/models.ts b/rsconcept/frontend/src/utils/models.ts index 763d60f4..d72f79c5 100644 --- a/rsconcept/frontend/src/utils/models.ts +++ b/rsconcept/frontend/src/utils/models.ts @@ -282,9 +282,12 @@ export interface IRSFormUploadData { // ========== Library ===== export interface ILibraryFilter { - ownedBy?: number + query?: string + is_personal?: boolean + is_owned?: boolean is_common?: boolean - queryMeta?: string + is_canonical?: boolean + is_subscribed?: boolean } // ================ Misc types ================ diff --git a/rsconcept/frontend/src/utils/staticUI.ts b/rsconcept/frontend/src/utils/staticUI.ts index 4b4f4916..9678e00b 100644 --- a/rsconcept/frontend/src/utils/staticUI.ts +++ b/rsconcept/frontend/src/utils/staticUI.ts @@ -1,6 +1,7 @@ import { LayoutTypes } from 'reagraph'; import { ColoringScheme } from '../pages/RSFormPage/EditorTermGraph'; +import { IColorTheme } from './color'; import { resolveErrorClass,RSErrorClass, RSErrorType, TokenID } from './enums'; import { CstClass, CstMatchMode, CstType, @@ -9,18 +10,7 @@ import { ISyntaxTreeNode, ParsingStatus, ValueClass } from './models'; -export interface IRSButtonData { - text: string - tooltip: string -} - -export interface IFormatInfo { - text: string - color: string - tooltip: string -} - -export interface ITopicInfo { +export interface IDescriptor { text: string tooltip: string } @@ -64,7 +54,7 @@ export function getCstExpressionPrefix(cst: IConstituenta): string { return cst.alias + (cst.cstType === CstType.STRUCTURED ? '::=' : ':=='); } -export function getRSButtonData(id: TokenID): IRSButtonData { +export function getRSButtonData(id: TokenID): IDescriptor { switch (id) { case TokenID.BOOLEAN: return { text: 'ℬ()', @@ -323,51 +313,45 @@ export const GraphColoringSelector: {value: ColoringScheme, label: string}[] = [ { value: 'type', label: 'Цвет: класс'}, ]; -export function getCstStatusColor(status: ExpressionStatus, darkMode: boolean): string { +export function getCstStatusColor(status: ExpressionStatus, colors: IColorTheme): string { switch (status) { - case ExpressionStatus.VERIFIED: return darkMode ? '#2b8000': '#aaff80'; - case ExpressionStatus.INCORRECT: return darkMode ? '#592b2b': '#ffc9c9'; - case ExpressionStatus.INCALCULABLE: return darkMode ? '#964600': '#ffbb80'; - case ExpressionStatus.PROPERTY: return darkMode ? '#36899e': '#a5e9fa'; - case ExpressionStatus.UNKNOWN: return darkMode ? '#1e00b3': '#b3bdff'; - case ExpressionStatus.UNDEFINED: return darkMode ? '#1e00b3': '#b3bdff'; + case ExpressionStatus.VERIFIED: return colors.green; + case ExpressionStatus.INCORRECT: return colors.red; + case ExpressionStatus.INCALCULABLE: return colors.orange; + case ExpressionStatus.PROPERTY: return colors.teal; + case ExpressionStatus.UNKNOWN: return colors.blue; + case ExpressionStatus.UNDEFINED: return colors.blue; } } -export const mapStatusInfo: Map = new Map([ +export const mapStatusInfo: Map = new Map([ [ ExpressionStatus.VERIFIED, { text: 'ок', - color: 'bg-[#aaff80] dark:bg-[#2b8000]', tooltip: 'выражение корректно и вычислимо' }], [ ExpressionStatus.INCORRECT, { text: 'ошибка', - color: 'bg-[#ffc9c9] dark:bg-[#592b2b]', tooltip: 'ошибка в выражении' }], [ ExpressionStatus.INCALCULABLE, { text: 'невыч', - color: 'bg-[#ffbb80] dark:bg-[#964600]', tooltip: 'выражение не вычислимо' }], [ ExpressionStatus.PROPERTY, { text: 'св-во', - color: 'bg-[#a5e9fa] dark:bg-[#36899e]', tooltip: 'можно проверить принадлежность, но нельзя получить значение' }], [ ExpressionStatus.UNKNOWN, { text: 'неизв', - color: 'bg-[#b3bdff] dark:bg-[#1e00b3]', tooltip: 'требует проверки выражения' }], [ ExpressionStatus.UNDEFINED, { text: 'N/A', - color: 'bg-[#b3bdff] dark:bg-[#1e00b3]', tooltip: 'произошла ошибка при проверке выражения' }] ]); -export const mapTopicInfo: Map = new Map([ +export const mapTopicInfo: Map = new Map([ [ HelpTopic.MAIN, { text: 'Портал', tooltip: 'Общая справка по порталу' @@ -406,34 +390,30 @@ export const mapTopicInfo: Map = new Map([ }], ]); -export function getCstClassColor(cstClass: CstClass, darkMode: boolean): string { +export function getCstClassColor(cstClass: CstClass, colors: IColorTheme): string { switch (cstClass) { - case CstClass.TEMPLATE: return darkMode ? '#36899e': '#a5e9fa'; - case CstClass.BASIC: return darkMode ? '#2b8000': '#aaff80'; - case CstClass.DERIVED: return darkMode ? '#1e00b3': '#b3bdff'; - case CstClass.STATEMENT: return darkMode ? '#592b2b': '#ffc9c9'; + case CstClass.BASIC: return colors.green; + case CstClass.DERIVED: return colors.blue; + case CstClass.STATEMENT: return colors.red; + case CstClass.TEMPLATE: return colors.teal; } } -export const mapCstClassInfo: Map = new Map([ +export const mapCstClassInfo: Map = new Map([ [ CstClass.BASIC, { text: 'базовый', - color: 'bg-[#aaff80] dark:bg-[#2b8000]', tooltip: 'неопределяемое понятие, требует конвенции' }], [ CstClass.DERIVED, { text: 'производный', - color: 'bg-[#b3bdff] dark:bg-[#1e00b3]', tooltip: 'выводимое понятие, задаваемое определением' }], [ CstClass.STATEMENT, { text: 'утверждение', - color: 'bg-[#ffc9c9] dark:bg-[#592b2b]', tooltip: 'неопределяемое понятие, требует конвенции' }], [ CstClass.TEMPLATE, { text: 'шаблон', - color: 'bg-[#a5e9fa] dark:bg-[#36899e]', tooltip: 'параметризованный шаблон определения' }], ]);