coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove Rebass

Browse Source
This commit is contained in:
Jori Lallo
2017-05-01 22:01:50 -07:00
parent 930bf7d105
commit c9d6d4bfb2
9 changed files with 115 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/components/Layout/Layout.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { browserHistory, Link } from 'react-router';
import Helmet from 'react-helmet';
import styled from 'styled-components';
import { observer, inject } from 'mobx-react';
import keydown from 'react-keydown';
import _ from 'lodash';
@ -9,7 +10,6 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
import { Flex } from 'reflexbox';
import LoadingIndicator from 'components/LoadingIndicator';
import Alert from 'components/Alert';
import { Avatar } from 'rebass';
import styles from './Layout.scss';
import classNames from 'classnames/bind';
@ -87,11 +87,7 @@ class Layout extends React.Component {
/>
</div>
</Flex>}
<DropdownMenu
label={
<Avatar circle size={24} src={user.user.avatarUrl} />
}
>
<DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
<MenuItem to="/settings">Settings</MenuItem>
<MenuItem to="/keyboard-shortcuts">
Keyboard shortcuts
@ -112,4 +108,10 @@ class Layout extends React.Component {
}
}
const Avatar = styled.img`
width: 24px;
height: 24px;
border-radius: 50%;
`;
export default Layout;

32
frontend/components/PublishingInfo/PublishingInfo.js
View File

