Write a custom renderer for the command palette to render toggled

checkmarks.

packages/apputils-extension/src/palette.ts

@@ -7,6 +7,10 @@ import {
   DisposableDelegate, IDisposable
 } from '@phosphor/disposable';
 
+import {
+  VirtualElement, h
+} from '@phosphor/virtualdom';
+
 import {
   CommandPalette
 } from '@phosphor/widgets';
@@ -74,6 +78,43 @@ class Palette implements ICommandPalette {
   private _palette: CommandPalette;
 }
 
+/**
+ * A custom renderer for the command palette that adds
+ * `isToggled` checkmarks to the items.
+ */
+class Renderer extends CommandPalette.Renderer {
+    /**
+     * Render the icon element for a menu item.
+     *
+     * @param data - The data to use for rendering the icon.
+     *
+     * @returns A virtual element representing the item icon.
+     */
+    renderItemIcon(data: CommandPalette.IItemRenderData): VirtualElement {
+      let className = 'jp-CommandPalette-itemIcon';
+      return h.div({ className });
+    }
+
+    /**
+     * Render the virtual element for a command palette item.
+     *
+     * @param data - The data to use for rendering the item.
+     *
+     * @returns A virtual element representing the item.
+     */
+    renderItem(data: CommandPalette.IItemRenderData): VirtualElement {
+      let className = this.createItemClass(data);
+      let dataset = this.createItemDataset(data);
+      return (
+        h.li({ className, dataset },
+          this.renderItemIcon(data),
+          this.renderItemLabel(data),
+          this.renderItemShortcut(data),
+          this.renderItemCaption(data)
+        )
+      );
+    }
+}
 
 /**
  * Activate the command palette.
@@ -81,7 +122,8 @@ class Palette implements ICommandPalette {
 export
 function activatePalette(app: JupyterLab, restorer: ILayoutRestorer): ICommandPalette {
   const { commands, shell } = app;
-  const palette = new CommandPalette({ commands });
+  const renderer = new Renderer();
+  const palette = new CommandPalette({ commands, renderer });
 
   // Let the application restorer track the command palette for restoration of
   // application state (e.g. setting the command palette as the current side bar

packages/apputils/style/commandpalette.css

@@ -136,10 +136,11 @@
 
 
 .p-CommandPalette-item {
-  padding: 4px 0px;
+  padding: 4px 12px 4px 0px;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   font-weight: 400;
+  display: flex;
 }
 
 
@@ -169,20 +170,32 @@
   color: rgba(0, 0, 0, 0.4);
 }
 
-.p-CommandPalette-item.p-mod-toggled .p-CommandPalette-itemLabel:before {
+.p-CommandPalette-item.p-mod-toggled .jp-CommandPalette-itemIcon {
   background-image: var(--jp-icon-checkmark);
   background-size: 16px;
   background-repeat: no-repeat;
 }
 
-.p-CommandPalette-item .p-CommandPalette-itemLabel:before {
-  content: "";
+.p-CommandPalette-item .jp-CommandPalette-itemIcon {
   padding: 0px 2px 0px 4px;
   position: relative;
-  display: inline-block;
   width: 16px;
-  height: 1em;
+  top: 2px;
+  flex: 0 0 auto;
 }
+
+.p-CommandPalette-item.p-mod-disabled .jp-CommandPalette-itemIcon {
+  opacity: 0.4;
+}
+
+.p-CommandPalette-item .p-CommandPalette-itemLabel {
+  flex: 1 1 auto;
+}
+
+.p-CommandPalette-item .p-CommandPalette-itemShortcut {
+  flex: 0 0 auto;
+}
+
 .p-CommandPalette-itemCaption {
   display: none;
 }