Skip to content
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

Jump to bottom

Use input widget state to style task inputs #5091

Merged
merged 13 commits into from
Nov 27, 2018
Merged

Use input widget state to style task inputs #5091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
789fddd
Use input widget state to style task inputs
eatyourgreens Nov 26, 2018
7332d56
Remove unused props
eatyourgreens Nov 26, 2018
9651791
Convert TaskInputField to a function
eatyourgreens Nov 26, 2018
4cb1d62
Fix multiple choice task tests
eatyourgreens Nov 26, 2018
89bc9db
Fix single answer task tests
eatyourgreens Nov 26, 2018
3a247da
Add checked prop
eatyourgreens Nov 27, 2018
32685eb
Add autoFocus prop
eatyourgreens Nov 27, 2018
79cef07
Fix text highlighter buttons
eatyourgreens Nov 27, 2018
d4ac386
Restore missing active and focus hover styles
eatyourgreens Nov 27, 2018
05b0c97
Define common hover styles
eatyourgreens Nov 27, 2018
b51835f
Define constants for styles
eatyourgreens Nov 27, 2018
562b3ae
Fix linter warnings
eatyourgreens Nov 27, 2018
7132bb3
Update sinon spy tests
eatyourgreens Nov 27, 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
259 changes: 105 additions & 154 deletions app/classifier/tasks/components/TaskInputField/TaskInputField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,185 +9,144 @@ import { pxToRem, zooTheme } from '../../../../theme';
import TaskInputLabel from './components/TaskInputLabel';
import { doesTheLabelHaveAnImage } from './helpers';

export const StyledTaskInputField = styled.label`
align-items: baseline;
background-color: ${theme('mode', {
const DEFAULT = {
backgroundColor: theme('mode', {
dark: zooTheme.colors.darkTheme.background.default,
light: zooTheme.colors.lightTheme.background.default
})};
border: ${theme('mode', {
}),
border: theme('mode', {
dark: `2px solid ${zooTheme.colors.darkTheme.font}`,
light: '2px solid transparent'
})};
box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.5);
color: ${theme('mode', {
}),
color: theme('mode', {
dark: zooTheme.colors.darkTheme.font,
light: zooTheme.colors.lightTheme.font
})};
})
};

const HOVER = {
gradientTop: theme('mode', {
dark: zooTheme.colors.darkTheme.button.answer.gradient.top,
light: zooTheme.colors.lightTheme.button.answer.gradient.top
}),
gradientBottom: theme('mode', {
dark: zooTheme.colors.darkTheme.button.answer.gradient.bottom,
light: zooTheme.colors.lightTheme.button.answer.gradient.bottom
}),
color: theme('mode', {
dark: zooTheme.colors.darkTheme.font,
light: 'black'
})
};

const CHECKED = {
background: theme('mode', {
dark: zooTheme.colors.teal.mid,
light: zooTheme.colors.teal.mid
}),
border: theme('mode', {
dark: `2px solid ${zooTheme.colors.teal.mid}`,
light: '2px solid transparent'
}),
color: theme('mode', {
dark: zooTheme.colors.darkTheme.font,
light: 'white'
})
};

export const StyledTaskLabel = styled.span`
align-items: baseline;
background-color: ${DEFAULT.backgroundColor};
border: ${DEFAULT.border};
box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.5);
color: ${DEFAULT.color};
cursor: pointer;
display: flex;
margin: ${pxToRem(10)} 0;
padding: ${(props) => { return doesTheLabelHaveAnImage(props.label) ? '0' : '1ch 2ch'; }};
padding: ${props => (doesTheLabelHaveAnImage(props.label) ? '0' : '1ch 2ch')};

&:hover {
background: linear-gradient(${HOVER.gradientTop}, ${HOVER.gradientBottom});
border-width: 2px;
border-style: solid;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: ${HOVER.gradientTop};
border-bottom-color: ${HOVER.gradientBottom};
color: ${HOVER.color};
}
`;

export const StyledTaskInputField = styled.label`
position: relative;

