add: draft for GNB with new icons

lablup · Aug 29, 2024 · 5519eb7 · 5519eb7
1 parent 843f5ce
commit 5519eb7
Show file tree

Hide file tree

Showing 19 changed files with 306 additions and 115 deletions.
diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx
@@ -13,7 +13,6 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         {`
           .bai-menu li.ant-menu-item.ant-menu-item-selected {
             overflow: visible;
-            font-weight: 600;
           }
           
           .bai-menu li.ant-menu-item.ant-menu-item-selected::before {
@@ -22,7 +21,6 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
             bottom: 0;
             position: absolute;
             right: auto;
-            border-right: 3px solid ${token.colorPrimary};
             transform: scaleY(1);
             opacity: 1;
             content: "";
@@ -33,7 +31,7 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         theme={{
           components: {
             Menu: {
-              itemBorderRadius: 2,
+              itemBorderRadius: 20,
               itemMarginInline: 0,
             },
           },

diff --git a/react/src/components/BAISider.tsx b/react/src/components/BAISider.tsx
@@ -53,10 +53,27 @@ const BAISider: React.FC<BAISiderProps> = ({
           .bai-sider .non-draggable {
             -webkit-app-region: no-drag;
           }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected {
+            border-radius: 20px;
+            background-color: #FFE3B7 !important;
+          }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected > span.ant-menu-title-content {
+            color: #FF7A00 !important;
+            font-weight: normal;
+          }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected::before {
+          width: 0px !important;
+          }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected > span.anticon.ant-menu-item-icon {
+            color: #FF7A00 !important;
+          }
+          .bai-menu span.ant-menu-title-content {
+            color: #333;
+          }
         `}
       </style>
       <Sider
