Merge pull request #128 from KleeGroup/error-center-plus

[error-center] Add icons and fix css version alpha
klee-contrib · Jun 24, 2015 · 684762c · 684762c
2 parents 0cb0492 + b4d2024
commit 684762c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/application/error-center/index.js b/application/error-center/index.js
@@ -7,7 +7,8 @@ var errorCenter = {
     return {
       source: window,
       errors: [],
-      isErrorsVisible: false
+      isErrorsVisible: false,
+      numberDisplayed: 3
     }
   },
   getInitialState(){
@@ -24,30 +25,26 @@ var errorCenter = {
   _toggleVisible(){
     this.setState({isErrorsVisible: !this.state.isErrorsVisible})
   },
-  /** @inheriteddoc */
-  render() {
+  _renderErrors(){
     return (
       <div data-focus='error-center'>
         <div data-focus='error-counter'>
-          {this.state.errors.length}
+          <i className="fa fa-times-circle"></i>{this.state.errors.length}
         </div>
         <div data-focus='error-actions'>
-          {
-            this.state.errors.length > 1
-            &&
-            <button className='btn btn-default' onClick={()=>{window.location.reload();}}>Reload</button>
-          }
-          {
-            this.state.errors.length > 1
-            &&
-            <button className='btn btn-default' onClick={this._toggleVisible}>{this.state.isErrorsVisible ? "Hide Errors":"Show Errors"}</button>
-          }
+          <i className='fa fa-refresh' onClick={()=>{window.location.reload();}}></i>
+          <i className={`fa fa-arrow-circle-o-${this.state.isErrorsVisible ? 'up' : 'down'}`} onClick={this._toggleVisible}></i>
+          <i className='fa fa-trash-o' onClick={()=>{this.setState({errors: []})}}></i>
         </div>
         <ul data-focus='error-stack'>
-          {this.state.isErrorsVisible ? this.state.errors.map((err)=>{return <li>{err}</li>}) : null}
+          {this.state.isErrorsVisible ? this.state.errors.slice(this.state.errors.length - this.props.numberDisplayed, this.state.errors.length).map((err)=>{return <li>{err}</li>}) : null}
         </ul>
       </div>
-      );
+    );
+  },
+  /** @inheriteddoc */
+  render() {
+    return this.state.errors.length > 0 ? this._renderErrors() : null;
   }
 };
 

diff --git a/application/error-center/style/error-center.scss b/application/error-center/style/error-center.scss
@@ -5,6 +5,41 @@
   z-index: 9999999;
   max-width: 300px;
   min-width: 200px;
-  background-color: red;
+  background-color: tomato;
   color: white;
+  color: white;
+  div[data-focus='error-counter']{
+    font-weight: bold;
+    font-size: 3em;
+    text-align: center;
+  }
+  div[data-focus='error-actions']{
+    display: flex;
+    font-weight: bold;
+    font-size: 2em;
+    text-align: center;
+  /* Then we define how is distributed the remaining space */
+    justify-content: space-around;
+  }
+  ul[data-focus='error-stack']{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    flex-wrap: wrap;
+    li{
+      background: transparent;
+      padding: 5px;
+      width: 300px;
+      height: 92px;
+      margin-top: 10px;
+      line-height: 20px;
+      color: white;
+      font-weight: bold;
+      font-size: 1em;
+      text-align: center;
+    }
+  }
 }