|
@@ -30,10 +30,13 @@ import {
|
|
|
import '../style/index.css';
|
|
|
|
|
|
|
|
|
+/* tslint:disable */
|
|
|
/**
|
|
|
- * We have configured the TSX transform to look for the h function in the local module.
|
|
|
- * */
|
|
|
+ * We have configured the TSX transform to look for the h function in the local
|
|
|
+ * module.
|
|
|
+ */
|
|
|
const h = vdom.h;
|
|
|
+/* tslint:enable */
|
|
|
|
|
|
|
|
|
/**
|
|
@@ -47,7 +50,8 @@ const LAUNCHER_CLASS = 'jp-Launcher';
|
|
|
const KNOWN_CATEGORIES = ['Notebook', 'Console', 'Other'];
|
|
|
|
|
|
/**
|
|
|
- * These laucher item categories are known to have kernels, so the kernel icons are used.
|
|
|
+ * These laucher item categories are known to have kernels, so the kernel icons
|
|
|
+ * are used.
|
|
|
*/
|
|
|
const KERNEL_CATEGORIES = ['Notebook', 'Console'];
|
|
|
|
|
@@ -151,8 +155,8 @@ interface ILauncherItem {
|
|
|
/**
|
|
|
* The rank for the launcher item.
|
|
|
*
|
|
|
- * The rank is used when ordering launcher items for display. After grouping into
|
|
|
- * categories, items are sorted in the following order:
|
|
|
+ * The rank is used when ordering launcher items for display. After grouping
|
|
|
+ * into categories, items are sorted in the following order:
|
|
|
* 1. Rank (lower is better)
|
|
|
* 3. Display Name (locale order)
|
|
|
*
|
|
@@ -161,9 +165,11 @@ interface ILauncherItem {
|
|
|
rank?: number;
|
|
|
|
|
|
/**
|
|
|
- * For items that hava kernel associated with them, the URL of the kernel icon.
|
|
|
+ * For items that have a kernel associated with them, the URL of the kernel
|
|
|
+ * icon.
|
|
|
*
|
|
|
- * This is not a CSS class, but the URL that points to the icon in the kernel spec.
|
|
|
+ * This is not a CSS class, but the URL that points to the icon in the kernel
|
|
|
+ * spec.
|
|
|
*/
|
|
|
kernelIconUrl?: string;
|
|
|
}
|
|
@@ -251,9 +257,9 @@ class Launcher extends VDomRenderer<LauncherModel> {
|
|
|
// First group-by categories
|
|
|
let categories = Object.create(null);
|
|
|
each(this.model.items(), (item, index) => {
|
|
|
- let cat = item.category || "Other";
|
|
|
+ let cat = item.category || 'Other';
|
|
|
if (!(cat in categories)) {
|
|
|
- categories[cat] = []
|
|
|
+ categories[cat] = [];
|
|
|
}
|
|
|
categories[cat].push(item);
|
|
|
});
|
|
@@ -266,7 +272,8 @@ class Launcher extends VDomRenderer<LauncherModel> {
|
|
|
let sections: vdom.VirtualNode[] = [];
|
|
|
let section: vdom.VirtualNode;
|
|
|
|
|
|
- // Assemble the final ordered list of categories, beginning with KNOWN_CATEGORIES.
|
|
|
+ // Assemble the final ordered list of categories, beginning with
|
|
|
+ // KNOWN_CATEGORIES.
|
|
|
let orderedCategories: string[] = [];
|
|
|
each(KNOWN_CATEGORIES, (cat, index) => {
|
|
|
orderedCategories.push(cat);
|
|
@@ -279,28 +286,31 @@ class Launcher extends VDomRenderer<LauncherModel> {
|
|
|
|
|
|
// Now create the sections for each category
|
|
|
each(orderedCategories, (cat, index) => {
|
|
|
- let iconClass = `${(categories[cat][0] as ILauncherItem).iconClass} jp-Launcher-sectionIcon jp-Launcher-icon`;
|
|
|
+ let iconClass = '${(categories[cat][0] as ILauncherItem).iconClass} ' +
|
|
|
+ 'jp-Launcher-sectionIcon jp-Launcher-icon';
|
|
|
let kernel = KERNEL_CATEGORIES.indexOf(cat) > -1;
|
|
|
if (cat in categories) {
|
|
|
section = (
|
|
|
- <div className="jp-Launcher-section">
|
|
|
- <div className="jp-Launcher-sectionHeader">
|
|
|
+ <div className='jp-Launcher-section'>
|
|
|
+ <div className='jp-Launcher-sectionHeader'>
|
|
|
{kernel && <div className={iconClass} />}
|
|
|
- <h2 className="jp-Launcher-sectionTitle">{cat}</h2>
|
|
|
+ <h2 className='jp-Launcher-sectionTitle'>{cat}</h2>
|
|
|
</div>
|
|
|
- <div className="jp-Launcher-cardContainer">
|
|
|
- {toArray(map(categories[cat], item => Card(kernel, (item as ILauncherItem), this, this._callback)))}
|
|
|
+ <div className='jp-Launcher-cardContainer'>
|
|
|
+ {toArray(map(categories[cat], (item: ILauncherItem) => {
|
|
|
+ return Card(kernel, item, this, this._callback);
|
|
|
+ }))}
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
sections.push(section);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
|
|
|
// Wrap the sections in body and content divs.
|
|
|
return (
|
|
|
- <div className="jp-Launcher-body">
|
|
|
- <div className="jp-Launcher-content">
|
|
|
+ <div className='jp-Launcher-body'>
|
|
|
+ <div className='jp-Launcher-content'>
|
|
|
{sections}
|
|
|
</div>
|
|
|
</div>
|
|
@@ -335,6 +345,43 @@ namespace Launcher {
|
|
|
}
|
|
|
|
|
|
|
|
|
+export
|
|
|
+function Card(kernel: boolean, item: ILauncherItem, launcher: Launcher, launcherCallback: (widget: Widget) => void): vdom.VirtualElement {
|
|
|
+ // Build the onclick handler.
|
|
|
+ let onclick = () => {
|
|
|
+ let callback = item.callback as any;
|
|
|
+ let value = callback(launcher.cwd, item.name);
|
|
|
+ Promise.resolve(value).then(widget => {
|
|
|
+ launcherCallback(widget);
|
|
|
+ launcher.dispose();
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // Add a data attribute for the category
|
|
|
+ let dataset = {category: item.category};
|
|
|
+ // Return the VDOM element.
|
|
|
+ return (
|
|
|
+ <div className='jp-LauncherCard'
|
|
|
+ title={item.displayName}
|
|
|
+ onclick={onclick}
|
|
|
+ dataset={dataset}>
|
|
|
+ <div className='jp-LauncherCard-icon'>
|
|
|
+ {(item.kernelIconUrl && kernel) &&
|
|
|
+ <img src={item.kernelIconUrl} className='jp-Launcher-kernelIcon' />}
|
|
|
+ {(!item.kernelIconUrl && !kernel) &&
|
|
|
+ <div className={`${item.iconClass} jp-Launcher-icon`} />}
|
|
|
+ {(!item.kernelIconUrl && kernel) &&
|
|
|
+ <div className='jp-LauncherCard-noKernelIcon'>
|
|
|
+ {item.displayName[0].toUpperCase()}
|
|
|
+ </div>}
|
|
|
+ </div>
|
|
|
+ <div className='jp-LauncherCard-label' title={item.displayName}>
|
|
|
+ {item.displayName}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
/**
|
|
|
* The namespace for module private data.
|
|
|
*/
|
|
@@ -370,29 +417,3 @@ namespace Private {
|
|
|
return a.displayName.localeCompare(b.displayName);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-export
|
|
|
-function Card(kernel: boolean, item: ILauncherItem, launcher: Launcher, launcherCallback: (widget: Widget) => void): vdom.VirtualElement {
|
|
|
- // Build the onclick handler.
|
|
|
- let onclick = () => {
|
|
|
- let callback = item.callback as any;
|
|
|
- let value = callback(launcher.cwd, item.name);
|
|
|
- Promise.resolve(value).then(widget => {
|
|
|
- launcherCallback(widget);
|
|
|
- launcher.dispose();
|
|
|
- });
|
|
|
- };
|
|
|
- // Add a data attribute for the category
|
|
|
- let dataset = {category: item.category};
|
|
|
- // Return the VDOM element.
|
|
|
- return (
|
|
|
- <div className="jp-LauncherCard" title={item.displayName} onclick={onclick} dataset={dataset}>
|
|
|
- <div className="jp-LauncherCard-icon">
|
|
|
- {(item.kernelIconUrl && kernel) && <img src={item.kernelIconUrl} className="jp-Launcher-kernelIcon" />}
|
|
|
- {(!item.kernelIconUrl && !kernel) && <div className={`${item.iconClass} jp-Launcher-icon`} />}
|
|
|
- {(!item.kernelIconUrl && kernel) && <div className="jp-LauncherCard-noKernelIcon">{item.displayName[0].toUpperCase()}</div>}
|
|
|
- </div>
|
|
|
- <div className="jp-LauncherCard-label" title={item.displayName}>{item.displayName}</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
-}
|