Skip to content

Match vision tab overhaul #469

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
howardchung merged 23 commits into from
Nov 14, 2016
Merged

Match vision tab overhaul #469

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
bd7e9ae
add ward log draft
Oct 27, 2016
9d1f65f
fix a performance issue for the Vision page
Nov 3, 2016
c23f12d
improve the ward log table
Nov 5, 2016
e38c463
improve the ward log visual
Nov 6, 2016
4910708
polish the wardlog visual
Nov 8, 2016
4db566a
add the player filter prototypes
Nov 9, 2016
9e346df
fix the responsive bugs in the vision page
Nov 11, 2016
b099d50
Merge remote-tracking branch 'upstream/master' into own_table
Nov 11, 2016
9916375
fixes the errors caused by merging upstream
Nov 11, 2016
843a0c2
Merge remote-tracking branch 'upstream/master' into own_table
Nov 11, 2016
3ddc16b
apply fixes following code review
Nov 11, 2016
b7ce459
remove some lint
Nov 12, 2016
b4db5a3
remove a lint bypass
Nov 12, 2016
98a2831
remove a lint bypass
Nov 12, 2016
890e51f
refactored Fixed to its own file
Nov 12, 2016
fdf6900
fix issues related to the CR
Nov 12, 2016
12d6828
eslint: allow same precedence operators to be mix
Nov 12, 2016
6eb4a48
fixed a problem with a mutation of immutable data
Nov 12, 2016
60f06bf
Revert "eslint: allow same precedence operators to be mix"
Nov 12, 2016
e827ba7
fix linting issues
Nov 12, 2016
cb0106a
fix some issues after review
Nov 13, 2016
5d8e8f5
fixed a crash when opening an unparsed match
Nov 14, 2016
8b2de47
coerce the player instead of using a guard
Nov 14, 2016
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
6 changes: 6 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
"flexboxgrid": "6.3.1",
"heatmap.js": "2.0.5",
"isomorphic-fetch": "2.2.1",
"lodash": "^4.16.4",
"material-ui": "0.16.1",
"moment-duration-format": "^1.3.0",
Copy link
Copy Markdown
Member

@blukai blukai Nov 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this new 7 dependencies?

Copy link
Copy Markdown
Author

@micaelbergeron micaelbergeron Nov 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me explain why those have been added:

  • Lodash: I don't feel like implementing my how flow() to compose my filters. I suggest we use the 'lodash/fp' import that is more geared toward functional programming. (I also use: inRange, sortByIndex, map/filter).
  • moment-duration-format: I don't think I'm using it, so I guess I'll remove it. Good catch.
  • react-addons-css-transition-group: de facto transition component for React
  • react-measure: This is to deal with the resizing of the page. @howardchung suggested I use the Redux store size, but I don't see how that can integrate with the flexgrid sizing. @mike-robertson you are welcome to comment.
  • seamless-immutable: okay that is a subject of its own, but this manage immutable Object/Array and make it so deeply nested values can be compared with a simple reference equality check. Having immutable objects in the Redux store is considered a good practice.
  • react-addons-perf: That is very helpful to dig down React rendering and find performance issues
  • react-perf-tool: I think that expose it to the Chrome extension

"node-uuid": "1.4.7",
"postcss-browser-reporter": "0.5.0",
"postcss-color-function": "2.0.1",
Expand All @@ -35,6 +37,7 @@
"react": "15.3.2",
"react-dom": "15.3.2",
"react-flexbox-grid": "0.10.2",
"react-measure": "^1.3.1",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-redux": "4.0.6",
Expand All @@ -45,6 +48,7 @@
"redux-responsive": "^3.1.4",
"redux-thunk": "2.1.0",
"reselect": "2.5.4",
"seamless-immutable": "^6.3.0",
"webpack": "2.1.0-beta.22",
"webpack-dashboard": "0.2.0",
"webpack-dev-server": "1.16.2",
Expand All @@ -66,6 +70,8 @@
"eslint-plugin-react": "6.4.1",
"file-loader": "0.9.0",
"json-loader": "0.5.4",
"react-addons-perf": "^15.3.2",
"react-perf-tool": "^0.1.7",
"style-loader": "0.13.1",
"url-loader": "0.5.7"
},
Expand Down
2 changes: 2 additions & 0 deletions src/components/App/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const muiTheme = {
palette: {
textColor: palette.textColorPrimary,
primary1Color: palette.blue,
canvasColor: palette.primarySurfaceColor,
borderColor: palette.dividerColor,
},
button: { height: 38 },
};
Expand Down
120 changes: 120 additions & 0 deletions src/components/Match/Match.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
@import "../palette.css";

