diff --git a/client/scss/_dropzone.scss b/client/scss/_dropzone.scss index b48bf165..3c5feb35 100644 --- a/client/scss/_dropzone.scss +++ b/client/scss/_dropzone.scss @@ -4,6 +4,7 @@ // be a flex container for children display: flex; flex-direction: column; + position: relative; } .dropzone { @@ -12,6 +13,7 @@ flex: 1 0 auto; // be a flex container for children display: flex; + padding: 1em; -webkit-flex-direction: column; flex-direction: column; justify-content: center; @@ -52,13 +54,17 @@ .dropzone-preview-image { display: block; - padding: 1em; - width: calc(100% - 2em); + width: 100%; +} + +.dropzone-preview-memeify { + margin-top: 3em; } .dropzone-memeify-button { - background: #333; + background: $primary-color; color: #fff; + cursor: pointer; font-size: .8em; padding: 3px 6px; position: absolute; @@ -67,6 +73,14 @@ z-index: 3; } +.dropzone-memeify-toolbar { + /* TODO: Cleanup `!important` */ + background: $primary-color !important; + left: -1em !important; + right: -1em !important; + top: -4em !important; +} + .dropzone-instructions-display__chooser-label { text-decoration: underline; } diff --git a/client/src/components/Creatify/index.js b/client/src/components/Creatify/index.js index c7460038..35248408 100644 --- a/client/src/components/Creatify/index.js +++ b/client/src/components/Creatify/index.js @@ -8,11 +8,10 @@ import RichDraggable from './RichDraggable'; import EditableFontface, { PRESETS as FontPresets } from './EditableFontface'; import { - faEdit, faFont, + faMinusCircle, + faPlusCircle, } from '@fortawesome/free-solid-svg-icons'; -library.add(faEdit); -library.add(faFont); const getRasterizedCanvas = (contents, width, height) => { return new Promise((resolve) => { @@ -30,10 +29,10 @@ const getRasterizedCanvas = (contents, width, height) => { } // Attempt to match font kerning with the DOM. - contents = '' + contents; + const kerningAndPadding = ''; const svgContents = ` -${contents} +${kerningAndPadding}${contents} `; const pixelRatio = 2; @@ -153,13 +152,22 @@ export default class Creatify extends Component { state, } = this; + // TODO: Abstract into separate package & use CSS Modules. + const spacerCss = { width: '.3em' }; return (
-
- {/* - - this.setFont(option.fontName)} /> +
+
+
this.renderContents()} style={{ alignItems: 'center', alignSelf: 'stretch', color: '#fff', border: '1px solid #fff', display: 'flex', padding: '.4em' }}> + Finish +
diff --git a/client/src/containers/Dropzone/view.jsx b/client/src/containers/Dropzone/view.jsx index 4814e4e7..4352a74b 100644 --- a/client/src/containers/Dropzone/view.jsx +++ b/client/src/containers/Dropzone/view.jsx @@ -154,7 +154,7 @@ class Dropzone extends React.Component { }; const memeifyContent = memeify && file && filePreview ? ( - +
@@ -168,7 +168,12 @@ class Dropzone extends React.Component { {isUpdate && fileExt === 'mp4' ? (

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

) : ( -
+
+ { hasContent && !memeify && ( +
this.setState({ memeify: !memeify })}> + Memeify +
+ )}
{hasContent ? ( -
+
{ dragOver ? : null } @@ -192,11 +197,6 @@ class Dropzone extends React.Component { message={fileExt === 'mp4' ? 'Drag & drop new thumbnail' : null} /> ) : null } - { !memeify && ( -
this.setState({ memeify: !memeify })}> - Memeify -
- )} {memeifyContent}