Merge pull request #2509 from blink1073/clickable-collapser

Make placeholders clickable

jupyterlab/schemas/jupyter.services.codemirror-services.json

@@ -0,0 +1,11 @@
+{
+  "jupyter.lab.setting-icon-class": "jp-ImageTextEditor",
+  "jupyter.lab.setting-icon-label": "CodeMirror",
+  "title": "CodeMirror",
+  "description": "Text editor settings for all CodeMirror editors.",
+  "properties": {
+    "keyMap": { "type": "string", "title": "Key Map", "default": "default" },
+    "theme": { "type": "string", "title": "Theme", "default": "default" }
+  },
+  "type": "object"
+}

packages/cells/src/placeholder.tsx

@@ -46,7 +46,7 @@ const OUTPUT_PLACEHOLDER_CLASS = 'jp-OutputPlaceholder';
 
 /**
  * An abstract base class for placeholders
- * 
+ *
  * ### Notes
  * A placeholder is the element that is shown when input/output
  * is hidden.
@@ -56,11 +56,21 @@ abstract class Placeholder extends VDomRenderer<null> {
   /**
    * Construct a new placeholder.
    */
-  constructor() {
+  constructor(callback: (e: Event) => void) {
     super();
     this.addClass(PLACEHOLDER_CLASS);
+    this._callback = callback;
   }
 
+  /**
+   * Handle the click event.
+   */
+  protected handleClick(e: Event): void {
+    let callback = this._callback;
+    callback(e);
+  }
+
+  private _callback: (e: Event) => void;
 }
 
 
@@ -72,8 +82,8 @@ class InputPlaceholder extends Placeholder {
   /**
    * Construct a new input placeholder.
    */
-  constructor() {
-    super();
+  constructor(callback: (e: Event) => void) {
+    super(callback);
     this.addClass(INPUT_PLACEHOLDER_CLASS);
   }
 
@@ -84,7 +94,7 @@ class InputPlaceholder extends Placeholder {
     return [
         <div className={INPUT_PROMPT_CLASS}>
         </div>,
-        <div className={CONTENT_CLASS}>
+        <div className={CONTENT_CLASS} onclick={ (e) => this.handleClick(e) }>
           <div className="jp-MoreHorizIcon" />
         </div>
     ]
@@ -101,8 +111,8 @@ class OutputPlaceholder extends Placeholder {
   /**
    * Construct a new output placeholder.
    */
-  constructor() {
-    super();
+  constructor(callback: (e: Event) => void) {
+    super(callback);
     this.addClass(OUTPUT_PLACEHOLDER_CLASS);
   }
 
@@ -113,10 +123,10 @@ class OutputPlaceholder extends Placeholder {
     return [
         <div className={OUTPUT_PROMPT_CLASS}>
         </div>,
-        <div className={CONTENT_CLASS}>
+        <div className={CONTENT_CLASS} onclick={ (e) => this.handleClick(e) }>
           <div className="jp-MoreHorizIcon" />
         </div>
     ]
   }
 
-}
+}

packages/cells/src/widget.ts

@@ -195,7 +195,9 @@ class Cell extends Widget {
     inputWrapper.addWidget(input);
     (this.layout as PanelLayout).addWidget(inputWrapper);
 
-    this._inputPlaceholder = new InputPlaceholder();
+    this._inputPlaceholder = new InputPlaceholder(() => {
+      this.inputHidden = !this.inputHidden;
+    });
 
     // Footer
     let footer = this._footer = this.contentFactory.createCellFooter();
@@ -542,7 +544,9 @@ class CodeCell extends Cell {
     outputWrapper.addWidget(output);
     (this.layout as PanelLayout).insertWidget(2, outputWrapper);
 
-    this._outputPlaceholder = new OutputPlaceholder();
+    this._outputPlaceholder = new OutputPlaceholder(() => {
+      this.outputHidden = !this.outputHidden;
+    });
 
     // Modify state
     this.setPrompt(`${model.executionCount || ''}`);