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 12 commits into
base: master
from
Next

Switch between dark mode and light mode with a set of theme functions

- Theme functions accept an attribute indicating whether this project is currently being displayed in a museum on this device (In dark museum exhibits, we want guests to see the tablet screens in dark mode rather than a jarring, white screen)
- In a future commit, We'll key off of the role attribute in the project object (currently using project name as a placeholder).
  • Loading branch information...
chelseatroy committed Aug 6, 2019
commit 74287e3088e469a1647fd4d19dd91864168a3613
@@ -0,0 +1,47 @@
export function framingBackgroundColorFor(museumMode) {
return switchOn(
museumMode,
{backgroundColor: '#2D2D2D'},
{backgroundColor: '#ff4500'}
)
}

export function contentBackgroundColorFor(museumMode) {
return switchOn(
museumMode,
{backgroundColor: '#333333'},
{backgroundColor: 'white'}
)
}

export function separatorColorFor(museumMode) {
return switchOn(
museumMode,
{borderBottomColor: 'black'},
{borderBottomColor: '$borderGrey'}
)
}

export function helpTextColorFor(museumMode) {
return switchOn(
museumMode,
{color: '#addde0'},
{color: 'rgba(0,93,105,1)'}
)
}

export function textColorFor(museumMode) {
return switchOn(
museumMode,
'#addde0',
'black'
)
}

function switchOn(mode, withModeStyle, withoutModeStyle) {
if (mode) {

This comment has been minimized.

Copy link
@wgranger

wgranger Sep 18, 2019

Collaborator

This can probably be a one-line ternary return mode ? withModeStyle : withoutModeStyle

return withModeStyle
} else {
return withoutModeStyle
}
}
@@ -5,6 +5,9 @@ import * as R from 'ramda'
import * as ActionConstants from '../constants/actions'
import {isValidMobileWorkflow} from '../utils/workflow-utils'

import * as theme from '../theme'
This conversation was marked as resolved by chelseatroy

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Aug 6, 2019

'theme' is defined but never used no-unused-vars

import * as colorModes from './colorModes';
This conversation was marked as resolved by chelseatroy

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Aug 6, 2019

'colorModes' is defined but never used no-unused-vars


const productionParams = {
mobile_friendly: true,
launch_approved: true,
@@ -1,51 +1,51 @@
import React, { Component } from 'react'
import React, {Component} from 'react'
import Drawer from 'react-native-drawer'
import SideDrawerContent from './SideDrawerContent'
import {Actions, DefaultRenderer} from 'react-native-router-flux'
import PropTypes from 'prop-types';

class SideDrawer extends Component {
render () {
const state = this.props.navigationState
const children = state.children
render() {
const state = this.props.navigationState
const children = state.children

return (
<Drawer
ref="drawer"
open={state.open}
onOpen={()=>Actions.refresh({key:state.key, open: true})}
onClose={()=>Actions.refresh({key:state.key, open: false})}
type="overlay"
side="right"
content={<SideDrawerContent />}
tapToClose={true}
openDrawerOffset={0.3}
panCloseMask={0.2}
closedDrawerOffset={-3}
styles={drawerStyles}
tweenHandler={(ratio) => ({
main: { opacity:(2-ratio)/2 }
})}
>
<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
</Drawer>
)
}
return (
<Drawer
ref="drawer"
This conversation was marked as resolved by chelseatroy

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Aug 6, 2019

Using string literals in ref attributes is deprecated react/no-string-refs

open={state.open}
onOpen={() => Actions.refresh({key: state.key, open: true})}
onClose={() => Actions.refresh({key: state.key, open: false})}
type="overlay"
side="right"
content={<SideDrawerContent/>}
tapToClose={true}
openDrawerOffset={0.3}
panCloseMask={0.2}
closedDrawerOffset={-3}
styles={drawerStyles}
tweenHandler={(ratio) => ({
main: {opacity: (2 - ratio) / 2}
})}
>
<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/>
</Drawer>
)
}
}

const drawerStyles = {
drawer: {
backgroundColor: 'white',
shadowColor: 'black',
shadowOpacity: 0.8,
shadowRadius: 3,
elevation: 3,
}
drawer: {
backgroundColor: 'white',
shadowColor: 'black',
shadowOpacity: 0.8,
shadowRadius: 3,
elevation: 3,
}
}

SideDrawer.propTypes = {
onNavigate: PropTypes.func,
navigationState: PropTypes.object,
onNavigate: PropTypes.func,
navigationState: PropTypes.object,
}

export default SideDrawer
@@ -87,7 +87,10 @@ export class SideDrawerContent extends Component {
</TouchableOpacity>
</View>

<Separator color="white" style={styles.separatorPadding} />
<Separator
color="white"
style={styles.separatorPadding}
/>

<MenuButton
onPress={this.goHome}
@@ -5,9 +5,11 @@ import {
} from 'react-native';
import DeviceInfo from 'react-native-device-info'
import EStyleSheet from 'react-native-extended-stylesheet'
import FontedText from '../common/FontedText'
import PropTypes from 'prop-types';

import FontedText from '../common/FontedText'
import * as colorModes from '../../actions/colorModes'

class ClassificationPanel extends Component {
render() {
const tabs =
@@ -29,7 +31,7 @@ class ClassificationPanel extends Component {
</View>

return (
<View style={[styles.panelContainer, this.props.containerStyle]}>
<View style={[styles.panelContainer, this.props.containerStyle, colorModes.contentBackgroundColorFor(this.props.inMuseumMode)]}>
{ this.props.hasTutorial ? tabs : null }
{ this.props.children }
</View>
@@ -39,7 +41,6 @@ class ClassificationPanel extends Component {

const styles = EStyleSheet.create({
panelContainer: {
backgroundColor: 'white',
marginTop: 15,
marginBottom: 0,
marginHorizontal: 25
@@ -71,5 +72,6 @@ ClassificationPanel.propTypes = {
children: PropTypes.node,
isQuestionVisible: PropTypes.bool,
setQuestionVisibility: PropTypes.func,
inMuseumMode: PropTypes.bool,
}
export default ClassificationPanel
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.