Add toolbar base UI
This commit is contained in:
Shawn
parent
4cea42cec6
commit
b879baa3c8
3 changed files with 43 additions and 21 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = '<style>svg{font-kerning:normal}</style>' + contents;
|
||||
const kerningAndPadding = '<style>svg{font-kerning:normal}body{padding:0;margin:0}</style>';
|
||||
const svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
|
||||
<foreignObject x="0" y="0" width="${width * 2}" height="${height * 2}" externalResourcesRequired="true">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><body>${contents}</body></html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>${kerningAndPadding}</head><body>${contents}</body></html>
|
||||
</foreignObject></svg>`;
|
||||
|
||||
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 (
|
||||
<div style={{ position: 'relative', flex: props.flex === true ? 1 : props.flex, display: props.flex ? 'flex' : 'block' }}>
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, background: '#333', zIndex: 2 }}>
|
||||
{/*
|
||||
<button onClick={() => this.renderContents()}>Rasterize</button>
|
||||
<Select isSearchable={false} options={state.fontOptions} onChange={(option) => this.setFont(option.fontName)} />
|
||||
*/}
|
||||
<div className={props.toolbarClassName} style={{ alignItems: 'center', color: '#fff', display: 'flex', padding: '.3em', position: 'absolute', top: 0, left: 0, right: 0, background: '#333', flexDirection: 'row', zIndex: 2 }}>
|
||||
<FontAwesomeIcon icon={faPlusCircle} size="2x" />
|
||||
<div style={spacerCss} />
|
||||
<FontAwesomeIcon icon={faMinusCircle} size="2x" />
|
||||
<div style={spacerCss} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<Select style={{ flex: 1 }} isSearchable={false} options={state.fontOptions} onChange={(option) => this.setFont(option.fontName)} />
|
||||
</div>
|
||||
<div style={spacerCss} />
|
||||
<div onClick={() => this.renderContents()} style={{ alignItems: 'center', alignSelf: 'stretch', color: '#fff', border: '1px solid #fff', display: 'flex', padding: '.4em' }}>
|
||||
<span>Finish</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ref={me.contents} style={{ fontSize: '22px', overflow: 'hidden', transform: 'translateZ(0)', flex: 1 }}>
|
||||
<RichDraggable bounds={state.bounds}>
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ class Dropzone extends React.Component {
|
|||
};
|
||||
|
||||
const memeifyContent = memeify && file && filePreview ? (
|
||||
<Creatify flex>
|
||||
<Creatify flex toolbarClassName={'dropzone-memeify-toolbar'}>
|
||||
<div style={{ background: '#fff', flex: 1 }}>
|
||||
<img style={{ width: '100%' }} src={filePreview} />
|
||||
</div>
|
||||
|
|
@ -168,7 +168,12 @@ class Dropzone extends React.Component {
|
|||
{isUpdate && fileExt === 'mp4' ? (
|
||||
<p>Video updates are currently disabled. This feature will be available soon. You can edit metadata.</p>
|
||||
) : (
|
||||
<div className='dropzone-wrapper'>
|
||||
<div className={'dropzone-wrapper'}>
|
||||
{ hasContent && !memeify && (
|
||||
<div className={'dropzone-memeify-button'} onClick={() => this.setState({ memeify: !memeify })}>
|
||||
<FontAwesomeIcon icon={faEdit} /> Memeify
|
||||
</div>
|
||||
)}
|
||||
<form>
|
||||
<input
|
||||
className='input-file'
|
||||
|
|
@ -182,7 +187,7 @@ class Dropzone extends React.Component {
|
|||
</form>
|
||||
<div className={dropZoneClassName} {...dropZoneHooks}>
|
||||
{hasContent ? (
|
||||
<div className={'dropzone-preview-wrapper'}>
|
||||
<div className={'dropzone-preview-wrapper' + (memeifyContent ? ' dropzone-preview-memeify' : '')}>
|
||||
<DropzonePreviewImage {...dropZonePreviewProps} />
|
||||
<div className={'dropzone-preview-overlay'}>
|
||||
{ dragOver ? <DropzoneDropItDisplay /> : null }
|
||||
|
|
@ -192,11 +197,6 @@ class Dropzone extends React.Component {
|
|||
message={fileExt === 'mp4' ? 'Drag & drop new thumbnail' : null}
|
||||
/>
|
||||
) : null }
|
||||
{ !memeify && (
|
||||
<div className={'dropzone-memeify-button'} onClick={() => this.setState({ memeify: !memeify })}>
|
||||
<FontAwesomeIcon icon={faEdit} /> Memeify
|
||||
</div>
|
||||
)}
|
||||
{memeifyContent}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue