LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

Add toolbar base UI

Browse source
This commit is contained in:
Shawn 2018-11-14 21:24:36 -06:00
parent 4cea42cec6
commit b879baa3c8
3 changed files with 43 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client/scss/_dropzone.scss
View file

@ -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;
}

28
client/src/components/Creatify/index.js
View file

@ -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}>

16
client/src/containers/Dropzone/view.jsx
View file

@ -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>