fix(platform): adjust layout detail

perfsee · Dec 12, 2022 · a9177d6 · a9177d6
1 parent abf6783
commit a9177d6
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 150 deletions.
diff --git a/packages/components/src/layout/container.tsx b/packages/components/src/layout/container.tsx
@@ -16,14 +16,14 @@ limitations under the License.
 
 import styled from '@emotion/styled'
 import { useDispatchers, useModuleState } from '@sigi/react'
-import { FC, PropsWithChildren, useEffect } from 'react'
+import { FC, PropsWithChildren, useLayoutEffect } from 'react'
 
 import { LayoutModule } from './layout.module'
 
 export function useWideScreen() {
   const { setWideScreen } = useDispatchers(LayoutModule)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setWideScreen(true)
 
     return () => {
@@ -39,7 +39,7 @@ export const BodyContainer: FC<PropsWithChildren> = ({ children }) => {
 }
 
 const BodyContainerInner = styled.div<{ wide?: boolean }>(({ theme, wide }) => ({
-  minHeight: '70%',
+  flexGrow: 1,
   display: 'flex',
   flexDirection: 'column',
   padding: `20px ${theme.layout.mainPadding} 0`,
@@ -48,17 +48,12 @@ const BodyContainerInner = styled.div<{ wide?: boolean }>(({ theme, wide }) => (
         width: '100%',
       }
     : {
-        maxWidth: theme.layout.mainMaxWidth,
+        width: theme.layout.mainMaxWidth,
         marginLeft: 'auto',
         marginRight: 'auto',
       }),
-}))
 
-export const BodyPadding = styled.div(({ theme }) => ({
-  backgroundColor: theme.colors.white,
-  width: '100%',
-  margin: '20px 0 50px',
-  padding: '16px 24px',
-  borderRadius: '2px',
-  overflow: 'hidden',
+  '& &': {
+    width: 'unset',
+  },
 }))
diff --git a/packages/platform/index.html b/packages/platform/index.html
@@ -17,8 +17,8 @@
   <script>window.APP_VERSION = "<%=version%>"</script>
 </head>
 
-<body>
-  <div id="app" style="min-height: 100vh"></div>
+<body style="height: 100vh; overflow: auto">
+  <div id="app" style="height: 100%"></div>
 </body>
 
 </html>
diff --git a/packages/platform/src/common/lazy/index.tsx b/packages/platform/src/common/lazy/index.tsx
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { Spinner, SpinnerSize } from '@fluentui/react'
 import { lazy as reactLazy, ComponentType, ComponentPropsWithRef, Suspense } from 'react'
 
 export function lazy<T extends ComponentType<any>>(factory: () => Promise<Record<any, T>>, fallback?: React.ReactNode) {
@@ -35,7 +36,7 @@ export function lazy<T extends ComponentType<any>>(factory: () => Promise<Record
 
   return (props: ComponentPropsWithRef<T>) => {
     return (
-      <Suspense fallback={fallback}>
+      <Suspense fallback={fallback ?? <Spinner size={SpinnerSize.large} label="Loading..." />}>
         <LazyComponent {...props} />
       </Suspense>
     )

diff --git a/packages/platform/src/modules/admin/settings/index.tsx b/packages/platform/src/modules/admin/settings/index.tsx
@@ -53,7 +53,7 @@ export function Settings() {
   }, [saved, forceUpdate])
 
   if (!settings) {
-    return <Spinner size={SpinnerSize.large} label="loading..." />
+    return <Spinner size={SpinnerSize.large} label="Loading..." />
   }
 
   return (

diff --git a/packages/platform/src/modules/job-trace/style.tsx b/packages/platform/src/modules/job-trace/style.tsx
@@ -22,8 +22,7 @@ import { JobLogLevel } from '@perfsee/shared'
 import { Log as LogType } from './module'
 
 export const PageWrapper = styled('div')({
-  maxWidth: '80%',
-  height: 'calc(100vh - 140px)',
+  width: '100%',
   margin: '20px auto',
   display: 'flex',
   alignItems: 'flex-end',

diff --git a/packages/platform/src/modules/lab/list/module.ts b/packages/platform/src/modules/lab/list/module.ts
@@ -74,7 +74,8 @@ export interface State {
   loading: boolean
 }
 
-export const SNAPSHOT_PAGE_SIZE = 20
+// make 3 * n grid layout full
+export const SNAPSHOT_PAGE_SIZE = 21
 
 @Module('LabListModule')
 export class LabListModule extends EffectModule<State> {

diff --git a/packages/platform/src/modules/me/index.tsx b/packages/platform/src/modules/me/index.tsx
@@ -14,20 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Icon, PersonaSize, Stack, Text } from '@fluentui/react'
+import { INavLink, INavLinkGroup, PersonaSize, Stack, Text } from '@fluentui/react'
 import { useModule, useModuleState } from '@sigi/react'
 import { useCallback, useEffect } from 'react'
-import { Link, Switch } from 'react-router-dom'
+import { Link, Switch, useHistory } from 'react-router-dom'
 
-import { BodyContainer, BodyPadding, Route } from '@perfsee/components'
+import { BodyContainer, ContentCard, Route } from '@perfsee/components'
 import { staticPath } from '@perfsee/shared/routes'
 
+import { SecondaryNav } from '../layout'
 import { ConnectedAccount, ConnectedAccountsModule, GlobalModule } from '../shared'
 
 import { AccessToken } from './access-token'
 import { Account } from './account'
 import { UserAvatar } from './avatar'
-import { NavbarContainer, NavbarItem as StyledNavbarItem, PageLayout, Title } from './styled'
+import { Title } from './styled'
 
 export const Me = () => {
   const { user } = useModuleState(GlobalModule)
@@ -81,54 +82,58 @@ export const ConnectedAccounts = () => {
   )
 }
 
-const navbarItemStyle = (isActive: boolean) => ({
-  borderLeft: '3px solid ' + (isActive ? '#000' : 'transparent'),
-  background: isActive ? '#eee' : undefined,
-  fontWeight: isActive ? 600 : undefined,
-})
-const NavbarItem: React.FunctionComponent<{ to: string; children: React.ReactNode }> = ({ to, children }) => {
-  return (
-    <StyledNavbarItem exact to={to} style={navbarItemStyle}>
-      {children}
-    </StyledNavbarItem>
-  )
-}
+const navGroups: INavLinkGroup[] = [
+  {
+    links: [
+      {
+        name: 'Account',
+        key: staticPath.me.home,
+        url: '',
+        icon: 'settings',
+      },
+      {
+        name: 'Connected accounts',
+        key: staticPath.me.connectedAccounts,
+        url: '',
+        icon: 'user',
+      },
+      {
+        name: 'Personal access tokens',
+        key: staticPath.me.accessToken,
+        url: '',
+        icon: 'key',
+      },
+    ],
+  },
+]
 
-const Navbar = () => {
-  return (
-    <NavbarContainer>
-      <NavbarItem to={staticPath.me.home}>
-        <Icon iconName="settings" /> Account
-      </NavbarItem>
-      <NavbarItem to={staticPath.me.connectedAccounts}>
-        <Icon iconName="user" /> Connected accounts
-      </NavbarItem>
-      <NavbarItem to={staticPath.me.accessToken}>
-        <Icon iconName="key" /> Personal access tokens
-      </NavbarItem>
-      <NavbarItem to={staticPath.me.billing}>
-        <Icon iconName="creditCard" /> Billing (coming soon)
-      </NavbarItem>
-    </NavbarContainer>
+const MePage = () => {
+  const history = useHistory()
+
+  const onNavigate = useCallback(
+    (_: any, item?: INavLink) => {
+      if (item?.key && history.location.pathname !== item.key) {
+        history.push(item.key)
+      }
+    },
+    [history],
   )
-}
 
-const MePage = () => {
   return (
     <BodyContainer>
-      <BodyPadding>
-        <PageLayout tokens={{ childrenGap: 32 }}>
-          <Navbar />
-          <Stack.Item grow={1} tokens={{ padding: '0 16px' }}>
+      <Stack horizontal>
+        <SecondaryNav groups={navGroups} selectedKey={history.location.pathname} onLinkClick={onNavigate} />
+        <Stack.Item grow>
+          <ContentCard>
             <Switch>
               <Route exact={true} path={staticPath.me.home} component={Me} />
               <Route exact={true} path={staticPath.me.connectedAccounts} component={ConnectedAccounts} />
               <Route exact={true} path={staticPath.me.accessToken} component={AccessToken} />
               <Route exact={true} path={staticPath.me.billing} component={Me} />
             </Switch>
-          </Stack.Item>
-        </PageLayout>
-      </BodyPadding>
+          </ContentCard>
+        </Stack.Item>
+      </Stack>
     </BodyContainer>
   )
 }

diff --git a/packages/platform/src/modules/me/styled.tsx b/packages/platform/src/modules/me/styled.tsx
@@ -15,10 +15,6 @@ limitations under the License.
 */
 
 import styled from '@emotion/styled'
-import { Stack } from '@fluentui/react'
-import { NavLink } from 'react-router-dom'
-
-import { resetLink } from '@perfsee/dls'
 
 export const Title = styled.h1(({ theme }) => ({
   fontWeight: '600',
@@ -34,26 +30,3 @@ export const Title = styled.h1(({ theme }) => ({
 export const Hr = styled.div(({ theme }) => ({
   borderTop: '1px solid ' + theme.border.color,
 }))
-
-export const NavbarContainer = styled(Stack)({
-  width: '230px',
-  margin: '32px 0 0',
-})
-
-export const NavbarItem = styled(NavLink)({
-  width: '100%',
-  padding: '8px 16px',
-  color: '#000',
-  ':hover': {
-    background: '#eee',
-    textDecoration: 'none',
-  },
-  ...resetLink('#000'),
-})
-
-export const PageLayout = styled(Stack)({
-  flexDirection: 'row',
-  '@media screen and (max-width: 992px)': {
-    flexDirection: 'column',
-  },
-})
diff --git a/packages/platform/src/modules/snapshots/components/loading-shimmer.tsx b/packages/platform/src/modules/snapshots/components/loading-shimmer.tsx
@@ -14,56 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { css } from '@emotion/react'
-import { Shimmer } from '@fluentui/react'
+import { Shimmer, Stack } from '@fluentui/react'
 import { range } from 'lodash'
 
-import { BodyPadding } from '@perfsee/components'
-
 export const LoadingShimmer = () => {
   return (
-    <BodyPadding css={css({ '.ms-Shimmer-container': { margin: '10px 0' } })}>
-      <Shimmer />
-      <Shimmer />
-      <Shimmer />
-      <Shimmer />
-      <Shimmer />
-      <div css={css({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' })}>
-        <div>
-          {range(8).map((i) => (
-            <Shimmer width="calc(80vw - 380px)" height="15px" key={`shimmer-width-450-${i}`} />
-          ))}
-          <Shimmer width="100px" height="16px" />
-        </div>
-        <div css={css({ '.ms-Shimmer-container': { margin: 'unset' } })}>
-          {range(14).map((i) => (
-            <Shimmer width="380px" height="16px" key={`shimmer-width-500-${i}`} />
+    <Stack tokens={{ childrenGap: '40px', padding: '10px' }}>
+      {range(5).map((i) => (
+        <Stack key={`row-${i}`} tokens={{ childrenGap: '12px' }}>
+          {range(6).map((j) => (
+            <Shimmer key={`col-${j}`} />
           ))}
-        </div>
-      </div>
-      {range(12).map((i) => (
-        <Shimmer key={`shimmer-default-${i}`} />
-      ))}
-    </BodyPadding>
-  )
-}
-
-export const ListShimmer = ({ size }: { size: number }) => {
-  return (
-    <BodyPadding css={css({ '.ms-Shimmer-container': { margin: '10px 0' } })}>
-      {range(size).map((i) => (
-        <div
-          key={`shimmer-width-450-${i}`}
-          height="50px"
-          css={css({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' })}
-        >
-          <div>
-            <Shimmer width="200px" />
-            <Shimmer width="500px" />
-          </div>
-          <Shimmer width="100px" key={`shimmer-default-${i}`} />
-        </div>
+        </Stack>
       ))}
-    </BodyPadding>
+    </Stack>
   )
 }
diff --git a/packages/platform/src/modules/source/index.tsx b/packages/platform/src/modules/source/index.tsx
@@ -39,6 +39,7 @@ import {
   useQueryString,
   ContentCard,
   Empty,
+  useWideScreen,
 } from '@perfsee/components'
 import { ConstantColors } from '@perfsee/dls'
 import { formatTime, stopPropagation } from '@perfsee/platform/common'
@@ -227,6 +228,7 @@ type SourceQueryStringType = {
 }
 
 export const Source = () => {
+  useWideScreen()
   const [state, dispatcher] = useModule(SourceIssuesModule)
   const {
     bubbles: [TeachingStep1, TeachingStep2, TeachingStep3],

diff --git a/packages/platform/src/routes/entry.tsx b/packages/platform/src/routes/entry.tsx
@@ -28,7 +28,7 @@ import { Header, Footer } from '../modules/layout'
 import { GlobalModule } from '../modules/shared'
 
 import { Routes } from './routes'
-import { MainContainer, PageContainer } from './style'
+import { MainContainer } from './style'
 
 export const Entry = () => {
   const [{ user, settings, loading }, dispatcher] = useModule(GlobalModule)
@@ -56,13 +56,13 @@ export const Entry = () => {
   }
 
   return (
-    <PageContainer>
+    <>
       <Notifications />
       <MainContainer>
         {!isInIntroductionRoutes && <Header />}
         <Routes user={user} settings={settings} />
         <Footer isAdmin={user?.isAdmin} />
       </MainContainer>
-    </PageContainer>
+    </>
   )
 }
diff --git a/packages/platform/src/routes/style.ts b/packages/platform/src/routes/style.ts
@@ -17,20 +17,7 @@ limitations under the License.
 import styled from '@emotion/styled'
 
 export const MainContainer = styled.div({
-  flexShrink: 1,
-  overflow: 'auto',
-})
-
-export const PageContainer = styled.div({
+  minHeight: '100%',
   display: 'flex',
   flexDirection: 'column',
-  height: '100vh',
-  overflow: 'hidden',
-
-  '> *': {
-    flexShrink: 0,
-  },
-  [`${MainContainer}`]: {
-    flexGrow: 1,
-  },
 })