studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(frontend) enhance QuickSearch components

Browse Source 
- Updated QuickSearchItemContent to ensure full width for better layout
consistency.
- Adjusted padding in QuickSearchStyle for improved spacing and visual
hierarchy.
- Refactored DocSearchItem to utilize Box component for consistent
styling and layout.
- Removed unused imports in DocSearchItem to streamline the codebase.
This commit is contained in:
Nathan Panchout
2024-12-23 10:29:44 +01:00
committed by Anthony LC
parent 78b5e2c1cc
commit 899047d9a2
3 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
View File

@@ -29,7 +29,12 @@ export const QuickSearchItemContent = ({
$justify="space-between" $justify="space-between"
$width="100%" $width="100%"
> >
<Box $direction="row" $align="center" $gap={spacings['2xs']}> <Box
$direction="row"
$align="center"
$gap={spacings['2xs']}
$width="100%"
>
{left} {left}
</Box> </Box>

6
src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
View File

@@ -65,8 +65,8 @@ export const QuickSearchStyle = createGlobalStyle`
[cmdk-list] { [cmdk-list] {
padding: 0 var(--c--theme--spacings--sm) var(--c--theme--spacings--sm) padding: 0 var(--c--theme--spacings--base) var(--c--theme--spacings--base)
var(--c--theme--spacings--sm); var(--c--theme--spacings--base);
flex:1; flex:1;
overflow-y: auto; overflow-y: auto;
@@ -114,7 +114,7 @@ export const QuickSearchStyle = createGlobalStyle`
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--c--theme--spacings--base); margin-bottom: var(--c--theme--spacings--xs);
} }
[cmdk-empty] { [cmdk-empty] {

17
src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
View File

@@ -1,6 +1,4 @@
import { DateTime } from 'luxon'; import { Box, Icon } from '@/components';
import { Box, Icon, Text } from '@/components';
import { QuickSearchItemContent } from '@/components/quick-search/QuickSearchItemContent'; import { QuickSearchItemContent } from '@/components/quick-search/QuickSearchItemContent';
import { Doc } from '@/features/docs/doc-management'; import { Doc } from '@/features/docs/doc-management';
import { SimpleDocItem } from '@/features/docs/docs-grid/components/SimpleDocItem'; import { SimpleDocItem } from '@/features/docs/docs-grid/components/SimpleDocItem';
@@ -13,26 +11,19 @@ type DocSearchItemProps = {
export const DocSearchItem = ({ doc }: DocSearchItemProps) => { export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
const { isDesktop } = useResponsiveStore(); const { isDesktop } = useResponsiveStore();
return ( return (
<div data-testid={`doc-search-item-${doc.id}`}> <Box data-testid={`doc-search-item-${doc.id}`} $width="100%">
<QuickSearchItemContent <QuickSearchItemContent
left={ left={
<Box $direction="row" $align="center" $gap="10px"> <Box $direction="row" $align="center" $gap="10px" $width="100%">
<Box $flex={isDesktop ? 9 : 1}> <Box $flex={isDesktop ? 9 : 1}>
<SimpleDocItem doc={doc} showAccesses /> <SimpleDocItem doc={doc} showAccesses />
</Box> </Box>
{isDesktop && (
<Box $flex={2} $justify="center" $align="center">
<Text $variation="500" $align="right" $size="xs">
{DateTime.fromISO(doc.updated_at).toRelative()}
</Text>
</Box>
)}
</Box> </Box>
} }
right={ right={
<Icon iconName="keyboard_return" $theme="primary" $variation="800" /> <Icon iconName="keyboard_return" $theme="primary" $variation="800" />
} }
/> />
</div> </Box>
); );
}; };