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

Improve UI, start refactoring colors

Browse Source
This commit is contained in:
IRBorisov 2023-08-27 00:19:19 +03:00
parent 337c037e99
commit 2feebec64d
20 changed files with 276 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/settings.json vendored
View File

@ -29,5 +29,13 @@
"name": "django",
"depth": 5
}
],
"colorize.include": [".tsx", ".jsx", ".ts", ".js"],
"colorize.languages": [
"typescript",
"javascript",
"css",
"typescriptreact",
"javascriptreact"
]
}

2
README.md
View File

@ -53,7 +53,7 @@ This readme file is used mostly to document project dependencies
<summary>VS Code plugins</summary>
<pre>
- ESLint
-
- Colorize
</pre>
</details>

2
rsconcept/frontend/src/components/Footer.tsx
View File

@ -11,7 +11,7 @@ function Footer() {
<Link to='/manuals' tabIndex={-1}>Справка</Link> <br/>
</div>
<div className=''>
<a href={urls.concept} tabIndex={-1} className='underline'>Центр Концепт</a>
<p className='w-full text-center underline'><a href={urls.concept} tabIndex={-1} >Центр Концепт</a></p>
<p className='mt-0.5 text-center'>© 2023 ЦИВТ КОНЦЕПТ</p>
</div>
<div className='flex flex-col underline'>

98
rsconcept/frontend/src/components/GraphThemes.ts Normal file
View File

@ -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'
}
}
}

15
rsconcept/frontend/src/components/Help/InfoCstClass.tsx
View File

