Refactoring: remove redundant flex classnames

This commit is contained in:
IRBorisov 2023-12-19 11:18:28 +03:00
parent 930c185908
commit c138315deb
12 changed files with 21 additions and 23 deletions

View File

@ -10,7 +10,7 @@ Styling conventions
- layer: z-position - layer: z-position
- outer layout: fixed bottom-1/2 left-0 -translate-x-1/2 - outer layout: fixed bottom-1/2 left-0 -translate-x-1/2
- rectangle: mt-3 min-w-fit min-w-10 flex-grow shrink-0 - rectangle: mt-3 min-w-fit min-w-10 flex-grow shrink-0
- inner layout: px-3 py-2 flex flex-col gap-3 justify-start items-center - inner layout: px-3 py-2 flex flex-col gap-3 justify-between items-center
- overflow behavior: overflow-scroll - overflow behavior: overflow-scroll
- border: borer-2 outline-none shadow-md - border: borer-2 outline-none shadow-md
- colors: clr-controls - colors: clr-controls

View File

@ -20,7 +20,7 @@ function Dropdown({
layer='z-modal-tooltip' layer='z-modal-tooltip'
position='mt-3' position='mt-3'
className={clsx( className={clsx(
'flex flex-col items-stretch', 'flex flex-col',
'border rounded-md shadow-lg', 'border rounded-md shadow-lg',
'text-sm', 'text-sm',
'clr-input', 'clr-input',

View File

@ -19,7 +19,7 @@ function TextArea({
<div className={clsx( <div className={clsx(
{ {
'flex flex-col gap-2': !dense, 'flex flex-col gap-2': !dense,
'flex justify-stretch items-center gap-3': dense 'flex items-center gap-3': dense
}, },
dense && className, dense && className,
)}> )}>

View File

@ -26,7 +26,7 @@ function TextInput({
<div className={clsx( <div className={clsx(
{ {
'flex flex-col gap-2': !dense, 'flex flex-col gap-2': !dense,
'flex justify-stretch items-center gap-3': dense, 'flex items-center gap-3': dense,
}, },
dense && className dense && className
)}> )}>

View File

@ -12,23 +12,23 @@ function InfoLibraryItem({ item }: InfoLibraryItemProps) {
const intl = useIntl(); const intl = useIntl();
return ( return (
<div className='flex flex-col gap-1'> <div className='flex flex-col gap-1'>
<div className='flex justify-start'> <div className='flex'>
<label className='font-semibold'>Владелец:</label> <label className='font-semibold'>Владелец:</label>
<span className='min-w-[200px] ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap'> <span className='min-w-[200px] ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap'>
{getUserLabel(item?.owner ?? null)} {getUserLabel(item?.owner ?? null)}
</span> </span>
</div> </div>
<div className='flex justify-start'> <div className='flex'>
<label className='font-semibold'>Отслеживают:</label> <label className='font-semibold'>Отслеживают:</label>
<span id='subscriber-count' className='ml-2'> <span id='subscriber-count' className='ml-2'>
{ item?.subscribers.length ?? 0 } { item?.subscribers.length ?? 0 }
</span> </span>
</div> </div>
<div className='flex justify-start'> <div className='flex'>
<label className='font-semibold'>Дата обновления:</label> <label className='font-semibold'>Дата обновления:</label>
<span className='ml-2'>{item && new Date(item?.time_update).toLocaleString(intl.locale)}</span> <span className='ml-2'>{item && new Date(item?.time_update).toLocaleString(intl.locale)}</span>
</div> </div>
<div className='flex justify-start'> <div className='flex'>
<label className='font-semibold'>Дата создания:</label> <label className='font-semibold'>Дата создания:</label>
<span className='ml-8'>{item && new Date(item?.time_create).toLocaleString(intl.locale)}</span> <span className='ml-8'>{item && new Date(item?.time_create).toLocaleString(intl.locale)}</span>
</div> </div>

View File

@ -88,7 +88,7 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
return ( return (
<> <>
<div className='flex justify-stretch'> <div className='flex'>
<SelectSingle <SelectSingle
placeholder='Выберите категорию' placeholder='Выберите категорию'
className='flex-grow border-none' className='flex-grow border-none'
@ -102,7 +102,7 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
/> />
<SelectSingle <SelectSingle
placeholder='Выберите источник' placeholder='Выберите источник'
className='min-w-[12rem]' className='w-[12rem]'
options={templateSelector} options={templateSelector}
value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null} value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null}
onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})} onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})}

View File

@ -144,10 +144,10 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
<Label text='Параметры словоформы' /> <Label text='Параметры словоформы' />
</div> </div>
<div className='flex justify-stretch'> <div className='flex'>
<TextArea <TextArea
placeholder='Введите текст' placeholder='Введите текст'
className='min-w-[20rem] min-h-[5rem] flex-grow' className='min-w-[20rem] min-h-[5rem]'
rows={2} rows={2}
value={inputText} value={inputText}
onChange={event => setInputText(event.target.value)} onChange={event => setInputText(event.target.value)}

View File

@ -45,7 +45,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
<div className={clsx( <div className={clsx(
'sticky top-0', 'sticky top-0',
'w-full max-h-[2.3rem]', 'w-full max-h-[2.3rem]',
'pr-40 flex items-stretch', 'pr-40 flex',
'border-b', 'border-b',
'clr-input' 'clr-input'
)}> )}>

View File

@ -21,7 +21,7 @@ function ManualsPage() {
return ( return (
<div <div
className='flex items-start justify-start w-full max-w-[90rem] gap-2' className='flex items-start w-full max-w-[90rem] gap-2'
style={{minHeight: mainHeight}} style={{minHeight: mainHeight}}
> >
<TopicsList <TopicsList

View File

@ -186,13 +186,11 @@ function EditorRSExpression({
/> : null} /> : null}
{(parseData && parseData.errors.length > 0) ? {(parseData && parseData.errors.length > 0) ?
<div className='flex-grow text-sm border overflow-y-auto max-h-[4.5rem] min-h-[4.5rem]'>
<ParsingResult <ParsingResult
data={parseData} data={parseData}
disabled={disabled} disabled={disabled}
onShowError={onShowError} onShowError={onShowError}
/> />: null}
</div> : null}
</div> </div>
</>); </>);
} }

View File

@ -15,7 +15,7 @@ function ParsingResult({ data, disabled, onShowError }: ParsingResultProps) {
const warningsCount = data.errors.length - errorCount; const warningsCount = data.errors.length - errorCount;
return ( return (
<div className='px-2 pt-1 text-sm'> <div className='px-2 pt-1 text-sm border overflow-y-auto h-[4.5rem]'>
<p>Ошибок: <b>{errorCount}</b> | Предупреждений: <b>{warningsCount}</b></p> <p>Ошибок: <b>{errorCount}</b> | Предупреждений: <b>{warningsCount}</b></p>
{data.errors.map( {data.errors.map(
(error, index) => { (error, index) => {

View File

@ -75,7 +75,7 @@ function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }:
}, [sourceMenu, setFilterSource]); }, [sourceMenu, setFilterSource]);
return ( return (
<div className='flex items-stretch border-b clr-input'> <div className='flex border-b clr-input'>
<ConceptSearch noBorder <ConceptSearch noBorder
className='min-w-[6rem] pr-2 flex-grow' className='min-w-[6rem] pr-2 flex-grow'
value={filterText} value={filterText}