Skip to content

Commit ab135eb

Browse files
haraldschillyharaldschilly
committed
frontend/jupyter: tweak style of cell/buttonbar such that active border goes around the cell + related details
1 parent ee2d2a9 commit ab135eb

File tree

6 files changed

+145
-137
lines changed

6 files changed

+145
-137
lines changed

‎src/packages/frontend/jupyter/cell-buttonbar.tsx

Lines changed: 61 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import { JupyterActions } from "./browser-actions";
2626
import CellTiming from "./cell-output-time";
2727
import {
2828
CODE_BAR_BTN_STYLE,
29-
MINI_BUTTONS_STYLE,
3029
MINI_BUTTONS_STYLE_INNER,
3130
RUN_ALL_CELLS_ABOVE_ICON,
3231
RUN_ALL_CELLS_BELOW_ICON,
@@ -113,37 +112,40 @@ export const CellButtonBar: React.FC<Props> = React.memo(
113112

114113
const { label, icon, tooltip, onClick } = getRunStopButton();
115114

115+
// ATTN: this must be wrapped in a plain div, otherwise it's own flex & width 100% style disturbs the button bar
116116
return (
117-
<Dropdown.Button
118-
size="small"
119-
type="text"
120-
trigger={["click"]}
121-
mouseLeaveDelay={1.5}
122-
icon={<Icon name="angle-down" />}
123-
onClick={onClick}
124-
menu={{
125-
items: [
126-
{
127-
key: "all-above",
128-
icon: <Icon name={RUN_ALL_CELLS_ABOVE_ICON} />,
129-
label: "Run All Above Selected Cell",
130-
onClick: () => actions?.run_all_above_cell(id),
131-
},
132-
{
133-
key: "all-below",
134-
icon: <Icon name={RUN_ALL_CELLS_BELOW_ICON} rotate={"90"} />,
135-
label: "Run Selected Cell and All Below",
136-
onClick: () => actions?.run_all_below_cell(id),
137-
},
138-
],
139-
}}
140-
>
141-
<Tooltip placement="top" title={tooltip}>
142-
<span style={CODE_BAR_BTN_STYLE}>
143-
<Icon name={icon} /> {label}
144-
</span>
145-
</Tooltip>
146-
</Dropdown.Button>
117+
<div>
118+
<Dropdown.Button
119+
size="small"
120+
type="text"
121+
trigger={["click"]}
122+
mouseLeaveDelay={1.5}
123+
icon={<Icon name="angle-down" />}
124+
onClick={onClick}
125+
menu={{
126+
items: [
127+
{
128+
key: "all-above",
129+
icon: <Icon name={RUN_ALL_CELLS_ABOVE_ICON} />,
130+
label: "Run All Above Selected Cell",
131+
onClick: () => actions?.run_all_above_cell(id),
132+
},
133+
{
134+
key: "all-below",
135+
icon: <Icon name={RUN_ALL_CELLS_BELOW_ICON} rotate={"90"} />,
136+
label: "Run Selected Cell and All Below",
137+
onClick: () => actions?.run_all_below_cell(id),
138+
},
139+
],
140+
}}
141+
>
142+
<Tooltip placement="top" title={tooltip}>
143+
<span style={CODE_BAR_BTN_STYLE}>
144+
<Icon name={icon} /> {label}
145+
</span>
146+
</Tooltip>
147+
</Dropdown.Button>
148+
</div>
147149
);
148150
}
149151

@@ -227,37 +229,20 @@ export const CellButtonBar: React.FC<Props> = React.memo(
227229

228230
function renderCodeBarIndexNumber(input: string | undefined) {
229231
if (!input) return;
230-
return (
231-
<Tooltip
232-
placement="top"
233-
title={`This is the ${numToOrdinal(index + 1)} cell in the notebook.`}
234-
>
235-
<div
236-
style={{
237-
marginLeft: "1px",
238-
padding: "4px 5px 4px 6px",
239-
borderLeft: `1px solid ${COLORS.GRAY_L}`,
240-
}}
241-
>
242-
{index + 1}
243-
</div>
244-
</Tooltip>
245-
);
232+
return <CellIndexNumber index={index} />;
246233
}
247234

248235
const input: string | undefined = cell.get("input")?.trim();
249236

250237
return (
251-
<div style={MINI_BUTTONS_STYLE} className="hidden-xs">
252-
<div style={MINI_BUTTONS_STYLE_INNER}>
253-
{renderCodeBarCellTiming()}
254-
{renderCodeBarRunStop()}
255-
{renderCodeBarComputeServer()}
256-
{renderCodeBarLLMButtons()}
257-
{renderCodeBarFormatButton()}
258-
{renderCodeBarCopyPasteButtons(input)}
259-
{renderCodeBarIndexNumber(input)}
260-
</div>
238+
<div className="hidden-xs" style={MINI_BUTTONS_STYLE_INNER}>
239+
{renderCodeBarCellTiming()}
240+
{renderCodeBarRunStop()}
241+
{renderCodeBarComputeServer()}
242+
{renderCodeBarLLMButtons()}
243+
{renderCodeBarFormatButton()}
244+
{renderCodeBarCopyPasteButtons(input)}
245+
{renderCodeBarIndexNumber(input)}
261246
</div>
262247
);
263248
},
@@ -294,3 +279,22 @@ function ComputeServerPrompt({ id }) {
294279
</Tooltip>
295280
);
296281
}
282+
283+
export function CellIndexNumber({ index }: { index: number }): JSX.Element {
284+
return (
285+
<Tooltip
286+
placement="top"
287+
title={`This is the ${numToOrdinal(index + 1)} cell in the notebook.`}
288+
>
289+
<div
290+
style={{
291+
marginLeft: "1px",
292+
padding: "4px 5px 4px 6px",
293+
borderLeft: `1px solid ${COLORS.GRAY_L}`,
294+
}}
295+
>
296+
{index + 1}
297+
</div>
298+
</Tooltip>
299+
);
300+
}

