Merge pull request #796 from lbryio/memeify-fixes

Memeify fixes
This commit is contained in:
Shawn K 2018-12-01 01:25:47 -06:00 committed by GitHub
commit 27ccbb5f14
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 815 additions and 501 deletions

View file

@ -64,7 +64,7 @@ export default class EditableFontface extends Component {
) : null;
return (
<div style={{ position: 'relative' }}>
<div style={{ position: 'relative', ...(fontFace.container || {}) }}>
<style scoped>{'@keyframes textBlink { 0% { opacity: 1 } 30% { opacity: 0.6 } 60% { opacity: 1 } }'}</style>
{fontInput}
<div ref={me.state.fontRender} style={textStyles} title={value}>{textRender(value)}</div>
@ -93,6 +93,7 @@ export const PRESETS = {
'Lazer': require('../FontFaces/Lazer'),
'Neon': require('../FontFaces/Neon'),
'Old Blue': require('../FontFaces/OldBlue'),
'Outline': require('../FontFaces/Outline'),
'Retro Rainbow': require('../FontFaces/RetroRainbow'),
'The Special': require('../FontFaces/TheSpecial'),
'Vapor Wave': require('../FontFaces/VaporWave'),

View file

@ -1,5 +1,4 @@
module.exports = {
container: {},
editorStyle: {
fontFamily: 'courier, Courier New',
fontWeight: 'bold',
@ -12,4 +11,7 @@ module.exports = {
fontWeight: 'bold',
textShadow: '1px 1px 2px #003605',
},
previewOverrides: {
fontSize: '1.6em',
},
};

View file

@ -1,5 +1,4 @@
module.exports = {
container: {},
editorStyle: {
fontFamily: 'helvetica, Helvetica Nue',
fontWeight: 'bold',
@ -14,6 +13,7 @@ module.exports = {
},
previewOverrides: {
fontSize: '1.5em',
overflow: 'hidden',
padding: '0 1rem 0 1rem',
},
};

View file

@ -1,5 +1,4 @@
module.exports = {
container: {},
editorStyle: {
fontFamily: 'helvetica, Helvetica Nue',
fontWeight: 'bold',
@ -20,4 +19,7 @@ module.exports = {
WebkitBackgroundClip: 'text',
WebkitTextStroke: '0.03em rgba(255, 255, 255, 0.6)',
},
previewOverrides: {
fontSize: '1.8em',
},
};

View file

@ -1,5 +1,4 @@
module.exports = {
container: {},
editorStyle: {
fontFamily: 'Helvetica, Arial',
fontWeight: 'bold',

View file

@ -17,6 +17,7 @@ module.exports = {
},
previewOverrides: {
height: '2.6rem',
overflow: 'hidden',
},
textRender: (text) => {
const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave`
@ -24,12 +25,12 @@ module.exports = {
<svg viewBox="0 0 500 50" style={{ height: '4em', fontFamily: 'Arial', fontWeight: 'bold' }}>
<path id={id} fill="transparent" d="M 0 50 Q 50 0 100 50 Q 150 100 200 50 Q 250 0 300 50 Q 350 100 400 50 Q 450 0 500 50 Q 550 100 600 50 " transform="scale(1 0.5) translate(0 15)" />
<text x="10" style={{ fill: '#4dc2fe', fontWeight: 900, letterSpacing: '-0.15em', textShadow: '0.15em -0.1em #1c55a0' }}>
<textPath href={`#${id}`}>
<textPath xlinkHref={`#${id}`}>
{text}
</textPath>
</text>
<text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.012em', fontWeight: 900, letterSpacing: '-0.15em' }}>
<textPath href={`#${id}`}>
<textPath xlinkHref={`#${id}`}>
{text}
</textPath>
</text>

View file

@ -0,0 +1,18 @@
module.exports = {
editorStyle: {
fontFamily: 'arial',
fontWeight: 'bold',
fontSize: '2em',
},
text: {
color: '#fff',
fontFamily: 'arial',
fontSize: '2rem',
fontWeight: 'bold',
textShadow: '2px 2px .1px #000, -1px -1px .1px #000, 1px -1px .1px #000, -1px 1px .1px #000, 1px 1px .1px #000',
},
previewOverrides: {
fontSize: '1.6rem',
padding: '0 .04rem',
},
};

View file

@ -1,5 +1,4 @@
module.exports = {
container: {},
editorStyle: {
fontFamily: 'Arial, sans-serif',
fontWeight: 'bold',

View file

@ -1,7 +1,6 @@
import React from 'react';
module.exports = {
container: {},
editorStyle: {
fontFamily: 'Arial, sans-serif',
fontWeight: 'bold',

View file

@ -10,7 +10,9 @@ const charToFullWidth = char => {
const stringToFullWidth =
module.exports = {
container: {},
container: {
overflow: 'hidden',
},
editorStyle: {},
text: {
fontFamily: 'Segoe UI,Helvetica,Arial',
@ -33,7 +35,7 @@ module.exports = {
<svg viewBox="0 0 500 160" style={{ height: '10em' }}>
<path id={id} fill="transparent" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
<text x="10">
<textPath href={`#${id}`}>
<textPath xlinkHref={`#${id}`}>
{formattedText}
</textPath>
</text>

View file

@ -49,9 +49,11 @@ export default class RichDraggable extends Component {
return (
<Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
<div ref={me.contents} style={{ padding: '15px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
<div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
{props.children}
<div ref={me.contents} style={{ border: '4px dashed rgba(0, 0, 0, .7)', cursor: 'move', position: 'absolute' }} className="creatifyDecor">
<div style={{ border: '4px dashed rgba(255, 255, 255, .8)', margin: '-5px -3px -3px -5px', padding: '15px' }} className="creatifyDecor">
<div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
{props.children}
</div>
</div>
</div>
</Draggable>

View file

@ -30,7 +30,7 @@ const getRasterizedCanvas = (contents, width, height) => {
// Attempt to match font kerning with the DOM.
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}">
let 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"><head>${kerningAndPadding}</head><body>${contents}</body></html>
</foreignObject></svg>`;
@ -81,7 +81,7 @@ const getRasterizedCanvas = (contents, width, height) => {
});
};
export default class Creatify extends Component {
export default class Memeify extends Component {
constructor(props) {
super(props);
@ -94,7 +94,7 @@ export default class Creatify extends Component {
{
value: fontName,
label: (
<div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px', overflow: 'hidden' }}>
<div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px' }}>
<EditableFontface key={fontName} fontFace={FontPresets[fontName]} preview={true} value={fontName} editable={false} blinkSelection={false} />
</div>
),

View file

@ -1,7 +1,7 @@
import React from 'react';
import { validateFile } from '../../utils/file';
import Creatify from '@components/Creatify';
import Memeify from '@components/Memeify';
import DropzonePreviewImage from '@components/DropzonePreviewImage';
import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
@ -187,11 +187,11 @@ class Dropzone extends React.Component {
};
const memeifyContent = memeify && file && filePreview ? (
<Creatify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
<Memeify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
<div style={{ background: '#fff', flex: 1, pointerEvents: 'none' }}>
<img style={{ width: '100%' }} src={filePreview} />
</div>
</Creatify>
</Memeify>
) : null;
const dropZoneClassName = 'dropzone' + (dragOver ? ' dropzone--drag-over' : '');

1250
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -123,6 +123,7 @@
"ndb": "^1.0.26",
"node-sass": "^4.10.0",
"nodemon": "^1.18.6",
"react-color": "^2.14.1",
"redux-devtools": "^3.4.1",
"regenerator-transform": "^0.13.3",
"rollup": "^0.67.0",