Merge pull request #7780 from sagemathinc/port-bottom-left-from-6804

frontend/page: porting over bottom-left vertical bar show/hide changes

Author: williamstein

src/packages/frontend/components/icon.tsx

@@ -216,6 +216,7 @@ import {
   UsergroupAddOutlined,
   VerticalAlignBottomOutlined,
   VerticalAlignMiddleOutlined,
+  VerticalLeftOutlined,
   VerticalRightOutlined,
   VideoCameraOutlined,
   WalletOutlined,
@@ -603,6 +604,7 @@ const IconSpec: { [name: string]: any } = {
   "video-camera": VideoCameraOutlined,
   "vertical-align-middle": VerticalAlignMiddleOutlined,
   "vertical-align-bottom": VerticalAlignBottomOutlined,
+  "vertical-left-outlined": VerticalLeftOutlined,
   vim: { IconFont: "vim" },
   vscode: { IconFont: "vscode" },
   wallet: WalletOutlined,

src/packages/frontend/project/page/content.tsx

@@ -141,15 +141,15 @@ const TabContent: React.FC<TabContentProps> = (props: TabContentProps) => {
     case "log":
       return <ProjectLog project_id={project_id} />;
     case "search":
-      return <ProjectSearch project_id={project_id} />;
+      return <ProjectSearch />;
     case "servers":
-      return <ProjectServers project_id={project_id} />;
+      return <ProjectServers />;
     case "settings":
       return <ProjectSettings project_id={project_id} />;
     case "info":
       return <ProjectInfo project_id={project_id} />;
     case "users":
-      return <ProjectCollaboratorsPage project_id={project_id} />;
+      return <ProjectCollaboratorsPage />;
     case "upgrades":
       return <ProjectLicenses project_id={project_id} />;
     default:

src/packages/frontend/project/page/flyouts/body.tsx

@@ -17,7 +17,7 @@ import * as LS from "@cocalc/frontend/misc/local-storage-typed";
 import { useProjectContext } from "../../context";
 import { FIX_BORDER } from "../common";
 import { FIXED_PROJECT_TABS, FixedTab } from "../file-tab";
-import { FIXED_TABS_BG_COLOR } from "../tabs";
+import { FIXED_TABS_BG_COLOR } from "../vertical-fixed-tabs";
 import { FLYOUT_PADDING } from "./consts";
 import { LSFlyout, lsKey, storeFlyoutState } from "./state";
 

src/packages/frontend/project/page/flyouts/search.tsx

@@ -5,8 +5,6 @@
 
 import { ProjectSearchBody } from "@cocalc/frontend/project/search/body";
 
-export function SearchFlyout({ project_id, wrap }) {
-  return (
-    <ProjectSearchBody mode="flyout" project_id={project_id} wrap={wrap} />
-  );
+export function SearchFlyout({ wrap }) {
+  return <ProjectSearchBody mode="flyout" wrap={wrap} />;
 }

src/packages/frontend/project/page/home-page/button.tsx

@@ -3,36 +3,17 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Button, Switch, Tooltip } from "antd";
+import { Button } from "antd";
 
 import { useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
-import { COLORS } from "@cocalc/util/theme";
 import track from "@cocalc/frontend/user-tracking";
+import { COLORS } from "@cocalc/util/theme";
 
 export default function HomePageButton({ project_id, active, width }) {
   const actions = useActions({ project_id });
   const hideActionButtons = useTypedRedux(project_id, "hideActionButtons");
-  if (hideActionButtons)
-    return (
-      <div
-        style={{
-          width,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <Tooltip title="Show the action bar" placement="right">
-          <Switch
-            onChange={() => {
-              track("action-bar", { action: "show" });
-              actions?.toggleActionButtons();
-            }}
-          />
-        </Tooltip>
-      </div>
-    );
+  if (hideActionButtons) return <></>;
 
   return (
     <Button

src/packages/frontend/project/page/page.tsx

@@ -4,7 +4,7 @@
  */
 
 import { DndContext, useDraggable } from "@dnd-kit/core";
-import { Modal } from "antd";
+import { Button, Modal, Tooltip } from "antd";
 
 import {
   React,
@@ -16,13 +16,15 @@ import {
   useState,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
+import { Icon, Loading } from "@cocalc/frontend/components";
 import { useAppContext } from "@cocalc/frontend/app/context";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
-import { Loading } from "@cocalc/frontend/components";
 import {
   FrameContext,
   defaultFrameContext,
 } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import StudentPayUpgrade from "@cocalc/frontend/purchases/student-pay";
+import track from "@cocalc/frontend/user-tracking";
 import { EDITOR_PREFIX, path_to_tab } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { AnonymousName } from "../anonymous-name";
@@ -50,8 +52,10 @@ import {
 } from "./flyouts/state";
 import HomePageButton from "./home-page/button";
 import { SoftwareEnvUpgrade } from "./software-env-upgrade";
-import Tabs, { FIXED_TABS_BG_COLOR, VerticalFixedTabs } from "./tabs";
-import StudentPayUpgrade from "@cocalc/frontend/purchases/student-pay";
+import Tabs, {
+  FIXED_TABS_BG_COLOR,
+  VerticalFixedTabs,
+} from "./vertical-fixed-tabs";
 
 const PAGE_STYLE: React.CSSProperties = {
   display: "flex",
@@ -268,21 +272,49 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
   }
 
   function renderVerticalActionButtons() {
-    if (hideActionButtons) return;
     if (fullscreen && fullscreen !== "project") return;
 
-    return (
-      <div
-        style={{
-          background: FIXED_TABS_BG_COLOR,
-          borderRadius: "0",
-          borderTop: FIX_BORDERS.borderTop,
-          borderRight: flyout == null ? FIX_BORDERS.borderRight : undefined,
-        }}
-      >
-        <VerticalFixedTabs setHomePageButtonWidth={setHomePageButtonWidth} />
-      </div>
-    );
+    if (hideActionButtons) {
+      return (
+        <Tooltip title="Show the action bar" placement="rightTop">
+          <Button
+            size="small"
+            type="text"
+            style={{
+              position: "fixed",
+              bottom: "0px",
+              left: "0px",
+              zIndex: 1000,
+              outline: `1px solid ${COLORS.GRAY_L}`,
+              borderRadius: "0 3px 0 0 ",
+              backgroundColor: COLORS.GRAY_LLL,
+            }}
+            onClick={() => {
+              track("action-bar", { action: "show" });
+              actions?.toggleActionButtons();
+            }}
+          >
+            <Icon name="vertical-left-outlined" />
+          </Button>
+        </Tooltip>
+      );
+    } else {
+      return (
+        <div
+          style={{
+            flex: "0 0 auto",
+            display: "flex",
+            flexDirection: "column",
+            background: FIXED_TABS_BG_COLOR,
+            borderRadius: "0",
+            borderTop: FIX_BORDERS.borderTop,
+            borderRight: flyout == null ? FIX_BORDERS.borderRight : undefined,
+          }}
+        >
+          <VerticalFixedTabs setHomePageButtonWidth={setHomePageButtonWidth} />
+        </div>
+      );
+    }
   }
 
   function renderMainContent() {

src/packages/frontend/project/page/project-collaborators.tsx

@@ -3,6 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+import { useProjectContext } from "@cocalc/frontend/project/context";
 import { Alert } from "@cocalc/frontend/antd-bootstrap";
 import { useTypedRedux } from "@cocalc/frontend/app-framework";
 import {
@@ -21,7 +22,8 @@ import { ICON_USERS, ROOT_STYLE, TITLE_USERS } from "../servers/consts";
 import { useProject } from "./common";
 import { SandboxProjectSettingsWarning } from "../settings/settings";
 
-export function ProjectCollaboratorsPage({ project_id }): JSX.Element {
+export function ProjectCollaboratorsPage(): JSX.Element {
+  const { project_id } = useProjectContext();
   const user_map = useTypedRedux("users", "user_map");
   const student = getStudentProjectFunctionality(project_id);
   const { project, group } = useProject(project_id);

src/packages/frontend/project/page/tabs.tsx renamed to src/packages/frontend/project/page/vertical-fixed-tabs.tsx

@@ -8,7 +8,7 @@ Tabs in a particular project.
 */
 
 import type { MenuProps } from "antd";
-import { Button, Dropdown, Modal, Switch, Tooltip } from "antd";
+import { Button, Dropdown, Modal, Tooltip } from "antd";
 import { debounce, throttle } from "lodash";
 import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
 
@@ -101,31 +101,31 @@ export function VerticalFixedTabs(props: Readonly<FVTProps>) {
   const vbar = getValidVBAROption(other_settings.get(VBAR_KEY));
   const isAnonymous = useTypedRedux("account", "is_anonymous");
   const parent = useRef<HTMLDivElement>(null);
-  const tabs = useRef<HTMLDivElement>(null);
+  const gap = useRef<HTMLDivElement>(null);
   const breakPoint = useRef<number>(0);
   const refCondensed = useRef<boolean>(false);
   const [condensed, setCondensed] = useState(false);
 
   const calcCondensed = throttle(
     () => {
-      if (tabs.current == null) return;
+      if (gap.current == null) return;
       if (parent.current == null) return;
 
-      const th = tabs.current.clientHeight;
+      const gh = gap.current.clientHeight;
       const ph = parent.current.clientHeight;
 
       if (refCondensed.current) {
         // 5px slack to avoid flickering
-        if (ph > breakPoint.current + 5) {
+        if (gh > 0 && ph > breakPoint.current + 5) {
           setCondensed(false);
           refCondensed.current = false;
         }
       } else {
-        if (ph < th) {
+        if (gh < 1) {
           setCondensed(true);
           refCondensed.current = true;
           // max? because when we start with a thin window, the ph is already smaller than th
-          breakPoint.current = Math.max(th, ph);
+          breakPoint.current = ph;
         }
       }
     },
@@ -211,6 +211,24 @@ export function VerticalFixedTabs(props: Readonly<FVTProps>) {
     if (tab != null) items.push(tab);
   }
 
+  function renderToggleSidebar() {
+    return (
+      <Tooltip title="Hide the action bar" placement="rightTop">
+        <Button
+          size="small"
+          type="text"
+          block
+          onClick={() => {
+            track("action-bar", { action: "hide" });
+            actions?.toggleActionButtons();
+          }}
+        >
+          <Icon name="vertical-right-outlined" />
+        </Button>
+      </Tooltip>
+    );
+  }
+
   return (
     <div
       ref={parent}
@@ -222,27 +240,15 @@ export function VerticalFixedTabs(props: Readonly<FVTProps>) {
         // also, the scrollbar is intentionally only active in condensed mode, to avoid it to show up briefly.
         overflowY: condensed ? "auto" : "hidden",
         overflowX: "hidden",
+        flex: "1 1 0",
       }}
     >
-      <div
-        ref={tabs}
-        style={{ display: "flex", flexDirection: "column", flex: "1 1 0" }}
-      >
-        {items}
-        <div style={{ flex: 1 }}></div> {/* moves hide switch to the bottom */}
-        <LayoutSelector vbar={vbar} />
-        <Tooltip title="Hide the action bar" placement="right">
-          <Switch
-            style={{ margin: "10px" }}
-            size="small"
-            checked
-            onChange={() => {
-              actions?.toggleActionButtons();
-              track("action-bar", { action: "hide" });
-            }}
-          />
-        </Tooltip>
-      </div>
+      {items}
+      {/* moves the layout selector to the bottom */}
+      <div ref={gap} style={{ flex: 1 }}></div>{" "}
+      {/* moves hide switch to the bottom */}
+      <LayoutSelector vbar={vbar} />
+      {renderToggleSidebar()}
     </div>
   );
 }
@@ -306,7 +312,11 @@ function LayoutSelector({ vbar }) {
   return (
     <div style={{ textAlign: "center" }}>
       <Dropdown menu={{ items }} trigger={["click"]} placement="topLeft">
-        <Button icon={<Icon name="layout" />} style={{ margin: "5px" }} />
+        <Button
+          icon={<Icon name="layout" />}
+          style={{ margin: "5px" }}
+          type="text"
+        />
       </Dropdown>
     </div>
   );

src/packages/frontend/project/search/body.tsx

@@ -13,6 +13,7 @@ be in a single namespace somehow...!
 import { Button, Card, Col, Input, Row, Space, Tag } from "antd";
 import { useEffect, useMemo, useState } from "react";
 
+import { useProjectContext } from "@cocalc/frontend/project/context";
 import { Alert, Checkbox, Well } from "@cocalc/frontend/antd-bootstrap";
 import { useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
 import {
@@ -47,10 +48,10 @@ const RESULTS_WELL_STYLE: React.CSSProperties = {
 } as const;
 
 export const ProjectSearchBody: React.FC<{
-  project_id: string;
   mode: "project" | "flyout";
   wrap?: Function;
-}> = ({ project_id, mode = "project", wrap }) => {
+}> = ({ mode = "project", wrap }) => {
+  const { project_id } = useProjectContext();
   const subdirectories = useTypedRedux({ project_id }, "subdirectories");
   const case_sensitive = useTypedRedux({ project_id }, "case_sensitive");
   const hidden_files = useTypedRedux({ project_id }, "hidden_files");

src/packages/frontend/project/search/header.tsx

@@ -4,12 +4,14 @@
  */
 
 import { Icon } from "@cocalc/frontend/components";
+import { useProjectContext } from "@cocalc/frontend/project/context";
 import { PathNavigator } from "../explorer/path-navigator";
+
 const SIZE = "20px";
 
-export const ProjectSearchHeader: React.FC<{ project_id: string }> = ({
-  project_id,
-}) => {
+export const ProjectSearchHeader: React.FC = () => {
+  const { project_id } = useProjectContext();
+
   return (
     <div style={{ marginTop: "0px", fontSize: SIZE }}>
       <Icon name="search" /> Search{" "}