Improves style and titles of toolbar items in notebooks.

Signed-off-by: Jan Bicker <[email protected]>
eclipse-theia · Feb 2, 2024 · d9d804b · d9d804b
1 parent b15b639
commit d9d804b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/packages/notebook/src/browser/contributions/notebook-actions-contribution.ts b/packages/notebook/src/browser/contributions/notebook-actions-contribution.ts
@@ -19,7 +19,7 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { ApplicationShell, codicon, CommonCommands } from '@theia/core/lib/browser';
 import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookService } from '../service/notebook-service';
-import { CellEditType, CellKind } from '../../common';
+import { CellEditType, CellKind, NotebookCommand } from '../../common';
 import { NotebookKernelQuickPickService } from '../service/notebook-kernel-quick-pick-service';
 import { NotebookExecutionService } from '../service/notebook-execution-service';
 import { NotebookEditorWidget } from '../notebook-editor-widget';
@@ -32,13 +32,15 @@ export namespace NotebookCommands {
 
     export const ADD_NEW_MARKDOWN_CELL_COMMAND = Command.toDefaultLocalizedCommand({
         id: 'notebook.add-new-markdown-cell',
-        iconClass: codicon('add')
-    });
+        iconClass: codicon('add'),
+        tooltip: nls.localizeByDefault('Add Markdown Cell')
+    } as NotebookCommand);
 
     export const ADD_NEW_CODE_CELL_COMMAND = Command.toDefaultLocalizedCommand({
         id: 'notebook.add-new-code-cell',
-        iconClass: codicon('add')
-    });
+        iconClass: codicon('add'),
+        tooltip: nls.localizeByDefault('Add Code Cell')
+    } as NotebookCommand);
 
     export const SELECT_KERNEL_COMMAND = Command.toDefaultLocalizedCommand({
         id: 'notebook.selectKernel',

diff --git a/packages/notebook/src/browser/view/notebook-main-toolbar.tsx b/packages/notebook/src/browser/view/notebook-main-toolbar.tsx
@@ -21,6 +21,7 @@ import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookKernelService } from '../service/notebook-kernel-service';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { NotebookCommand } from '../../common';
 
 export interface NotebookMainToolbarProps {
     notebookModel: NotebookModel
@@ -85,7 +86,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         return <div className='theia-notebook-main-toolbar'>
             {this.getMenuItems().map(item => this.renderMenuItem(item))}
             <div style={{ flexGrow: 1 }}></div>
-            <div className='theia-notebook-main-toolbar-item'
+            <div className='theia-notebook-main-toolbar-item action-label'
                 onClick={() => this.props.commandRegistry.executeCommand(NotebookCommands.SELECT_KERNEL_COMMAND.id, this.props.notebookModel)}>
                 <span className={codicon('server-environment')} />
                 <span className=' theia-notebook-main-toolbar-item-text'>
@@ -103,7 +104,8 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
                 {itemNodes && itemNodes.length > 0 && <span key={`${item.id}-separator`} className='theia-notebook-toolbar-separator'></span>}
             </React.Fragment>;
         } else if (!item.when || this.props.contextKeyService.match(item.when)) {
-            return <div key={item.id} title={item.id} className='theia-notebook-main-toolbar-item'
+            const title = (this.props.commandRegistry.getCommand(item.command ?? '') as NotebookCommand)?.tooltip ?? item.label;
+            return <div key={item.id} title={title} className='theia-notebook-main-toolbar-item action-label'
                 onClick={() => {
                     if (item.command) {
                         this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel);

diff --git a/packages/notebook/src/common/notebook-common.ts b/packages/notebook/src/common/notebook-common.ts
@@ -19,7 +19,7 @@ import { MarkdownString } from '@theia/core/lib/common/markdown-rendering/markdo
 import { BinaryBuffer } from '@theia/core/lib/common/buffer';
 import { UriComponents } from '@theia/core/lib/common/uri';
 
-export interface NotebookCommand {
+export interface NotebookCommand extends Command {
     id: string;
     title?: string;
     tooltip?: string;