Skip to content

Commit 8c5458d

Browse files
authored
Merge pull request #7780 from sagemathinc/port-bottom-left-from-6804
frontend/page: porting over bottom-left vertical bar show/hide changes
2 parents f404663 + a34607f commit 8c5458d

File tree

12 files changed

+115
-91
lines changed

12 files changed

+115
-91
lines changed

src/packages/frontend/components/icon.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ import {
216216
UsergroupAddOutlined,
217217
VerticalAlignBottomOutlined,
218218
VerticalAlignMiddleOutlined,
219+
VerticalLeftOutlined,
219220
VerticalRightOutlined,
220221
VideoCameraOutlined,
221222
WalletOutlined,
@@ -603,6 +604,7 @@ const IconSpec: { [name: string]: any } = {
603604
"video-camera": VideoCameraOutlined,
604605
"vertical-align-middle": VerticalAlignMiddleOutlined,
605606
"vertical-align-bottom": VerticalAlignBottomOutlined,
607+
"vertical-left-outlined": VerticalLeftOutlined,
606608
vim: { IconFont: "vim" },
607609
vscode: { IconFont: "vscode" },
608610
wallet: WalletOutlined,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,15 +141,15 @@ const TabContent: React.FC<TabContentProps> = (props: TabContentProps) => {
141141
case "log":
142142
return <ProjectLog project_id={project_id} />;
143143
case "search":
144-
return <ProjectSearch project_id={project_id} />;
144+
return <ProjectSearch />;
145145
case "servers":
146-
return <ProjectServers project_id={project_id} />;
146+
return <ProjectServers />;
147147
case "settings":
148148
return <ProjectSettings project_id={project_id} />;
149149
case "info":
150150
return <ProjectInfo project_id={project_id} />;
151151
case "users":
152-
return <ProjectCollaboratorsPage project_id={project_id} />;
152+
return <ProjectCollaboratorsPage />;
153153
case "upgrades":
154154
return <ProjectLicenses project_id={project_id} />;
155155
default:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import * as LS from "@cocalc/frontend/misc/local-storage-typed";
1717
import { useProjectContext } from "../../context";
1818
import { FIX_BORDER } from "../common";
1919
import { FIXED_PROJECT_TABS, FixedTab } from "../file-tab";
20-
import { FIXED_TABS_BG_COLOR } from "../tabs";
20+
import { FIXED_TABS_BG_COLOR } from "../vertical-fixed-tabs";
2121
import { FLYOUT_PADDING } from "./consts";
2222
import { LSFlyout, lsKey, storeFlyoutState } from "./state";
2323

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55

66
import { ProjectSearchBody } from "@cocalc/frontend/project/search/body";
77

8-
export function SearchFlyout({ project_id, wrap }) {
9-
return (
10-
<ProjectSearchBody mode="flyout" project_id={project_id} wrap={wrap} />
11-
);
8+
export function SearchFlyout({ wrap }) {
9+
return <ProjectSearchBody mode="flyout" wrap={wrap} />;
1210
}

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

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,17 @@
33
* License: MS-RSL – see LICENSE.md for details
44
*/
55

6-
import { Button, Switch, Tooltip } from "antd";
6+
import { Button } from "antd";
77

88
import { useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
99
import { Icon } from "@cocalc/frontend/components";
10-
import { COLORS } from "@cocalc/util/theme";
1110
import track from "@cocalc/frontend/user-tracking";
11+
import { COLORS } from "@cocalc/util/theme";
1212

1313
export default function HomePageButton({ project_id, active, width }) {
1414
const actions = useActions({ project_id });
1515
const hideActionButtons = useTypedRedux(project_id, "hideActionButtons");
16-
if (hideActionButtons)
17-
return (
18-
<div
19-
style={{
20-
width,
21-
display: "flex",
22-
alignItems: "center",
23-
justifyContent: "center",
24-
}}
25-
>
26-
<Tooltip title="Show the action bar" placement="right">
27-
<Switch
28-
onChange={() => {
29-
track("action-bar", { action: "show" });
30-
actions?.toggleActionButtons();
31-
}}
32-
/>
33-
</Tooltip>
34-
</div>
35-
);
16+
if (hideActionButtons) return <></>;
3617

3718
return (
3819
<Button

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

Lines changed: 49 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { DndContext, useDraggable } from "@dnd-kit/core";
7-
import { Modal } from "antd";
7+
import { Button, Modal, Tooltip } from "antd";
88

99
import {
1010
React,
@@ -16,13 +16,15 @@ import {
1616
useState,
1717
useTypedRedux,
1818
} from "@cocalc/frontend/app-framework";
19+
import { Icon, Loading } from "@cocalc/frontend/components";
1920
import { useAppContext } from "@cocalc/frontend/app/context";
2021
import { IS_MOBILE } from "@cocalc/frontend/feature";
21-
import { Loading } from "@cocalc/frontend/components";
2222
import {
2323
FrameContext,
2424
defaultFrameContext,
2525
} from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
26+
import StudentPayUpgrade from "@cocalc/frontend/purchases/student-pay";
27+
import track from "@cocalc/frontend/user-tracking";
2628
import { EDITOR_PREFIX, path_to_tab } from "@cocalc/util/misc";
2729
import { COLORS } from "@cocalc/util/theme";
2830
import { AnonymousName } from "../anonymous-name";
@@ -50,8 +52,10 @@ import {
5052
} from "./flyouts/state";
5153
import HomePageButton from "./home-page/button";
5254
import { SoftwareEnvUpgrade } from "./software-env-upgrade";
53-
import Tabs, { FIXED_TABS_BG_COLOR, VerticalFixedTabs } from "./tabs";
54-
import StudentPayUpgrade from "@cocalc/frontend/purchases/student-pay";
55+
import Tabs, {
56+
FIXED_TABS_BG_COLOR,
57+
VerticalFixedTabs,
58+
} from "./vertical-fixed-tabs";
5559

5660
const PAGE_STYLE: React.CSSProperties = {
5761
display: "flex",
@@ -268,21 +272,49 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
268272
}
269273

270274
function renderVerticalActionButtons() {
271-
if (hideActionButtons) return;
272275
if (fullscreen && fullscreen !== "project") return;
273276

274-
return (
275-
<div
276-
style={{
277-
background: FIXED_TABS_BG_COLOR,
278-
borderRadius: "0",
279-
borderTop: FIX_BORDERS.borderTop,
280-
borderRight: flyout == null ? FIX_BORDERS.borderRight : undefined,
281-
}}
282-
>
283-
<VerticalFixedTabs setHomePageButtonWidth={setHomePageButtonWidth} />
284-
</div>
285-
);
277+
if (hideActionButtons) {
278+
return (
279+
<Tooltip title="Show the action bar" placement="rightTop">
280+
<Button
281+
size="small"
282+
type="text"
283+
style={{
284+
position: "fixed",
285+
bottom: "0px",
286+
left: "0px",
287+
zIndex: 1000,
288+
outline: `1px solid ${COLORS.GRAY_L}`,
289+
borderRadius: "0 3px 0 0 ",
290+
backgroundColor: COLORS.GRAY_LLL,
291+
}}
292+
onClick={() => {
293+
track("action-bar", { action: "show" });
294+
actions?.toggleActionButtons();
295+
}}
296+
>
297+
<Icon name="vertical-left-outlined" />
298+
</Button>
299+
</Tooltip>
300+
);
301+
} else {
302+
return (
303+
<div
304+
style={{
305+
flex: "0 0 auto",
306+
display: "flex",
307+
flexDirection: "column",
308+
background: FIXED_TABS_BG_COLOR,
309+
borderRadius: "0",
310+
borderTop: FIX_BORDERS.borderTop,
311+
borderRight: flyout == null ? FIX_BORDERS.borderRight : undefined,
312+
}}
313+
>
314+
<VerticalFixedTabs setHomePageButtonWidth={setHomePageButtonWidth} />
315+
</div>
316+
);
317+
}
286318
}
287319

288320
function renderMainContent() {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* License: MS-RSL – see LICENSE.md for details
44
*/
55

6+
import { useProjectContext } from "@cocalc/frontend/project/context";
67
import { Alert } from "@cocalc/frontend/antd-bootstrap";
78
import { useTypedRedux } from "@cocalc/frontend/app-framework";
89
import {
@@ -21,7 +22,8 @@ import { ICON_USERS, ROOT_STYLE, TITLE_USERS } from "../servers/consts";
2122
import { useProject } from "./common";
2223
import { SandboxProjectSettingsWarning } from "../settings/settings";
2324

24-
export function ProjectCollaboratorsPage({ project_id }): JSX.Element {
25+
export function ProjectCollaboratorsPage(): JSX.Element {
26+
const { project_id } = useProjectContext();
2527
const user_map = useTypedRedux("users", "user_map");
2628
const student = getStudentProjectFunctionality(project_id);
2729
const { project, group } = useProject(project_id);

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

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Tabs in a particular project.
88
*/
99

1010
import type { MenuProps } from "antd";
11-
import { Button, Dropdown, Modal, Switch, Tooltip } from "antd";
11+
import { Button, Dropdown, Modal, Tooltip } from "antd";
1212
import { debounce, throttle } from "lodash";
1313
import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
1414

@@ -101,31 +101,31 @@ export function VerticalFixedTabs(props: Readonly<FVTProps>) {
101101
const vbar = getValidVBAROption(other_settings.get(VBAR_KEY));
102102
const isAnonymous = useTypedRedux("account", "is_anonymous");
103103
const parent = useRef<HTMLDivElement>(null);
104-
const tabs = useRef<HTMLDivElement>(null);
104+
const gap = useRef<HTMLDivElement>(null);
105105
const breakPoint = useRef<number>(0);
106106
const refCondensed = useRef<boolean>(false);
107107
const [condensed, setCondensed] = useState(false);
108108

109109
const calcCondensed = throttle(
110110
() => {
111-
if (tabs.current == null) return;
111+
if (gap.current == null) return;
112112
if (parent.current == null) return;
113113

114-
const th = tabs.current.clientHeight;
114+
const gh = gap.current.clientHeight;
115115
const ph = parent.current.clientHeight;
116116

117117
if (refCondensed.current) {
118118
// 5px slack to avoid flickering
119-
if (ph > breakPoint.current + 5) {
119+
if (gh > 0 && ph > breakPoint.current + 5) {
120120
setCondensed(false);
121121
refCondensed.current = false;
122122
}
123123
} else {
124-
if (ph < th) {
124+
if (gh < 1) {
125125
setCondensed(true);
126126
refCondensed.current = true;
127127
// max? because when we start with a thin window, the ph is already smaller than th
128-
breakPoint.current = Math.max(th, ph);
128+
breakPoint.current = ph;
129129
}
130130
}
131131
},
@@ -211,6 +211,24 @@ export function VerticalFixedTabs(props: Readonly<FVTProps>) {
211211
if (tab != null) items.push(tab);
212212
}
213213

214+
function renderToggleSidebar() {
215+
return (
216+
<Tooltip title="Hide the action bar" placement="rightTop">
217+
<Button
218+
size="small"
219+
type="text"
220+
block
221+
onClick={() => {
222+
track("action-bar", { action: "hide" });
223+
actions?.toggleActionButtons();
224+
}}
225+
>
226+
<Icon name="vertical-right-outlined" />
227+
</Button>
228+
</Tooltip>
229+
);
230+
}
231+
214232
return (
215233
<div
216234
ref={parent}
@@ -222,27 +240,15 @@ export function VerticalFixedTabs(props: Readonly<FVTProps>) {
222240
// also, the scrollbar is intentionally only active in condensed mode, to avoid it to show up briefly.
223241
overflowY: condensed ? "auto" : "hidden",
224242
overflowX: "hidden",
243+
flex: "1 1 0",
225244
}}
226245
>
227-
<div
228-
ref={tabs}
229-
style={{ display: "flex", flexDirection: "column", flex: "1 1 0" }}
230-
>
231-
{items}
232-
<div style={{ flex: 1 }}></div> {/* moves hide switch to the bottom */}
233-
<LayoutSelector vbar={vbar} />
234-
<Tooltip title="Hide the action bar" placement="right">
235-
<Switch
236-
style={{ margin: "10px" }}
237-
size="small"
238-
checked
239-
onChange={() => {
240-
actions?.toggleActionButtons();
241-
track("action-bar", { action: "hide" });
242-
}}
243-
/>
244-
</Tooltip>
245-
</div>
246+
{items}
247+
{/* moves the layout selector to the bottom */}
248+
<div ref={gap} style={{ flex: 1 }}></div>{" "}
249+
{/* moves hide switch to the bottom */}
250+
<LayoutSelector vbar={vbar} />
251+
{renderToggleSidebar()}
246252
</div>
247253
);
248254
}
@@ -306,7 +312,11 @@ function LayoutSelector({ vbar }) {
306312
return (
307313
<div style={{ textAlign: "center" }}>
308314
<Dropdown menu={{ items }} trigger={["click"]} placement="topLeft">
309-
<Button icon={<Icon name="layout" />} style={{ margin: "5px" }} />
315+
<Button
316+
icon={<Icon name="layout" />}
317+
style={{ margin: "5px" }}
318+
type="text"
319+
/>
310320
</Dropdown>
311321
</div>
312322
);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ be in a single namespace somehow...!
1313
import { Button, Card, Col, Input, Row, Space, Tag } from "antd";
1414
import { useEffect, useMemo, useState } from "react";
1515

16+
import { useProjectContext } from "@cocalc/frontend/project/context";
1617
import { Alert, Checkbox, Well } from "@cocalc/frontend/antd-bootstrap";
1718
import { useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
1819
import {
@@ -47,10 +48,10 @@ const RESULTS_WELL_STYLE: React.CSSProperties = {
4748
} as const;
4849

4950
export const ProjectSearchBody: React.FC<{
50-
project_id: string;
5151
mode: "project" | "flyout";
5252
wrap?: Function;
53-
}> = ({ project_id, mode = "project", wrap }) => {
53+
}> = ({ mode = "project", wrap }) => {
54+
const { project_id } = useProjectContext();
5455
const subdirectories = useTypedRedux({ project_id }, "subdirectories");
5556
const case_sensitive = useTypedRedux({ project_id }, "case_sensitive");
5657
const hidden_files = useTypedRedux({ project_id }, "hidden_files");

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
*/
55

66
import { Icon } from "@cocalc/frontend/components";
7+
import { useProjectContext } from "@cocalc/frontend/project/context";
78
import { PathNavigator } from "../explorer/path-navigator";
9+
810
const SIZE = "20px";
911

10-
export const ProjectSearchHeader: React.FC<{ project_id: string }> = ({
11-
project_id,
12-
}) => {
12+
export const ProjectSearchHeader: React.FC = () => {
13+
const { project_id } = useProjectContext();
14+
1315
return (
1416
<div style={{ marginTop: "0px", fontSize: SIZE }}>
1517
<Icon name="search" /> Search{" "}

0 commit comments

Comments
 (0)