feat(components): Status block

TesterRandolph · Jun 11, 2016 · 4fd707c · 4fd707c
1 parent e5c823b
commit 4fd707c
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 41 deletions.
diff --git a/front-end/app/components/Comment/index.js b/front-end/app/components/Comment/index.js
@@ -14,12 +14,11 @@ function renderAvatar(url) {
 }
 
 class Comment extends React.Component {
-    componentWillMount() {
-        console.log('Comment: componentWillMount');
-    }
+
     shouldComponentUpdate(prevProps){
         return this.props.comment.id !== prevProps.comment.id
     }
+
     render() {
         const {
             comment

diff --git a/front-end/app/components/FloatingBlock/index.js b/front-end/app/components/FloatingBlock/index.js
@@ -32,8 +32,9 @@ class FloatingBlock extends React.Component {
             )    
         } else {
             return (
-                <div styleName='show-floating-block'>
-                    <i styleName='toggle-display' onClick={handleClick} className="fa fa-eye" aria-hidden="true"/>
+                <div styleName='show-floating-block' onClick={handleClick}>
+                    <i styleName='toggle-display' className="fa fa-eye" aria-hidden="true"/>
+                    <h4>Clairvoyance</h4>
                 </div>
                 )
         }

diff --git a/front-end/app/components/FloatingBlock/styles.css b/front-end/app/components/FloatingBlock/styles.css
@@ -9,18 +9,13 @@ $shin-color: #00ffff;
 
 .floating-block-base {
   position: fixed;
-  top: 30px;
-  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 20px;
   z-index: 1000;
 }
 
-.show-floating-block {
-  composes: floating-block-base;
-  width: 250px;
-  margin: 16px auto;
-  font-size: 30px;
-  text-align: center;
-}
+
 
 .floating-block {
   composes: floating-block-base;
@@ -34,12 +29,12 @@ $shin-color: #00ffff;
 
 
 .triangle {
+  position: absolute;
   width: 0;
-  margin-right: auto;
-  margin-left: auto;
-  margin-top: -40px;
   border: 12px solid transparent;
-  border-bottom-color: $main-color;
+  border-left-color: $main-color;
+  right: -24px;
+  top: 17px;
 }
 
 .header {
@@ -71,12 +66,30 @@ $shin-color: #00ffff;
 }
 
 
+.show-floating-block {
+  composes: floating-block-base;
+  transition: opacity ease-in-out 0.3s;
+  background: white;
+  cursor: pointer;
+  width: 100px;
+  margin: 16px auto;
+  text-align: center;
+  opacity: 0.3;
+}
+
+.show-floating-block i {
+  font-size: 30px;
+}
+
 .show-floating-block i {
   transition: all ease-in-out 0.3s;
   border-radius: 100%;
 }
+.show-floating-block:hover {
+  opacity: 1;
+}
 
-.show-floating-block i:hover {
+.show-floating-block:hover i {
   color: $shin-color;
   box-shadow: 0px 0px 30px 0px $shin-color;
 }

diff --git a/front-end/app/components/LoadingBlock/index.js b/front-end/app/components/LoadingBlock/index.js
@@ -0,0 +1,21 @@
+
+import CSSModules from 'react-css-modules'
+
+import styles from './styles.css'
+import Loading from 'components/Loading'
+
+class LoadingBlock extends React.Component {
+
+    render() {
+        const {user} = this.props
+        if (user.status === 'loading') {
+            return (
+                <div styleName='logining'>
+                    <Loading/>
+                </div>
+                )    
+        }
+    }
+}
+
+export default CSSModules(LoadingBlock, styles)
diff --git a/front-end/app/components/LoadingBlock/styles.css b/front-end/app/components/LoadingBlock/styles.css
@@ -0,0 +1,10 @@
+.logining {
+  position: fixed;
+  top: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 20000;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
diff --git a/front-end/app/components/StatusBlock/index.js b/front-end/app/components/StatusBlock/index.js
@@ -1,14 +1,53 @@
-
 import CSSModules from 'react-css-modules'
 
 import styles from './styles.css'
 
 class StatusBlock extends React.Component {
-    
+
     render() {
-        return (
-            <div></div>
+        const {
+            comments
+        } = this.props
+
+        if (comments.data.length !== 0) {
+            let statNumbers = {
+                good: 0,
+                bad: 0,
+                normal: 0
+            }
+
+            comments.data.forEach(comment => {
+                statNumbers[comment.type] += 1
+            })
+
+            return (
+            <div styleName='container'>
+                <div styleName='stat-item'>
+                    <div styleName='icon--good'><i className="fa fa-thumbs-o-up"/></div>
+                    <div styleName="number">
+                        {statNumbers.good}
+                    </div>
+                </div>
+                <div styleName='stat-item'>
+                    <div styleName='icon--bad'><i className="fa fa-thumbs-o-down"/></div>
+                    <div styleName="number">
+                        {statNumbers.bad}
+                    </div>
+                </div>
+
+                <div styleName='stat-item'>
+                    <div styleName='icon--normal'>
+                        <i className="fa fa-comment-o"/>
+                    </div>
+                    <div styleName="number">
+                        {statNumbers.normal}
+                    </div>
+                </div>
+            </div>
             )
+        }
+
+
     }
 }
 

diff --git a/front-end/app/components/StatusBlock/styles.css b/front-end/app/components/StatusBlock/styles.css
@@ -0,0 +1,38 @@
+.container {
+    display: flex
+}
+
+.stat-item {
+    flex: 1;
+    text-align: center;
+    margin-left: 5px
+}
+
+.stat-item:first-child {
+    margin-left: 0
+}
+
+.icon {
+    font-size: 24px
+}
+
+.icon--good {
+    composes: icon;
+    /*color: green*/
+}
+
+.icon--bad {
+    composes: icon;
+    /*color: red*/
+}
+
+.icon--normal {
+    composes: icon
+}
+
+.number {
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-bottom: #101740 solid 2px
+}
diff --git a/front-end/app/components/UserBlock/index.js b/front-end/app/components/UserBlock/index.js
@@ -17,14 +17,6 @@ class UserBlock extends React.Component {
                     </div>
                 )    
         }
-
-        if (status === 'loading') {
-            return (
-                <div styleName='logining'>
-                    <Loading/>
-                </div>
-                )
-        }
 
     }
 }

diff --git a/front-end/app/components/UserBlock/styles.css b/front-end/app/components/UserBlock/styles.css
@@ -1,10 +0,0 @@
-.logining {
-  position: fixed;
-  top: 0;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 20000;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-