M: Minor UI fixes and refactoring

This commit is contained in:
Ivan 2025-04-13 22:29:23 +03:00
parent e36e50f49f
commit 9e19290566
23 changed files with 20 additions and 29 deletions

View File

@ -13,7 +13,7 @@ export function UserMenu() {
const router = useConceptNavigation();
const menu = useDropdown();
return (
<div ref={menu.ref} className='flex items-center justify-start relative h-full pr-2'>
<div ref={menu.ref} onBlur={menu.handleBlur} className='flex items-center justify-start relative h-full pr-2'>
<Suspense fallback={<Loader circular scale={1.5} />}>
<UserButton
onLogin={() => router.push({ path: urls.login, force: true })}

View File

@ -43,7 +43,7 @@ export function Button({
'bg-secondary text-secondary-foreground cc-hover cc-animate-color',
dense ? 'px-1' : 'px-3 py-1',
loading ? 'cursor-progress' : 'cursor-pointer',
noOutline ? 'outline-hidden' : 'focus-outline',
noOutline ? 'outline-hidden focus-visible:bg-selected' : 'focus-outline',
!noBorder && 'border rounded-sm',
className
)}

View File

@ -37,7 +37,7 @@ export function DropdownButton({
'px-3 py-1 inline-flex items-center gap-2',
'text-left text-sm text-ellipsis whitespace-nowrap',
'disabled:cc-controls disabled:opacity-75',
'cc-animate-background',
'focus-outline cc-animate-background',
!!onClick ? 'cc-hover cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
className
)}

View File

@ -7,9 +7,10 @@ export function useDropdown() {
const ref = useRef<HTMLDivElement>(null);
function handleBlur(event: React.FocusEvent<HTMLDivElement>) {
if (!ref.current?.contains(event.relatedTarget as Node)) {
setIsOpen(false);
if (ref.current?.contains(event.relatedTarget as Node)) {
return;
}
setIsOpen(false);
}
return {

View File

@ -5,11 +5,10 @@ import { ChevronDownIcon } from 'lucide-react';
import { IconRemove } from '../icons';
import { type Styling } from '../props';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { cn } from '../utils';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';
import { Popover, PopoverContent, PopoverTrigger } from './popover';
interface ComboBoxProps<Option> extends Styling {
id?: string;
items?: Option[];

View File

@ -5,11 +5,10 @@ import { ChevronDownIcon } from 'lucide-react';
import { IconRemove } from '../icons';
import { type Styling } from '../props';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { cn } from '../utils';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';
import { Popover, PopoverContent, PopoverTrigger } from './popover';
interface ComboMultiProps<Option> extends Styling {
id?: string;
items?: Option[];

View File

@ -42,7 +42,6 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro
>
<Button
noOutline
tabIndex={-1}
title='Список тем'
hideTitle={menu.isOpen}
icon={!menu.isOpen ? <IconMenuUnfold size='1.25rem' /> : <IconMenuFold size='1.25rem' />}

View File

@ -33,7 +33,6 @@ export function MenuRole({ isOwned, isEditor }: MenuRoleProps) {
dense
noBorder
noOutline
tabIndex={-1}
titleHtml='<b>Анонимный режим</b><br />Войти в Портал'
hideTitle={accessMenu.isOpen}
className='h-full pr-2'
@ -49,7 +48,6 @@ export function MenuRole({ isOwned, isEditor }: MenuRoleProps) {
dense
noBorder
noOutline
tabIndex={-1}
title={`Режим ${labelUserRole(role)}`}
hideTitle={accessMenu.isOpen}
className='h-full pr-2'

View File

@ -1,5 +1,5 @@
import { ComboBox } from '@/components/input/combo-box';
import { type Styling } from '@/components/props';
import { ComboBox } from '@/components/ui/combo-box';
import { type ILibraryItem } from '../backend/types';

View File

@ -1,7 +1,7 @@
'use client';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/input/select';
import { type Styling } from '@/components/props';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { cn } from '@/components/utils';
import { labelVersion } from '../../rsform/labels';

View File

@ -1,5 +1,5 @@
import { ComboBox } from '@/components/input/combo-box';
import { type Styling } from '@/components/props';
import { ComboBox } from '@/components/ui/combo-box';
import { type IOperation } from '../models/oss';

View File

@ -35,7 +35,6 @@ export function MenuEditOss() {
dense
noBorder
noOutline
tabIndex={-1}
title='Редактирование'
hideTitle={menu.isOpen}
className='h-full px-2'

View File

@ -51,7 +51,6 @@ export function MenuMain() {
dense
noBorder
noOutline
tabIndex={-1}
title='Меню'
hideTitle={menu.isOpen}
icon={<IconMenu size='1.25rem' className='cc-controls' />}

View File

@ -1,4 +1,4 @@
import { ComboBox } from '@/components/ui/combo-box';
import { ComboBox } from '@/components/input/combo-box';
import { describeConstituenta, describeConstituentaTerm } from '../labels';
import { type IConstituenta } from '../models/rsform';

View File

@ -1,5 +1,5 @@
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/input/select';
import { type Styling } from '@/components/props';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { cn } from '@/components/utils';
import { CstType } from '../backend/types';

View File

@ -1,5 +1,5 @@
import { ComboMulti } from '@/components/input/combo-multi';
import { type Styling } from '@/components/props';
import { ComboMulti } from '@/components/ui/combo-multi';
import { labelGrammeme } from '../labels';
import { type Grammeme, supportedGrammemes } from '../models/language';

View File

@ -3,7 +3,7 @@
import { useTemplatesSuspense } from '@/features/library/backend/use-templates';
import { TextArea } from '@/components/input';
import { ComboBox } from '@/components/ui/combo-box';
import { ComboBox } from '@/components/input/combo-box';
import { useRSForm } from '../../backend/use-rsform';
import { PickConstituenta } from '../../components/pick-constituenta';

View File

@ -189,8 +189,8 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
dense
noResize
noBorder
transparent
noOutline
transparent
readOnly
label='Типизация'
value={typification}

View File

@ -1,7 +1,7 @@
import { HelpTopic } from '@/features/help';
import { BadgeHelp } from '@/features/help/components';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/input/select';
import { mapLabelColoring } from '../../../labels';
import { useTermGraphStore } from '../../../stores/term-graph';

View File

@ -107,7 +107,6 @@ export function MenuEditSchema() {
dense
noBorder
noOutline
tabIndex={-1}
titleHtml='<b>Архив</b>: Редактирование запрещено<br />Перейти к актуальной версии'
hideTitle={menu.isOpen}
className='h-full px-2'
@ -123,7 +122,6 @@ export function MenuEditSchema() {
dense
noBorder
noOutline
tabIndex={-1}
title='Редактирование'
hideTitle={menu.isOpen}
className='h-full px-2'

View File

@ -118,7 +118,6 @@ export function MenuMain() {
dense
noBorder
noOutline
tabIndex={-1}
title='Меню'
hideTitle={menu.isOpen}
icon={<IconMenu size='1.25rem' className='cc-controls' />}

View File

@ -1,7 +1,7 @@
'use client';
import { ComboBox } from '@/components/input/combo-box';
import { type Styling } from '@/components/props';
import { ComboBox } from '@/components/ui/combo-box';
import { type IUserInfo } from '../backend/types';
import { useLabelUser } from '../backend/use-label-user';