From 3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2 Mon Sep 17 00:00:00 2001 From: Martin Ashby Date: Tue, 3 Jul 2018 12:38:22 +0100 Subject: Better layout with CSS. Changed favicon & title. --- public/favicon.ico | Bin 3870 -> 318 bytes public/index.html | 2 +- src/App.css | 130 ++++++++++++++++++++++++++++++++------------------ src/App.js | 64 ++++++++++++++----------- src/ColorIndicator.js | 13 ++--- src/FrameControl.js | 78 +++++++++++++++++------------- src/PaintArea.js | 31 +++--------- src/Palette.js | 32 +++---------- src/Toolkit.js | 3 +- 9 files changed, 185 insertions(+), 168 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..9f9feae 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index ed0ebaf..300c1e9 100644 --- a/public/index.html +++ b/public/index.html @@ -19,7 +19,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Unicorn Paint!

Unicorn Paint!

- +

- this.setState({selectedFrame: frame}) }/> -

this.setState({ selectedColor: color })} /> -

- + selectedColor={selectedColor} + onSelectColor={(color) => this.setState({ selectedColor: color })} /> +

+ this.setState({selectedFrame: frame}) } + imageData={imageData}/>

{ - this.state.showingLoad + showingLoad && this._loadDrawing(drawing)} onClose={() => this.setState({ showingLoad: false })} /> }

{ - this.state.showingSave + showingSave && this._saveDrawing(name)} onClose={() => this.setState({ showingSave: false })} /> }

); } diff --git a/src/ColorIndicator.js b/src/ColorIndicator.js index 2ae15d1..df0a517 100644 --- a/src/ColorIndicator.js +++ b/src/ColorIndicator.js @@ -19,19 +19,12 @@ export default class ColorIndicator extends Component { } return

- {colorDesc} + {/* {colorDesc} */}

} } - -const styles = { - colorIndicator: { - width: "100px", - height: "100px" - } -} \ No newline at end of file diff --git a/src/FrameControl.js b/src/FrameControl.js index 45db5d4..181b71b 100644 --- a/src/FrameControl.js +++ b/src/FrameControl.js @@ -3,54 +3,66 @@ import { rgb, getPixel } from './Utils' class FramePreview extends Component { render() { - let width = this.props.pixels.length - let height = this.props.pixels[0].length + let { pixels, selected, index, onClick } = this.props + let width = pixels.length + let height = pixels[0].length - let rows = [] + let cells = [] for (var y=height-1; y>=0; y--) { - let cells = [] for (var x=0; x) } - rows.push({cells}) } - let bgColor = this.props.selected ? "red" : "grey" - return {rows}

+ let wrapperClassName = selected ? "framePreviewWrapper selected" : "framePreviewWrapper" + return

+ Frame {index + 1} +

+ {cells} +

} } +function animationPreview(props) { + let { imageData } = props + let imgUrl = `url(data:image/gif;base64,${imageData})` + return

+ Preview: +

+} + export default class FrameControl extends Component { - // frames: [] - // selectedFrame: number render() { // A series of divs, 1 per frame, - let frames = this.props.frames - let selectedFrame = this.props.selectedFrame + let { frames, + selectedFrame, + onFrameSelected, + imageData } = this.props + let framePreviews = frames.map((frame, ix) => -

- Frame {ix+1} - this.props.onFrameSelected(ix)}/> -

) - return

{framePreviews}

- } -} + onFrameSelected(ix)}/>) + + -const styles = { - previewcontainer: { - }, - previewTable: { - }, - previewPixel: { - width: "4px", - height: "4px", + return

+ {animationPreview({imageData:imageData})} + {framePreviews} +

} -} \ No newline at end of file +} diff --git a/src/PaintArea.js b/src/PaintArea.js index ac7ce96..e42ec9e 100644 --- a/src/PaintArea.js +++ b/src/PaintArea.js @@ -47,44 +47,27 @@ export default class PaintArea extends Component { render() { let data = this.props.data let height = data[0] ? data[0].length : 0 - let rows = [] + let cells = [] for (var y=height-1; y>=0; y--) { - let cells = [] for (var x=0; x this.handleMouseMove(ix, iy)} onClick={() => this.props.onTool(ix, iy)} style={{ - background: `rgb(${r},${g},${b})`, - ...styles.paintAreaCell + background: `rgb(${r},${g},${b})` }} key={(ix * 100000) + iy}/>) } - rows.push({cells}) } return ( - - - {rows} - -

+ {cells} +

) } } - -const styles = { - paintAreaCell: { - width: "20px", - height: "20px", - minWidth: "20px", - minHeight: "20px", - maxWidth: "20px", - maxHeight: "20px", - border: "1px solid grey", - } -} \ No newline at end of file diff --git a/src/Palette.js b/src/Palette.js index fd4776f..9ffd19b 100644 --- a/src/Palette.js +++ b/src/Palette.js @@ -28,35 +28,17 @@ const colorPalette = [ let selected = rgb(this.props.selectedColor) let isSelected = r === selected.r && g === selected.g && b === selected.b - let style = Object.assign({}, - {background: `rgb(${r},${g},${b})`}, - styles.paletteItem, - isSelected && styles.selected - ) + let className = isSelected ? "paletteItem selected" : "paletteItem" return

this.props.onSelectColor([r, g, b])} - style={style} - key={r*10000+g*1000+b}/> + key={r*10000+g*1000+b} + className={className} + style={{background: `rgb(${r},${g},${b})`}} + onClick={() => this.props.onSelectColor([r, g, b])}/> }) - let list1 = paletteListItems.slice(0, paletteListItems.length / 2) - let list2 = paletteListItems.slice(paletteListItems.length / 2) return ( -

- {list1}
- {list2} +

+ {paletteListItems}

) } - } - - const styles = { - paletteItem: { - width: "30px", - height: "30px", - border: "3px solid black", - display: "inline-block", - }, - selected: { - border: "3px solid red" - } } \ No newline at end of file diff --git a/src/Toolkit.js b/src/Toolkit.js index e29d71d..c99d2ac 100644 --- a/src/Toolkit.js +++ b/src/Toolkit.js @@ -23,7 +23,8 @@ export default class Toolkit extends Component { selected={tool === this.props.selectedTool} onSelectTool={this.props.onSelectTool}/> }) - return

+ return

{toolComponents}

} -- cgit v1.2.3-ZIG