R: Refactor tabs layout
This commit is contained in:
Ivan
parent
7c89a04255
commit
aea9dececf
|
|
@ -39,10 +39,10 @@ export function SearchBar({
|
|||
...restProps
|
||||
}: SearchBarProps) {
|
||||
return (
|
||||
<div className={clsx('relative', className)} {...restProps}>
|
||||
<div className={clsx('relative flex items-center', className)} {...restProps}>
|
||||
{!noIcon ? (
|
||||
<IconSearch
|
||||
className='absolute -top-0.5 left-3 translate-y-1/2 pointer-events-none clr-text-controls'
|
||||
className='absolute -top-0.5 left-2 translate-y-1/2 pointer-events-none clr-text-controls'
|
||||
size='1.25rem'
|
||||
/>
|
||||
) : null}
|
||||
|
|
@ -52,7 +52,7 @@ export function SearchBar({
|
|||
transparent
|
||||
placeholder={placeholder}
|
||||
type='search'
|
||||
className={clsx('bg-transparent', !noIcon && 'pl-10')}
|
||||
className={clsx('bg-transparent', !noIcon && 'pl-8')}
|
||||
noBorder={noBorder}
|
||||
value={query}
|
||||
onChange={event => onChangeQuery?.(event.target.value)}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import { useState } from 'react';
|
||||
import { FormProvider, useForm, useWatch } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { HelpTopic } from '@/features/help';
|
||||
|
||||
|
|
@ -102,13 +101,8 @@ export function DlgCreateOperation() {
|
|||
className='w-160 px-6 h-128'
|
||||
helpTopic={HelpTopic.CC_OSS}
|
||||
>
|
||||
<Tabs
|
||||
selectedTabClassName='clr-selected'
|
||||
className='flex flex-col pt-2'
|
||||
selectedIndex={activeTab}
|
||||
onSelect={handleSelectTab}
|
||||
>
|
||||
<TabList className={clsx('self-center absolute top-10', 'flex', 'border divide-x rounded-none', 'bg-prim-200')}>
|
||||
<Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={handleSelectTab}>
|
||||
<TabList className='z-pop mx-auto -mb-5 flex border divide-x rounded-none bg-prim-200'>
|
||||
<TabLabel
|
||||
title={describeOperationType(OperationType.INPUT)}
|
||||
label={labelOperationType(OperationType.INPUT)}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import { Suspense, useState } from 'react';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { HelpTopic } from '@/features/help';
|
||||
|
||||
|
|
@ -75,13 +74,8 @@ export function DlgEditOperation() {
|
|||
helpTopic={HelpTopic.UI_SUBSTITUTIONS}
|
||||
hideHelpWhen={() => activeTab !== TabID.SUBSTITUTION}
|
||||
>
|
||||
<Tabs
|
||||
selectedTabClassName='clr-selected'
|
||||
className='flex flex-col'
|
||||
selectedIndex={activeTab}
|
||||
onSelect={setActiveTab}
|
||||
>
|
||||
<TabList className={clsx('mb-3 self-center', 'flex', 'border divide-x rounded-none', 'bg-prim-200')}>
|
||||
<Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={setActiveTab}>
|
||||
<TabList className='mb-3 mx-auto w-fit flex border divide-x rounded-none bg-prim-200'>
|
||||
<TabLabel title='Текстовые поля' label='Карточка' className='w-32' />
|
||||
{target.operation_type === OperationType.SYNTHESIS ? (
|
||||
<TabLabel title='Выбор аргументов операции' label='Аргументы' className='w-32' />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { useLayoutEffect } from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
|
||||
|
||||
|
|
@ -62,15 +61,7 @@ export function OssTabs({ activeTab }: OssTabsProps) {
|
|||
selectedTabClassName='clr-selected'
|
||||
className='relative flex flex-col mx-auto min-w-fit items-center'
|
||||
>
|
||||
<TabList
|
||||
className={clsx(
|
||||
'absolute z-sticky',
|
||||
'top-0 right-1/2 w-fit translate-x-1/2',
|
||||
'flex items-stretch',
|
||||
'border-b-2 border-x-2 divide-x-2',
|
||||
'bg-prim-200'
|
||||
)}
|
||||
>
|
||||
<TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-prim-200'>
|
||||
<MenuOssTabs />
|
||||
|
||||
<TabLabel label='Карточка' title={schema.title ?? ''} />
|
||||
|
|
|
|||
|
|
@ -69,13 +69,8 @@ export function DlgCstTemplate() {
|
|||
onSubmit={event => void methods.handleSubmit(onSubmit)(event)}
|
||||
helpTopic={HelpTopic.RSL_TEMPLATES}
|
||||
>
|
||||
<Tabs
|
||||
selectedTabClassName='clr-selected'
|
||||
className='flex flex-col'
|
||||
selectedIndex={activeTab}
|
||||
onSelect={setActiveTab}
|
||||
>
|
||||
<TabList className='mb-4 self-center flex border divide-x rounded-none bg-prim-200'>
|
||||
<Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={setActiveTab}>
|
||||
<TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
|
||||
<TabLabel label='Шаблон' title='Выбор шаблона выражения' className='w-32' />
|
||||
<TabLabel label='Аргументы' title='Подстановка аргументов шаблона' className='w-32' />
|
||||
<TabLabel label='Конституента' title='Редактирование конституенты' className='w-32' />
|
||||
|
|
|
|||
|
|
@ -104,13 +104,8 @@ export function DlgEditReference() {
|
|||
className='w-160 px-6 h-128'
|
||||
helpTopic={HelpTopic.TERM_CONTROL}
|
||||
>
|
||||
<Tabs
|
||||
selectedTabClassName='clr-selected'
|
||||
className='flex flex-col'
|
||||
selectedIndex={activeTab}
|
||||
onSelect={handleChangeTab}
|
||||
>
|
||||
<TabList className='mb-3 self-center flex border divide-x rounded-none bg-prim-200'>
|
||||
<Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={handleChangeTab}>
|
||||
<TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
|
||||
<TabLabel title='Отсылка на термин в заданной словоформе' label={labelReferenceType(ReferenceType.ENTITY)} />
|
||||
<TabLabel
|
||||
title='Установление синтаксической связи с отсылкой на термин'
|
||||
|
|
|
|||
|
|
@ -57,13 +57,8 @@ export function DlgInlineSynthesis() {
|
|||
canSubmit={methods.formState.isValid && sourceID !== null}
|
||||
onSubmit={event => void methods.handleSubmit(onSubmit)(event)}
|
||||
>
|
||||
<Tabs
|
||||
selectedTabClassName='clr-selected'
|
||||
className='flex flex-col'
|
||||
selectedIndex={activeTab}
|
||||
onSelect={setActiveTab}
|
||||
>
|
||||
<TabList className='mb-3 self-center flex border divide-x rounded-none bg-prim-200'>
|
||||
<Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={setActiveTab}>
|
||||
<TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
|
||||
<TabLabel
|
||||
label='Схема' //
|
||||
title='Источник конституент'
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export function TabConstituents() {
|
|||
rows={13}
|
||||
value={field.value}
|
||||
onChange={handleSelectItems}
|
||||
className='w-144'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { useLayoutEffect } from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
|
||||
|
||||
|
|
@ -78,15 +77,7 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
|
|||
selectedTabClassName='clr-selected'
|
||||
className='relative flex flex-col min-w-fit items-center'
|
||||
>
|
||||
<TabList
|
||||
className={clsx(
|
||||
'absolute z-sticky',
|
||||
'mx-auto w-fit top-0 right-1/2 translate-x-1/2',
|
||||
'flex items-stretch',
|
||||
'border-b-2 border-x-2 divide-x-2',
|
||||
'bg-prim-200'
|
||||
)}
|
||||
>
|
||||
<TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-prim-200'>
|
||||
<MenuRSTabs />
|
||||
|
||||
<TabLabel
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user