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.

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

Switch to dark mode for the Museum Experience! #280

Open
wants to merge 11 commits into
base: master
from

Use project museum mode attribute to determine app colors

+ Currently, dark theme is only for museums.
  • Loading branch information...
chelseatroy committed Aug 27, 2019
commit 9e8224495fe87e989f95946d308e0d7de740441b
@@ -2,7 +2,7 @@ export function framingBackgroundColorFor(museumMode) {
return switchOn(
museumMode,
{backgroundColor: '#2D2D2D'},
{backgroundColor: '#ff4500'}
{backgroundColor: '#eff2f5'}
)
}

@@ -90,11 +90,6 @@ export function fetchProjects() {
// Then load the avatars and workflows
Promise.all(projectDetailCalls)
.then(() => {
allProjects.forEach(project => {
console.log(project.display_name)
console.log(project.inMuseumMode)
console.log(project.avatar_src)
})
dispatch(addProjects(allProjects))
dispatch(addProjectsSuccess);
resolve(allProjects)
@@ -137,7 +137,7 @@ class DrawingClassifier extends Component {
const tutorial =
<Tutorial
projectName={this.props.project.display_name}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
isInitialTutorial={this.props.needsTutorial}
tutorial={this.props.tutorial}
finishTutorial={() => this.finishTutorial()}
@@ -317,6 +317,7 @@ DrawingClassifier.propTypes = {
),
instructions: PropTypes.string,
display_name: PropTypes.string,
in_museum_mode: PropTypes.bool,
project: PropTypes.shape({
display_name: PropTypes.string,
id: PropTypes.string
@@ -129,7 +129,7 @@ class MultiAnswerClassifier extends Component {
<View style={styles.tutorialContainer}>
<Tutorial
projectName={project.display_name}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
isInitialTutorial={needsTutorial}
tutorial={tutorial}
finishTutorial={() => this.finishTutorial()}
@@ -142,7 +142,7 @@ class MultiAnswerClassifier extends Component {
<Question
question={task.question}
workflowID={workflow.id}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
onPressImage={(src, question) => {
this.setState({
showFullSize: true,
@@ -169,7 +169,7 @@ class MultiAnswerClassifier extends Component {
hasTutorial={!R.isEmpty(tutorial)}
isQuestionVisible={isQuestionVisible}
setQuestionVisibility={this.setQuestionVisibility()}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
>
{
isQuestionVisible &&
@@ -186,7 +186,7 @@ class MultiAnswerClassifier extends Component {
>
<View style={styles.backgroundView}/>
<View
style={[styles.classifierContainer, colorModes.contentBackgroundColorFor(this.props.project.toString())]}>
style={[styles.classifierContainer, colorModes.contentBackgroundColorFor(this.props.project.in_museum_mode)]}>
<View onLayout={({nativeEvent}) => this.setState({
imageDimensions: {
width: nativeEvent.layout.width,
@@ -230,14 +230,14 @@ class MultiAnswerClassifier extends Component {
(task.help || R.length(guide.items) > 0) &&
<Separator
style={styles.separator}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
/>
}
{//SWITCHING TO NIGHTMODE
task.help !== null &&
<NeedHelpButton
onPress={() => this.classifierContainer.displayHelpModal()}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
/>
}
{
@@ -263,7 +263,7 @@ class MultiAnswerClassifier extends Component {

//SWITCHING TO NIGHTMODE
return (
<View style={[styles.container, colorModes.framingBackgroundColorFor(this.props.project.toString())]}>
<View style={[styles.container, colorModes.framingBackgroundColorFor(this.props.project.in_museum_mode)]}>
<ClassifierContainer
inBetaMode={inBetaMode}
project={project}
@@ -282,6 +282,7 @@ MultiAnswerClassifier.propTypes = {
project: PropTypes.object,
workflow: PropTypes.object,
display_name: PropTypes.string,
in_museum_mode: PropTypes.bool,
inPreviewMode: PropTypes.bool,
inBetaMode: PropTypes.bool,
guide: PropTypes.object,
@@ -309,7 +310,6 @@ const styles = EStyleSheet.create({
classifierContainer: {
paddingHorizontal: 15,
paddingVertical: 15,
backgroundColor: '#ff4500'
},
tutorialContainer: {
flex: 1,
@@ -120,19 +120,19 @@ class QuestionClassifier extends Component {
<View style={styles.tutorialContainer}>
<Tutorial
projectName={project.display_name}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
isInitialTutorial={needsTutorial}
tutorial={tutorial}
finishTutorial={() => this.finishTutorial()}
/>
</View>

const question =
<View style={colorModes.contentBackgroundColorFor(this.props.project.toString())}>
<View style={colorModes.contentBackgroundColorFor(this.props.project.in_museum_mode)}>
<Question
question={task.question}
workflowID={workflow.id}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
onPressImage={(src, question) => {
this.setState({
showFullSize: true,
@@ -153,7 +153,7 @@ class QuestionClassifier extends Component {
const seenThisSession = R.indexOf(subject.id, subjectsSeenThisSession) >= 0
const classificationPanel =
<View
style={[styles.classificationPanel, colorModes.framingBackgroundColorFor(this.props.project.toString())]}>
style={[styles.classificationPanel, colorModes.framingBackgroundColorFor(this.props.project.in_museum_mode)]}>
<ClassificationPanel
hasTutorial={!R.isEmpty(tutorial)}
isQuestionVisible={isQuestionVisible}
@@ -174,7 +174,7 @@ class QuestionClassifier extends Component {
>
<View style={styles.backgroundView}/>
<View
style={[styles.classifierContainer, colorModes.contentBackgroundColorFor(this.props.project.toString())]}>
style={[styles.classifierContainer, colorModes.contentBackgroundColorFor(this.props.project.in_museum_mode)]}>
<View onLayout={({nativeEvent}) => this.setState({
imageDimensions: {
width: nativeEvent.layout.width,
@@ -265,6 +265,7 @@ QuestionClassifier.propTypes = {
project: PropTypes.object,
workflow: PropTypes.object,
display_name: PropTypes.string,
in_museum_mode: PropTypes.bool,
inPreviewMode: PropTypes.bool,
inBetaMode: PropTypes.bool,
guide: PropTypes.object,
@@ -149,17 +149,17 @@ export class SwipeClassifier extends React.Component {
const tutorial =
<Tutorial
projectName={this.props.project.display_name}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
isInitialTutorial={this.props.needsTutorial}
tutorial={this.props.tutorial}
finishTutorial={() => this.finishTutorial()}
/>

const question =
<View style={colorModes.contentBackgroundColorFor(this.props.project.toString())}>
<View style={colorModes.contentBackgroundColorFor(this.props.project.in_museum_mode)}>
<Question
question={this.props.task.question}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
workflowID={this.props.workflow.id}
onPressImage={(src, question) => {
this.setState({
@@ -230,7 +230,7 @@ export class SwipeClassifier extends React.Component {
hasTutorial = { !R.isEmpty(this.props.tutorial) }
isQuestionVisible = {this.state.isQuestionVisible }
setQuestionVisibility = { this.setQuestionVisibility }
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
>
{
this.state.isQuestionVisible ?
@@ -254,10 +254,10 @@ export class SwipeClassifier extends React.Component {
</View>

return (
<View style={[styles.container, colorModes.framingBackgroundColorFor(this.props.project.toString())]}>
<View style={[styles.container, colorModes.framingBackgroundColorFor(this.props.project.in_museum_mode)]}>
<ClassifierContainer
inBetaMode={this.props.inBetaMode}
inMuseumMode={this.props.project.toString()}
inMuseumMode={this.props.project.in_museum_mode}
project={this.props.project}
help={this.props.task.help}
guide={this.props.guide}
@@ -314,11 +314,12 @@ SwipeClassifier.propTypes = {
annotations: PropTypes.object,
workflowID: PropTypes.string,
display_name: PropTypes.string,
in_museum_mode: PropTypes.bool,
workflow: PropTypes.shape({
first_task: PropTypes.string,
tasks: PropTypes.object,
configuration: PropTypes.object,
id: PropTypes.string
first_task: PropTypes.string,
tasks: PropTypes.object,
configuration: PropTypes.object,
id: PropTypes.string
}),
subject: PropTypes.shape({
id: PropTypes.string,
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.