‎src/packages/frontend/jupyter/cell-input.tsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,11 @@ import { FileContext, useFileContext } from "@cocalc/frontend/lib/file-context";
2222
import { LLMTools } from "@cocalc/jupyter/types";
2323
import { filename_extension, startswith } from "@cocalc/util/misc";
2424
import { JupyterActions } from "./browser-actions";
25-
import { CellButtonBar } from "./cell-buttonbar";
25+
import { CellButtonBar, CellIndexNumber } from "./cell-buttonbar";
2626
import { CellHiddenPart } from "./cell-hidden-part";
2727
import { CellToolbar } from "./cell-toolbar";
2828
import { CodeMirror } from "./codemirror-component";
29-
import {
30-
CODE_BAR_BTN_STYLE,
31-
MINI_BUTTONS_STYLE,
32-
MINI_BUTTONS_STYLE_INNER,
33-
} from "./consts";
29+
import { CODE_BAR_BTN_STYLE, MINI_BUTTONS_STYLE_INNER } from "./consts";
3430
import { Position } from "./insert-cell/types";
3531
import { InputPrompt } from "./prompt/input";
3632
import { get_blob_url } from "./server-urls";
@@ -195,17 +191,13 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
195191

196192
function render_markdown_edit_button(): Rendered {
197193
if (
198-
!props.is_current ||
199194
props.actions == null ||
200195
props.cell.getIn(["metadata", "editable"]) === false
201196
) {
202197
return;
203198
}
204199
return (
205-
<div
206-
style={{ ...MINI_BUTTONS_STYLE, top: "-25px" }}
207-
className="hidden-xs"
208-
>
200+
<div className="hidden-xs">
209201
<div style={MINI_BUTTONS_STYLE_INNER}>
210202
<Button
211203
style={CODE_BAR_BTN_STYLE}
@@ -223,12 +215,14 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
223215
>
224216
<Icon name="image" />
225217
</Button>
218+
<CellIndexNumber index={props.index} />
226219
</div>
227220
</div>
228221
);
229222
}
230223

