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

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

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