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

Refactoring Icons

Browse Source
This commit is contained in:
IRBorisov 2024-06-06 22:01:28 +03:00
parent bc811cbf88
commit c786b54132
9 changed files with 50 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ function Footer() {
className={clsx(
'z-navigation',
'mx-auto',
'sm:px-4 sm:py-2 flex flex-col items-center gap-1',
'px-3 py-2 flex flex-col items-center gap-1',
'text-xs sm:text-sm select-none whitespace-nowrap'
)}
>

52
rsconcept/frontend/src/components/DomainIcons.tsx
View File

@ -1,5 +1,6 @@
import { AccessPolicy, LibraryItemType, LocationHead } from '@/models/library';
import { CstMatchMode, DependencyMode } from '@/models/miscellaneous';
import { ExpressionStatus } from '@/models/rsform';
import {
IconAlias,
@ -21,6 +22,10 @@ import {
IconRSForm,
IconSettings,
IconShow,
IconStatusError,
IconStatusIncalculable,
IconStatusOK,
IconStatusUnknown,
IconTemplates,
IconTerm,
IconText,
@ -80,34 +85,51 @@ export function LocationIcon({ value, size = '1.25rem', className }: DomIconProp
}
}
export function DependencyIcon(mode: DependencyMode, size: string, color?: string) {
switch (mode) {
export function DependencyIcon({ value, size = '1.25rem', className }: DomIconProps<DependencyMode>) {
switch (value) {
case DependencyMode.ALL:
return <IconSettings size={size} className={color} />;
return <IconSettings size={size} className={className} />;
case DependencyMode.EXPRESSION:
return <IconText size={size} className={color} />;
return <IconText size={size} className={className ?? 'clr-text-primary'} />;
case DependencyMode.OUTPUTS:
return <IconGraphOutputs size={size} className={color} />;
return <IconGraphOutputs size={size} className={className ?? 'clr-text-primary'} />;
case DependencyMode.INPUTS:
return <IconGraphInputs size={size} className={color} />;
return <IconGraphInputs size={size} className={className ?? 'clr-text-primary'} />;
case DependencyMode.EXPAND_OUTPUTS:
return <IconGraphExpand size={size} className={color} />;
return <IconGraphExpand size={size} className={className ?? 'clr-text-primary'} />;
case DependencyMode.EXPAND_INPUTS:
return <IconGraphCollapse size={size} className={color} />;
return <IconGraphCollapse size={size} className={className ?? 'clr-text-primary'} />;
}
}
export function MatchModeIcon(mode: CstMatchMode, size: string, color?: string) {
switch (mode) {
export function MatchModeIcon({ value, size = '1.25rem', className }: DomIconProps<CstMatchMode>) {
switch (value) {
case CstMatchMode.ALL:
return <IconFilter size={size} className={color} />;
return <IconFilter size={size} className={className} />;
case CstMatchMode.TEXT:
return <IconText size={size} className={color} />;
return <IconText size={size} className={className ?? 'clr-text-primary'} />;
case CstMatchMode.EXPR:
return <IconFormula size={size} className={color} />;
return <IconFormula size={size} className={className ?? 'clr-text-primary'} />;
case CstMatchMode.TERM:
return <IconTerm size={size} className={color} />;
return <IconTerm size={size} className={className ?? 'clr-text-primary'} />;
case CstMatchMode.NAME:
return <IconAlias size={size} className={color} />;
return <IconAlias size={size} className={className ?? 'clr-text-primary'} />;
}
}
export function StatusIcon({ value, size = '1.25rem', className }: DomIconProps<ExpressionStatus>) {
switch (value) {
case ExpressionStatus.VERIFIED:
case ExpressionStatus.PROPERTY:
return <IconStatusOK size={size} className={className} />;
case ExpressionStatus.UNKNOWN:
return <IconStatusUnknown size={size} className={className} />;
case ExpressionStatus.INCALCULABLE:
return <IconStatusIncalculable size={size} className={className} />;
case ExpressionStatus.INCORRECT:
case ExpressionStatus.UNDEFINED:
return <IconStatusError size={size} className={className} />;
}
}

4
rsconcept/frontend/src/components/select/SelectGraphFilter.tsx
View File

@ -39,7 +39,7 @@ function SelectGraphFilter({ value, dense, onChange }: SelectGraphFilterProps) {
title='Настройка фильтрации по графу термов'
hideTitle={menu.isOpen}
className='h-full pr-2'
icon={DependencyIcon(value, '1rem', value !== DependencyMode.ALL ? 'icon-primary' : '')}
icon={<DependencyIcon value={value} size='1rem' />}
text={dense || size.isSmall ? undefined : labelCstSource(value)}
onClick={menu.toggle}
/>
@ -55,7 +55,7 @@ function SelectGraphFilter({ value, dense, onChange }: SelectGraphFilterProps) {
onClick={() => handleChange(source)}
>
<div className='inline-flex items-center gap-1'>
{DependencyIcon(source, '1rem')}
{<DependencyIcon value={source} size='1rem' />}
{!dense ? (
<span>
<b>{labelCstSource(source)}:</b> {describeCstSource(source)}

4
rsconcept/frontend/src/components/select/SelectMatchMode.tsx
View File

@ -38,7 +38,7 @@ function SelectMatchMode({ value, dense, onChange }: SelectMatchModeProps) {
title='Настройка фильтрации по проверяемым атрибутам'
hideTitle={menu.isOpen}
className='h-full pr-2'
icon={MatchModeIcon(value, '1rem', value !== CstMatchMode.ALL ? 'icon-primary' : '')}
icon={<MatchModeIcon value={value} size='1rem' />}
text={dense || size.isSmall ? undefined : labelCstMatchMode(value)}
onClick={menu.toggle}
/>
@ -54,7 +54,7 @@ function SelectMatchMode({ value, dense, onChange }: SelectMatchModeProps) {
onClick={() => handleChange(matchMode)}
>
<div className='inline-flex items-center gap-1'>
{MatchModeIcon(matchMode, '1rem')}
{<MatchModeIcon value={matchMode} size='1rem' />}
{!dense ? (
<span>
<b>{labelCstMatchMode(matchMode)}:</b> {describeCstMatchMode(matchMode)}

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

@ -79,7 +79,7 @@ function SearchPanel({
'clr-input'
)}
>
<div className={clsx('px-3 self-center', 'min-w-[5.5rem]', 'select-none', 'whitespace-nowrap')}>
<div className={clsx('px-3 pt-1 self-center', 'min-w-[5.5rem]', 'select-none', 'whitespace-nowrap')}>
{filtered} из {total}
</div>

5
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
View File

@ -4,6 +4,7 @@ import clsx from 'clsx';
import { AnimatePresence } from 'framer-motion';
import { useMemo } from 'react';
import { StatusIcon } from '@/components/DomainIcons';
import Loader from '@/components/ui/Loader';
import { useConceptOptions } from '@/context/OptionsContext';
import { ExpressionStatus } from '@/models/rsform';
@ -14,8 +15,6 @@ import { colorBgCstStatus } from '@/styling/color';
import { globals } from '@/utils/constants';
import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
import StatusIcon from './StatusIcon';
interface StatusBarProps {
processing?: boolean;
isModified?: boolean;
@ -58,7 +57,7 @@ function StatusBar({ isModified, processing, constituenta, parseData, onAnalyze
{processing ? <Loader key='status-loader' size={3} /> : null}
{!processing ? (
<>
<StatusIcon key='status-icon' status={status} />
<StatusIcon key='status-icon' size='1rem' value={status} />
<span key='status-text' className='pb-[0.125rem] font-controls pr-2'>
{labelExpressionStatus(status)}
</span>

22
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusIcon.tsx
View File

@ -1,22 +0,0 @@
'use client';
import { IconStatusError, IconStatusIncalculable, IconStatusOK, IconStatusUnknown } from '@/components/Icons';
import { ExpressionStatus } from '@/models/rsform';
interface StatusIconProps {
status: ExpressionStatus;
}
function StatusIcon({ status }: StatusIconProps) {
if (status === ExpressionStatus.VERIFIED || status === ExpressionStatus.PROPERTY) {
return <IconStatusOK size='1rem' />;
} else if (status === ExpressionStatus.UNKNOWN) {
return <IconStatusUnknown size='1rem' />;
} else if (status === ExpressionStatus.INCALCULABLE) {
return <IconStatusIncalculable size='1rem' />;
} else {
return <IconStatusError size='1rem' />;
}
}
export default StatusIcon;

18
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/FocusToolbar.tsx
View File

@ -36,7 +36,7 @@ function FocusToolbar({
}, [reset, controller]);
return (
<div className='cc-icons items-center'>
<div className='items-center cc-icons'>
<div className='w-[7.8rem] text-right select-none' style={{ color: colors.fgPurple }}>
Фокус
<b className='px-1'> {center.alias} </b>
@ -48,24 +48,12 @@ function FocusToolbar({
/>
<MiniButton
title={showInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
icon={
showInputs ? (
<IconGraphInputs size='1.25rem' className='icon-green' />
) : (
<IconGraphInputs size='1.25rem' className='icon-primary' />
)
}
icon={<IconGraphInputs size='1.25rem' className={showInputs ? 'icon-green' : 'icon-primary'} />}
onClick={toggleShowInputs}
/>
<MiniButton
title={showOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
icon={
showOutputs ? (
<IconGraphOutputs size='1.25rem' className='icon-green' />
) : (
<IconGraphOutputs size='1.25rem' className='icon-primary' />
)
}
icon={<IconGraphOutputs size='1.25rem' className={showOutputs ? 'icon-green' : 'icon-primary'} />}
onClick={toggleShowOutputs}
/>
</div>

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

@ -3,7 +3,7 @@
import { AnimatePresence } from 'framer-motion';
import { useMemo, useState } from 'react';
import { IconFollow, IconFollowOff } from '@/components/Icons';
import { SubscribeIcon } from '@/components/DomainIcons';
import MiniButton from '@/components/ui/MiniButton';
import Overlay from '@/components/ui/Overlay';
import AnimateFade from '@/components/wrap/AnimateFade';
@ -39,13 +39,7 @@ function UserTabs() {
<Overlay position='top-0 right-0'>
<MiniButton
title='Отслеживаемые схемы'
icon={
showSubs ? (
<IconFollow size='1.25rem' className='icon-primary' />
) : (
<IconFollowOff size='1.25rem' className='icon-primary' />
)
}
icon={<SubscribeIcon value={showSubs} className='icon-primary' />}
onClick={() => setShowSubs(prev => !prev)}
/>
</Overlay>