Add button to clear results, tweak progress bar style

probmods · Sep 22, 2016 · 91f0c61 · 91f0c61
1 parent 373da81
commit 91f0c61
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/src/component.css b/src/component.css
@@ -73,6 +73,23 @@
     cursor: pointer
 }
 
+.wpedit .clearButton {
+    position: absolute;
+    top: -1;
+    right: -1;
+    background-color: transparent;
+    min-width: 0;
+    color: #0473e0;
+    font-weight: bold;
+    border: none;
+    margin: 0;
+    padding: 5px 5px 10px 10px;
+}
+
+.wpedit .clearButton.running {
+    display: none;
+}
+
 /* -- console method intercepting */
 .result .icon {
     border-radius: 5px;
@@ -116,23 +133,24 @@
 .wpedit .progress {
     font-size: 11px;
     position: relative;
-    height: 12px;
+    height: 16px;
+    width: 95%;
+    margin: 5px 0px 5px 5px;
+    background-color: bisque
 }
 
 .wpedit .progress .text {
     position: absolute;
-    top: 0;
     left: 0;
+    top: 0;
 }
 
 .wpedit .progress .fill {
     background-color: #99ccff;
-    transition: width 0.08s ease;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
+    /* transition: width 0.08s ease; */
     height: 100%;
+    padding: 0;
+    margin: 0
 }
 
 /* buttons */

diff --git a/src/index.js b/src/index.js
@@ -128,9 +128,13 @@ var ResultList = React.createClass({
   getInitialState: function() {
     return {
       metaVisible: false,
-      minHeight: 0
+      minHeight: 0,
+      hide: false
     }
   },
+  hide: function() {
+    this.setState({hide: true})
+  },
   // auto scroll to bottom (if user is already at the bottom)
   // HT http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html
   // this is a modification that works with MutationObserver
@@ -195,9 +199,14 @@ var ResultList = React.createClass({
     var webpplVersion = this.props.webpplVersion;
     var seed = this.props.seed;
 
-    return (<div style={style} className={'result ' + (this.props.newborn ? 'hide' : '')}>
-            {list}
-            </div>);
+    var className = 'result ' + (list.length == 0 ? ' hide' : '');
+
+    return (
+        <div style={style} className={className}>
+        <button onClick={this.props.clear} className={'clearButton ' +  executionState}>X</button>
+        {list}
+      </div>
+        );
 
   }
 })
@@ -524,6 +533,9 @@ var CodeEditor = React.createClass({
       return {results: state.results.concat(result)}
     });
   },
+  clearResults: function() {
+    this.setState({results: []})
+  },
   toggleMetaDrawer: function() {
     this.setState({showMeta: !this.state.showMeta})
   },
@@ -577,9 +589,10 @@ var CodeEditor = React.createClass({
 
             />
         <ResultList ref='resultList'
-                    newborn={this.state.newborn}
-                    executionState={this.state.execution}
-                    list={this.state.results}
+            newborn={this.state.newborn}
+            clear={this.clearResults}
+            executionState={this.state.execution}
+            list={this.state.results}
         />
         </div>
     );