-        width={221}
+        width={220}
         breakpoint="md"
         style={{
           overflowX: 'hidden',
@@ -65,7 +82,7 @@ const BAISider: React.FC<BAISiderProps> = ({
           position: 'sticky',
           top: 0,
           left: 0,
-          borderRight: '1px solid',
+          background: '#FFF',
           borderColor: token.colorBorder,
           paddingTop: token.paddingContentVerticalSM,
           scrollbarColor: 'auto',
@@ -86,7 +103,7 @@ const BAISider: React.FC<BAISiderProps> = ({
             algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
           }}
         >
-          <Flex
+          {/* <Flex
             direction="column"
             justify="start"
             align="start"
@@ -120,7 +137,7 @@ const BAISider: React.FC<BAISiderProps> = ({
                 {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
               </Typography.Text>
             </div>
-          </Flex>
+          </Flex> */}
           {children}
           {bottomText && (
             <>

diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
@@ -122,16 +122,9 @@ function MainLayout() {
           </>
         }
       >
-        <WebUISider
-          collapsed={sideCollapsed}
-          onBreakpoint={(broken) => {
-            if (broken) {
-              setSideCollapsed(true);
-            } else {
-              !compactSidebarActive && setSideCollapsed(false);
-            }
-          }}
-          webuiplugins={webUIPlugins}
+        <WebUIHeader
+          onClickMenuIcon={() => setSideCollapsed((v) => !v)}
+          containerElement={contentScrollFlexRef.current}
         />
       </Suspense>
       <Layout
@@ -145,8 +138,8 @@ function MainLayout() {
             direction="column"
             align="stretch"
             style={{
-              paddingLeft: token.paddingContentHorizontalLG,
-              paddingRight: token.paddingContentHorizontalLG,
+              // paddingLeft: token.paddingContentHorizontalLG,
+              // paddingRight: token.paddingContentHorizontalLG,
               paddingBottom: token.paddingContentVertical,
               height: '100vh',
               overflow: 'auto',
@@ -162,20 +155,19 @@ function MainLayout() {
                   </div>
                 }
               >
-                <div
-                  style={{
-                    margin: `0 -${token.paddingContentHorizontalLG}px 0 -${token.paddingContentHorizontalLG}px`,
-                    position: 'sticky',
-                    top: 0,
-                    zIndex: HEADER_Z_INDEX_IN_MAIN_LAYOUT,
-                  }}
-                >
-                  <NetworkStatusBanner />
-                  <WebUIHeader
-                    onClickMenuIcon={() => setSideCollapsed((v) => !v)}
-                    containerElement={contentScrollFlexRef.current}
+                <Flex>
+                  <WebUISider
+                    collapsed={sideCollapsed}
+                    onBreakpoint={(broken) => {
+                      if (broken) {
+                        setSideCollapsed(true);
+                      } else {
+                        !compactSidebarActive && setSideCollapsed(false);
+                      }
+                    }}
+                    webuiplugins={webUIPlugins}
                   />
-                </div>
+                </Flex>
               </Suspense>
               {/* <Flex direction="column"> */}
 

diff --git a/react/src/components/MainLayout/WebUIHeader.tsx b/react/src/components/MainLayout/WebUIHeader.tsx
@@ -1,9 +1,12 @@
+import { useCustomThemeConfig } from '../../helper/customThemeConfig';
 import { useCurrentDomainValue } from '../../hooks';
+import { useSuspendedBackendaiClient, useWebUINavigate } from '../../hooks';
 import {
   useCurrentProjectValue,
   useSetCurrentProject,
 } from '../../hooks/useCurrentProject';
 import { useScrollBreakPoint } from '../../hooks/useScrollBreackPoint';
+import { useThemeMode } from '../../hooks/useThemeMode';
 import BAINotificationButton from '../BAINotificationButton';
 import Flex, { FlexProps } from '../Flex';
 import ProjectSelect from '../ProjectSelect';
@@ -42,6 +45,14 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
     containerElement,
   );
   const gridBreakpoint = Grid.useBreakpoint();
+  const themeConfig = useCustomThemeConfig();
+  const webuiNavigate = useWebUINavigate();
+  const { isDarkMode } = useThemeMode();
+  const mergedSiderTheme = themeConfig?.sider?.theme
+    ? themeConfig.sider.theme
+    : isDarkMode
+      ? 'dark'
+      : 'light';
 
   const { md } = Grid.useBreakpoint();
 
@@ -59,55 +70,66 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
         height: HEADER_HEIGHT,
         paddingRight: token.marginMD,
         paddingLeft: token.marginMD,
-        backgroundColor: scrolled ? token.colorBgElevated : 'transparent',
+        backgroundColor: token.colorFillContent,
         boxShadow: scrolled ? `0 5px 6px -6px ${token.colorBorder}` : 'none',
         transition: 'background-color 0.2s ease-in-out',
       }}
       className={'webui-header-container'}
     >
       <style>{rawCss}</style>
-      <Flex direction="row" gap={'sm'}>
-        <Button
-          icon={<MenuOutlined />}
-          type="text"
-          onClick={() => {
-            onClickMenuIcon?.();
+      <Flex align="center" justify="start" direction="row">
+        <img
+          className="logo-wide"
+          alt={themeConfig?.logo?.alt || 'Backend.AI Logo'}
+          src={
+            mergedSiderTheme === 'dark' && themeConfig?.logo?.srcDark
+              ? themeConfig?.logo?.srcDark ||
+                '/manifest/backend.ai-text-bgdark.svg'
+              : themeConfig?.logo?.src || '/manifest/backend.ai-text.svg'
+          }
+          style={{
+            width: themeConfig?.logo?.size?.width || 191,
+            height: themeConfig?.logo?.size?.height || 32,
+            cursor: 'pointer',
           }}
-          className="non-draggable"
+          onClick={() => webuiNavigate(themeConfig?.logo?.href || '/summary')}
         />
-        <Typography.Title level={5} style={{ margin: 0 }}>
-          {/* @ts-ignore */}
-          {t(_.last(matches)?.handle?.labelKey) || ''}
-        </Typography.Title>
-      </Flex>
-      <Flex gap={md ? 'sm' : 'xs'}>
-        <Typography.Text type="secondary">
-          {t('webui.menu.Project')}
-        </Typography.Text>
         <Suspense>
-          <ProjectSelect
-            popupMatchSelectWidth={false}
-            style={{
-              minWidth: 100,
-              maxWidth: gridBreakpoint.lg ? undefined : 100,
-            }}
-            loading={isPendingProjectChanged}
-            disabled={isPendingProjectChanged}
-            className="non-draggable"
-            showSearch
-            domain={currentDomainName}
-            size={gridBreakpoint.lg ? 'large' : 'middle'}
-            value={
-              isPendingProjectChanged ? optimisticProjectId : currentProject?.id
-            }
-            onSelectProject={(projectInfo) => {
-              setOptimisticProjectId(projectInfo.projectId);
-              startProjectChangedTransition(() => {
-                setCurrentProject(projectInfo);
-              });
-            }}
-          />
+          <Flex gap={md ? 'sm' : 'xs'}>
+            <Typography.Text
+              type="secondary"
+              style={{ color: 'white', fontSize: '1rem' }}
+            >
+              {t('webui.menu.Project')}
+            </Typography.Text>
+            <ProjectSelect
+              popupMatchSelectWidth={false}
+              style={{
+                minWidth: 100,
+                maxWidth: gridBreakpoint.lg ? undefined : 100,
+              }}
+              loading={isPendingProjectChanged}
+              disabled={isPendingProjectChanged}
+              className="non-draggable"
+              showSearch
+              domain={currentDomainName}
+              size={gridBreakpoint.lg ? 'large' : 'middle'}
+              value={
+                isPendingProjectChanged
+                  ? optimisticProjectId
+                  : currentProject?.id
+              }
+              onSelectProject={(projectInfo) => {
+                setOptimisticProjectId(projectInfo.projectId);
+                startProjectChangedTransition(() => {
+                  setCurrentProject(projectInfo);
+                });
+              }}
+            />
+          </Flex>
         </Suspense>
+      </Flex>
+      <Flex gap={md ? 'sm' : 'xs'}>
         <Flex direction="row" className="non-draggable">
           <BAINotificationButton />
           <WebUIThemeToggleButton />