From 6c53738070b21075a0805d23141a9147f7097dc4 Mon Sep 17 00:00:00 2001 From: Matthew Penner Date: Sat, 22 Aug 2020 15:09:48 -0600 Subject: [PATCH] Get react admin sidebar working while Dane is shopping for domains --- resources/scripts/components/App.tsx | 1 + .../components/admin/AdminContainer.tsx | 195 ------------------ .../admin/overview/OverviewContainer.tsx | 7 + .../admin/settings/SettingsContainer.tsx | 7 + .../components/screens/ScreenBlock.tsx | 2 +- resources/scripts/routers/AdminRouter.tsx | 172 ++++++++++++++- 6 files changed, 179 insertions(+), 205 deletions(-) delete mode 100644 resources/scripts/components/admin/AdminContainer.tsx create mode 100644 resources/scripts/components/admin/overview/OverviewContainer.tsx create mode 100644 resources/scripts/components/admin/settings/SettingsContainer.tsx diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx index 2335f44fa..ada645f1b 100644 --- a/resources/scripts/components/App.tsx +++ b/resources/scripts/components/App.tsx @@ -61,6 +61,7 @@ const App = () => { +
diff --git a/resources/scripts/components/admin/AdminContainer.tsx b/resources/scripts/components/admin/AdminContainer.tsx deleted file mode 100644 index 61c9b6086..000000000 --- a/resources/scripts/components/admin/AdminContainer.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import React, { useState } from 'react'; -import tw from 'twin.macro'; -import { useStoreState } from 'easy-peasy'; -import { ApplicationStore } from '@/state'; -import { NavLink, RouteComponentProps } from 'react-router-dom'; -import styled from 'styled-components/macro'; - -const Sidebar = styled.div` - ${tw`h-screen flex flex-col items-center bg-neutral-900 overflow-x-hidden`}; -`; - -const Navigation = styled.div` - ${tw`w-full flex flex-col px-4`}; - - & > span { - ${tw`font-header font-medium text-xs text-neutral-300 whitespace-no-wrap uppercase ml-4 mb-1`}; - - &:not(:first-of-type) { - ${tw`mt-4`}; - } - } - - & > a { - ${tw`h-10 w-full flex flex-row items-center text-neutral-300 px-4 transition-all duration-100 cursor-pointer`}; - - & > svg { - ${tw`h-6 w-6`}; - } - - & > span { - ${tw`font-header font-medium text-lg leading-none ml-3`}; - } - - &:hover { - ${tw`text-neutral-50`}; - } - - &:active, &.active { - ${tw`text-neutral-50 bg-neutral-800 rounded`} - } - } -`; - -const CollapsedNavigation = styled.div` - ${tw`w-full flex flex-col px-4`}; - - & > span { - ${tw`opacity-0 whitespace-no-wrap`}; - - &:not(:first-of-type) { - ${tw`mt-4`}; - } - } - - & > a { - ${tw`h-10 w-full flex flex-row items-center justify-center text-neutral-300 transition-all duration-100 cursor-pointer`}; - - & > svg { - ${tw`h-6 w-6 flex flex-shrink-0`}; - } - - & > span { - ${tw`hidden`}; - } - - &:hover { - ${tw`text-neutral-50`}; - } - - &:active, &.active { - ${tw`text-neutral-50 bg-neutral-800 rounded`} - } - } -`; - -type Props = { - url: string, -}; - -const NavItems = ({ url }: Props) => { - return ( - <> - Administration - - - - Overview - - - - Settings - - - - API Keys - - - Management - - - - Databases - - - - Locations - - - - Nodes - - - - Servers - - - - Users - - - Service Management - - - - Nests - - - - Packs - - - - Mounts - - - ); -}; - -export default ({ match }: RouteComponentProps<{ id: string }>) => { - const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); - const [ collapsed, setCollapsed ] = useState(); - - return ( -
- -
{ - setCollapsed(!collapsed); - } - }> - { !collapsed ? -

{name}

- : - - } -
- - {!collapsed ? - <> - - - - -
- Profile Picture - -
- Matthew Penner - Super Administrator -
- - - - -
- - : - <> - - - - - - - - -
- Profile Picture -
- - } - -
- ); -}; diff --git a/resources/scripts/components/admin/overview/OverviewContainer.tsx b/resources/scripts/components/admin/overview/OverviewContainer.tsx new file mode 100644 index 000000000..8cd6a4e70 --- /dev/null +++ b/resources/scripts/components/admin/overview/OverviewContainer.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export default () => { + return ( +

Overview

+ ); +}; diff --git a/resources/scripts/components/admin/settings/SettingsContainer.tsx b/resources/scripts/components/admin/settings/SettingsContainer.tsx new file mode 100644 index 000000000..4dfc8acc6 --- /dev/null +++ b/resources/scripts/components/admin/settings/SettingsContainer.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export default () => { + return ( +

Settings

+ ); +}; diff --git a/resources/scripts/components/screens/ScreenBlock.tsx b/resources/scripts/components/screens/ScreenBlock.tsx index 30b0faa7f..e4a378996 100644 --- a/resources/scripts/components/screens/ScreenBlock.tsx +++ b/resources/scripts/components/screens/ScreenBlock.tsx @@ -41,7 +41,7 @@ const ActionButton = styled(Button)` export default ({ title, image, message, onBack, onRetry }: Props) => (
-
+
{(typeof onBack === 'function' || typeof onRetry === 'function') &&
` + ${tw`h-screen flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`}; + ${props => props.collapsed ? 'width: 70px' : 'width: 287px'}; + + & > div.header { + ${tw`h-16 w-full flex flex-col items-center justify-center mt-1 mb-3 select-none cursor-pointer`}; + } + + & > div.wrapper { + ${tw`w-full flex flex-col px-4`}; + + & > span { + height: 18px; + ${tw`font-header font-medium text-xs text-neutral-300 whitespace-no-wrap uppercase ml-4 mb-1`}; + ${props => props.collapsed && tw`opacity-0`}; + + &:not(:first-of-type) { + ${tw`mt-4`}; + } + } + + & > a { + ${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer`}; + ${props => props.collapsed ? tw`justify-center` : tw`px-4`}; + + & > svg { + ${tw`h-6 w-6 flex flex-shrink-0`}; + } + + & > span { + ${props => props.collapsed ? tw`hidden` : tw`font-header font-medium text-lg whitespace-no-wrap leading-none ml-3`}; + } + + &:hover { + ${tw`text-neutral-50`}; + } + + &:active, &.active { + ${tw`text-neutral-50 bg-neutral-800 rounded`}; + } + } + } + + & > a { + ${props => !props.collapsed && tw`hidden`}; + } + + & > div.user { + ${tw`h-16 w-full flex items-center justify-center bg-neutral-700`}; + ${props => !props.collapsed && tw`mt-auto px-5`}; + + & > div, a { + ${props => props.collapsed && tw`hidden`}; + } + } +`; export default ({ location, match }: RouteComponentProps) => { + const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); + const [ collapsed, setCollapsed ] = useState(); + return ( - - - - - - +
+ +
{ + setCollapsed(!collapsed); + } + }> + { !collapsed ? +

{name}

+ : + + } +
+ +
+ Administration + + + + Overview + + + + Settings + + + + API Keys + + + Management + + + + Databases + + + + Locations + + + + Nodes + + + + Servers + + + + Users + + + Service Management + + + + Nests + + + + Packs + + + + Mounts + +
+ + + + + +
+ Profile Picture + +
+ Matthew Penner + Super Administrator +
+ + + + +
+ + + + + + + + + +
); };