@ -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 (
<div className='flex flex-col gap-1'>
{ title && <h1>{title}</h1>}
{ [... mapCstClassInfo.values()].map(
(info, index) => {
{ [... mapCstClassInfo.entries()].map(
([cstClass, info], index) => {
return (
<p key={`${prefixes.cst_status_list}${index}`}>
<span className={`px-1 inline-block font-semibold min-w-[6.5rem] text-center border ${info.color}`}>
<span
className='px-1 inline-block font-semibold min-w-[6.5rem] text-center borde'
style={{backgroundColor: getCstClassColor(cstClass, colors)}}
>
{info.text}
</span>
<span> - </span>

14
rsconcept/frontend/src/components/Help/InfoCstStatus.tsx
View File

@ -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 (
<div className='flex flex-col gap-1'>
{ title && <h1>{title}</h1>}
{ [... mapStatusInfo.values()].map(
(info, index) => {
{ [... mapStatusInfo.entries()].map(
([status, info], index) => {
return (
<p key={`${prefixes.cst_status_list}${index}`}>
<span className={`px-1 inline-block font-semibold min-w-[4rem] text-center border ${info.color}`}>
<span
className='px-1 inline-block font-semibold min-w-[4rem] text-center border'
style={{backgroundColor: getCstStatusColor(status, colors)}}
>
{info.text}
</span>
<span> - </span>

19
rsconcept/frontend/src/context/LibraryContext.tsx
View File

@ -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]);

9
rsconcept/frontend/src/context/ThemeContext.tsx
View File

@ -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<IColorTheme>(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 (
<ThemeContext.Provider value={{
darkMode,
darkMode, colors,
noNavigation,
toggleDarkMode: () => setDarkMode(prev => !prev),
toggleNoNavigation: () => setNoNavigation(prev => !prev),

30
rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
View File

@ -6,15 +6,29 @@ import { useAuth } from '../../context/AuthContext';
import { ILibraryFilter } from '../../utils/models';
interface SearchPanelProps {
filter: ILibraryFilter
setFilter: React.Dispatch<React.SetStateAction<ILibraryFilter>>
}
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<HTMLInputElement>) {
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 (
<div className='sticky top-0 left-0 right-0 z-10 flex justify-center w-full border-b clr-bg-pop'>
<div className='relative w-96'>
<div className='sticky top-0 left-0 right-0 z-10 flex justify-center w-full border-b clr-input'>
<div className='relative w-96 min-w-[10rem]'>
<div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none'>
<MagnifyingGlassIcon />
</div>
<input
type='text'
value={query}
className='w-full p-2 pl-10 text-sm outline-none clr-bg-pop border-x clr-border'
className='w-full p-2 pl-10 text-sm outline-none clr-input border-x clr-border'
placeholder='Поиск схемы...'
onChange={data => setQuery(data.target.value)}
onChange={handleChangeQuery}
/>
</div>
</div>

13
rsconcept/frontend/src/pages/LibraryPage/index.tsx
View File

@ -10,13 +10,13 @@ import ViewLibrary from './ViewLibrary';
function LibraryPage() {
const library = useLibrary();
const [ filterParams, setFilterParams ] = useState<ILibraryFilter>({});
const [ filter, setFilter ] = useState<ILibraryFilter>({});
const [ items, setItems ] = useState<ILibraryItem[]>([]);
useLayoutEffect(() => {
const filter = filterParams;
useLayoutEffect(
() => {
setItems(library.filter(filter));
}, [library, filterParams]);
}, [library, filter, filter.query]);
return (
<div className='w-full'>
@ -25,11 +25,10 @@ function LibraryPage() {
{ !library.loading && library.items &&
<div className='flex flex-col w-full'>
<SearchPanel
filter={filterParams}
setFilter={setFilterParams}
setFilter={setFilter}
/>
<ViewLibrary
cleanQuery={() => setFilterParams({})}
cleanQuery={() => setFilter({})}
items={items}
/>
</div>

9
rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
View File

@ -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<number[]>([]);
const nothingSelected = useMemo(() => selected.length === 0, [selected]);
@ -180,7 +182,8 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
return (<>
<div
id={`${prefixes.cst_list}${cst.alias}`}
className={`w-full rounded-md text-center ${info.color}`}
className='w-full text-center rounded-md'
style={{backgroundColor: getCstStatusColor(cst.status, colors)}}
>
{cst.alias}
</div>
@ -248,7 +251,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
reorder: true,
hide: 1800
}
], []);
], [colors]);
return (
<div className='w-full'>

2
rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
View File

@ -79,7 +79,7 @@ function EditorRSForm({ onDestroy, onClaim, onShare, onDownload }: EditorRSFormP
};
return (
<form onSubmit={handleSubmit} className='flex-grow max-w-xl px-4 py-2 border min-w-fit'>
<form onSubmit={handleSubmit} className='flex-grow max-w-[34.7rem] px-4 py-2 border min-w-fit'>
<div className='relative w-full'>
<div className='absolute top-0 right-0 flex'>
<MiniButton

33
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
View File

@ -1,6 +1,6 @@
import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { darkTheme, GraphCanvas, GraphCanvasRef, GraphEdge,
GraphNode, LayoutTypes, lightTheme, Sphere, useSelection
import { GraphCanvas, GraphCanvasRef, GraphEdge,
GraphNode, LayoutTypes, Sphere, useSelection
} from 'reagraph';
import Button from '../../components/Common/Button';
@ -9,12 +9,14 @@ import ConceptSelect from '../../components/Common/ConceptSelect';
import ConceptTooltip from '../../components/Common/ConceptTooltip';
import Divider from '../../components/Common/Divider';
import MiniButton from '../../components/Common/MiniButton';
import { darkTheme, lightTheme } from '../../components/GraphThemes';
import HelpTermGraph from '../../components/Help/HelpTermGraph';
import InfoConstituenta from '../../components/Help/InfoConstituenta';
import { ArrowsRotateIcon, DumpBinIcon, FilterCogIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
import { useRSForm } from '../../context/RSFormContext';
import { useConceptTheme } from '../../context/ThemeContext';
import useLocalStorage from '../../hooks/useLocalStorage';
import { IColorTheme } from '../../utils/color';
import { prefixes, resources } from '../../utils/constants';
import { Graph } from '../../utils/Graph';
import { CstType, IConstituenta, ICstCreateData } from '../../utils/models';
@ -28,12 +30,12 @@ import ConstituentaTooltip from './elements/ConstituentaTooltip';
export type ColoringScheme = 'none' | 'status' | 'type';
const TREE_SIZE_MILESTONE = 50;
function getCstNodeColor(cst: IConstituenta, coloringScheme: ColoringScheme, darkMode: boolean): string {
function getCstNodeColor(cst: IConstituenta, coloringScheme: ColoringScheme, darkMode: boolean, colors: IColorTheme): string {
if (coloringScheme === 'type') {
return getCstClassColor(cst.cstClass, darkMode);
return getCstClassColor(cst.cstClass, colors);
}
if (coloringScheme === 'status') {
return getCstStatusColor(cst.status, darkMode);
return getCstStatusColor(cst.status, colors);
}
return (darkMode ? '#7a8c9e' :'#7ca0ab');
}
@ -62,7 +64,7 @@ interface EditorTermGraphProps {
function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGraphProps) {
const { schema, isEditable } = useRSForm();
const { darkMode, noNavigation } = useConceptTheme();
const { darkMode, colors, noNavigation } = useConceptTheme();
const [ layout, setLayout ] = useLocalStorage<LayoutTypes>('graph_layout', 'treeTd2d');
const [ coloringScheme, setColoringScheme ] = useLocalStorage<ColoringScheme>('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}
/>}
<div className='flex flex-col border-t border-r max-w-[12.5rem] pr-2 pb-2 text-sm select-none' style={{height: canvasHeight}}>
<div className='flex flex-col border-r border-b min-w-[13rem] pr-2 pb-2 text-sm select-none clr-border' style={{height: canvasHeight}}>
{hoverCst &&
<div className='relative'>
<InfoConstituenta
@ -394,7 +396,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
onClick={() => setShowOptions(true)}
/>
<ConceptSelect
className='min-w-[9.3rem]'
className='min-w-[9.8rem]'
options={GraphColoringSelector}
searchable={false}
placeholder='Выберите цвет'
@ -441,7 +443,10 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
key={`${cst.alias}`}
id={`${prefixes.cst_list}${cst.alias}`}
className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer'
style={ { backgroundColor: getCstNodeColor(cst, adjustedColoring, darkMode), ...dismissedStyle(cstID) }}
style={{
backgroundColor: getCstNodeColor(cst, adjustedColoring, darkMode, colors),
...dismissedStyle(cstID)
}}
onClick={() => toggleDismissed(cstID)}
onDoubleClick={() => onOpenEdit(cstID)}
>
@ -458,7 +463,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
</div>
<div className='w-full h-full overflow-auto'>
<div
className='relative border-r border-y'
className='relative'
style={{width: canvasWidth, height: canvasHeight, borderBottomWidth: noNavigation ? '1px': ''}}
>
<div className='relative top-0 right-0 z-10 flex mt-1 ml-2 flex-start'>

2
rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
View File

@ -283,7 +283,7 @@ function RSTabs() {
defaultFocus={true}
selectedTabClassName='font-bold'
>
<TabList className='flex items-start pl-2 select-none w-fit clr-bg-pop'>
<TabList className='flex items-start pl-2 border-b select-none w-fit clr-bg-pop clr-border'>
<RSTabsMenu
onDownload={onDownloadSchema}
onDestroy={onDestroySchema}

8
rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx
View File

@ -1,7 +1,8 @@
import { useMemo } from 'react';
import { useConceptTheme } from '../../../context/ThemeContext';
import { ExpressionStatus, type IConstituenta, IExpressionParse,inferStatus, ParsingStatus } from '../../../utils/models';
import { mapStatusInfo } from '../../../utils/staticUI';
import { getCstStatusColor, mapStatusInfo } from '../../../utils/staticUI';
interface StatusBarProps {
isModified?: boolean
@ -10,6 +11,7 @@ interface StatusBarProps {
}
function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
const { colors } = useConceptTheme();
const status = useMemo(() => {
if (isModified) {
return ExpressionStatus.UNKNOWN;
@ -24,7 +26,9 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
const data = mapStatusInfo.get(status)!;
return (
<div title={data.tooltip}
className={`text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle ${data.color}`}>
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} ]
</div>
)

14
rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
View File

@ -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 (<>
<div
id={`${prefixes.cst_list}${cst.alias}`}
className={`w-full rounded-md text-center ${info.color}`}
className='w-full text-center rounded-md'
style={{backgroundColor: getCstStatusColor(cst.status, colors)}}
>
{cst.alias}
</div>
@ -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 (<>
<div className='sticky top-0 left-0 right-0 z-10 flex items-start justify-between w-full gap-1 px-2 py-1 bg-white border-b rounded clr-bg-pop clr-border'>
<div className='sticky top-0 left-0 right-0 z-10 flex items-start justify-between w-full gap-1 px-2 py-1 border-b rounded clr-input clr-border'>
<MatchModePicker
value={filterMatch}
onChange={setFilterMatch}
/>
<input type='text'
className='w-full px-2 bg-white outline-none select-none hover:text-clip clr-bg-pop'
className='w-full px-2 outline-none select-none hover:text-clip clr-input'
placeholder='наберите текст фильтра'
value={filterText}
onChange={event => setFilterText(event.target.value)}

2
rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
View File

@ -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(
() => {

34
rsconcept/frontend/src/utils/color.ts Normal file
View File

@ -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',
};

7
rsconcept/frontend/src/utils/models.ts
View File

@ -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 ================

56
rsconcept/frontend/src/utils/staticUI.ts
View File

@ -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<ExpressionStatus, IFormatInfo> = new Map([
export const mapStatusInfo: Map<ExpressionStatus, IDescriptor> = 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<HelpTopic, ITopicInfo> = new Map([
export const mapTopicInfo: Map<HelpTopic, IDescriptor> = new Map([
[ HelpTopic.MAIN, {
text: 'Портал',
tooltip: 'Общая справка по порталу'
@ -406,34 +390,30 @@ export const mapTopicInfo: Map<HelpTopic, ITopicInfo> = 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<CstClass, IFormatInfo> = new Map([
export const mapCstClassInfo: Map<CstClass, IDescriptor> = 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: 'параметризованный шаблон определения'
}],
]);