Move file manager buttons beside the breadcrumb, other tweaks

This commit is contained in:
Matthew Penner 2020-12-03 21:10:41 -07:00
parent 77abfd01ec
commit de1f7ea906
3 changed files with 31 additions and 27 deletions

View file

@ -17,11 +17,12 @@ const SubNavigation = styled.div`
${tw`ml-2`}; ${tw`ml-2`};
} }
&:active, &:hover { &:hover {
${tw`text-neutral-100`}; ${tw`text-neutral-100`};
} }
&:active, &:hover, &.active { &:active, &.active {
${tw`text-neutral-100`};
box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']}; box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
} }
} }

View file

@ -44,7 +44,7 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
}; };
return ( return (
<div css={tw`flex items-center text-sm mb-4 text-neutral-500`}> <div css={tw`flex flex-grow-0 items-center text-sm text-neutral-500 overflow-x-hidden`}>
{(files && files.length > 0 && !params?.action) ? {(files && files.length > 0 && !params?.action) ?
<FileActionCheckbox <FileActionCheckbox
type={'checkbox'} type={'checkbox'}

View file

@ -51,9 +51,28 @@ export default () => {
return ( return (
<ServerContentBlock title={'File Manager'} showFlashKey={'files'}> <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
<ErrorBoundary> <div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
<FileManagerBreadcrumbs/> <ErrorBoundary>
</ErrorBoundary> <FileManagerBreadcrumbs/>
</ErrorBoundary>
<Can action={'file.create'}>
<ErrorBoundary>
<div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-no-wrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
<NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
<UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
<NavLink
to={`/server/${id}/files/new${window.location.hash}`}
css={tw`flex-1 sm:flex-none sm:mt-0`}
>
<Button css={tw`w-full`}>
New File
</Button>
</NavLink>
</div>
</ErrorBoundary>
</Can>
</div>
{ {
!files ? !files ?
<Spinner size={'large'} centered/> <Spinner size={'large'} centered/>
@ -83,22 +102,6 @@ export default () => {
</div> </div>
</CSSTransition> </CSSTransition>
} }
<Can action={'file.create'}>
<ErrorBoundary>
<div css={tw`flex flex-wrap-reverse justify-end mt-4`}>
<NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
<UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
<NavLink
to={`/server/${id}/files/new${window.location.hash}`}
css={tw`flex-1 sm:flex-none sm:mt-0`}
>
<Button css={tw`w-full`}>
New File
</Button>
</NavLink>
</div>
</ErrorBoundary>
</Can>
</> </>
} }
</ServerContentBlock> </ServerContentBlock>