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 (
-
-
+
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 (
-