&:hover, &:focus, &[data-focus=true] {
background: ${theme('mode', {
dark: `linear-gradient(
${zooTheme.colors.darkTheme.button.answer.gradient.top},
${zooTheme.colors.darkTheme.button.answer.gradient.bottom}
)`,
light: `linear-gradient(
${zooTheme.colors.lightTheme.button.answer.gradient.top},
${zooTheme.colors.lightTheme.button.answer.gradient.bottom}
)`
})};
input {
opacity: 0.01;
position: absolute;
}

input:focus + ${StyledTaskLabel} {
background: linear-gradient(${HOVER.gradientTop}, ${HOVER.gradientBottom});
border-width: 2px;
border-style: solid;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: ${theme('mode', {
dark: zooTheme.colors.darkTheme.button.answer.gradient.top,
light: zooTheme.colors.lightTheme.button.answer.gradient.top
})};
border-bottom-color: ${theme('mode', {
dark: zooTheme.colors.darkTheme.button.answer.gradient.bottom,
light: zooTheme.colors.lightTheme.button.answer.gradient.bottom
})};
color: ${theme('mode', {
dark: zooTheme.colors.darkTheme.font,
light: 'black'
})};
border-top-color: ${HOVER.gradientTop};
border-bottom-color: ${HOVER.gradientBottom};
color: ${HOVER.color};
}

&:active {
background: ${theme('mode', {
dark: `linear-gradient(
${zooTheme.colors.darkTheme.button.answer.gradient.top},
${zooTheme.colors.darkTheme.button.answer.gradient.bottom}
)`,
light: `linear-gradient(
${zooTheme.colors.lightTheme.button.answer.gradient.top},
${zooTheme.colors.lightTheme.button.answer.gradient.bottom}
)`
})};
input:active + ${StyledTaskLabel} {
background: linear-gradient(${HOVER.gradientTop}, ${HOVER.gradientBottom});
border-width: 2px;
border-style: solid;
border-color: ${theme('mode', {
dark: zooTheme.colors.teal.dark,
light: zooTheme.colors.teal.mid
})};
color: ${theme('mode', {
dark: zooTheme.colors.darkTheme.font,
light: 'black'
})};
color: ${HOVER.color};
}

&.active {
background: ${theme('mode', {
dark: zooTheme.colors.teal.mid,
light: zooTheme.colors.teal.mid
})};
border: ${theme('mode', {
dark: `2px solid ${zooTheme.colors.teal.mid}`,
light: '2px solid transparent'
})};
color: ${theme('mode', {
dark: zooTheme.colors.darkTheme.font,
light: 'white'
})}
input:checked + ${StyledTaskLabel} {
background: ${CHECKED.background};
border: ${CHECKED.border};
color: ${CHECKED.color}
}

&.active:hover, &.active:focus, &.active[data-focus=true] {
background: ${theme('mode', {
dark: zooTheme.colors.teal.mid,
light: zooTheme.colors.teal.mid
})};
input:focus:checked + ${StyledTaskLabel},
input:checked + ${StyledTaskLabel}:hover {
border: ${theme('mode', {
dark: `2px solid ${zooTheme.colors.teal.dark}`,
light: `2px solid ${zooTheme.colors.teal.dark}`
})};
}

input {
opacity: 0.01;
position: absolute;
}
`;

function shouldInputBeChecked(annotation, index, type) {
if (type === 'radio') {
const toolIndex = annotation._toolIndex || 0;
if (toolIndex) {
return index === toolIndex;
}
return index === annotation.value;
}

if (type === 'checkbox') {
return (annotation.value && annotation.value.length > 0) ? annotation.value.includes(index) : false;
}

return false;
}

function shouldInputBeAutoFocused(annotation, index, name, type) {
if (type === 'radio' && name === 'drawing-tool') {
return index === 0;
}

return index === annotation.value;
}

export class TaskInputField extends React.Component {
constructor() {
super();
this.unFocus = this.unFocus.bind(this);
}

onChange(e) {
this.unFocus();
this.props.onChange(e);
}

onFocus() {
if (this.field) this.field.dataset.focus = true;
}

onBlur() {
this.unFocus();
}

unFocus() {
if (this.field) this.field.dataset.focus = false;
}

render() {
return (
<ThemeProvider theme={{ mode: this.props.theme }}>
<StyledTaskInputField
ref={(node) => { this.field = node; }}
className={this.props.className}
label={this.props.label}
data-focus={false}
>
<input
autoFocus={shouldInputBeAutoFocused(this.props.annotation, this.props.index, this.props.name, this.props.type)}
checked={shouldInputBeChecked(this.props.annotation, this.props.index, this.props.type)}
name={this.props.name}
onBlur={this.onBlur.bind(this)}
onChange={this.onChange.bind(this)}
onFocus={this.onFocus.bind(this)}
type={this.props.type}
value={this.props.index}
/>
<TaskInputLabel label={this.props.label} labelIcon={this.props.labelIcon} labelStatus={this.props.labelStatus} />
</StyledTaskInputField>
</ThemeProvider>
);
}
export function TaskInputField(props) {
return (
<ThemeProvider theme={{ mode: props.theme }}>
<StyledTaskInputField
className={props.className}
>
<input
autoFocus={props.autoFocus}
defaultChecked={props.checked}
name={props.name}
onChange={props.onChange}
type={props.type}
value={props.index}
/>
<StyledTaskLabel>
<TaskInputLabel label={props.label} labelIcon={props.labelIcon} labelStatus={props.labelStatus} />
</StyledTaskLabel>
</StyledTaskInputField>
</ThemeProvider>
);
}

TaskInputField.defaultProps = {
autoFocus: false,
checked: false,
className: '',
label: '',
labelIcon: null,
Expand All @@ -198,21 +157,13 @@ TaskInputField.defaultProps = {
};

TaskInputField.propTypes = {
annotation: PropTypes.shape({
_key: PropTypes.number,
task: PropTypes.string,
value: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.number), // mulitple choice
PropTypes.number, // single choice
PropTypes.arrayOf(PropTypes.object), // drawing task
PropTypes.object // null
])
}).isRequired,
autoFocus: PropTypes.bool,
checked: PropTypes.bool,
className: PropTypes.string,
index: PropTypes.number.isRequired,
label: PropTypes.string,
labelIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
labelStatus: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
labelStatus: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
name: PropTypes.string,
onChange: PropTypes.func,
theme: PropTypes.string,
Expand All @@ -223,4 +174,4 @@ const mapStateToProps = state => ({
theme: state.userInterface.theme
});

export default connect(mapStateToProps)(TaskInputField);
export default connect(mapStateToProps)(React.memo(TaskInputField));
Loading