From adfcbfdbeab266c73324222211abce7ed82c5082 Mon Sep 17 00:00:00 2001 From: Shawn Date: Thu, 29 Nov 2018 20:25:49 -0600 Subject: [PATCH] Add fonts (Lazer, Green Machine, Inferno), fix fiont previews, add save message --- client/scss/_dropzone.scss | 6 +++ .../Creatify/EditableFontface/index.js | 43 +++++++++++++++---- .../Creatify/FontFaces/GreenMachine.js | 6 ++- .../components/Creatify/FontFaces/Inferno.js | 22 ++++++++++ .../components/Creatify/FontFaces/Lazer.js | 27 ++++++++++++ .../components/Creatify/FontFaces/OldBlue.js | 3 ++ .../Creatify/FontFaces/VaporWave.js | 6 +++ .../Creatify/RichDraggable/index.js | 6 +-- client/src/components/Creatify/index.js | 4 +- client/src/containers/Dropzone/view.jsx | 7 +-- 10 files changed, 112 insertions(+), 18 deletions(-) create mode 100644 client/src/components/Creatify/FontFaces/Inferno.js create mode 100644 client/src/components/Creatify/FontFaces/Lazer.js diff --git a/client/scss/_dropzone.scss b/client/scss/_dropzone.scss index 3c5feb35..a3934edd 100644 --- a/client/scss/_dropzone.scss +++ b/client/scss/_dropzone.scss @@ -73,6 +73,12 @@ z-index: 3; } +.dropzone-memeify-saveMessage { + padding-top: .25em; + position: relative; + top: .5em; +} + .dropzone-memeify-toolbar { /* TODO: Cleanup `!important` */ background: $primary-color !important; diff --git a/client/src/components/Creatify/EditableFontface/index.js b/client/src/components/Creatify/EditableFontface/index.js index d2f0e18d..3c0da159 100644 --- a/client/src/components/Creatify/EditableFontface/index.js +++ b/client/src/components/Creatify/EditableFontface/index.js @@ -7,32 +7,48 @@ export default class EditableFontface extends Component { super(props); this.state = { + blinkSelection: props.blinkSelection == false ? false : true, value: props.value, }; + + this.textInput = React.createRef(); + } + + componentDidMount() { + const textInput = this.textInput.current; + + if(textInput) { + textInput.focus(); + } } render() { const me = this; const { + blinkSelection, value } = me.state; const { editable = true, fontFace, + preview, } = me.props; const textRender = fontFace.textRender || DEFAULT_TEXT_RENDER; const textStyles = Object.assign({ + ...(blinkSelection ? { + animation: 'textBlink 1s infinite', + } : {}), minHeight: '20px', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', - }, fontFace.text); + }, fontFace.text, preview ? fontFace.previewOverrides : {}); const fontInput = (editable === true) ? ( - me.onKeyPress(e)} onChange={(e) => me.onChange(e)} style={{ + me.onKeyPress(e)} onChange={(e) => me.onChange(e)} style={{ ...{ bottom: 0, opacity: 0, @@ -49,25 +65,34 @@ export default class EditableFontface extends Component { return (
- {fontInput} -
{textRender(value)}
+ + {fontInput} +
{textRender(value)}
); } onKeyPress(e) { - this.setState({ value: e.target.value }); + this.setState({ + blinkSelection: false, + value: e.target.value + }); } onChange(e) { - this.setState({ value: e.target.value }); + this.setState({ + blinkSelection: false, + value: e.target.value + }); } }; export const PRESETS = { - 'Retro Rainbow': require('../FontFaces/RetroRainbow'), + 'Inferno': require('../FontFaces/Inferno'), 'Green Machine': require('../FontFaces/GreenMachine'), - 'vapor wave': require('../FontFaces/VaporWave'), - 'The Special': require('../FontFaces/TheSpecial'), + 'Lazer': require('../FontFaces/Lazer'), 'Old Blue': require('../FontFaces/OldBlue'), + 'Retro Rainbow': require('../FontFaces/RetroRainbow'), + 'The Special': require('../FontFaces/TheSpecial'), + 'Vapor Wave': require('../FontFaces/VaporWave'), } diff --git a/client/src/components/Creatify/FontFaces/GreenMachine.js b/client/src/components/Creatify/FontFaces/GreenMachine.js index b3163983..071a1e2c 100644 --- a/client/src/components/Creatify/FontFaces/GreenMachine.js +++ b/client/src/components/Creatify/FontFaces/GreenMachine.js @@ -1,6 +1,10 @@ module.exports = { container: {}, text: { - color: 'green', + color: '#00b700', + fontFamily: 'courier, Courier New', + fontSize: '2rem', + fontWeight: 'bold', + textShadow: '1px 1px 2px #003605', }, }; diff --git a/client/src/components/Creatify/FontFaces/Inferno.js b/client/src/components/Creatify/FontFaces/Inferno.js new file mode 100644 index 00000000..01d4d9cb --- /dev/null +++ b/client/src/components/Creatify/FontFaces/Inferno.js @@ -0,0 +1,22 @@ +module.exports = { + container: {}, + editorStyle: { + fontFamily: 'helvetica, Helvetica Nue', + fontWeight: 'bold', + fontSize: '2em', + padding: '4rem 2rem 1rem 2rem', + }, + text: { + fontFamily: 'helvetica, Helvetica Nue', + fontWeight: 'bold', + fontSize: '2em', + color: '#fff', + paddingBottom: '.25em', + padding: '4rem 2rem 1rem 2rem', + textShadow: '0px 0px 3px #c20000, 0px 0px 3px #e0f2ff, 0px 0px 5px #532761, 0px 0px 20px #670606, 0 0 10px rgba(0, 0, 0, .8), 0 0 10px #fefcc9, 5px -5px 15px #feec85, -10px -10px 20px #ffae34, 10px -20px 25px #ec760c, -10px -30px 30px #cd4606, 0 -40px 35px #973716, 5px -45px 40px #451b0e, 0 -2px 15px rgba(255, 200, 160, .5)', + }, + previewOverrides: { + fontSize: '1.5em', + padding: '0 1rem 0 1rem', + }, +}; diff --git a/client/src/components/Creatify/FontFaces/Lazer.js b/client/src/components/Creatify/FontFaces/Lazer.js new file mode 100644 index 00000000..ffd2747b --- /dev/null +++ b/client/src/components/Creatify/FontFaces/Lazer.js @@ -0,0 +1,27 @@ +module.exports = { + container: {}, + editorStyle: { + fontFamily: 'helvetica, Helvetica Nue', + fontWeight: 'bold', + fontSize: '2em', + padding: '.05rem', + textTransform: 'uppercase', + whiteSpace: 'nowrap', + }, + text: { + fontFamily: 'helvetica, Helvetica Nue', + fontWeight: 'bold', + backgroundImage: 'linear-gradient(180deg, #249bff 0%, #e1f8ff 44%, #3a006b 44%, #ff57d6 100%)', + backgroundClip: 'text', + fontSize: '2em', + color: 'transparent', + paddingBottom: '.25em', + paddingTop: '.1em', + filter: 'drop-shadow(0 0 .05rem black)', + padding: '.05rem', + textTransform: 'uppercase', + whiteSpace: 'nowrap', + WebkitBackgroundClip: 'text', + WebkitTextStroke: '0.03em rgba(255, 255, 255, 0.6)', + }, +}; diff --git a/client/src/components/Creatify/FontFaces/OldBlue.js b/client/src/components/Creatify/FontFaces/OldBlue.js index c84cd629..99448d87 100644 --- a/client/src/components/Creatify/FontFaces/OldBlue.js +++ b/client/src/components/Creatify/FontFaces/OldBlue.js @@ -15,6 +15,9 @@ module.exports = { text: { fontFamily: 'Segoe UI,Helvetica,Arial', }, + previewOverrides: { + height: '2.6rem', + }, textRender: (text) => { const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave` return ( diff --git a/client/src/components/Creatify/FontFaces/VaporWave.js b/client/src/components/Creatify/FontFaces/VaporWave.js index f45f2897..7d2f0575 100644 --- a/client/src/components/Creatify/FontFaces/VaporWave.js +++ b/client/src/components/Creatify/FontFaces/VaporWave.js @@ -15,6 +15,12 @@ module.exports = { text: { fontFamily: 'Segoe UI,Helvetica,Arial', }, + previewOverrides: { + transform: 'rotate(39deg)', + height: '7rem', + paddingLeft: '2rem', + margin: '-2rem 0', + }, textRender: (text) => { const formattedText = text.toLowerCase().split('').map((char) => { const c = char.charCodeAt( 0 ) diff --git a/client/src/components/Creatify/RichDraggable/index.js b/client/src/components/Creatify/RichDraggable/index.js index 8ec02ede..8b9915c3 100644 --- a/client/src/components/Creatify/RichDraggable/index.js +++ b/client/src/components/Creatify/RichDraggable/index.js @@ -41,15 +41,15 @@ export default class RichDraggable extends Component { } = props.bounds; const bounds = { - top: 0, - left: 0, + //top: 0, + //left: 0, right: right - state.width, bottom: bottom - state.height, }; return ( -
+
{props.children}
diff --git a/client/src/components/Creatify/index.js b/client/src/components/Creatify/index.js index acae72f6..91c77c9e 100644 --- a/client/src/components/Creatify/index.js +++ b/client/src/components/Creatify/index.js @@ -95,7 +95,7 @@ export default class Creatify extends Component { value: fontName, label: (
- +
), fontName, @@ -140,7 +140,7 @@ export default class Creatify extends Component { const newElement = ( this.setActiveElement(newElement)}> - + ); diff --git a/client/src/containers/Dropzone/view.jsx b/client/src/containers/Dropzone/view.jsx index db9bdc66..f7f05a95 100644 --- a/client/src/containers/Dropzone/view.jsx +++ b/client/src/containers/Dropzone/view.jsx @@ -130,7 +130,7 @@ class Dropzone extends React.Component { const destinationFormat = 'image/jpeg'; canvas.toBlob((blob) => { - const file = new File([blob], 'memeify.jpg', { + const file = new File([blob], `memeify-${Math.random().toString(36).substring(7)}.jpg`, { type: destinationFormat, }); @@ -172,7 +172,7 @@ class Dropzone extends React.Component { const memeifyContent = memeify && file && filePreview ? ( this.selectFileFromCanvas(canvas)}> -
+
@@ -186,7 +186,7 @@ class Dropzone extends React.Component {

Video updates are currently disabled. This feature will be available soon. You can edit metadata.

) : (
- { hasContent && !memeify && ( + { hasContent && !memeify && fileExt !== 'mp4' && (
this.setState({ memeify: !memeify })}> Memeify
@@ -222,6 +222,7 @@ class Dropzone extends React.Component { ) )} + {memeifyContent ?
{`Don't forget to save before you publish.`}
: null}
)}