feat: provide UI for hiding/showing code cells (#870)

Use outline buttons and semi-bold for the label. Fix #838
SwissDataScienceCenter · Apr 15, 2020 · ec04ec7 · ec04ec7
1 parent c328561
commit ec04ec7
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/file/File.present.js b/src/file/File.present.js
@@ -259,26 +259,29 @@ function StyledNotebook(props) {
     <ListGroup key="controls" flush>
       <ListGroupItem>
         <div>
-          <span>
-            <b>Code Visibility &nbsp;</b>
+          <span style={{ fontWeight: "500" }}>
+            Code Visibility &nbsp;&nbsp;
           </span>
           <ButtonGroup key="controls" size="sm">
             <Button
               color="primary"
+              outline={displayMode !== NotebookSourceDisplayMode.DEFAULT}
               onClick={() => setDisplayMode(NotebookSourceDisplayMode.DEFAULT)}
               active={displayMode === NotebookSourceDisplayMode.DEFAULT}
             >
               Default
             </Button>
             <Button
               color="primary"
+              outline={displayMode !== NotebookSourceDisplayMode.SHOWN}
               onClick={() => setDisplayMode(NotebookSourceDisplayMode.SHOWN)}
               active={displayMode === NotebookSourceDisplayMode.SHOWN}
             >
               Visible
             </Button>
             <Button
               color="primary"
+              outline={displayMode !== NotebookSourceDisplayMode.HIDDEN}
               onClick={() => setDisplayMode(NotebookSourceDisplayMode.HIDDEN)}
               active={displayMode === NotebookSourceDisplayMode.HIDDEN}
             >