From c95940f3259f51fca4c387ccf857b32662d5969d Mon Sep 17 00:00:00 2001 From: DenisVorop Date: Tue, 20 Feb 2024 13:07:50 +0300 Subject: [PATCH] fix: bring inputs to one view --- .../FilterAutoCompleteInput.tsx | 10 +- .../FiltersPanel/FiltersPanel.i18n/en.json | 1 - .../FiltersPanel/FiltersPanel.i18n/ru.json | 1 - src/components/FiltersPanel/FiltersPanel.tsx | 6 +- .../GlobalSearch/GlobalSearch.i18n/en.json | 2 +- .../GlobalSearch/GlobalSearch.i18n/ru.json | 2 +- .../GlobalSearch/GlobalSearch.module.css | 14 ++ src/components/GlobalSearch/GlobalSearch.tsx | 179 ++++-------------- .../PageHeader/PageHeader.module.css | 4 + src/components/ProjectListItemCompact.tsx | 5 +- src/components/SearchFilter.tsx | 21 +- 11 files changed, 73 insertions(+), 172 deletions(-) create mode 100644 src/components/GlobalSearch/GlobalSearch.module.css diff --git a/src/components/FilterAutoCompleteInput/FilterAutoCompleteInput.tsx b/src/components/FilterAutoCompleteInput/FilterAutoCompleteInput.tsx index eb9958cc8..6d9a127e0 100644 --- a/src/components/FilterAutoCompleteInput/FilterAutoCompleteInput.tsx +++ b/src/components/FilterAutoCompleteInput/FilterAutoCompleteInput.tsx @@ -1,16 +1,10 @@ import React, { ChangeEvent, ComponentProps, ReactNode, useCallback } from 'react'; -import styled from 'styled-components'; import { nullable } from '@taskany/bricks'; import { FormControl, FormControlError, FormControlInput } from '@taskany/bricks/harmony'; import { IconSearchOutline } from '@taskany/icons'; -import { gapS } from '@taskany/colors'; import { tr } from './FilterAutoCompleteInput.i18n'; -const StyledFormControl = styled(FormControl)` - margin-bottom: ${gapS}; -`; - interface FilterAutoCompleteInputProps extends Omit, 'onChange'> { onChange: (value: string) => void; error?: ComponentProps['error']; @@ -32,7 +26,7 @@ export const FilterAutoCompleteInput: React.FC = ( ); return ( - + = ( {nullable(error?.message, (message) => ( ))} - + ); }; diff --git a/src/components/FiltersPanel/FiltersPanel.i18n/en.json b/src/components/FiltersPanel/FiltersPanel.i18n/en.json index af30d6620..e94fbd615 100644 --- a/src/components/FiltersPanel/FiltersPanel.i18n/en.json +++ b/src/components/FiltersPanel/FiltersPanel.i18n/en.json @@ -1,5 +1,4 @@ { - "Search": "Search", "Priority": "Priority", "State": "State", "Owner": "Owner", diff --git a/src/components/FiltersPanel/FiltersPanel.i18n/ru.json b/src/components/FiltersPanel/FiltersPanel.i18n/ru.json index 099715805..5ba236cf0 100644 --- a/src/components/FiltersPanel/FiltersPanel.i18n/ru.json +++ b/src/components/FiltersPanel/FiltersPanel.i18n/ru.json @@ -1,5 +1,4 @@ { - "Search": "Поиск", "Priority": "Приоритет", "State": "Статус", "Owner": "Ответственный", diff --git a/src/components/FiltersPanel/FiltersPanel.tsx b/src/components/FiltersPanel/FiltersPanel.tsx index 67e1c87df..a351b606e 100644 --- a/src/components/FiltersPanel/FiltersPanel.tsx +++ b/src/components/FiltersPanel/FiltersPanel.tsx @@ -154,11 +154,7 @@ export const FiltersPanel: FC<{ - + diff --git a/src/components/GlobalSearch/GlobalSearch.i18n/en.json b/src/components/GlobalSearch/GlobalSearch.i18n/en.json index df6a649b5..1416853d8 100644 --- a/src/components/GlobalSearch/GlobalSearch.i18n/en.json +++ b/src/components/GlobalSearch/GlobalSearch.i18n/en.json @@ -1,5 +1,5 @@ { - "Search or jump to...": "Search or jump to...", + "Search...": "", "Goals": "", "Projects": "" } diff --git a/src/components/GlobalSearch/GlobalSearch.i18n/ru.json b/src/components/GlobalSearch/GlobalSearch.i18n/ru.json index 17d0f90da..f499cc4ce 100644 --- a/src/components/GlobalSearch/GlobalSearch.i18n/ru.json +++ b/src/components/GlobalSearch/GlobalSearch.i18n/ru.json @@ -1,5 +1,5 @@ { - "Search or jump to...": "Найти и/или перейти...", + "Search...": "Поиск...", "Goals": "Цели", "Projects": "Проекты" } diff --git a/src/components/GlobalSearch/GlobalSearch.module.css b/src/components/GlobalSearch/GlobalSearch.module.css new file mode 100644 index 000000000..3d275bc87 --- /dev/null +++ b/src/components/GlobalSearch/GlobalSearch.module.css @@ -0,0 +1,14 @@ +.GroupHeader { + display: flex; + align-items: center; + justify-content: space-between; + + box-sizing: border-box; + + padding-bottom: var(--gap-xs); + margin: 0 var(--gap-s); + + max-width: 392px; + + border-bottom: 1px solid var(--gray-900); +} diff --git a/src/components/GlobalSearch/GlobalSearch.tsx b/src/components/GlobalSearch/GlobalSearch.tsx index 04a6221f2..e9cf73462 100644 --- a/src/components/GlobalSearch/GlobalSearch.tsx +++ b/src/components/GlobalSearch/GlobalSearch.tsx @@ -1,10 +1,8 @@ -/* eslint-disable no-nested-ternary */ import React, { useState, useCallback } from 'react'; -import styled from 'styled-components'; import NextLink from 'next/link'; -import { Text, Table, nullable, ListView, ListViewItem, GlobalSearch as TaskanyGlobalSearch } from '@taskany/bricks'; +import { Table, nullable, ListView, ListViewItem } from '@taskany/bricks'; +import { GlobalSearch as TaskanyGlobalSearch, MenuItem, Link, Text } from '@taskany/bricks/harmony'; import { IconTargetOutline, IconUsersOutline } from '@taskany/icons'; -import { gapS, gapXs, gray4, radiusM } from '@taskany/colors'; import { trpc } from '../../utils/trpcClient'; import { routes, useRouter } from '../../hooks/router'; @@ -12,108 +10,10 @@ import { GoalListItemCompact } from '../GoalListItemCompact'; import { ProjectListItemCompact } from '../ProjectListItemCompact'; import { tr } from './GlobalSearch.i18n'; +import s from './GlobalSearch.module.css'; type ListViewItemValue = ['goal' | 'project', string]; -// TODO: https://github.com/taskany-inc/issues/issues/1568 -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const StyledGoalListItemCompact = styled(({ hovered, ...props }) => )<{ - hovered?: boolean; -}>` - padding: ${gapXs} ${gapS}; - border-radius: ${radiusM}; - cursor: pointer; - - &:hover { - background-color: transparent; - } - - ${({ hovered }) => - hovered && - ` - &:hover { - background-color: ${gray4}; - } - - background-color: ${gray4}; - `} - - ${({ hovered, focused }) => - hovered && - focused && - ` - &:hover { - background-color: ${gray4}; - } - - background-color: ${gray4}; - `} - - ${({ focused }) => - focused && - ` - &:hover { - background-color: ${gray4}; - } - - background-color: ${gray4}; - `} -`; - -// TODO: https://github.com/taskany-inc/issues/issues/1568 -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const StyledProjectListItemCompact = styled(({ hovered, ...props }) => )<{ - hovered?: boolean; -}>` - ${({ hovered }) => - hovered && - ` - - &:hover { - background-color: ${gray4}; - } - - background-color: ${gray4}; - `} - - ${({ hovered, focused }) => - hovered && - focused && - ` - &:hover { - background-color: ${gray4}; - } - - background-color: ${gray4}; - `} - - ${({ focused }) => - focused && - ` - &:hover { - background-color: ${gray4}; - } - - background-color: ${gray4}; - `} -`; - -const StyledGroupHeader = styled(Text)` - display: flex; - align-items: center; - justify-content: space-between; - - box-sizing: border-box; - - padding-top: ${gapS}; - padding-bottom: ${gapXs}; - margin: 0 ${gapS}; - - max-width: 392px; - - border-bottom: 1px solid ${gray4}; -`; - const tableWidth = 700; export const GlobalSearch = () => { @@ -136,18 +36,19 @@ export const GlobalSearch = () => { return ( {resultsExists && ( {nullable(suggestions.data?.goals?.length, () => ( <> - + {tr('Goals')} - + {suggestions.data?.goals.map((item) => { const value: ListViewItemValue = ['goal', item._shortId]; @@ -158,27 +59,29 @@ export const GlobalSearch = () => { value={value} renderItem={({ active, ...props }) => ( - + + + + + )} /> @@ -189,22 +92,22 @@ export const GlobalSearch = () => { ))} {nullable(suggestions.data?.projects?.length, () => ( <> - + {tr('Projects')} - +
{suggestions.data?.projects?.map((item) => ( ( - + + + )} /> ))} diff --git a/src/components/PageHeader/PageHeader.module.css b/src/components/PageHeader/PageHeader.module.css index edae9d11d..3e2752606 100644 --- a/src/components/PageHeader/PageHeader.module.css +++ b/src/components/PageHeader/PageHeader.module.css @@ -7,6 +7,10 @@ margin-left: var(--gap-m); } +.PageHeaderSearch { + width: 400px; +} + .PageHeader .PageHeaderNav { display: flex; align-items: center; diff --git a/src/components/ProjectListItemCompact.tsx b/src/components/ProjectListItemCompact.tsx index 395ceef62..572bb16b6 100644 --- a/src/components/ProjectListItemCompact.tsx +++ b/src/components/ProjectListItemCompact.tsx @@ -18,6 +18,7 @@ interface ProjectListItemCompactProps { focused?: boolean; icon?: boolean; className?: string; + interactive?: boolean; onClick?: MouseEventHandler; } @@ -28,10 +29,10 @@ const StyledRow = styled(TableRow)` `; export const ProjectListItemCompact: React.FC = React.memo( - ({ id, owner, title, icon, ...attrs }) => { + ({ id, owner, title, icon, interactive, ...attrs }) => { return ( - + {nullable(icon, () => ( diff --git a/src/components/SearchFilter.tsx b/src/components/SearchFilter.tsx index 88022bd25..39bc1c89e 100644 --- a/src/components/SearchFilter.tsx +++ b/src/components/SearchFilter.tsx @@ -1,27 +1,18 @@ -import { FC, useCallback } from 'react'; +import { FC } from 'react'; import { debounce } from 'throttle-debounce'; -import { FormControl, FormControlInput } from '@taskany/bricks/harmony'; +import { FormControl } from '@taskany/bricks/harmony'; + +import { FilterAutoCompleteInput } from './FilterAutoCompleteInput/FilterAutoCompleteInput'; export const SearchFilter: FC<{ - placeholder?: string; defaultValue?: string; onChange: (search: string) => void; -}> = ({ placeholder, defaultValue, onChange }) => { +}> = ({ defaultValue, onChange }) => { const debouncedSearchHandler = debounce(200, onChange); - const onSearchInputChange = useCallback( - (e: React.ChangeEvent) => debouncedSearchHandler(e.currentTarget.value), - [debouncedSearchHandler], - ); return ( - + ); };