Merge pull request jupyterlab#50 from markellekelly/master

Added show/hide cell functionality
datalayer-externals · Aug 9, 2018 · 9fa2330 · 9fa2330
2 parents 530714a + c931278
commit 9fa2330
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 0 deletions.
diff --git a/src/generators.tsx b/src/generators.tsx
@@ -153,6 +153,11 @@ function notebookItemRenderer(
     6: '10'
   };
   let jsx;
+  const hideOnClick = (cell?: Cell) => {
+    if (cell) {
+      cell.inputHidden = !cell.inputHidden;
+    }
+  };
   if (item.type === 'markdown' || item.type === 'header') {
     const paddingLeft = 24;
     const collapseOnClick = (cellRef?: Cell) => {
@@ -221,6 +226,14 @@ function notebookItemRenderer(
           <div className="toc-entry-holder">
             {item.hasChild && twistButton}
             {jsx}
+            <div className={'eyeball-icon'}>
+              <img
+                src={require('../static/eyeball_view.svg')}
+                onClick={event => {
+                  hideOnClick(item.cellRef);
+                }}
+              />
+            </div>
           </div>
         );
       }
@@ -271,6 +284,14 @@ function notebookItemRenderer(
           <div className="toc-entry-holder">
             {item.hasChild && twistButton}
             {jsx}
+            <div className={'eyeball-icon'}>
+              <img
+                src={require('../static/eyeball_view.svg')}
+                onClick={event => {
+                  hideOnClick(item.cellRef);
+                }}
+              />
+            </div>
           </div>
         );
       }
@@ -284,6 +305,14 @@ function notebookItemRenderer(
         <span className={'toc-code-span'}>
           <CodeComponent code={item.text!} theme="jupyter" />
         </span>
+        <div className={'eyeball-icon'}>
+          <img
+            src={require('../static/eyeball_view.svg')}
+            onClick={event => {
+              hideOnClick(item.cellRef);
+            }}
+          />
+        </div>
       </div>
     );
   } else if (item.type === 'raw' && options.showRaw) {
@@ -292,6 +321,14 @@ function notebookItemRenderer(
         <span className={'toc-code-span'}>
           <CodeComponent code={item.text!} theme="none" />
         </span>
+        <div className={'eyeball-icon'}>
+          <img
+            src={require('../static/eyeball_view.svg')}
+            onClick={event => {
+              hideOnClick(item.cellRef);
+            }}
+          />
+        </div>
       </div>
     );
   } else {

diff --git a/static/eyeball_hidden.svg b/static/eyeball_hidden.svg
diff --git a/static/eyeball_hover.svg b/static/eyeball_hover.svg
diff --git a/static/eyeball_view.svg b/static/eyeball_view.svg
diff --git a/style/index.css b/style/index.css
@@ -222,6 +222,7 @@ TOTAL SIZE REMAINS AT 24PX INCLUDING MARGINS AND PADDING */
   display: inline-flex;
   position: relative;
   align-items: center;
+  width: 100%;
 }
 
 .toc-collapse-button {
@@ -232,6 +233,7 @@ TOTAL SIZE REMAINS AT 24PX INCLUDING MARGINS AND PADDING */
 }
 
 .header-cell {
+  width: 100%;
   overflow-x: hidden;
   overflow-y: hidden;
 }
@@ -248,3 +250,10 @@ TOTAL SIZE REMAINS AT 24PX INCLUDING MARGINS AND PADDING */
   opacity: 0;
   overflow: hidden;
 }
+
+.eyeball-icon {
+  float: right;
+  padding: 0px;
+  margin: 0px;
+  padding-left: 7px;
+}