231224
const fileContext = useFileContext();
225+
232226
const urlTransform = useCallback(
233227
(url, tag?) => {
234228
const url1 = attachmentTransform(props.project_id, props.cell, url);
@@ -423,11 +417,29 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
423417
);
424418
}
425419

420+
const type = props.cell.get("cell_type") || "code";
421+
422+
function render_cell_buttonbar() {
423+
if (type !== "code" || fileContext.disableExtraButtons) return;
424+
return (
425+
<CellButtonBar
426+
id={props.id}
427+
index={props.index}
428+
actions={props.actions}
429+
cell={props.cell}
430+
is_current={props.is_current}
431+
is_readonly={props.is_readonly}
432+
computeServerId={props.computeServerId}
433+
llmTools={props.llmTools}
434+
haveLLMCellTools={haveLLMCellTools}
435+
/>
436+
);
437+
}
438+
426439
if (props.cell.getIn(["metadata", "jupyter", "source_hidden"])) {
427440
return render_hidden();
428441
}
429442

430-
const type = props.cell.get("cell_type") || "code";
431443
return (
432444
<FileContext.Provider
433445
value={{
@@ -436,6 +448,7 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
436448
}}
437449
>
438450
<div>
451+
{render_cell_buttonbar()}
439452
{render_cell_toolbar()}
440453
<div
441454
style={{
@@ -447,19 +460,6 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
447460
>
448461
{render_input_prompt(type)}
449462
{render_input_value(type)}
450-
{type === "code" && !fileContext.disableExtraButtons ? (
451-
<CellButtonBar
452-
id={props.id}
453-
index={props.index}
454-
actions={props.actions}
455-
cell={props.cell}
456-
is_current={props.is_current}
457-
is_readonly={props.is_readonly}
458-
computeServerId={props.computeServerId}
459-
llmTools={props.llmTools}
460-
haveLLMCellTools={haveLLMCellTools}
461-
/>
462-
) : undefined}
463463
</div>
464464
</div>
465465
</FileContext.Provider>

‎src/packages/frontend/jupyter/cell-toolbar-slideshow.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77
The slideshow toolbar functionality for cells.
88
*/
99

10-
import { React } from "../app-framework";
11-
import { FormControl } from "@cocalc/frontend/antd-bootstrap";
1210
import { Map as ImmutableMap } from "immutable";
11+
12+
import { FormControl } from "@cocalc/frontend/antd-bootstrap";
13+
import { React } from "@cocalc/frontend/app-framework";
1314
import { JupyterActions } from "./browser-actions";
1415

1516
const TYPES = [
@@ -19,7 +20,7 @@ const TYPES = [
1920
{ title: "Fragment", value: "fragment" },
2021
{ title: "Skip", value: "skip" },
2122
{ title: "Notes", value: "notes" },
22-
];
23+
] as const;
2324

2425
const rendered_options = TYPES.map((x) => (
2526
<option key={x.value} value={x.value}>

‎src/packages/frontend/jupyter/cell-toolbar.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ const STYLE: CSS = {
2424
display: "flex",
2525
background: "#eee",
2626
border: "1px solid rgb(247, 247, 247)",
27-
marginTop: "20px",
2827
} as const;
2928

3029
export interface CellToolbarProps {
@@ -39,7 +38,7 @@ const TOOLBARS = {
3938
tags: TagsToolbar,
4039
metadata: Metadata,
4140
create_assignment: CreateAssignmentToolbar,
42-
};
41+
} as const;
4342

4443
export const CellToolbar: React.FC<CellToolbarProps> = React.memo(
4544
(props: CellToolbarProps) => {

0 commit comments

Comments
 (0)