styles.forEach(key => {
var style = requireFunc(key);
if (typeof style === 'function')
style = style(UI.constants);
if (!UI.styles[key])
UI.styles[key] = Stylesheet.create(normalizeAll(style));
else
Object.keys(style).forEach(ref => {
UI.styles[key][ref] = [].concat(UI.styles[key][ref], normalize(style[ref]));
});
});
import StyleSheet from 'react-style';
import { Colors } from 'material-ui/lib/styles';
const tabBarHeight = 48
export default StyleSheet.create({
tabs: {
marginLeft: 170
},
tabContainer: {
height: tabBarHeight
},
tab: {
color: Colors.blueGrey900,
fontSize: 16,
fontWeight: '300',
height: tabBarHeight
}
});
import React, { PropTypes, Component } from 'react';
import StyleSheet from'react-style';
import { Link } from 'react-router';
const styles = StyleSheet.create({
menu: {
textAlign: "center",
paddingTop: 16,
marginBottom: 16
},
item: {
fontSize: 14,
fontWeight: 'bold',
margin: 16
}
});
export default class Menu extends Component {
render() {
return <div styles={[styles.menu]}>
<Link to="/" styles={[styles.item]}>Lobby</Link>
<Link to="admin" styles={[styles.item]}>Admin</Link>
<Link to="about" styles={[styles.item]}>About</Link>
<Link to="data" styles={[styles.item]}>Data</Link>
</div>;
}
}
<button className="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored"
onClick={this.reload}>刷新</button>
</div>
</div>
);
},
reload() {
const {token, tokenType} = this.props;
Admin.listApplications(token, tokenType, (apps) => {
this.setState({ apps });
});
},
styles: StyleSheet.create({
card: {
width: '100%',
marginBottom: 16,
minHeight: 50,
},
table: {
width: '100%',
borderLeft: 'none',
borderRight: 'none',
},
}),
});
export default AdminListAppCard;
/** @jsx React.DOM */
var React = require('react/addons');
var StyleSheet = require('react-style');
var Link = require('react-router').Link;
var styles = StyleSheet.create({
menu: {
textAlign: "center",
marginTop: 4,
marginBottom: 16
},
item: {
color: "#36F",
fontSize: 14,
fontWeight: 'bold',
margin: 16
}
});
var Menu = React.createClass({
render: function () {
return (
<div styles={[styles.menu]}>
<Link to="/" styles={[styles.item]}>Home</Link>
<Link to="about" styles={[styles.item]}>About</Link>
</div>
)
}
});
componentWillMount() {
this.authorize('lvaults');
},
render() {
const isValid = this.isSessionValid();
return (
<div className="mdl-grid">
<div className="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
{
<AdminListLvaultCard ref="appList" token={this.state.token} tokenType={this.state.tokenType} />
}
</div>
</div>
);
},
postCreateApp() {
if (this.isSessionValid()) {
this.refs.appList.reload();
}
},
styles: StyleSheet.create({
}),
});
export default AdminLvaultsPage;
'use strict';
var React = require('react/addons');
var StyleSheet = require('react-style');
var styles = StyleSheet.create({
header: {
color: 'white',
backgroundColor: '#1bc0a0',
textAlign: 'center',
fontSize: '30px',
fontWeight: 100,
marginBottom: '30px'
}
})
var Header = React.createClass({
render: function() {
return (
<header>
<div styles={styles.header}>
Gallery
</div>
</header>
);
}
});
import React, { Component } from 'react';
import StyleSheet from'react-style';
const styles = StyleSheet.create({
page: {
margin: 'auto',
fontSize: 14,
width: 400,
height: '100%'
},
label: {
float: "left",
textAlign: "right",
marginRight: 8,
width: 100
}
});
export default class About extends Component {
render() {
return <div styles={[styles.page]}>
<p>
<div styles={[styles.label]}>Github:</div>
<a href="https://github.com/SBUtltmedia/orange-game">
SBUtltmedia/orange-game
</a>
</p>
</div>;
}
}
<Icon name="align-right" /> Right
</Button>
</ButtonGroup>
);
}
});
var TextAlignSwitcherStyles = StyleSheet.create({
childStyle: {
borderRadius: 0,
margin: 0
},
firstChildStyle: {
borderTopLeftRadius: 3,
borderBottomLeftRadius: 3
},
lastChildStyle: {
borderTopRightRadius: 3,
borderBottomRightRadius: 3
}
});
var Application = React.createClass({
getInitialState() {
return {
textAlign: 'left'
};
export default class Event extends React.Component {
render() {
var event = {
Event: {
name: 'Titre',
description: 'Lorem Ipsum'
}
}
return (
<div className="Event">
<Header />
<section style={styles.event}>
<h1>{event.Event.name}</h1>
{event.Event.description}
</section>
</div>
);
}
}
var styles = StyleSheet.create({
event: {
marginTop: '90px'
}
});
import StyleSheet from 'react-style';
export default StyleSheet.create({
layout: {
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
height: '100%',
},
content: {
position: 'relative',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitBoxFlex: 1,
overflow: 'hidden',
},
scroller: {
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
width: '100%',
WebkitBoxFlex: 1,
overflow: 'hidden',
},
});
);
}
_usernameChanged(event) {
this.setState({ username: event.target.value });
}
_passwordChanged(event) {
this.setState({ password: event.target.value });
}
_submit(event) {
event.preventDefault();
UserActions.login({
username: this.state.username,
password: this.state.password,
});
}
}
const styles = StyleSheet.create({
form: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
},
submit: {
marginTop: 32,
},
});
/**
* @jsx React.DOM
*/
'use strict';
var StyleSheet = require('react-style');
var React = require('react');
class ButtonGroup {
render() {
return (
<div styles={ButtonGroupStyles.normalStyle}>
{this.props.children}
</div>
);
}
}
var ButtonGroupStyles = StyleSheet.create({
normalStyle: {
display: 'inline'
}
});
module.exports = React.createClass(ButtonGroup.prototype);
const navColor = color('blue');
const styles = StyleSheet.create({
navWrapper: {
backgroundColor: navColor,
position: 'fixed',
width: '100%',
zIndex: zIndex('AppNav'),
},
subNav: {
display: 'none',
backgroundColor: navColor,
position: 'absolute',
right: 0,
top: '100%',
width: '16em',
textAlign: 'right',
},
text: {
padding: `${rhythm(1 / 4)} ${rhythm(1 / 2)}`,
color: '#fff',
width: '100%',
textDecoration: 'none',
border: 'inherit solid 1px',
}
});
class AppNav extends React.Component {
render() {
}
}
DevelopMeRoot.childContextTypes = {
muiTheme: React.PropTypes.object
}
let styles = StyleSheet.create({
container: {
position: 'absolute',
top: 48,
left: 0,
right: 0,
bottom: 0,
background: colors.grey
},
footer: {
background: colors.lightgreen,
height: '75px',
padding: '20px',
color: 'white',
fontSize: '24px',
},
});
// export the component
export default DevelopMeRoot
// end of file
import StyleSheet from 'react-style';
export default StyleSheet.create({
item: {
paddingTop: 10,
paddingBottom: 10,
marginTop: -1,
borderTop: '1px solid #efefef',
},
tit: {
fontSize: 14,
fontWeight: 'normal',
color: '#333',
},
time: {
fontSize: 12,
color: '#999',
},
summary: {
fontSize: 12,
color: '#666',
},
});
var ButtonStyles = StyleSheet.create({
normalStyle: {
backgroundColor: '#E6E6E6',
border: 'none rgba(0, 0, 0, 0)',
borderRadius: 3,
color: 'rgba(0, 0, 0, 0.70)',
cursor: 'pointer',
display: 'inline-block',
fontFamily: 'inherit',
fontSize: '100%',
lineHeight: 'normal',
padding: '0.5em 1em',
userSelect: 'none',
textAlign: 'center',
textDecoration: 'none',
verticalAlign: 'baseline',
whiteSpace: 'nowrap',
zoom: 1
},
activeStyle: {
boxShadow: '0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset'
},
hoverStyle: {
color: '#000',
backgroundImage: 'linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10))'
},
focusStyle: {
backgroundImage: 'linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10))',
outline: 'none'
}
});
};
const styles = StyleSheet.create({
scroll: {
display: 'flex',
flexDirection: 'column',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
overflow: 'auto',
},
messagesContainer: {
display: 'flex',
flexDirection: 'column',
flex: 1,
position: 'relative',
},
messages: {
display: 'flex',
flexDirection: 'column-reverse',
flex: 1,
flexShrink: 0,
marginBottom: 72,
marginRight: 12,
marginLeft: 12,
},
});
export default MessageList;
(function() {
'use strict';
var React = require('react');
var StyleSheet = require('react-style');
var fontSize = 30;
var disabledOpacity = 0.3;
var styles = StyleSheet.create({
main: {
display: 'flex',
alignItems: 'center'
},
left: {
fontSize: fontSize,
opacity: disabledOpacity
},
right: {
fontSize: fontSize,
opacity: disabledOpacity
},
middle: {
display: 'flex',
flexDirection: 'column'
},
up: {
fontSize: fontSize,
opacity: disabledOpacity
},
down: {
marginTop: 20,
fontSize: fontSize,
opacity: disabledOpacity
},
hover: {
color: '#1874CD',
cursor:'pointer'
},
enabled:{
opacity: 1.0
}
});
var Navigator = React.createClass({
getInitialState: function() {
return {
left: {
hovered: false
},
right: {
hovered: false
},
up: {
hovered: false
},
down: {
hovered: false
}
};
},
onMouseOver: function(which) {
switch (which) {
case 'left':
var leftState = this.state.left;
leftState.hovered = true;
this.setState({
left: leftState
});
break;
case 'right':
var rightState = this.state.right;
rightState.hovered = true;
this.setState({
right: rightState
});
break;
case 'up':
var upState = this.state.up;
upState.hovered = true;
this.setState({
up: upState
});
break;
case 'down':
var downState = this.state.down;
downState.hovered = true;
this.setState({
down: downState
});
break;
default:
break;
}
},
onMouseOut: function(which) {
switch (which) {
case 'left':
var leftState = this.state.left;
leftState.hovered = false;
this.setState({
left: leftState
});
break;
case 'right':
var rightState = this.state.right;
rightState.hovered = false;
this.setState({
right: rightState
});
break;
case 'up':
var upState = this.state.up;
upState.hovered = false;
this.setState({
up: upState
});
break;
case 'down':
var downState = this.state.down;
downState.hovered = false;
this.setState({
down: downState
});
break;
default:
break;
}
},
render: function() {
return (
<div styles={styles.main}>
<div styles={[styles.left,this.props.leftEnabled && styles.enabled,this.props.leftEnabled && this.state.left.hovered && styles.hover]} onMouseOver={this.onMouseOver.bind(this,'left')} onMouseOut={this.onMouseOut.bind(this,'left')} onClick={this.props.onLeftClicked}>
<div className="arrow_left"/>
</div>
<div styles={styles.middle}>
<div styles={[styles.up,this.props.upEnabled && styles.enabled,this.props.upEnabled && this.state.up.hovered && styles.hover]} onMouseOver={this.onMouseOver.bind(this,'up')} onMouseOut={this.onMouseOut.bind(this,'up')} onClick={this.props.onUpClicked}>
<div className="arrow_up"/>
</div>
<div styles={[styles.down,this.props.downEnabled && styles.enabled,this.props.downEnabled && this.state.down.hovered && styles.hover]} onMouseOver={this.onMouseOver.bind(this,'down')} onMouseOut={this.onMouseOut.bind(this,'down')} onClick={this.props.onDownClicked}>
<div className="arrow_down"/>
</div>
</div>
<div styles={[styles.right,this.props.rightEnabled && styles.enabled,this.props.rightEnabled && this.state.right.hovered && styles.hover]} onMouseOver={this.onMouseOver.bind(this,'right')} onMouseOut={this.onMouseOut.bind(this,'right')} onClick={this.props.onRightClicked}>
<div className="arrow_right"/>
</div>
</div>
);
}
});
module.exports = Navigator;
}());
<p>To create our own folder, click "Manage Folders" at the top left of the main content area.</p>
<p>Enter your desired name for the folder you are creating and click Add Folder when done.</p>
<p style={styles.paragraph}>You are now able to edit and delete this folder. Editing allows you to:</p>
<ul>
<li>Rename folder</li>
<li>Move to different gallery</li>
<li>Modify default number of assets loaded per page</li>
<li>Hide asset titles for folder</li>
<li>Hide asset descriptions for folder</li>
<li>Make folder private</li>
<li>Add password protection</li>
</ul>
</SubsectionContent>
<SubsectionContent title="Sorting Folders" id="sortfolders">
<p>If we have multiple folders, we can also sort the folders in the same way we sorted galleries.</p>
<p>{"Close the Manage Folders window by clicking the 'x' at the top-right. Observe that each folder we've created now has a tab associated with it."}</p>
<p>{"The order in which we've sorted our folders determines the order of these tabs. Furthermore, the folder at the top of the list will be the default tab loaded."}</p>
</SubsectionContent>
</div>
)
}
}
let styles = StyleSheet.create({
paragraph: {
marginBottom: '0px',
},
})
export default FoldersContent
// end of file
// react: https://github.com/facebook/react
import React from 'react/addons'
import StyleSheet from 'react-style'
'use strict'
// the navigation bar component
class Logo extends React.Component {
render() {
// render the component
return (
<img style={styles.image} src={require('images/' + this.props.project.organization.avatar.slice(35))} alt='logo' />
);
}
}
let styles = StyleSheet.create({
image: {
height: '150px',
width: '150px',
display: 'inline-block',
}
})
// export the component
export default Logo
// end of file
import React from 'react';
import StyleSheet from 'react-style';
var styles = StyleSheet.create({
header: {
color: '#000000',
opacity: 0.8,
background: '#FFFFFF',
boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.26)',
height: 60
},
logo: {
fontWeight: 'bold',
fontSize: 22
},
byline: {
}
});
export default class Header extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div styles={styles.header} data-layout data-horizontal data-around-justified data-center>
<div style={styles.logo}>
Spatially
</div>
curConvo: React.PropTypes.object,
onConvoChanged: React.PropTypes.func,
};
const styles = StyleSheet.create({
convos: {
margin: 8,
marginTop: 16,
},
convo: {
padding: 16,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
},
selectedConvo: {
color: colors.primary,
backgroundColor: '#f0f0f0',
},
scroll: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
overflow: 'auto',
},
});
export default ConvoList;
import StyleSheet from 'react-style';
import { Colors } from 'material-ui/lib/styles';
export default StyleSheet.create({
header: {
backgroundColor: Colors.white
},
center: {
maxWidth: 900,
margin: 'auto'
}
});
<Icon name="align-right" /> Right
</Button>
</ButtonGroup>
);
}
});
var TextAlignSwitcherStyles = StyleSheet.create({
childStyle: {
borderRadius: 0,
margin: 0
},
firstChildStyle: {
borderTopLeftRadius: 3,
borderBottomLeftRadius: 3
},
lastChildStyle: {
borderTopRightRadius: 3,
borderBottomRightRadius: 3
}
});
var Application = React.createClass({
getInitialState() {
return {
textAlign: 'left'
};
);
})
}
</div>
</div>
);
},
adminAuthorize(target) {
this.history.pushState(null, `/spa/admin/${target}`);
},
styles: StyleSheet.create({
card: {
width: '100%',
marginBottom: 16,
minHeight: 50,
},
buttons: {
display: 'block',
},
supporting: {
borderTop: '1px solid rgba(0, 0, 0, .12)',
borderBottom: '1px solid rgba(0, 0, 0, .12)',
},
}),
});
export default AdminIndexCard;
},
renderResult() {
const {reqResult} = this.state;
if (!reqResult.fin) {
return null;
}
return (
<div className="mdl-card__supporting-text" style={{
color: reqResult.ok ? "#4CAF50" : "#F44336",
borderTop: '1px solid rgba(0, 0, 0, .1)',
}}>
{reqResult.status}
</div>
);
},
styles: StyleSheet.create({
card: {
width: '100%',
marginBottom: 16,
minHeight: 50,
},
form: {
padding: '0 16px',
},
}),
}
export default CardFormMixin;
import React from 'react';
import StyleSheet from 'react-style';
var styles = StyleSheet.create({
panel: {
background: '#2196F3',
padding: '60px 20px',
color: '#FFFFFF',
},
'@media screen and (max-width: 400px)': {
panel: {
flexDirection: 'column'
}
}
})
export default class HowItWorks extends React.Component {
render() {
return (
<div style={styles.panel} data-layout data-horizontal data-center data-justified>
<span>
1. Develop app with Spatially hardware
</span>
<span>
2. Distribute app through app store
</span>
<span>
3. End users get Spatially hardware through in-app purchase
</span>
</div>
);