Refactor icons

This commit is contained in:
IRBorisov 2024-05-02 19:13:54 +03:00
parent 361e88e35b
commit ff48364536
6 changed files with 78 additions and 45 deletions

View File

@ -1,6 +1,7 @@
// Search new icons at https://reactsvgicons.com/ // Search new icons at https://reactsvgicons.com/
// ==== General actions ======= // ==== General actions =======
export { BiMenu as IconMenu } from 'react-icons/bi';
export { LuLogOut as IconLogout } from 'react-icons/lu'; export { LuLogOut as IconLogout } from 'react-icons/lu';
export { FiSave as IconSave } from 'react-icons/fi'; export { FiSave as IconSave } from 'react-icons/fi';
export { BiCheck as IconAccept } from 'react-icons/bi'; export { BiCheck as IconAccept } from 'react-icons/bi';
@ -8,6 +9,7 @@ export { BiX as IconRemove } from 'react-icons/bi';
export { BiTrash as IconDestroy } from 'react-icons/bi'; export { BiTrash as IconDestroy } from 'react-icons/bi';
export { BiReset as IconReset } from 'react-icons/bi'; export { BiReset as IconReset } from 'react-icons/bi';
export { LiaEdit as IconEdit } from 'react-icons/lia'; export { LiaEdit as IconEdit } from 'react-icons/lia';
export { FiEdit as IconEdit2 } from 'react-icons/fi';
export { BiSearchAlt2 as IconSearch } from 'react-icons/bi'; export { BiSearchAlt2 as IconSearch } from 'react-icons/bi';
export { BiDownload as IconDownload } from 'react-icons/bi'; export { BiDownload as IconDownload } from 'react-icons/bi';
export { BiUpload as IconUpload } from 'react-icons/bi'; export { BiUpload as IconUpload } from 'react-icons/bi';
@ -15,6 +17,7 @@ export { BiCog as IconSettings } from 'react-icons/bi';
export { BiShareAlt as IconShare } from 'react-icons/bi'; export { BiShareAlt as IconShare } from 'react-icons/bi';
export { BiFilterAlt as IconFilter } from 'react-icons/bi'; export { BiFilterAlt as IconFilter } from 'react-icons/bi';
export { BiDownArrowCircle as IconOpenList } from 'react-icons/bi'; export { BiDownArrowCircle as IconOpenList } from 'react-icons/bi';
export { LuAlertTriangle as IconAlert } from 'react-icons/lu';
// ===== UI elements ======= // ===== UI elements =======
export { BiX as IconClose } from 'react-icons/bi'; export { BiX as IconClose } from 'react-icons/bi';
@ -30,6 +33,10 @@ export { RiPushpinFill as IconPin } from 'react-icons/ri';
export { RiUnpinLine as IconUnpin } from 'react-icons/ri'; export { RiUnpinLine as IconUnpin } from 'react-icons/ri';
export { BiCaretDown as IconSortDesc } from 'react-icons/bi'; export { BiCaretDown as IconSortDesc } from 'react-icons/bi';
export { BiCaretUp as IconSortAsc } from 'react-icons/bi'; export { BiCaretUp as IconSortAsc } from 'react-icons/bi';
export { BiChevronLeft as IconPageLeft } from 'react-icons/bi';
export { BiChevronRight as IconPageRight } from 'react-icons/bi';
export { BiFirstPage as IconPageFirst } from 'react-icons/bi';
export { BiLastPage as IconPageLast } from 'react-icons/bi';
// ==== User status ======= // ==== User status =======
export { LuUserCircle2 as IconUser } from 'react-icons/lu'; export { LuUserCircle2 as IconUser } from 'react-icons/lu';
@ -40,7 +47,10 @@ export { TbMeteorOff as IconAdminOff } from 'react-icons/tb';
export { LuGlasses as IconReader } from 'react-icons/lu'; export { LuGlasses as IconReader } from 'react-icons/lu';
// ===== Domain entities ======= // ===== Domain entities =======
export { VscLibrary as IconLibrary } from 'react-icons/vsc';
export { IoLibrary as IconLibrary2 } from 'react-icons/io5'; export { IoLibrary as IconLibrary2 } from 'react-icons/io5';
export { BiDiamond as IconTemplates } from 'react-icons/bi';
export { LuArchive as IconArchive } from 'react-icons/lu';
export { LuDatabase as IconDatabase } from 'react-icons/lu'; export { LuDatabase as IconDatabase } from 'react-icons/lu';
export { LuImage as IconImage } from 'react-icons/lu'; export { LuImage as IconImage } from 'react-icons/lu';
export { TbColumns as IconList } from 'react-icons/tb'; export { TbColumns as IconList } from 'react-icons/tb';
@ -54,6 +64,14 @@ export { RiTreeLine as IconTree } from 'react-icons/ri';
export { FaRegKeyboard as IconControls } from 'react-icons/fa6'; export { FaRegKeyboard as IconControls } from 'react-icons/fa6';
export { BiCheckShield as IconImmutable } from 'react-icons/bi'; export { BiCheckShield as IconImmutable } from 'react-icons/bi';
export { RiOpenSourceLine as IconPublic } from 'react-icons/ri'; export { RiOpenSourceLine as IconPublic } from 'react-icons/ri';
export { BiBug as IconStatusError } from 'react-icons/bi';
export { BiCheckCircle as IconStatusOK } from 'react-icons/bi';
export { BiHelpCircle as IconStatusUnknown } from 'react-icons/bi';
export { BiPauseCircle as IconStatusIncalculable } from 'react-icons/bi';
export { LuPower as IconKeepAliasOn } from 'react-icons/lu';
export { LuPowerOff as IconKeepAliasOff } from 'react-icons/lu';
export { LuFlag as IconKeepTermOn } from 'react-icons/lu';
export { LuFlagOff as IconKeepTermOff } from 'react-icons/lu';
// ===== Domain actions ===== // ===== Domain actions =====
export { BiUpvote as IconMoveUp } from 'react-icons/bi'; export { BiUpvote as IconMoveUp } from 'react-icons/bi';
@ -67,6 +85,9 @@ export { BiPlusCircle as IconNewItem } from 'react-icons/bi';
export { FaSquarePlus as IconNewItem2 } from 'react-icons/fa6'; export { FaSquarePlus as IconNewItem2 } from 'react-icons/fa6';
export { BiDuplicate as IconClone } from 'react-icons/bi'; export { BiDuplicate as IconClone } from 'react-icons/bi';
export { LuReplace as IconReplace } from 'react-icons/lu'; export { LuReplace as IconReplace } from 'react-icons/lu';
export { LuNetwork as IconGenerateStructure } from 'react-icons/lu';
export { LuBookCopy as IconInlineSynthesis } from 'react-icons/lu';
export { LuWand2 as IconGenerateNames } from 'react-icons/lu';
// ======== Graph UI ======= // ======== Graph UI =======
export { BiCollapse as IconGraphCollapse } from 'react-icons/bi'; export { BiCollapse as IconGraphCollapse } from 'react-icons/bi';

