mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 13:00:39 +03:00
Minor UI improvements
This commit is contained in:
IRBorisov
parent
d8c0832ba0
commit
a44a43214c
|
|
@ -440,6 +440,14 @@ export function CheckIcon(props: IconProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export function CogIcon(props: IconProps) {
|
||||
return (
|
||||
<IconSVG viewbox='0 0 24 24' {...props}>
|
||||
<path d='M2.344 15.271l2 3.46a1 1 0 001.366.365l1.396-.806c.58.457 1.221.832 1.895 1.112V21a1 1 0 001 1h4a1 1 0 001-1v-1.598a8.094 8.094 0 001.895-1.112l1.396.806c.477.275 1.091.11 1.366-.365l2-3.46a1.004 1.004 0 00-.365-1.366l-1.372-.793a7.683 7.683 0 00-.002-2.224l1.372-.793c.476-.275.641-.89.365-1.366l-2-3.46a1 1 0 00-1.366-.365l-1.396.806A8.034 8.034 0 0015 4.598V3a1 1 0 00-1-1h-4a1 1 0 00-1 1v1.598A8.094 8.094 0 007.105 5.71L5.71 4.904a.999.999 0 00-1.366.365l-2 3.46a1.004 1.004 0 00.365 1.366l1.372.793a7.683 7.683 0 000 2.224l-1.372.793c-.476.275-.641.89-.365 1.366zM12 8c2.206 0 4 1.794 4 4s-1.794 4-4 4-4-1.794-4-4 1.794-4 4-4z' />
|
||||
</IconSVG>
|
||||
);
|
||||
}
|
||||
|
||||
export function CrossIcon(props: IconProps) {
|
||||
return (
|
||||
<IconSVG viewbox='0 0 21 21' {...props}>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ function Logo({ title }: LogoProps) {
|
|||
return (
|
||||
<Link to='/' className='flex items-center mr-4' tabIndex={-1}>
|
||||
<img src='/favicon.svg' className='min-h-[2rem] mr-2 min-w-[2rem]' alt=''/>
|
||||
<span className='self-center hidden text-xl font-semibold md:block whitespace-nowrap dark:text-white'>{title}</span>
|
||||
<span className='self-center hidden text-xl font-semibold small-caps md:block whitespace-nowrap dark:text-white'>{title}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function NavigationButton({ id, icon, description, onClick, text }: NavigationBu
|
|||
type='button'
|
||||
onClick={onClick}
|
||||
tabIndex={-1}
|
||||
className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 min-w-fit whitespace-nowrap clr-btn-nav`}
|
||||
className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 min-w-fit small-caps whitespace-nowrap clr-btn-nav`}
|
||||
>
|
||||
{icon && <span>{icon}</span>}
|
||||
{text && <span className='font-semibold'>{text}</span>}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useCallback } from 'react';
|
|||
|
||||
import Dropdown from '../../../components/Common/Dropdown';
|
||||
import DropdownButton from '../../../components/Common/DropdownButton';
|
||||
import { CogIcon } from '../../../components/Icons';
|
||||
import useDropdown from '../../../hooks/useDropdown';
|
||||
import { DependencyMode } from '../../../models/miscelanious';
|
||||
import { labelDependencyMode } from '../../../utils/labels';
|
||||
|
|
@ -21,14 +22,16 @@ function DependencyModePicker({ value, onChange }: DependencyModePickerProps) {
|
|||
}, [pickerMenu, onChange]);
|
||||
|
||||
return (
|
||||
<div ref={pickerMenu.ref} className='h-full min-w-[5.8rem] text-right'>
|
||||
<span
|
||||
className='text-sm font-semibold underline cursor-pointer select-none whitespace-nowrap'
|
||||
<div ref={pickerMenu.ref} className='h-full'>
|
||||
<button
|
||||
className='h-full w-[7.5rem] px-1 py-1 border clr-input clr-hover clr-btn-default text-btn inline-flex align-middle gap-1'
|
||||
title='Настройка фильтрации по графу термов'
|
||||
tabIndex={-1}
|
||||
onClick={pickerMenu.toggle}
|
||||
>
|
||||
{labelDependencyMode(value)}
|
||||
</span>
|
||||
<CogIcon color='text-controls' size={5} />
|
||||
<span className='text-sm font-semibold whitespace-nowrap'>{labelDependencyMode(value)}</span>
|
||||
</button>
|
||||
{ pickerMenu.isActive &&
|
||||
<Dropdown stretchLeft >
|
||||
<DropdownButton onClick={() => handleChange(DependencyMode.ALL)}>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useCallback } from 'react';
|
|||
|
||||
import Dropdown from '../../../components/Common/Dropdown';
|
||||
import DropdownButton from '../../../components/Common/DropdownButton';
|
||||
import { FilterCogIcon } from '../../../components/Icons';
|
||||
import useDropdown from '../../../hooks/useDropdown';
|
||||
import { CstMatchMode } from '../../../models/miscelanious';
|
||||
import { labelCstMathchMode } from '../../../utils/labels';
|
||||
|
|
@ -21,16 +22,18 @@ function MatchModePicker({ value, onChange }: MatchModePickerProps) {
|
|||
}, [pickerMenu, onChange]);
|
||||
|
||||
return (
|
||||
<div ref={pickerMenu.ref} className='h-full min-w-[3.4rem]'>
|
||||
<span
|
||||
className='text-sm font-semibold underline cursor-pointer select-none whitespace-nowrap'
|
||||
<div ref={pickerMenu.ref} className='h-full'>
|
||||
<button
|
||||
className='h-full w-[6rem] px-1 py-1 border clr-input clr-hover clr-btn-default text-btn inline-flex align-middle gap-1'
|
||||
title='Настройка атрибутов для фильтрации'
|
||||
tabIndex={-1}
|
||||
onClick={pickerMenu.toggle}
|
||||
>
|
||||
{labelCstMathchMode(value)}
|
||||
</span>
|
||||
<FilterCogIcon color='text-controls' size={5} />
|
||||
<span className='text-sm font-semibold whitespace-nowrap'>{labelCstMathchMode(value)}</span>
|
||||
</button>
|
||||
{ pickerMenu.isActive &&
|
||||
<Dropdown>
|
||||
<Dropdown stretchLeft>
|
||||
<DropdownButton onClick={() => handleChange(CstMatchMode.ALL)}>
|
||||
<p><b>везде:</b> искать во всех атрибутах</p>
|
||||
</DropdownButton>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
|
|||
|
||||
return (
|
||||
<div title={describeExpressionStatus(status)}
|
||||
className='text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle'
|
||||
className='text-sm h-[1.6rem] w-[10rem] font-semibold small-caps inline-flex border items-center select-none justify-center align-middle'
|
||||
style={{backgroundColor: colorbgCstStatus(status, colors)}}
|
||||
>
|
||||
{labelExpressionStatus(status)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
||||
|
||||
import DataTable, { createColumnHelper, IConditionalStyle, VisibilityState } from '../../../components/DataTable';
|
||||
import { MagnifyingGlassIcon } from '../../../components/Icons';
|
||||
import { useRSForm } from '../../../context/RSFormContext';
|
||||
import { useConceptTheme } from '../../../context/ThemeContext';
|
||||
import useLocalStorage from '../../../hooks/useLocalStorage';
|
||||
|
|
@ -189,17 +190,20 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
|
|||
}, [noNavigation, baseHeight]);
|
||||
|
||||
return (<>
|
||||
<div className='sticky top-0 left-0 right-0 flex items-start justify-between w-full gap-1 px-2 py-1 border-b rounded clr-input'>
|
||||
<div className='sticky top-0 left-0 right-0 flex items-center justify-start w-full gap-1 px-2 border-b rounded clr-input'>
|
||||
<div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-controls'>
|
||||
<MagnifyingGlassIcon />
|
||||
</div>
|
||||
<input type='text'
|
||||
className='w-[14rem] pr-2 pl-8 py-1 outline-none select-none hover:text-clip clr-input'
|
||||
placeholder='текст фильтра'
|
||||
value={filterText}
|
||||
onChange={event => setFilterText(event.target.value)}
|
||||
/>
|
||||
<MatchModePicker
|
||||
value={filterMatch}
|
||||
onChange={setFilterMatch}
|
||||
/>
|
||||
<input type='text'
|
||||
className='w-full px-2 outline-none select-none hover:text-clip clr-input'
|
||||
placeholder='наберите текст фильтра'
|
||||
value={filterText}
|
||||
onChange={event => setFilterText(event.target.value)}
|
||||
/>
|
||||
<DependencyModePicker
|
||||
value={filterSource}
|
||||
onChange={setFilterSource}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user