:root {
--ward-log-height: 50px;
--slider-ticks-color: #757575;
Copy link
Copy Markdown
Member

@blukai blukai Nov 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this colors should be defined in palette.css

--slider-ticks-color-active: #337AB7;
}

:export {
wardLogRowOddSurfaceColor: var(--tableRowOddSurfaceColor);
wardLogRowEvenSurfaceColor: var(--tableRowEvenSurfaceColor);
}

.Header {
text-align: center;
display: block;
Expand Down Expand Up @@ -151,3 +162,112 @@
display: inline-block;
vertical-align: middle;
}

.ward-log {
width: 100%;
font-size: .8em;
Copy link
Copy Markdown
Member

@blukai blukai Nov 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have some defined font sizes in palette.css. I guess 0.8em is somehing like 12px so u can use --fontSizeSmall

Copy link
Copy Markdown
Author

@micaelbergeron micaelbergeron Nov 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll oblige but I think that using px as font size is a bad practice for mobility. I'd rather leave it that way or refactor to use em/rem all around.

Copy link
Copy Markdown
Member

@howardchung howardchung Nov 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should link it to --fontSizeSmall then convert that em then


& .ward-log-header {
background-color: var(--tableHeaderSurfaceColor);
border-bottom: 1px solid var(--dividerLightColor);
text-transform: uppercase;
height: 58px;
}

& .ward-log-list {
padding: 0;
margin: 0;
}

& .timespan {
text-align: right;
}
}

.ward-log-item {
height: var(--ward-log-height);
background: rgb(31, 33, 45);
border-bottom: 1px solid var(--dividerColor);
}

.trans-table-row-enter {
height: 0;
opacity: 0;

&.trans-table-row-enter-active {
height: var(--ward-log-height);
opacity: 1;
transition: height 300ms ease, opacity 300ms ease;
}
}

.trans-table-row-leave {
height: var(--ward-log-height);
opacity: 1;

&.trans-table-row-leave-active {
height: 0px;
opacity: 0;
transition: height 300ms ease, opacity 300ms ease;
}
}

.ward-pin-enter {
opacity: 0;

&.ward-pin-enter-active {
opacity: 1;
transition: opacity 150ms ease;
}
}

.ward-pin-leave {
opacity: 1;

&.ward-pin-leave-active {
opacity: 0;
transition: opacity 150ms ease;
}
}

.slider-ticks {
position: relative;
height: 30px;
margin-top: 33px;
margin-bottom: -33px;
font-size: 0.66em;
border-color: var(--slider-ticks-color);
color: var(--slider-ticks-color);

& .slider-tick {
position: absolute;
display: inline-block;
height: 100%;
padding: 0 0.4em;
border-width: 0px;
border-color: inherit;
border-style: solid;
border-left-width: 1px;
cursor: pointer;

transition: color 150ms ease, border-color 150ms ease;

&.active {
border-color: var(--slider-ticks-color-active);
color: var(--slider-ticks-color-active);
}
}
}

.ward-log-player-filter {
padding: 0 .5em;
font-size: .8em;
background-color: white;

& .filter-row {
padding: .5em;
border-bottom: 1px solid var(--dividerLightColor);

&:last-child { border: none; }
}
}
2 changes: 1 addition & 1 deletion src/components/Match/MatchHeader/MatchHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default ({ match, user, loading }) => {
</li>
<li>
<span>{strings.match_avg_mmr}</span>
{(mmrPlayers.reduce(sum) / mmrPlayers.length).toFixed(0)}
{(mmrPlayers.reduce(sum, 0) / mmrPlayers.length).toFixed(0)}
</li>
</ul>
</Col>
Expand Down
Loading