feat: replace text buttons with icons (tooltip on hover)
Replaces the two visible 'button-like' affordances with LabIcon glyphs so the sidebar and toolbar stay compact; the explanatory text moves to the hover tooltip. Changes: - Toolbar 'Save Snapshot' button: text label -> saveIcon (floppy), tooltip '保存当前 notebook 为快照' - Sidebar panel '快照历史' text label -> saveIcon + caption='快照历史' (the panel tab is now icon-only) - Sidebar refresh button: text -> refreshIcon with a 1s rotate animation while loading Dependencies: - Adds @jupyterlab/ui-components to package.json (source of the standard LabIcon set: saveIcon, refreshIcon, historyIcon) Style: - New .jp-snapshot-panel-refresh-button sizing (28x24 fixed box, centered icon) and .is-loading spin keyframes - @keyframes jp-snapshot-spin applied to the icon's .jp-Icon element Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+9
-3
@@ -5,6 +5,7 @@ import {
|
||||
import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
|
||||
import { ToolbarButton, MainAreaWidget } from '@jupyterlab/apputils';
|
||||
import { ISettingRegistry } from '@jupyterlab/settingregistry';
|
||||
import { saveIcon } from '@jupyterlab/ui-components';
|
||||
|
||||
import { requestAPI } from './request';
|
||||
import { registerCommands, CommandIDs } from './commands';
|
||||
@@ -59,7 +60,11 @@ const plugin: JupyterFrontEndPlugin<void> = {
|
||||
onOpenDiff: openDiff
|
||||
});
|
||||
panel.id = 'snapshot:panel';
|
||||
panel.title.label = '快照历史';
|
||||
// Icon-only panel tab: the title text becomes a hover caption so the
|
||||
// sidebar stays compact. saveIcon is reused for visual consistency with
|
||||
// the commit toolbar button (both signal "save" semantics).
|
||||
panel.title.icon = saveIcon;
|
||||
panel.title.caption = '快照历史';
|
||||
app.shell.add(panel, 'left', { rank: 200 });
|
||||
|
||||
// Keep the model in sync with the current notebook.
|
||||
@@ -73,13 +78,14 @@ const plugin: JupyterFrontEndPlugin<void> = {
|
||||
|
||||
registerCommands(app, tracker, model);
|
||||
|
||||
// Add a "保存快照" button to every notebook panel's toolbar.
|
||||
// Add an icon-only "保存快照" button to every notebook panel's toolbar.
|
||||
// The tooltip on hover carries the full description.
|
||||
// NOTE: docRegistry.addWidgetExtension('Notebook', ...) places its
|
||||
// returned widget in the *main area* (a new tab), not on the toolbar.
|
||||
// The toolbar wants panel.toolbar.addItem directly.
|
||||
const addCommitButton = (panelHost: NotebookPanel) => {
|
||||
const button = new ToolbarButton({
|
||||
label: '保存快照',
|
||||
icon: saveIcon,
|
||||
tooltip: '保存当前 notebook 为快照',
|
||||
onClick: () => {
|
||||
void app.commands.execute(CommandIDs.commit);
|
||||
|
||||
Reference in New Issue
Block a user