@ -1,7 +1,7 @@
import React, { PropTypes } from 'react';
import moment from 'moment';
import styled from 'styled-components';
import { Avatar } from 'rebass';
import { Flex } from 'reflexbox';
import styles from './PublishingInfo.scss';
@ -19,18 +19,15 @@ class PublishingInfo extends React.Component {
return (
<Flex align="center" className={styles.user}>
<Flex className={styles.avatarLine}>
{this.props.collaborators.reverse().map(user => (
<Avatar
key={`avatar-${user.id}`}
src={user.avatarUrl}
size={26}
style={{
marginRight: '-12px',
border: '2px solid #FFFFFF',
}}
title={user.name}
/>
))}
{this.props.collaborators
.reverse()
.map(user => (
<Avatar
key={`avatar-${user.id}`}
src={user.avatarUrl}
title={user.name}
/>
))}
</Flex>
<span className={styles.userName}>
{this.props.createdBy.name}
@ -52,4 +49,13 @@ class PublishingInfo extends React.Component {
}
}
const Avatar = styled.img`
width: 26px;
height: 26px;
marginRight: '-12px',
border-radius: 50%;
border: '2px solid #FFFFFF';
`;
export default PublishingInfo;

69
frontend/components/Switch.js
View File

@ -1,69 +0,0 @@
import React from 'react';
import { Base } from 'rebass';
import { observer } from 'mobx-react';
import { actionColor } from 'styles/constants.scss';
/**
* Binary toggle switch component
*/
const Switch = observer(({ checked, ...props }) => {
const scale = '18';
const colors = {
success: actionColor,
white: '#fff',
};
const borderColor = actionColor;
const color = checked ? colors.success : borderColor;
const transform = checked ? `translateX(${scale * 0.5}px)` : 'translateX(0)';
const sx = {
root: {
display: 'inline-flex',
width: scale * 1.5,
height: scale,
color,
backgroundColor: checked ? 'currentcolor' : null,
borderRadius: 99999,
boxShadow: 'inset 0 0 0 2px',
cursor: 'pointer',
},
dot: {
width: scale,
height: scale,
transitionProperty: 'transform, color',
transitionDuration: '.1s',
transitionTimingFunction: 'ease-out',
transform,
boxShadow: 'inset 0 0 0 2px',
borderRadius: 99999,
color,
backgroundColor: colors.white,
},
};
return (
<Base
{...props}
className="Switch"
role="checkbox"
aria-checked={checked}
baseStyle={sx.root}
>
<div style={sx.dot} />
</Base>
);
});
Switch.propTypes = {
/** Sets the Switch to an active style */
checked: React.PropTypes.bool,
};
Switch.contextTypes = {
rebass: React.PropTypes.object,
};
export default Switch;

34
frontend/scenes/Application.js
View File

@ -3,44 +3,10 @@ import { observer } from 'mobx-react';
import Helmet from 'react-helmet';
@observer class Application extends React.Component {
static childContextTypes = {
rebass: React.PropTypes.object,
};
static propTypes = {
children: React.PropTypes.node.isRequired,
};
getChildContext() {
return {
rebass: {
colors: {
primary: '#171B35',
},
// color: '#eee',
// backgroundColor: '#fff',
borderRadius: 2,
borderColor: '#eee',
// fontSizes: [64, 48, 28, 20, 18, 16, 14],
bold: 500,
scale: [0, 8, 18, 36, 72],
Input: {
// borderBottom: '1px solid #eee',
},
Button: {
// color: '#eee',
// backgroundColor: '#fff',
// border: '1px solid #ccc',
},
ButtonOutline: {
color: '#000',
},
InlineForm: {},
},
};
}
render() {
return (
<div style={{ width: '100%', height: '100%', display: 'flex', flex: 1 }}>

3
frontend/scenes/DocumentEdit/DocumentEdit.js
View File

@ -5,7 +5,6 @@ import keydown from 'react-keydown';
import DocumentEditStore, { DOCUMENT_EDIT_SETTINGS } from './DocumentEditStore';
import Switch from 'components/Switch';
import Layout, { Title, HeaderAction, SaveAction } from 'components/Layout';
import { Flex } from 'reflexbox';
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@ -141,7 +140,7 @@ class DocumentEdit extends Component {
</HeaderAction>
<DropdownMenu label={<MoreIcon />}>
<MenuItem onClick={this.store.togglePreview}>
Preview <Switch checked={this.store.preview} />
Toggle Preview
</MenuItem>
<MenuItem onClick={this.onCancel}>
Cancel

2
frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js
View File

@ -13,8 +13,6 @@ const cx = classNames.bind(styles);
import SidebarStore from './SidebarStore';
@observer class Sidebar extends React.Component {
static store;
static propTypes = {
open: PropTypes.bool,
onToggle: PropTypes.func.isRequired,

107
frontend/scenes/Settings/Settings.js
View File

@ -1,8 +1,8 @@
// @flow
import React from 'react';
import { observer } from 'mobx-react';
import styled from 'styled-components';
import { Flex } from 'reflexbox';
import { Input, ButtonOutline, InlineForm } from 'rebass';
import Layout, { Title } from 'components/Layout';
import CenteredContent from 'components/CenteredContent';
import SlackAuthLink from 'components/SlackAuthLink';
@ -13,18 +13,13 @@ import styles from './Settings.scss';
import SettingsStore from './SettingsStore';
@observer class Settings extends React.Component {
static store;
store = SettingsStore;
constructor(props) {
super(props);
this.store = new SettingsStore();
}
onKeyCreate = e => {
e.preventDefault();
this.store.createApiKey();
};
render() {
const title = (
<Title>
@ -73,30 +68,30 @@ import SettingsStore from './SettingsStore';
{this.store.apiKeys &&
<table className={styles.apiKeyTable}>
{this.store.apiKeys.map(key => (
<ApiKeyRow
id={key.id}
name={key.name}
secret={key.secret}
onDelete={this.store.deleteApiKey}
/>
))}
<tbody>
{this.store.apiKeys.map(key => (
<ApiKeyRow
id={key.id}
key={key.id}
name={key.name}
secret={key.secret}
onDelete={this.store.deleteApiKey}
/>
))}
</tbody>
</table>}
<div>
<InlineForm
placeholder="Token name"
buttonLabel="Create token"
label="InlineForm"
name="inline_form"
value={this.store.keyName}
onChange={this.store.setKeyName}
onClick={this.onKeyCreate}
style={{ width: '100%' }}
onSubmit={this.store.createApiKey}
disabled={this.store.isFetching}
/>
</div>
</div>
</CenteredContent>
</Layout>
@ -104,4 +99,76 @@ import SettingsStore from './SettingsStore';
}
}
const InlineForm = ({
placeholder,
buttonLabel,
name,
value,
onChange,
onSubmit,
disabled,
}: {
placeholder: string,
buttonLabel: string,
name: string,
value: string,
onChange: Function,
onSubmit: Function,
disabled?: boolean,
}) => {
const handleSubmit = event => {
event.preventDefault();
onSubmit();
};
return (
<form onSubmit={handleSubmit}>
<Flex auto>
<TextInput
type="text"
placeholder={placeholder}
value={value || ''}
onChange={onChange}
/>
<Button type="submit" value={buttonLabel} />
</Flex>
</form>
);
};
const TextInput = styled.input`
display:flex;
flex: 1;
height:32px;
margin:0;
padding-left:8px;
padding-right:8px;
color:inherit;
background-color:rgba(255, 255, 255, .25);
border-width:1px;
border-style:solid;
border-color:rgba(0, 0, 0, .25);
border-radius:2px 0 0 2px;
`;
const Button = styled.input`
box-shadow:inset 0 0 0 1px;
font-family:inherit;
font-size:14px;
line-height:16px;
min-height:32px;
text-decoration:none;
display:inline-block;
margin:0;
padding-top:8px;
padding-bottom:8px;
padding-left:16px;
padding-right:16px;
cursor:pointer;
border:0;
color:black;
background-color:transparent;
border-radius:0 2px 2px 0;
margin-left:-1px;
`;
export default Settings;

1
package.json
View File

@ -138,7 +138,6 @@
"react-helmet": "3.1.0",
"react-keydown": "^1.6.1",
"react-router": "2.8.0",
"rebass": "^0.3.4",
"redis": "^2.6.2",
"redis-lock": "^0.1.0",
"reflexbox": "^2.2.3",

19
yarn.lock
View File

@ -5973,10 +5973,6 @@ object-assign@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
object-is@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@ -6822,13 +6818,6 @@ react-addons-css-transition-group@15.3.2:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.3.2.tgz#d8fa52bec9bb61bdfde8b9e4652b80297cbff667"
react-addons-pure-render-mixin@^15.4.2:
version "15.5.2"
resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.5.2.tgz#ebb846aeb2fd771336c232822923108f87d5bff2"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"
react-addons-test-utils@^15.3.1:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.3.2.tgz#c09a44f583425a4a9c1b38444d7a6c3e6f0f41f6"
@ -7010,14 +6999,6 @@ readline2@^1.0.1:
is-fullwidth-code-point "^1.0.0"
mute-stream "0.0.5"
rebass@^0.3.4:
version "0.3.4"
resolved "https://registry.yarnpkg.com/rebass/-/rebass-0.3.4.tgz#88a16c6b6cf52e3b3e8d5a54fe42994bd04a4bf7"
dependencies:
classnames "^2.2.3"
object-assign "^4.1.1"
react-addons-pure-render-mixin "^15.4.2"
rechoir@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"