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:
tao.chen
2026-07-21 18:41:01 +08:00
co-authored by Claude
parent 2fc584d70f
commit 263232bea4
6 changed files with 45 additions and 11 deletions
+21 -2
View File
@@ -26,13 +26,18 @@
}
.jp-snapshot-panel-refresh-button {
font-size: 0.8em;
padding: 2px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 24px;
padding: 0;
border: 1px solid var(--jp-border-color2, #ccc);
border-radius: 3px;
background: var(--jp-layout-color2, #f5f5f5);
color: var(--jp-ui-font-color1, #333);
cursor: pointer;
line-height: 0;
}
.jp-snapshot-panel-refresh-button:hover:not(:disabled) {
@@ -44,6 +49,20 @@
cursor: not-allowed;
}
.jp-snapshot-panel-refresh-button.is-loading svg,
.jp-snapshot-panel-refresh-button.is-loading .jp-Icon {
animation: jp-snapshot-spin 1s linear infinite;
}
@keyframes jp-snapshot-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.jp-snapshot-panel-empty {
color: var(--jp-ui-font-color2, #555);
padding: 12px;