From b474e5d19b098e3995a0552c444306aa32fe2e6d Mon Sep 17 00:00:00 2001 From: William Stein Date: Wed, 9 Jul 2025 05:14:48 +0000 Subject: [PATCH 1/2] cleaner top bar --- src/packages/frontend/app/page.tsx | 61 +++++++----------- src/packages/frontend/app/top-nav-consts.ts | 8 +-- src/packages/frontend/app/use-context.ts | 14 +--- .../frontend/components/sortable-tabs.tsx | 14 +++- .../project/page/home-page/button.tsx | 1 + .../frontend/projects/projects-nav.tsx | 64 +++++++++++++++---- 6 files changed, 92 insertions(+), 70 deletions(-) diff --git a/src/packages/frontend/app/page.tsx b/src/packages/frontend/app/page.tsx index 0bd9e2e899..5bcf53a0d8 100644 --- a/src/packages/frontend/app/page.tsx +++ b/src/packages/frontend/app/page.tsx @@ -43,7 +43,7 @@ import { useAppContext } from "./context"; import { FullscreenButton } from "./fullscreen-button"; import { I18NBanner, useShowI18NBanner } from "./i18n-banner"; import InsecureTestModeBanner from "./insecure-test-mode-banner"; -import { AppLogo } from "./logo"; +// import { AppLogo } from "./logo"; import { NavTab } from "./nav-tab"; import { Notification } from "./notifications"; import PopconfirmModal from "./popconfirm-modal"; @@ -80,7 +80,7 @@ export const Page: React.FC = () => { const page_actions = useActions("page"); const { pageStyle } = useAppContext(); - const { isNarrow, fileUseStyle, topBarStyle, projectsNavStyle } = pageStyle; + const { isNarrow, fileUseStyle, topBarStyle } = pageStyle; const intl = useIntl(); @@ -203,7 +203,6 @@ export const Page: React.FC = () => { return ( { { ); } - function render_project_nav_button(): React.JSX.Element { - return ( - - ); - } + // function render_project_nav_button(): React.JSX.Element { + // return ( + // + // ); + // } // register a default drag and drop handler, that prevents // accidental file drops @@ -378,21 +373,13 @@ export const Page: React.FC = () => { {!fullscreen && ( )} {fullscreen && render_fullscreen()} - {isNarrow && ( - - )} diff --git a/src/packages/frontend/app/top-nav-consts.ts b/src/packages/frontend/app/top-nav-consts.ts index 2cb87c1850..8f06f1566d 100644 --- a/src/packages/frontend/app/top-nav-consts.ts +++ b/src/packages/frontend/app/top-nav-consts.ts @@ -11,11 +11,8 @@ export const NARROW_THRESHOLD_PX = 550; // show labels of projects, if there are less than this many export const HIDE_LABEL_THRESHOLD = 6; -// the width of the top bar -export const NAV_HEIGHT_PX = 36; - -// … and on narrower screens, a bit tighter -export const NAV_HEIGHT_NARROW_PX = 28; +export const NAV_HEIGHT_PX = 46; +export const NAV_HEIGHT_NARROW_PX = 46; export const NAV_CLASS = "hidden-xs"; @@ -30,7 +27,6 @@ export const TOP_BAR_ELEMENT_CLASS = "cocalc-top-bar-element"; export interface PageStyle { topBarStyle: CSS; fileUseStyle: CSS; - projectsNavStyle: CSS | undefined; fontSizeIcons: string; // {n}px topPaddingIcons: string; // {n}px sidePaddingIcons: string; // {n}px diff --git a/src/packages/frontend/app/use-context.ts b/src/packages/frontend/app/use-context.ts index 3ea812e201..68df60887d 100644 --- a/src/packages/frontend/app/use-context.ts +++ b/src/packages/frontend/app/use-context.ts @@ -55,6 +55,7 @@ export function calcStyle(isNarrow: boolean): PageStyle { const topBarStyle = { height: `${height}px`, + background: "#fafafa", } as const; const fileUseStyle = { @@ -75,22 +76,9 @@ export function calcStyle(isNarrow: boolean): PageStyle { zIndex: 110, } as const; - const projectsNavStyle = isNarrow - ? ({ - /* this makes it so the projects tabs are on a separate row; otherwise, there is literally no room for them at all... */ - width: "100vw", - marginTop: "4px", - height: `${height}px`, - // no flex! - } as const) - : ({ - flex: "1 1 auto", // necessary to stretch out to the full width - } as const); - return { topBarStyle, fileUseStyle, - projectsNavStyle, isNarrow, sidePaddingIcons, topPaddingIcons, diff --git a/src/packages/frontend/components/sortable-tabs.tsx b/src/packages/frontend/components/sortable-tabs.tsx index 34e7188de0..0b79eecb28 100644 --- a/src/packages/frontend/components/sortable-tabs.tsx +++ b/src/packages/frontend/components/sortable-tabs.tsx @@ -38,6 +38,7 @@ interface Props { items: (string | number)[]; children?: ReactNode; style?: CSSProperties; + tabWidth?: number; } interface ItemContextType { @@ -52,8 +53,14 @@ export function useItemContext() { return useContext(ItemContext); } -export function SortableTabs(props: Props) { - const { onDragStart, onDragEnd, items, children, style } = props; +export function SortableTabs({ + onDragStart, + onDragEnd, + items, + children, + style, + tabWidth, +}: Props) { const mouseSensor = useSensor(MouseSensor, { activationConstraint: { distance: 2, @@ -77,6 +84,9 @@ export function SortableTabs(props: Props) { const { isOver } = useMouse(divRef); const itemWidth = useMemo(() => { + if (tabWidth) { + return tabWidth; + } if (divRef.current == null) { lastRef.current = null; return undefined; diff --git a/src/packages/frontend/project/page/home-page/button.tsx b/src/packages/frontend/project/page/home-page/button.tsx index a9fa813d2a..e396f1fd73 100644 --- a/src/packages/frontend/project/page/home-page/button.tsx +++ b/src/packages/frontend/project/page/home-page/button.tsx @@ -32,6 +32,7 @@ export default function HomePageButton({ project_id, active, width }) { fontSize: "24px", color: active ? COLORS.ANTD_LINK_BLUE : COLORS.FILE_ICON, transitionDuration: "0s", + background: "#fafafa", }} onClick={() => { // Showing homepage in flyout only mode, otherwise the files as usual diff --git a/src/packages/frontend/projects/projects-nav.tsx b/src/packages/frontend/projects/projects-nav.tsx index a471581ada..ba5d82c763 100644 --- a/src/packages/frontend/projects/projects-nav.tsx +++ b/src/packages/frontend/projects/projects-nav.tsx @@ -5,7 +5,6 @@ import type { TabsProps } from "antd"; import { Avatar, Popover, Tabs, Tooltip } from "antd"; - import { redux, useActions, @@ -31,6 +30,9 @@ import { CSSProperties, useMemo, useState } from "react"; import { useProjectState } from "../project/page/project-state-hook"; import { useProjectHasInternetAccess } from "../project/settings/has-internet-access-hook"; import { BuyLicenseForProject } from "../site-licenses/purchase/buy-license-for-project"; +import { ProjectTitle } from "@cocalc/frontend/projects/project-title"; + +const minimal = true; const PROJECT_NAME_STYLE: CSSProperties = { whiteSpace: "nowrap", @@ -83,10 +85,7 @@ function ProjectTab({ project_id }: ProjectTabProps) { return ( // Hiding this on very skinny devices isn't necessarily bad, since the exact same information is // now visible via a big "Connecting..." banner after a few seconds. - + ); @@ -194,13 +193,22 @@ function ProjectTab({ project_id }: ProjectTabProps) { function renderAvatar() { const avatar = project?.get("avatar_image_tiny"); - if (!avatar) return; + if (!avatar) { + if (!minimal) { + return null; + } + return ( + + {title.slice(0, 1).toUpperCase()} + + ); + } return ( } - size={20} + size={36} /> ); } @@ -215,13 +223,23 @@ function ProjectTab({ project_id }: ProjectTabProps) { } const body = ( -
+
{renderWebsocketIndicator()}
-
+
{icon} {renderNoInternet()} {renderAvatar()}{" "} - {title} + {!minimal && ( + {title} + )}
); @@ -300,14 +318,19 @@ export function ProjectsNav(props: ProjectsNavProps) { style={{ overflow: "hidden", height: `${height}px`, + display: "flex", + flex: 1, + paddingLeft: "15px", ...style, }} > {items.length > 0 && ( { actions.set_active_tab(project_id); }} - type={"editable-card"} renderTabBar={renderTabBar} items={items} + type={"editable-card"} /> )} + {activeTopTab?.length == 36 && ( + + )}
); } From 2ff57fabcd82f2e14cc9c3a2ab58b3264bb78c68 Mon Sep 17 00:00:00 2001 From: William Stein Date: Wed, 9 Jul 2025 15:04:59 +0000 Subject: [PATCH 2/2] ... --- src/packages/frontend/projects/projects-nav.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/frontend/projects/projects-nav.tsx b/src/packages/frontend/projects/projects-nav.tsx index ba5d82c763..6c56fd59d6 100644 --- a/src/packages/frontend/projects/projects-nav.tsx +++ b/src/packages/frontend/projects/projects-nav.tsx @@ -352,13 +352,13 @@ export function ProjectsNav(props: ProjectsNavProps) { project_id={activeTopTab} style={{ width: "100%", - fontSize: "18pt", + fontSize: "14pt", textOverflow: "ellipsis", overflow: "hidden", textAlign: "center", whiteSpace: "nowrap", color: "#666", - marginTop: "2px", + marginTop: "6px", marginLeft: "30px", }} />