View File

@ -1,8 +1,6 @@
'use client'; 'use client';
import { useCallback, useMemo, useState } from 'react'; import { useCallback, useMemo, useState } from 'react';
import { BiChevronLeft, BiChevronRight, BiFirstPage, BiLastPage } from 'react-icons/bi';
import { LuFlag, LuFlagOff, LuPower, LuPowerOff } from 'react-icons/lu';
import ConstituentaBadge from '@/components/info/ConstituentaBadge'; import ConstituentaBadge from '@/components/info/ConstituentaBadge';
import ConstituentaSelector from '@/components/select/ConstituentaSelector'; import ConstituentaSelector from '@/components/select/ConstituentaSelector';
@ -13,7 +11,18 @@ import { useConceptOptions } from '@/context/OptionsContext';
import { IConstituenta, IRSForm, ISubstitution } from '@/models/rsform'; import { IConstituenta, IRSForm, ISubstitution } from '@/models/rsform';
import { describeConstituenta } from '@/utils/labels'; import { describeConstituenta } from '@/utils/labels';
import { IconRemove, IconReplace } from '../Icons'; import {
IconKeepAliasOff,
IconKeepAliasOn,
IconKeepTermOff,
IconKeepTermOn,
IconPageFirst,
IconPageLast,
IconPageLeft,
IconPageRight,
IconRemove,
IconReplace
} from '../Icons';
interface SubstitutionsPickerProps { interface SubstitutionsPickerProps {
prefixID: string; prefixID: string;
@ -31,15 +40,15 @@ interface SubstitutionsPickerProps {
function SubstitutionIcon({ item }: { item: ISubstitution }) { function SubstitutionIcon({ item }: { item: ISubstitution }) {
if (item.deleteRight) { if (item.deleteRight) {
if (item.takeLeftTerm) { if (item.takeLeftTerm) {
return <BiChevronRight size='1.2rem' />; return <IconPageRight size='1.2rem' />;
} else { } else {
return <BiLastPage size='1.2rem' />; return <IconPageLast size='1.2rem' />;
} }
} else { } else {
if (item.takeLeftTerm) { if (item.takeLeftTerm) {
return <BiFirstPage size='1.2rem' />; return <IconPageFirst size='1.2rem' />;
} else { } else {
return <BiChevronLeft size='1.2rem' />; return <IconPageLeft size='1.2rem' />;
} }
} }
} }
@ -165,9 +174,9 @@ function SubstitutionsPicker({
onClick={toggleDelete} onClick={toggleDelete}
icon={ icon={
deleteRight ? ( deleteRight ? (
<LuPower size='1rem' className='clr-text-green' /> <IconKeepAliasOn size='1rem' className='clr-text-green' />
) : ( ) : (
<LuPowerOff size='1rem' className='clr-text-red' /> <IconKeepAliasOff size='1rem' className='clr-text-red' />
) )
} }
/> />
@ -177,9 +186,9 @@ function SubstitutionsPicker({
onClick={toggleTerm} onClick={toggleTerm}
icon={ icon={
takeLeftTerm ? ( takeLeftTerm ? (
<LuFlag size='1rem' className='clr-text-green' /> <IconKeepTermOn size='1rem' className='clr-text-green' />
) : ( ) : (
<LuFlagOff size='1rem' className='clr-text-red' /> <IconKeepTermOff size='1rem' className='clr-text-red' />
) )
} }
/> />
@ -211,9 +220,9 @@ function SubstitutionsPicker({
onClick={toggleDelete} onClick={toggleDelete}
icon={ icon={
!deleteRight ? ( !deleteRight ? (
<LuPower size='1rem' className='clr-text-green' /> <IconKeepAliasOn size='1rem' className='clr-text-green' />
) : ( ) : (
<LuPowerOff size='1rem' className='clr-text-red' /> <IconKeepAliasOff size='1rem' className='clr-text-red' />
) )
} }
/> />
@ -223,9 +232,9 @@ function SubstitutionsPicker({
onClick={toggleTerm} onClick={toggleTerm}
icon={ icon={
!takeLeftTerm ? ( !takeLeftTerm ? (
<LuFlag size='1rem' className='clr-text-green' /> <IconKeepTermOn size='1rem' className='clr-text-green' />
) : ( ) : (
<LuFlagOff size='1rem' className='clr-text-red' /> <IconKeepTermOff size='1rem' className='clr-text-red' />
) )
} }
/> />

View File

@ -3,8 +3,8 @@
import { Table } from '@tanstack/react-table'; import { Table } from '@tanstack/react-table';
import clsx from 'clsx'; import clsx from 'clsx';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { BiChevronLeft, BiChevronRight, BiFirstPage, BiLastPage } from 'react-icons/bi';
import { IconPageFirst, IconPageLast, IconPageLeft, IconPageRight } from '@/components/Icons';
import { prefixes } from '@/utils/constants'; import { prefixes } from '@/utils/constants';
interface PaginationToolsProps<TData> { interface PaginationToolsProps<TData> {
@ -50,7 +50,7 @@ function PaginationTools<TData>({
onClick={() => table.setPageIndex(0)} onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<BiFirstPage size='1.5rem' /> <IconPageFirst size='1.5rem' />
</button> </button>
<button <button
type='button' type='button'
@ -58,7 +58,7 @@ function PaginationTools<TData>({
onClick={() => table.previousPage()} onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<BiChevronLeft size='1.5rem' /> <IconPageLeft size='1.5rem' />
</button> </button>
<input <input
id={id ? `${id}__page` : undefined} id={id ? `${id}__page` : undefined}
@ -78,7 +78,7 @@ function PaginationTools<TData>({
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<BiChevronRight size='1.5rem' /> <IconPageRight size='1.5rem' />
</button> </button>
<button <button
type='button' type='button'
@ -86,7 +86,7 @@ function PaginationTools<TData>({
onClick={() => table.setPageIndex(table.getPageCount() - 1)} onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<BiLastPage size='1.5rem' /> <IconPageLast size='1.5rem' />
</button> </button>
</div> </div>
<select <select

View File

@ -1,4 +1,4 @@
import { BiChevronLeft, BiChevronRight, BiFirstPage, BiLastPage } from 'react-icons/bi'; import { IconPageFirst, IconPageLast, IconPageLeft, IconPageRight } from '@/components/Icons';
interface PageControlsProps { interface PageControlsProps {
pageNumber: number; pageNumber: number;
@ -15,7 +15,7 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
onClick={() => setPageNumber(1)} onClick={() => setPageNumber(1)}
disabled={pageNumber < 2} disabled={pageNumber < 2}
> >
<BiFirstPage size='1.5rem' /> <IconPageFirst size='1.5rem' />
</button> </button>
<button <button
type='button' type='button'
@ -23,7 +23,7 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
onClick={() => setPageNumber(prev => prev - 1)} onClick={() => setPageNumber(prev => prev - 1)}
disabled={pageNumber < 2} disabled={pageNumber < 2}
> >
<BiChevronLeft size='1.5rem' /> <IconPageLeft size='1.5rem' />
</button> </button>
<p className='px-3 text-black text-nowrap'> <p className='px-3 text-black text-nowrap'>
Страница {pageNumber} из {pageCount} Страница {pageNumber} из {pageCount}
@ -34,7 +34,7 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
onClick={() => setPageNumber(prev => prev + 1)} onClick={() => setPageNumber(prev => prev + 1)}
disabled={pageNumber >= pageCount} disabled={pageNumber >= pageCount}
> >
<BiChevronRight size='1.5rem' /> <IconPageRight size='1.5rem' />
</button> </button>
<button <button
type='button' type='button'
@ -42,7 +42,7 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
onClick={() => setPageNumber(pageCount)} onClick={() => setPageNumber(pageCount)}
disabled={pageNumber >= pageCount} disabled={pageNumber >= pageCount}
> >
<BiLastPage size='1.5rem' /> <IconPageLast size='1.5rem' />
</button> </button>
</> </>
); );

View File

@ -1,7 +1,6 @@
'use client'; 'use client';
import { BiBug, BiCheckCircle, BiHelpCircle, BiPauseCircle } from 'react-icons/bi'; import { IconStatusError, IconStatusIncalculable, IconStatusOK, IconStatusUnknown } from '@/components/Icons';
import { ExpressionStatus } from '@/models/rsform'; import { ExpressionStatus } from '@/models/rsform';
interface StatusIconProps { interface StatusIconProps {
@ -10,13 +9,13 @@ interface StatusIconProps {
function StatusIcon({ status }: StatusIconProps) { function StatusIcon({ status }: StatusIconProps) {
if (status === ExpressionStatus.VERIFIED || status === ExpressionStatus.PROPERTY) { if (status === ExpressionStatus.VERIFIED || status === ExpressionStatus.PROPERTY) {
return <BiCheckCircle size='1rem' />; return <IconStatusOK size='1rem' />;
} else if (status === ExpressionStatus.UNKNOWN) { } else if (status === ExpressionStatus.UNKNOWN) {
return <BiHelpCircle size='1rem' />; return <IconStatusUnknown size='1rem' />;
} else if (status === ExpressionStatus.INCALCULABLE) { } else if (status === ExpressionStatus.INCALCULABLE) {
return <BiPauseCircle size='1rem' />; return <IconStatusIncalculable size='1rem' />;
} else { } else {
return <BiBug size='1rem' />; return <IconStatusError size='1rem' />;
} }
} }

View File

@ -1,22 +1,26 @@
'use client'; 'use client';
import { BiDiamond, BiMenu } from 'react-icons/bi';
import { FiEdit } from 'react-icons/fi';
import { LuAlertTriangle, LuArchive, LuBookCopy, LuNetwork, LuWand2 } from 'react-icons/lu';
import { VscLibrary } from 'react-icons/vsc';
import { urls } from '@/app/urls'; import { urls } from '@/app/urls';
import { import {
IconAdmin, IconAdmin,
IconAlert,
IconArchive,
IconClone, IconClone,
IconDestroy, IconDestroy,
IconDownload, IconDownload,
IconEdit2,
IconGenerateNames,
IconGenerateStructure,
IconInlineSynthesis,
IconLibrary,
IconMenu,
IconNewItem, IconNewItem,
IconOwner, IconOwner,
IconReader, IconReader,
IconReplace, IconReplace,
IconShare, IconShare,
IconSortList, IconSortList,
IconTemplates,
IconUpload IconUpload
} from '@/components/Icons'; } from '@/components/Icons';
import Button from '@/components/ui/Button'; import Button from '@/components/ui/Button';
@ -131,7 +135,7 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
tabIndex={-1} tabIndex={-1}
title='Меню' title='Меню'
hideTitle={schemaMenu.isOpen} hideTitle={schemaMenu.isOpen}
icon={<BiMenu size='1.25rem' className='clr-text-controls' />} icon={<IconMenu size='1.25rem' className='clr-text-controls' />}
className='h-full pl-2' className='h-full pl-2'
onClick={schemaMenu.toggle} onClick={schemaMenu.toggle}
/> />
@ -188,7 +192,7 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
) : null} ) : null}
<DropdownButton <DropdownButton
text='Библиотека' text='Библиотека'
icon={<VscLibrary size='1rem' className='icon-primary' />} icon={<IconLibrary size='1rem' className='icon-primary' />}
onClick={() => router.push(urls.library)} onClick={() => router.push(urls.library)}
/> />
</Dropdown> </Dropdown>
@ -204,21 +208,21 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
title={'Редактирование'} title={'Редактирование'}
hideTitle={editMenu.isOpen} hideTitle={editMenu.isOpen}
className='h-full px-2' className='h-full px-2'
icon={<FiEdit size='1.25rem' className={controller.isContentEditable ? 'icon-green' : 'icon-red'} />} icon={<IconEdit2 size='1.25rem' className={controller.isContentEditable ? 'icon-green' : 'icon-red'} />}
onClick={editMenu.toggle} onClick={editMenu.toggle}
/> />
<Dropdown isOpen={editMenu.isOpen}> <Dropdown isOpen={editMenu.isOpen}>
<DropdownButton <DropdownButton
text='Шаблоны' text='Шаблоны'
title='Создать конституенту из шаблона' title='Создать конституенту из шаблона'
icon={<BiDiamond size='1rem' className='icon-green' />} icon={<IconTemplates size='1rem' className='icon-green' />}
disabled={!controller.isContentEditable || controller.isProcessing} disabled={!controller.isContentEditable || controller.isProcessing}
onClick={handleTemplates} onClick={handleTemplates}
/> />
<DropdownButton <DropdownButton
text='Встраивание' text='Встраивание'
title='Импортировать совокупность конституент из другой схемы' title='Импортировать совокупность конституент из другой схемы'
icon={<LuBookCopy size='1rem' className='icon-green' />} icon={<IconInlineSynthesis size='1rem' className='icon-green' />}
disabled={!controller.isContentEditable || controller.isProcessing} disabled={!controller.isContentEditable || controller.isProcessing}
onClick={handleInlineSynthesis} onClick={handleInlineSynthesis}
/> />
@ -233,14 +237,14 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
<DropdownButton <DropdownButton
text='Порядковые имена' text='Порядковые имена'
title='Присвоить порядковые имена и обновить выражения' title='Присвоить порядковые имена и обновить выражения'
icon={<LuWand2 size='1rem' className='icon-primary' />} icon={<IconGenerateNames size='1rem' className='icon-primary' />}
disabled={!controller.isContentEditable || controller.isProcessing} disabled={!controller.isContentEditable || controller.isProcessing}
onClick={handleReindex} onClick={handleReindex}
/> />
<DropdownButton <DropdownButton
text='Порождение структуры' text='Порождение структуры'
title='Раскрыть структуру типизации выделенной конституенты' title='Раскрыть структуру типизации выделенной конституенты'
icon={<LuNetwork size='1rem' className='icon-primary' />} icon={<IconGenerateStructure size='1rem' className='icon-primary' />}
disabled={!controller.isContentEditable || !controller.canProduceStructure} disabled={!controller.isContentEditable || !controller.canProduceStructure}
onClick={handleProduceStructure} onClick={handleProduceStructure}
/> />
@ -263,7 +267,7 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
titleHtml='<b>Архив</b>: Редактирование запрещено<br />Перейти к актуальной версии' titleHtml='<b>Архив</b>: Редактирование запрещено<br />Перейти к актуальной версии'
hideTitle={accessMenu.isOpen} hideTitle={accessMenu.isOpen}
className='h-full px-2' className='h-full px-2'
icon={<LuArchive size='1.25rem' className='icon-primary' />} icon={<IconArchive size='1.25rem' className='icon-primary' />}
onClick={event => controller.viewVersion(undefined, event.ctrlKey)} onClick={event => controller.viewVersion(undefined, event.ctrlKey)}
/> />
) : null} ) : null}
@ -322,7 +326,7 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
titleHtml='<b>Анонимный режим</b><br />Войти в Портал' titleHtml='<b>Анонимный режим</b><br />Войти в Портал'
hideTitle={accessMenu.isOpen} hideTitle={accessMenu.isOpen}
className='h-full pr-2' className='h-full pr-2'
icon={<LuAlertTriangle size='1.25rem' className='icon-red' />} icon={<IconAlert size='1.25rem' className='icon-red' />}
onClick={handleLogin} onClick={handleLogin}
/> />
) : null} ) : null}