- {
17 | Colors.map(o =>
- {o.name} ) 18 | }
11 |
15 |
17 |
19 |
21 |
22 | }
23 | }
24 |
25 | Controls.contextTypes = {
26 | flux: React.PropTypes.object
27 | }
28 |
--------------------------------------------------------------------------------
/src/lib/components/frame.amcss:
--------------------------------------------------------------------------------
1 | .Frame {
2 | min-height: 100vh;
3 | @trait(flex: vertical);
4 |
5 | > header {
6 | @trait(color: inverted, type: logo, layout: p1);
7 | }
8 | > footer {
9 | @trait(flex: wrap center, color: inverted, type: footer, layout: p1);
10 | > p {
11 | @trait(layout: p0.25 pr1 pl1);
12 | text-align: center;
13 | > a {
14 | @trait(link: inline, type: unbroken);
15 | }
16 | }
17 | }
18 | > main {
19 | @trait(flex: wrap, flex-child: grow);
20 | }
21 | }
22 |
23 | .Frame-Logo {
24 | text-align: center;
25 | > span {
26 | display: inline-block;
27 | &::first-letter {
28 | font-size: 1.4em;
29 | vertical-align: text-top;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/lib/components/frame.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FluxComponent from 'flummox/component'
3 | import './frame.amcss!'
4 |
5 | import Controls from './controls.jsx!'
6 | import Output from './output.jsx!'
7 |
8 | export default class Frame extends React.Component {
9 | render() {
10 | return Enter your message:
12 |Pick your type pairing:
14 |Choose a colour scheme:
18 |
11 |
12 |
16 |
17 |
19 |
20 |
21 |
22 |
27 |
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/lib/components/imgur-upload.js:
--------------------------------------------------------------------------------
1 | import 'whatwg-fetch'
2 |
3 | export default {
4 | uploadSingleImage(canvas) {
5 | let data = new FormData()
6 | data.append("image", canvas.toDataURL().split(',')[1])
7 | data.append("type", "base64")
8 | data.append("description", "Made with http://typeslab.com")
9 | return fetch('https://api.imgur.com/3/image', {
10 | method: 'post',
11 | body: data,
12 | headers: {
13 | "Authorization": "Client-ID dc208153560e2ef"
14 | }
15 | }).then(response => response.json())
16 | },
17 |
18 | createAlbum(imageIds, title) {
19 | let data = new FormData()
20 | data.append("ids", imageIds.join(','))
21 | data.append("title", title)
22 | return fetch('https://api.imgur.com/3/album', {
23 | method: 'post',
24 | body: data,
25 | headers: {
26 | "Authorization": "Client-ID dc208153560e2ef"
27 | }
28 | }).then(response => response.json())
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/lib/components/message-entry.amcss:
--------------------------------------------------------------------------------
1 | .MessageEntry {
2 | > textarea {
3 | @trait(color: recessed, layout: p0.5, type: 14pt);
4 | height: 10rem;
5 | width: 100%;
6 | border: none;
7 | resize: none;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/lib/components/message-entry.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './message-entry.amcss!'
3 |
4 | export default class MessageEntry extends React.Component {
5 | componentWillMount() {
6 | this.messageActions = this.context.flux.getActions('message')
7 | this.setValue("Whatever you write here\nwill be rendered as a slab-type\nposter!\nStart a line with an '!'\n!to use the alternate typeface\nnow go and write something\nprofound\nand share it with the world!")
8 | }
9 | handleChange(event) {
10 | this.setValue(event.target.value)
11 | }
12 | setValue(value) {
13 | this.messageActions.changeMessage(value)
14 | this.setState({value: value})
15 | }
16 |
17 | render() {
18 | return 13 | TypeSlab 14 |
15 |
19 |