Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(console): new layout and new login page #898

Merged
merged 1 commit into from
Aug 15, 2022
Merged

feat(console): new layout and new login page #898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions console/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@
"@typescript-eslint/eslint-plugin": "^5.23.0",
"@typescript-eslint/parser": "^5.23.0",
"@typescript-eslint/typescript-estree": "^5.23.0",
"@vitejs/plugin-react": "^2.0.0",
"babel-eslint": "^10.1.0",
"craco-esbuild": "^0.3.3",
"cypress": "^9.6.1",
Expand Down
1 change: 0 additions & 1 deletion console/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import '@/assets/fonts/iconfont.css'
apiInit()
const engine = new Styletron()
const queryClient = new QueryClient()

export default function App(): any {
// eslint-disable-next-line react-hooks/exhaustive-deps
const sidebarData = useSidebar()
Expand Down
2 changes: 1 addition & 1 deletion console/src/api/ApiHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function ApiHeader() {
} else {
redirect = '/'
}
if (location.pathname !== '/login' && location.pathname !== '/login/') {
if (!location.pathname.startsWith('/login')) {
window.location.href = `${window.location.protocol}//${
window.location.host
}/login?redirect=${encodeURIComponent(redirect)}`
Expand Down
32 changes: 32 additions & 0 deletions console/src/assets/logo_normal_en_gray.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 31 additions & 21 deletions console/src/components/BaseNavTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
/* eslint-disable react/no-unused-prop-types */

import React, { useMemo } from 'react'
import { Tabs, Tab } from 'baseui/tabs-motion'
import { Tabs, Tab, TabsProps, TabProps } from 'baseui/tabs-motion'
import { useHistory, useLocation } from 'react-router-dom'
import _ from 'lodash'
import { StatefulTooltip } from 'baseui/tooltip'
import { AiOutlineQuestionCircle } from 'react-icons/ai'
import { mergeOverrides } from '@/utils/baseui'
import { INavItem } from './BaseSidebar'

export interface IComposedNavTabsProps {
style?: React.CSSProperties
navStyle?: React.CSSProperties
fill?: TabsProps['fill']
tabsOverrides?: TabsProps['overrides']
tabOverrides?: TabProps['overrides']
}

export interface IBaseNavTabsProps extends IComposedNavTabsProps {
navItems: INavItem[]
}

export function BaseNavTabs({ navItems }: IBaseNavTabsProps) {
export function BaseNavTabs({ navItems, fill = 'intrinsic', tabsOverrides, tabOverrides }: IBaseNavTabsProps) {
const history = useHistory()
const location = useLocation()

Expand All @@ -35,37 +39,43 @@ export function BaseNavTabs({ navItems }: IBaseNavTabsProps) {
onChange={({ activeKey }) => {
history.push(activeKey as string)
}}
fill='intrinsic'
fill={fill}
activateOnFocus
overrides={{
TabHighlight: {
style: {
background: 'var(--color-brandPrimary)',
overrides={mergeOverrides(
{
TabHighlight: {
style: {
background: 'var(--color-brandPrimary)',
},
},
},
}}
tabsOverrides
)}
>
{navItems.map((item) => {
const Icon = item.icon
return (
<Tab
overrides={{
TabPanel: {
style: {
padding: '0px !important',
overrides={mergeOverrides(
{
TabPanel: {
style: {
padding: '0px !important',
},
},
},
Tab: {
style: {
'background': 'transparent',
'color': item.path === activeItemId ? 'var(--color-brandPrimary)' : '',
':hover': {
background: 'transparent',
color: 'var(--color-brandPrimary)',
Tab: {
style: {
'background': 'transparent',
'color': item.path === activeItemId ? 'var(--color-brandPrimary)' : '',
':hover': {
background: 'transparent',
color: 'var(--color-brandPrimary)',
},
},
},
},
}}
tabOverrides
)}
disabled={item.disabled}
key={item.path}
title={
Expand Down
85 changes: 35 additions & 50 deletions console/src/components/BaseSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import type { IconBaseProps } from 'react-icons/lib'
import { SidebarContext } from '@/contexts/SidebarContext'
import Text from '@/components/Text'
import { createUseStyles } from 'react-jss'
import Logo from '@/components/Header/Logo'
import { headerHeight, sidebarExpandedWidth, sidebarFoldedWidth } from '@/consts'
import IconFont from '@/components/IconFont'

const useBaseSideBarStyles = createUseStyles({
Expand All @@ -21,33 +19,31 @@ const useBaseSideBarStyles = createUseStyles({
flexDirection: 'column',
overflow: 'hidden',
overflowY: 'auto',
background: 'var(--color-brandBgNav)',
background: '#FFFFFF',
transition: 'all 200ms cubic-bezier(0.7, 0.1, 0.33, 1) 0ms',
},

siderLogo: {
height: headerHeight,
color: 'rgba(2,16,43,0.60)',
borderRight: '1px solid #E2E7F0',
},
siderTitle: {
height: '56px',
backgroundColor: 'var(--color-brandBgNavTitle)',
color: 'var(--color-brandBgNavFont)',
height: '48px',
backgroundColor: '#F7F8FA',
color: '#02102B',
display: 'flex',
gap: 14,
fontSize: '14px',
placeItems: 'center',
padding: '8px 15px 8px 15px',
padding: '8px 26px 8px 26px',
overflow: 'hidden',
textDecoration: 'none',
marginBottom: '7px',
marginBottom: '5px',
},
siderNavLink: {
display: 'flex',
alignItems: 'center',
fontSize: 14,
lineHeight: '40px',
height: 40,
gap: 12,
height: 38,
gap: 10,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
Expand Down Expand Up @@ -77,6 +73,9 @@ export interface IBaseSideBarProps extends IComposedSidebarProps {
navItems: INavItem[]
}

const EXPANDED_PADDING = '26px'
const FOLDED_PADDING = '0px'

export default function BaseSidebar({ navItems, style, title, icon, titleLink }: IBaseSideBarProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
const width = useSidebarWidth()
Expand All @@ -92,7 +91,13 @@ export default function BaseSidebar({ navItems, style, title, icon, titleLink }:
const { icon: Icon } = item
return {
title: (
<div className={styles.siderNavLink} style={{ paddingLeft: ctx.expanded ? 24 : 18 }}>
<div
className={styles.siderNavLink}
style={{
paddingLeft: ctx.expanded ? '18px' : '',
justifyContent: ctx.expanded ? 'flex-start' : 'center',
}}
>
{Icon}
{ctx.expanded && <span>{item.title}</span>}
</div>
Expand Down Expand Up @@ -140,12 +145,11 @@ export default function BaseSidebar({ navItems, style, title, icon, titleLink }:
...style,
}}
>
<Logo className={styles.siderLogo} expanded={ctx.expanded} />
{title && icon && (
<Link
className={styles.siderTitle}
style={{
paddingLeft: !ctx.expanded ? 28 : 15,
paddingLeft: EXPANDED_PADDING,
}}
to={titleLink ?? '/projects'}
>
Expand All @@ -156,7 +160,6 @@ export default function BaseSidebar({ navItems, style, title, icon, titleLink }:
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
color: 'var(--color-brandWhite)',
}}
>
{title}
Expand All @@ -175,8 +178,8 @@ export default function BaseSidebar({ navItems, style, title, icon, titleLink }:
},
NavItemContainer: {
style: {
height: 40,
padding: '5px 10px',
height: 38,
padding: '5px 8px',
boxSizing: 'border-box',
borderLeftWidth: '0',
backgroundImage: 'none',
Expand All @@ -193,11 +196,12 @@ export default function BaseSidebar({ navItems, style, title, icon, titleLink }:
'paddingBottom': '0',
'backgroundImage': 'none',
'borderLeftWidth': '0',
'backgroundColor': 'var(--color-brandPrimary)',
'borderRadius': '8px',
'color': 'var(--color-brandBgNavFont)',
'color': '#2B65D9',
'backgroundColor': '#F0F4FF',
':hover': {
color: 'var(--color-brandBgNavFont)',
color: '#2B65D9',
backgroundColor: '#F0F4FF',
},
}

Expand All @@ -210,10 +214,10 @@ export default function BaseSidebar({ navItems, style, title, icon, titleLink }:
'backgroundColor': 'none',
'backgroundImage': 'none',
'borderRadius': '8px',
'color': 'var(--color-brandBgNavFontGray)',
'color': 'rgba(2,16,43,0.60)',
':hover': {
color: 'var(--color-brandBgNavFont)',
backgroundColor: 'var(--color-brandPrimaryHover)',
color: '#2B65D9',
backgroundColor: '#F0F4FF',
},
}
},
Expand All @@ -232,46 +236,27 @@ export default function BaseSidebar({ navItems, style, title, icon, titleLink }:
<div
style={{
display: 'flex',
flexDirection: ctx.expanded ? 'row' : 'column',
alignItems: 'center',
height: 48,
position: 'relative',
borderTop: '1px solid var(--color-brandBgNavBorder)',
borderTop: '1px solid #EEF1F6',
paddingLeft: ctx.expanded ? EXPANDED_PADDING : FOLDED_PADDING,
justifyContent: ctx.expanded ? 'flex-start' : 'center',
}}
>
<div
style={{
flexGrow: 1,
width: ctx.expanded ? sidebarExpandedWidth - sidebarFoldedWidth : sidebarFoldedWidth,
}}
/>
<div
role='button'
tabIndex={0}
onClick={handleExpandedClick}
style={{
position: 'absolute',
right: 0,
top: 0,
bottom: 0,
cursor: 'pointer',
display: 'flex',
flexDirection: 'row',
color: 'rgba(2,16,43,0.60)',
alignItems: 'center',
color: 'var(--color-brandBgNavFont)',
}}
>
<div
style={{
display: 'inline-flex',
float: 'right',
alignSelf: 'center',
width: sidebarFoldedWidth,
justifyContent: 'center',
}}
>
{ctx.expanded ? <IconFont type='fold' /> : <IconFont type='unfold' />}
</div>
{ctx.expanded ? <IconFont type='fold' /> : <IconFont type='unfold' />}
</div>
</div>
</div>
Expand Down
5 changes: 2 additions & 3 deletions console/src/components/Card/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
margin-bottom: 10px;
display: flex;
border-radius: 8px;
padding: 36px 28px;
flex-direction: column;

.card {
Expand All @@ -43,7 +42,7 @@
align-items: center;
display: flex;
gap: 20px;
margin-bottom: 28px;
margin-bottom: 12px;
// padding: 6px 0;
}

Expand All @@ -53,7 +52,7 @@
align-items: center;
gap: 8px;
flex-shrink: 0;
padding: 10px 0;
// padding: 10px 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Expand Down
7 changes: 4 additions & 3 deletions console/src/components/Card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const useStyles = createUseStyles({

return {
'background': props.theme.colors.backgroundPrimary,
'marginTop': '100px',
'marginTop': '12px',
'& a': linkStyle,
'& a:link': linkStyle,
'& a:visited': linkStyle,
Expand Down Expand Up @@ -127,8 +127,9 @@ export default function Card({
<Text
// size='large'
style={{
fontSize: 30,
fontWeight: 700,
fontSize: '18px',
fontWeight: 'bold',
lineHeight: '32px',
}}
>
{title}
Expand Down
1 change: 1 addition & 0 deletions console/src/components/Form/form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
/* eslint-disable react/require-default-props */

import React, { ReactElement, ReactNode } from 'react'
// @ts-ignore
import RcForm, { useForm as RcUseForm } from 'rc-field-form'
import { FormProps as RcFormProps } from 'rc-field-form/es/Form'
import { FieldProps as RcFieldProps } from 'rc-field-form/es/Field'
Expand Down
Loading