Browse Source

Adjust main/album layout top bar

master
jeffvli 3 years ago
committed by Jeff
parent
commit
3c1447dd84
  1. 101
      src/components/layout/Layout.tsx
  2. 2
      src/components/layout/styled.tsx

101
src/components/layout/Layout.tsx

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useHistory } from 'react-router-dom';
import { ButtonToolbar, Content, FlexboxGrid, Icon, InputGroup } from 'rsuite';
import { ButtonToolbar, Content, FlexboxGrid, Icon } from 'rsuite';
import Sidebar from './Sidebar';
import Titlebar from './Titlebar';
import { RootContainer, RootFooter, MainContainer } from './styled';
@ -144,60 +144,59 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
</ButtonToolbar>
</FlexboxGrid.Item>
<FlexboxGrid.Item>
<span style={{ display: 'inline-block' }}>
{misc.searchQuery !== '' || openSearch ? (
<StyledInputGroup inside>
<InputGroup.Addon>
<Icon icon="search" />
</InputGroup.Addon>
<StyledInput
opacity={0.6}
id="local-search-input"
value={misc.searchQuery}
onChange={handleSearch}
onPressEnter={() => {
if (misc.searchQuery.trim()) {
history.push(`/search?query=${misc.searchQuery}`);
}
}}
onKeyDown={(e: KeyboardEvent) => {
if (e.key === 'Escape') {
<ButtonToolbar>
<span style={{ display: 'inline-block' }}>
{misc.searchQuery !== '' || openSearch ? (
<StyledInputGroup inside>
<StyledInput
opacity={0.6}
id="local-search-input"
value={misc.searchQuery}
onChange={handleSearch}
onPressEnter={() => {
if (misc.searchQuery.trim()) {
history.push(`/search?query=${misc.searchQuery}`);
}
}}
onKeyDown={(e: KeyboardEvent) => {
if (e.key === 'Escape') {
dispatch(setSearchQuery(''));
setOpenSearch(false);
}
}}
style={{ width: '180px' }}
/>
<StyledInputGroupButton
appearance="subtle"
tabIndex={0}
onClick={() => {
dispatch(setSearchQuery(''));
setOpenSearch(false);
}
}}
style={{ width: '180px' }}
/>
<StyledInputGroupButton
tabIndex={0}
appearance="subtle"
}}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
dispatch(setSearchQuery(''));
setOpenSearch(false);
}
}}
>
<Icon icon="close" />
</StyledInputGroupButton>
</StyledInputGroup>
) : (
<StyledIconButton
onClick={() => {
dispatch(setSearchQuery(''));
setOpenSearch(false);
setOpenSearch(true);
setTimeout(() => {
document.getElementById('local-search-input')?.focus();
}, 50);
}}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
dispatch(setSearchQuery(''));
setOpenSearch(false);
}
}}
>
<Icon icon="close" />
</StyledInputGroupButton>
</StyledInputGroup>
) : (
<StyledIconButton
onClick={() => {
setOpenSearch(true);
setTimeout(() => {
document.getElementById('local-search-input')?.focus();
}, 50);
}}
appearance="subtle"
icon={<Icon icon="search" />}
/>
)}
</span>
appearance="subtle"
icon={<Icon icon="search" />}
/>
)}
</span>
</ButtonToolbar>
</FlexboxGrid.Item>
</FlexboxGrid>

2
src/components/layout/styled.tsx

@ -284,7 +284,7 @@ export const BlurredBackground = styled.img<{ expanded: boolean }>`
margin: 0px !important;
padding: 0px !important;
width: 100%;
height: 202px;
height: 210px;
z-index: -1;
user-select: none;
pointer-events: none;

Loading…
Cancel
Save