Merge pull request pterodactyl#2777 from pterodactyl/matthewpi/file-manager-patch-1

Move file manager buttons beside the breadcrumb

Author: DaneEveritt

resources/scripts/components/elements/SubNavigation.tsx

@@ -5,23 +5,24 @@ import config from '../../../../tailwind.config';
 
 const SubNavigation = styled.div`
     ${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
-    
+
     & > div {
         ${tw`flex items-center text-sm mx-auto px-2`};
         max-width: 1200px;
-        
+
         & > a, & > div {
             ${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
-            
+
             &:not(:first-of-type) {
                 ${tw`ml-2`};
             }
-            
-            &:active, &:hover {
+
+            &:hover {
                 ${tw`text-neutral-100`};
             }
-            
-            &:active, &:hover, &.active {
+
+            &:active, &.active {
+                ${tw`text-neutral-100`};
                 box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
             }
         }

resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx

@@ -44,7 +44,7 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
     };
 
     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) ?
                 <FileActionCheckbox
                     type={'checkbox'}

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -51,9 +51,28 @@ export default () => {
 
     return (
         <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
-            <ErrorBoundary>
-                <FileManagerBreadcrumbs/>
-            </ErrorBoundary>
+            <div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
+                <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 ?
                     <Spinner size={'large'} centered/>
@@ -83,22 +102,6 @@ export default () => {
                                 </div>
                             </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>