set spreadsheet format from tollbar

Author: Quant Lab

packages/spreadsheet-extension/src/index.ts

@@ -171,7 +171,7 @@ function activateSheetTools(app: QuantLab, tracker: ISpreadsheetTracker, editorS
     return true;
   };
 
-  sheettools.title.label = 'Spreadsheet';
+  sheettools.title.label = 'Sheet Tools';
   sheettools.id = id;
   sheettools.addItem({ tool: activeCellTool, rank: 1 });
   sheettools.addItem({ tool: slideShow, rank: 2 });
@@ -273,7 +273,7 @@ function activateSpreadsheet(app: QuantLab, services: IServiceManager, mainMenu:
   // The launcher callback.
   let callback = (cwd: string, name: string) => {
     return commands.execute(
-      'docmanager:new-untitled', { path: cwd, type: 'spreadsheet' }
+      'docmanager:new-untitled', { path: cwd, type: 'file' }
     ).then(model => {
       return commands.execute('docmanager:open', {
         path: model.path, factory: FACTORY,
@@ -297,8 +297,8 @@ function activateSpreadsheet(app: QuantLab, services: IServiceManager, mainMenu:
 
   }
 
-  app.contextMenu.addItem({ type: 'separator', selector: '.jp-Spreadsheet', rank: 0 });
-  app.contextMenu.addItem({command: CommandIDs.createConsole, selector: '.jp-Spreadsheet', rank: 3});
+  //app.contextMenu.addItem({ type: 'separator', selector: '.jp-Spreadsheet', rank: 0 });
+  //app.contextMenu.addItem({command: CommandIDs.createConsole, selector: '.jp-Spreadsheet', rank: 3});
 
   return tracker;
 }

packages/spreadsheet/src/panel.ts

@@ -47,7 +47,7 @@ import {
  */
 const SPREADSHEET_PANEL_CLASS = 'jp-SpreadsheetPanel';
 
-const SPREADSHEET_PANEL_TOOLBAR_CLASS = 'jp-SpreadsheetPanel-toolbar';
+const SPREADSHEET_PANEL_TOOLBAR_CLASS = 'jp-Spreadsheet-toolbar';
 
 const SPREADSHEET_PANEL_SPREADSHEET_CLASS = 'jp-SpreadsheetPanel-spreadsheet';
 
@@ -330,7 +330,7 @@ class SpreadsheetPanel extends Widget implements DocumentRegistry.IReadyWidget {
    * Update the kernel language.
    */
   private _updateLanguage(language: KernelMessage.ILanguageInfo): void {
-    this.model.metadata.set('language_info', language);
+    //this.model.metadata.set('language_info', language);
   }
 
   /**

packages/spreadsheet/src/toolbar.ts

@@ -2,19 +2,33 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  Toolbar, ToolbarButton
+  Message
+} from '@phosphor/messaging';
+
+import {
+  Widget
+} from '@phosphor/widgets';
+
+import {
+  Styling, Toolbar, ToolbarButton
 } from '@quantlab/apputils';
 
 import {
   SpreadsheetPanel
 } from './panel';
 
+import {
+  Spreadsheet
+} from './widget';
 
 /**
  * The class name added to toolbar save button.
  */
 const TOOLBAR_SAVE_CLASS = 'jp-SaveIcon';
 
+const TOOLBAR_LABEL_CLASS = 'jp-CSVToolbar-label';
+
+const TOOLBAR_DROPDOWN_CLASS = 'jp-Spreadsheet-toolbarDropdown';
 
 /**
  * A namespace for the default toolbar items.
@@ -40,6 +54,86 @@ namespace ToolbarItems {
     });
   }
 
+  /**
+   * Create bold button toolbar item.
+   */
+  export
+  function createBoldButton(panel: SpreadsheetPanel): ToolbarButton {
+    return new ToolbarButton({
+      className: 'fa fa-bold',
+      onClick: () => {
+        panel.spreadsheet.style('fontWeight','bold');
+      },
+      tooltip: 'Set font weight to Bold'
+    });
+  }
+
+  /**
+   * Create italic button toolbar item.
+   */
+  export
+  function createItalicButton(panel: SpreadsheetPanel): ToolbarButton {
+    return new ToolbarButton({
+      className: 'fa fa-italic',
+      onClick: () => {
+        panel.spreadsheet.style('fontStyle','italic');
+      },
+      tooltip: 'Set font style to Italic'
+    });
+  }
+
+  /**
+   * Create align left button toolbar item.
+   */
+  export
+  function createAlignLeftButton(panel: SpreadsheetPanel): ToolbarButton {
+    return new ToolbarButton({
+      className: 'fa fa-align-left',
+      onClick: () => {
+        panel.spreadsheet.style('className','htLeft');
+      },
+      tooltip: 'Align to left'
+    });
+  }
+
+  /**
+   * Create align center button toolbar item.
+   */
+  export
+  function createAlignCenterButton(panel: SpreadsheetPanel): ToolbarButton {
+    return new ToolbarButton({
+      className: 'fa fa-align-center',
+      onClick: () => {
+        panel.spreadsheet.style('className','htCenter');
+      },
+      tooltip: 'Align to center'
+    });
+  }
+
+  /**
+   * Create align left button toolbar item.
+   */
+  export
+  function createAlignRightButton(panel: SpreadsheetPanel): ToolbarButton {
+    return new ToolbarButton({
+      className: 'fa fa-align-right',
+      onClick: () => {
+        panel.spreadsheet.style('className','htRight');
+      },
+      tooltip: 'Align to right'
+    });
+  }
+
+
+  export
+  function createFillColorItem(panel: SpreadsheetPanel): Widget {
+    return new ColorSwitcher(panel.spreadsheet,'Fill Color');
+  }
+  export
+  function createFontColorItem(panel: SpreadsheetPanel): Widget {
+    return new ColorSwitcher(panel.spreadsheet,'Font Color');
+  }
+
   /**
    * Add the default items to the panel toolbar.
    */
@@ -49,9 +143,180 @@ namespace ToolbarItems {
     toolbar.addItem('save', createSaveButton(panel));
     toolbar.addItem('interrupt', Toolbar.createInterruptButton(panel.session));
     toolbar.addItem('restart', Toolbar.createRestartButton(panel.session));
+
+    toolbar.addItem('bold', createBoldButton(panel));
+    toolbar.addItem('italic', createItalicButton(panel));
+    toolbar.addItem('left', createAlignLeftButton(panel));
+    toolbar.addItem('center', createAlignCenterButton(panel));
+    toolbar.addItem('right', createAlignRightButton(panel));
+
+    toolbar.addItem('fill', createFillColorItem(panel));
+    toolbar.addItem('font', createFontColorItem(panel));
+
     toolbar.addItem('spacer', Toolbar.createSpacerItem());
     toolbar.addItem('kernelName', Toolbar.createKernelNameItem(panel.session));
     toolbar.addItem('kernelStatus', Toolbar.createKernelStatusItem(panel.session));
   }
 
 }
+
+
+/**
+ * A toolbar widget that switches fill or font color
+ */
+class ColorSwitcher extends Widget {
+  /**
+   * Construct a new color switcher.
+   */
+  constructor(widget: Spreadsheet, prompt: string) {
+    super({ node: createColorSwitcherNode(prompt) });
+    //this.addClass(TOOLBAR_COLOR_CLASS);
+
+    this._select = this.node.firstChild as HTMLSelectElement;
+    Styling.wrapSelect(this._select);
+    this._wildCard = document.createElement('option');
+    this._wildCard.value = '-';
+    this._wildCard.textContent = '-';
+    this._spreadsheet = widget;
+
+    // Set the initial value.
+    if (widget.model) {
+      this._updateValue();
+    }
+
+    // Follow the type of the active cell.
+    widget.activeCellChanged.connect(this._updateValue, this);
+
+    // Follow a change in the selection.
+    widget.selectionChanged.connect(this._updateValue, this);
+  }
+
+  /**
+   * Handle the DOM events for the widget.
+   *
+   * @param event - The DOM event sent to the widget.
+   *
+   * #### Notes
+   * This method implements the DOM `EventListener` interface and is
+   * called in response to events on the dock panel's node. It should
+   * not be called directly by user code.
+   */
+  handleEvent(event: Event): void {
+    switch (event.type) {
+    case 'change':
+      this._evtChange(event);
+      break;
+    case 'keydown':
+      this._evtKeyDown(event as KeyboardEvent);
+      break;
+    default:
+      break;
+    }
+  }
+
+  /**
+   * Handle `after-attach` messages for the widget.
+   */
+  protected onAfterAttach(msg: Message): void {
+    this._select.addEventListener('change', this);
+    this._select.addEventListener('keydown', this);
+  }
+
+  /**
+   * Handle `before-detach` messages for the widget.
+   */
+  protected onBeforeDetach(msg: Message): void {
+    this._select.removeEventListener('change', this);
+    this._select.removeEventListener('keydown', this);
+  }
+
+  /**
+   * Handle `changed` events for the widget.
+   */
+  private _evtChange(event: Event): void {
+    let select = this._select;
+    let widget = this._spreadsheet;
+    if (select.value === '-') {
+      return;
+    }
+    if (!this._changeGuard) {
+      let value = select.value;
+      if(select.options[0].value == 'fill color'){
+        widget.style('background', value);
+        select.value = 'fill color';
+      }else if(select.options[0].value == 'font color'){
+        widget.style('color', value);
+        select.value = 'font color';
+      }
+      widget.activate();
+    }
+  }
+
+  /**
+   * Handle `keydown` events for the widget.
+   */
+  private _evtKeyDown(event: KeyboardEvent): void {
+    if (event.keyCode === 13) {  // Enter
+      this._spreadsheet.activate();
+    }
+  }
+
+  /**
+   * Update the value of the dropdown from the widget state.
+   */
+  private _updateValue(): void {
+    let widget = this._spreadsheet;
+    let select = this._select;
+    if (!widget.activeCell) {
+      return;
+    }
+    let mColor: string = '';//widget.activeCell.model.type;
+    //for (let i = 0; i < widget.widgets.length; i++) {
+    //  let child = widget.widgets[i];
+    //  if (widget.isSelected(child)) {
+    //    if (child.model.type !== mType) {
+    //      mType = '-';
+    //      select.appendChild(this._wildCard);
+    //      break;
+    //    }
+    //  }
+    //}
+    if (mColor !== '-') {
+      select.remove(3);
+    }
+    this._changeGuard = true;
+    select.value = mColor;
+    this._changeGuard = false;
+
+  }
+
+  private _changeGuard = false;
+  private _wildCard: HTMLOptionElement = null;
+  private _select: HTMLSelectElement = null;
+  private _spreadsheet: Spreadsheet = null;
+}
+
+
+/**
+ * Create the node for the cell type switcher.
+ */
+function createColorSwitcherNode(prompt: string): HTMLElement {
+  let div = document.createElement('div');
+  let label = document.createElement('span');
+  label.textContent = prompt;
+  label.className = TOOLBAR_LABEL_CLASS;
+  let select = document.createElement('select');
+  for (let t of [prompt, 'red', 'yellow', 'blue']) {
+    let option = document.createElement('option');
+    option.value = t.toLowerCase();
+    option.textContent = t;
+    option.style.backgroundColor = t;
+    select.appendChild(option);
+  }
+  select.className = TOOLBAR_DROPDOWN_CLASS;
+  //div.appendChild(label);
+  //let node = Styling.wrapSelect(select);
+  //node.classList.add(TOOLBAR_DROPDOWN_CLASS);
+  div.appendChild(select);
+  return div;
+}