8000 Port visual design of review page by smacker · Pull Request #155 · src-d/code-annotation · GitHub
[go: up one dir, main page]
Skip to content

Port visual design of review page #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smacker merged 3 commits into from
Mar 2, 2018
Merged

Port visual design of review page #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d0052f
Port visual design of review page
smacker Feb 22, 2018
257f588
Fix diff for small files on review page
smacker Feb 26, 2018
ed7efa8
Fix typo
smacker Feb 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/components/Experiment/Diff.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion src/components/Experiment/Diff.less
View file 10BC0
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -43,7 +47,9 @@
}

&__content {
padding-top: 20px;
height: 100%;
}
&__content._with-loc {
padding-top: 20px;
}
}
4 changes: 2 additions & 2 deletions src/components/Review/FeaturesTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
60 changes: 60 additions & 0 deletions src/components/Review/FeaturesTable.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
19 changes: 10 additions & 9 deletions src/components/Review/Results.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
) : (
Expand Down
117 changes: 113 additions & 4 deletions src/components/Review/Results.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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;
}
}
12 changes: 11 additions & 1 deletion src/pages/Review.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
height: 100%;
display: flex;
flex-direction: column;
background: @gray;

.navbar {
flex: 0;
Expand Down Expand Up @@ -59,6 +60,8 @@
}

&__diff {
flex: 1;

margin-bottom: 10px;
}

Expand All @@ -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 {
Expand All @@ -86,5 +94,7 @@

min-width: 0;
min-height: 0;

background: @gray;
}
}
0