Merge pull request #155 from smacker/review_visual_design

Port visual design of review page

Author: smacker

src/components/Experiment/Diff.js

@@ -19,6 +19,7 @@ class Diff extends PureComponent {
 
   render() {
     const { diffString, leftLoc, rightLoc, className } = this.props;
+    const showLoc = leftLoc && rightLoc;
     const diffHTML = Diff2Html.getPrettyHtml(diffString, {
       inputFormat: 'diff',
       outputFormat: 'side-by-side',
@@ -29,12 +30,14 @@ class Diff extends PureComponent {
     });
     return (
       <div className={`diff ${className}`}>
-        <div className="diff__locs">
-          <div className="diff__loc left">{leftLoc} lines of code</div>
-          <div className="diff__loc right">{rightLoc} lines of code</div>
-        </div>
+        {showLoc && (
+          <div className="diff__locs">
+            <div className="diff__loc left">{leftLoc} lines of code</div>
+            <div className="diff__loc right">{rightLoc} lines of code</div>
+          </div>
+        )}
         <div
-          className="diff__content"
+          className={`diff__content ${showLoc ? '_with-loc' : ''}`}
           dangerouslySetInnerHTML={{ __html: diffHTML }}
         />
       </div>

src/components/Experiment/Diff.less

@@ -19,6 +19,10 @@
     margin-bottom: -5px;
 }
 
+.d2h-diff-tbody {
+    background: #fff;
+}
+
 .diff {
     // there is a bug in Chrome if I use flex here location div gets 0px height
     // but I can't reproduce it on simpler example
@@ -43,7 +47,9 @@
     }
 
     &__content {
-        padding-top: 20px;
         height: 100%;
     }
+    &__content._with-loc {
+        padding-top: 20px;
+    }
 }

src/components/Review/FeaturesTable.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { Table } from 'react-bootstrap';
 import './FeaturesTable.less';
 
-function FeaturesTable({ title, features }) {
+function FeaturesTable({ title, features, bsStyle }) {
   return (
-    <Table striped bordered condensed hover className="features-table">
+    <Table condensed className={`features-table ${bsStyle}`}>
       <thead>
         <tr>
           <th className="features-table__th-number" />

src/components/Review/FeaturesTable.less

@@ -1,6 +1,66 @@
+@import '../../../node_modules/bootstrap/less/variables.less';
+
 .features-table {
     &__cell-name {
         max-width: 600px;
         overflow: hidden;
     }
+
+    th,
+    td {
+        border: 1px solid transparent !important;
+    }
+
+    thead {
+        background: @gray-darker;
+
+        th {
+            color: @gray-lighter;
+            font-weight: 300;
+            font-size: 10px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        th:nth-child(3),
+        th:nth-child(4) {
+            text-align: right;
+            color: @gray-light;
+        }
+    }
+
+    tbody {
+        tr {
+            background: @gray-darker;
+        }
+
+        tr:nth-of-type(odd) {
+            background-color: @gray-dark;
+        }
+
+        td:nth-child(1) {
+            color: @gray;
+            text-align: center;
+        }
+
+        td:nth-child(2) {
+            color: @brand-success;
+            letter-spacing: 1px;
+            font-weight: 300;
+        }
+
+        td:nth-child(3),
+        td:nth-child(4) {
+            color: @gray-lighter;
+            text-align: right;
+        }
+    }
+
+    &.danger {
+        tbody {
+            td:nth-child(2) {
+                color: @brand-danger;
+            }
+        }
+    }
 }

src/components/Review/Results.js

@@ -30,31 +30,31 @@ class Results extends Component {
     return (
       <Grid fluid className="review-results">
         <Row className="review-results__info">
-          <Col xs={4}>
+          <Col xs={12} className="review-results__info-col">
             <FormGroup>
               <Radio
                 inline
                 value="most"
                 checked={this.state.mode === 'most'}
                 onChange={this.onModeChange}
+                className={this.state.mode === 'most' ? '_checked' : ''}
               >
-                Most similar & disimilar Features
+                Most similar & dissimilar Features
               </Radio>{' '}
               <Radio
                 inline
                 value="full"
                 checked={this.state.mode === 'full'}
                 onChange={this.onModeChange}
+                className={this.state.mode === 'full' ? '_checked' : ''}
               >
                 Full Output
               </Radio>
             </FormGroup>
-          </Col>
-          <Col xs={4} className="text-right">
-            Users Annotations: <b>{annotations.yes || 0} Similar</b> &{' '}
-            <b>{annotations.no || 0} Disimilar</b>
-          </Col>
-          <Col xs={4}>
+            <div className="review-results__stats">
+              Users Annotations: <b>{annotations.yes || 0} Similar</b> &{' '}
+              <b>{annotations.no || 0} Dissimilar</b>
+            </div>
             <div className="review-results__score">
               Similarity Score: {score}
             </div>
@@ -71,8 +71,9 @@ class Results extends Component {
                       features={mostSimilarFeatures}
                     />
                     <FeaturesTable
-                      title="Most Disimilar Features"
+                      title="Most Dissimilar Features"
                       features={leastSimilarFeatures}
+                      bsStyle="danger"
                     />
                   </React.Fragment>
                 ) : (

src/components/Review/Results.less

@@ -1,20 +1,51 @@
 @import '../../../node_modules/bootstrap/less/variables.less';
 
 .review-results {
-    //height: 100%;
     flex: 1;
     display: flex;
     flex-direction: column;
 
     &__info {
         flex: 0 0;
         padding-top: 10px;
+        margin: 0 -30px 20px;
+    }
+
+    &__info-col {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .form-group {
+        margin: 0;
+    }
+
+    &__stats {
+        flex: 1;
+
+        padding: 0 36px;
+
+        text-align: right;
+        color: @gray-lighter;
+        font-weight: 300;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+
+        b {
+            white-space: nowrap;
+        }
     }
 
     &__score {
-        margin-top: -10px;
-        padding: 10px 20px;
-        background: @gray-lighter;
+        padding: 10px 36px;
+        color: @brand-success;
+        font-weight: 400;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        background: @gray-dark;
     }
 
     &__main {
@@ -65,4 +96,82 @@
             margin-bottom: 0;
         }
     }
+
+    // bootstrap style overrides
+    .radio-inline {
+        color: @gray-lighter;
+        position: relative;
+        padding-left: 32px;
+        cursor: pointer;
+        line-height: 23px;
+        display: inline-block;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-weight: 300;
+        margin-right: 16px;
+
+        input {
+            position: absolute;
+            left: -9999px;
+        }
+
+        &:before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 22px;
+            height: 22px;
+            background: @gray-dark;
+            border-radius: 100%;
+        }
+
+        &._checked:after {
+            content: '';
+            width: 8px;
+            height: 8px;
+            background: @brand-info;
+            position: absolute;
+            top: 7px;
+            left: 7px;
+            border-radius: 100%;
+            transition: all 0.2s ease;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    .nav-tabs {
+        border-bottom: 1px solid transparent;
+    }
+
+    .nav-tabs > li > a,
+    .nav-tabs > li > a:hover,
+    .nav-tabs > li > a:focus {
+        background: @gray-dark;
+        color: @gray-lighter;
+        border: none;
+        border-radius: 0;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-weight: 300;
+        padding: 12px 26px;
+        margin-right: 6px;
+
+        &:hover {
+            color: @brand-info;
+        }
+    }
+
+    .nav-tabs > li.active > a,
+    .nav-tabs > li.active > a:hover,
+    .nav-tabs > li.active > a:focus {
+        background: @gray-darker;
+        color: @brand-info;
+        padding: 12px 40px;
+    }
 }

src/pages/Review.less

@@ -4,6 +4,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    background: @gray;
 
     .navbar {
         flex: 0;
@@ -59,6 +60,8 @@
     }
 
     &__diff {
+        flex: 1;
+
         margin-bottom: 10px;
     }
 
@@ -67,10 +70,15 @@
         position: relative;
         flex: 0 0 auto;
         display: block;
+
         border-top: 1px solid @gray;
         border-bottom: 1px solid @gray;
         margin-bottom: 10px;
-        color: @gray;
+        padding: 2px 0;
+
+        color: @brand-info;
+        background: @gray-darker;
+
         cursor: row-resize;
 
         &:before {
@@ -86,5 +94,7 @@
 
         min-width: 0;
         min-height: 0;
+
+        background: @gray;
     }
 }