Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-24 18:02:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update style

Browse Source
This commit is contained in:
JimmFly
2023-02-07 12:31:06 +08:00
parent a54bc69d46
commit fd72f69303
2 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/app/src/components/quick-search/index.tsx
View File

@@ -30,7 +30,9 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
const [publishWorkspaceName, setPublishWorkspaceName] = useState('');
const [showCreatePage, setShowCreatePage] = useState(true);
const { triggerQuickSearchModal } = useModal();
const isPublicAndNoQuery = () => {
return isPublic && query.length === 0;
};
// Add ‘⌘+K’ shortcut keys as switches
useEffect(() => {
const down = (e: KeyboardEvent) => {
@@ -72,7 +74,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
width={620}
style={{
maxHeight: '80vh',
minHeight: isPublic && query.length === 0 ? '72px' : '350px',
minHeight: isPublicAndNoQuery() ? '72px' : '350px',
top: '12vh',
}}
>
@@ -100,41 +102,47 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
/>
<StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
</StyledModalHeader>
{isPublic && query.length === 0 ? null : (
<>
<StyledModalDivider />
<Command.List>
<StyledContent>
{!isPublic ? (
<Results
query={query}
loading={loading}
setLoading={setLoading}
setShowCreatePage={setShowCreatePage}
/>
) : (
<PublishedResults
query={query}
loading={loading}
setLoading={setLoading}
onClose={onClose}
setPublishWorkspaceName={setPublishWorkspaceName}
/>
)}
</StyledContent>
<>
<StyledModalDivider
style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
/>
<Command.List>
<StyledContent
style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
>
{!isPublic ? (
showCreatePage ? (
<>
<StyledModalDivider />
<StyledModalFooter>
<Footer query={query} />
</StyledModalFooter>
</>
) : null
) : null}
</Command.List>
</>
)}
<Results
query={query}
loading={loading}
setLoading={setLoading}
setShowCreatePage={setShowCreatePage}
/>
) : (
<PublishedResults
query={query}
loading={loading}
setLoading={setLoading}
onClose={onClose}
setPublishWorkspaceName={setPublishWorkspaceName}
/>
)}
</StyledContent>
{!isPublic ? (
showCreatePage ? (
<>
<StyledModalDivider />
<StyledModalFooter>
<Footer query={query} />
</StyledModalFooter>
</>
) : (
<></>
)
) : (
<></>
)}
</Command.List>
</>
</Command>
</ModalWrapper>
</Modal>

3
packages/app/src/components/quick-search/style.ts
View File

@@ -9,6 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
marginBottom: '10px',
...displayFlex('center', 'flex-start'),
color: theme.colors.popoverColor,
transition: 'all 0.15s',
letterSpacing: '0.06em',
'[cmdk-group-heading]': {
margin: '5px 16px',
@@ -16,7 +17,6 @@ export const StyledContent = styled('div')(({ theme }) => {
fontWeight: '500',
},
'[aria-selected="true"]': {
transition: 'background .15s, color .15s',
borderRadius: '5px',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
@@ -103,6 +103,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
margin: '6px 16px 6.5px 16px',
position: 'relative',
borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
transition: 'all 0.15s',
};
});