Skip to content

Commit

Permalink
remove filter button
Browse files Browse the repository at this point in the history
  • Loading branch information
@Argn0
Argn0 committed Feb 9, 2019
1 parent 84f9f52 commit 4b525d9
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 27 deletions.
2 changes: 1 addition & 1 deletion src/components/Form/ChipList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const StyledDiv = styled.div`
const ChipList = ({
chipList, deleteChip, name, history,
}) => (
<StyledDiv>
<StyledDiv className="chip">
{chipList.map((chip, index) => (
<Chip
style={{ margin: '0 5px 5px 0' }}
Expand Down
3 changes: 3 additions & 0 deletions src/components/Form/FormField.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ class FormField extends React.Component {
deleteChip: PropTypes.string,
strings: PropTypes.shape({}),
resetField: PropTypes.func,
textFieldStyle: PropTypes.shape({}),
}

constructor(props) {
Expand Down Expand Up @@ -153,6 +154,7 @@ class FormField extends React.Component {
history,
formSelectionState,
filter,
textFieldStyle,
} = this.props;
const {
searchText,
Expand Down Expand Up @@ -182,6 +184,7 @@ class FormField extends React.Component {
errorStyle={{ color: colorRed }}
onClose={() => this.setState({ errorText: '' })}
onClick={this.handleClick}
textFieldStyle={textFieldStyle}
/>
<ChipList name={name} chipList={chipList} deleteChip={deleteChip} history={history} />
</div>);
Expand Down
7 changes: 0 additions & 7 deletions src/components/Player/Header/PlayerButtons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import FlatButton from 'material-ui/FlatButton';
import ActionUpdate from 'material-ui/svg-icons/navigation/refresh';
import styled from 'styled-components';
import { toggleShowForm as toggleShowFormAction } from '../../../actions/formActions';
import ShowFormToggle from '../../Form/ShowFormToggle';

const Styled = styled.div`
display: flex;
Expand Down Expand Up @@ -39,8 +38,6 @@ class PlayerButtons extends React.Component {
static propTypes = {
playerId: PropTypes.string,
playerSoloCompetitiveRank: PropTypes.number,
showForm: PropTypes.bool,
toggleShowForm: PropTypes.func,
strings: PropTypes.shape({}),
}

Expand All @@ -50,8 +47,6 @@ class PlayerButtons extends React.Component {
const {
playerId,
playerSoloCompetitiveRank,
showForm,
toggleShowForm,
strings,
} = this.props;
return (
Expand All @@ -70,12 +65,10 @@ class PlayerButtons extends React.Component {
label={strings.app_refresh_label}
/>
</div>
<ShowFormToggle showForm={showForm} toggleShowForm={toggleShowForm} />
<FlatButton
label={strings.app_dotacoach}
labelPosition="after"
icon={<img src="/assets/images/dotacoach-32x24.png" alt="DotaCoach" />}
style={{ marginLeft: 15 }}
href={`https://dotacoach.org/Hire/OpenDota?userSteamId=${playerId}&playerMmr=${playerSoloCompetitiveRank}`}
/>
</Styled>);
Expand Down
13 changes: 4 additions & 9 deletions src/components/Player/Pages/Overview/Overview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Checkbox from 'material-ui/Checkbox';
import Turbo from 'material-ui/svg-icons/image/timelapse';
import TurboOff from 'material-ui/svg-icons/notification/do-not-disturb';
import styled from 'styled-components';
import {
getPlayerRecentMatches,
Expand Down Expand Up @@ -132,7 +130,7 @@ const Overview = ({

return (
<OverviewContainer>
<Collapsible name="playerSummary">
<Collapsible name="playerSummary" initialMaxHeight={800}>
<SummaryContainer
title={strings.heading_avg_and_max}
titleTo={`/players/${playerId}/records`}
Expand All @@ -144,22 +142,19 @@ const Overview = ({
key="averages"
>
<Styled
data-hint={strings.exclude_turbo_matches}
data-hint-position="top"
data-hint={strings.include_turbo_matches}
data-hint-position="right"
style={{ display: validRecentMatches.some(match => match.game_mode === 23) ? 'inline' : 'none' }}
>
<Checkbox
style={{ display: validRecentMatches.filter(match => showTurboGames || match.game_mode !== 23) }}
style={{ display: validRecentMatches.filter(match => showTurboGames || match.game_mode !== 23), opacity: 0.45 }}
defaultChecked
onCheck={toggleTurboGames}
checkedIcon={<Turbo />}
uncheckedIcon={<TurboOff />}
/>
</Styled>
<SummOfRecMatches matchesData={validRecentMatches.filter(match => showTurboGames || match.game_mode !== 23)} />
</SummaryContainer>
<SummaryContainer
title={strings.tab_counts}
loading={countsLoading}
error={countsError}
subtitle={strings.th_win}
Expand Down
116 changes: 108 additions & 8 deletions src/components/Player/TableFilterForm/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,110 @@ import patch from 'dotaconstants/build/patch.json';
import region from 'dotaconstants/build/region.json';
import { toggleShowForm } from '../../../actions/formActions';
import FormField from '../../Form/FormField';
import constants from '../../constants';

const textFieldStyle = { width: 53, fontSize: 9, height: 'auto' };

const Styled = styled.div`
.formGroup {
padding: 0 15px;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: -3px;
> div {
width: 60px;
margin-top: 4px;
&:not(:last-child) {
margin-right: 15px;
}
}
/* Override material-ui */
> div > div > div {
width: 60px !important;
}
label {
white-space: wrap !important;
line-height: 12px !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
width: 100% !important;
top: auto !important;
bottom: 10px !important;
letter-spacing: 0.1px !important;
font-size: 11px !important;
}
input {
height: 20px !important;
margin-top: 6px !important;
}
hr:first-child {
border-color: rgba(255, 255, 255, 0.3) !important;
border-bottom-style: dashed !important;
}
.chip {
padding-left: 1px;
> div {
border-radius: 0px !important;
width: 60px !important;
margin: 0px !important;
background-color: transparent !important;
> span {
font-size: 9px !important;
letter-spacing: 1px;
padding-left: 0px !important;
padding-right: 1px !important;
line-height: 12px !important;
overflow: hidden !important;
max-width: 50px !important;
text-overflow: ellipsis !important;
}
> svg {
position: relative !important;
bottom: 5px !important;
margin: 0px !important;
fill: rgb(71, 71, 86) !important;
&:hover {
fill: white !important;
}
}
}
}
}
.hideForm {
overflow: hidden;
transition: max-height 0.2s;
max-height: 0px;
}
.showForm {
overflow: hidden;
transition: max-height 0.2s;
border: 1px solid rgb(0,0,0,0.12);
background-color: rgba(35, 35, 58, 0.85);
padding-top: 5px !important;
padding-left: 5px;
padding-right: 5px;
position: relative;
::after {
position: absolute;
content: "${props => props.strings.filter_button_text_open}";
font-size: 12px;
top: -14px;
left: 0px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
backface-visibility: hidden;
color: ${constants.colorMuted};
}
}
`;

Expand All @@ -46,7 +131,6 @@ const setShowFormState = (props) => {

class TableFilterForm extends React.Component {
static propTypes = {
showForm: PropTypes.bool,
currentQueryString: PropTypes.string,
history: PropTypes.shape({}),
playerId: PropTypes.string,
Expand Down Expand Up @@ -74,7 +158,7 @@ class TableFilterForm extends React.Component {

render() {
const {
showForm, currentQueryString, history, strings,
currentQueryString, history, strings,
} = this.props;
const formSelectionState = querystring.parse(currentQueryString.substring(1));

Expand Down Expand Up @@ -187,8 +271,8 @@ class TableFilterForm extends React.Component {
}];

return (
<Styled>
<div className={showForm ? 'showForm' : 'hideForm'}>
<Styled strings={strings}>
<div className="showForm">
<div className="formGroup">
<FormField
name="hero_id"
Expand All @@ -198,6 +282,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="is_radiant"
Expand All @@ -207,6 +292,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="win"
Expand All @@ -216,6 +302,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="lane_role"
Expand All @@ -225,6 +312,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="patch"
Expand All @@ -234,6 +322,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="game_mode"
Expand All @@ -243,6 +332,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="lobby_type"
Expand All @@ -252,6 +342,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="date"
Expand All @@ -261,6 +352,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="region"
Expand All @@ -270,6 +362,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="with_hero_id"
Expand All @@ -279,6 +372,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={5}
textFieldStyle={textFieldStyle}
/>
<FormField
name="against_hero_id"
Expand All @@ -288,6 +382,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={5}
textFieldStyle={textFieldStyle}
/>
<FormField
name="included_account_id"
Expand All @@ -296,13 +391,15 @@ class TableFilterForm extends React.Component {
formSelectionState={formSelectionState}
history={history}
limit={10}
textFieldStyle={textFieldStyle}
/>
<FormField
name="excluded_account_id"
label={strings.filter_excluded_account_id}
dataSource={this.state.peers.map(peer => ({ text: `${peer.personaname}`, value: peer.account_id }))}
formSelectionState={formSelectionState}
history={history}
textFieldStyle={textFieldStyle}
/>
<FormField
name="significant"
Expand All @@ -312,6 +409,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="having"
Expand All @@ -321,6 +419,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
<FormField
name="party_size"
Expand All @@ -330,6 +429,7 @@ class TableFilterForm extends React.Component {
history={history}
strict
limit={1}
textFieldStyle={textFieldStyle}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 4b525d9

Please sign in to comment.