Merge tootsuite/master at 3023725936
This commit is contained in:
Surinna Curtis
@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import Button from '../../../components/button';
|
||||
import StatusContent from '../../../components/status_content';
|
||||
import StatusContent from '../../../../glitch/components/status/content';
|
||||
import Avatar from '../../../components/avatar';
|
||||
import RelativeTimestamp from '../../../components/relative_timestamp';
|
||||
import DisplayName from '../../../components/display_name';
|
||||
|
||||
@ -13,6 +13,7 @@ export default class Column extends React.PureComponent {
|
||||
children: PropTypes.node,
|
||||
active: PropTypes.bool,
|
||||
hideHeadingOnMobile: PropTypes.bool,
|
||||
name: PropTypes.string,
|
||||
};
|
||||
|
||||
handleHeaderClick = () => {
|
||||
@ -47,7 +48,7 @@ export default class Column extends React.PureComponent {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { heading, icon, children, active, hideHeadingOnMobile } = this.props;
|
||||
const { heading, icon, children, active, hideHeadingOnMobile, name } = this.props;
|
||||
|
||||
const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
|
||||
|
||||
@ -59,6 +60,7 @@ export default class Column extends React.PureComponent {
|
||||
<div
|
||||
ref={this.setRef}
|
||||
role='region'
|
||||
data-column={name}
|
||||
aria-labelledby={columnHeaderId}
|
||||
className='column'
|
||||
onScroll={this.handleScroll}
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const ColumnLink = ({ icon, text, to, href, method }) => {
|
||||
const ColumnLink = ({ icon, text, to, onClick, href, method }) => {
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} className='column-link' data-method={method}>
|
||||
@ -10,13 +10,20 @@ const ColumnLink = ({ icon, text, to, href, method }) => {
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
} else if (to) {
|
||||
return (
|
||||
<Link to={to} className='column-link'>
|
||||
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<a onClick={onClick} className='column-link' role='button' tabIndex='0' data-method={method}>
|
||||
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -24,9 +31,9 @@ ColumnLink.propTypes = {
|
||||
icon: PropTypes.string.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
to: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
href: PropTypes.string,
|
||||
method: PropTypes.string,
|
||||
hideOnMobile: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default ColumnLink;
|
||||
|
||||
@ -11,7 +11,7 @@ import BundleContainer from '../containers/bundle_container';
|
||||
import ColumnLoading from './column_loading';
|
||||
import DrawerLoading from './drawer_loading';
|
||||
import BundleColumnError from './bundle_column_error';
|
||||
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, FavouritedStatuses } from '../../ui/util/async-components';
|
||||
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses } from '../../ui/util/async-components';
|
||||
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
import { scrollRight } from '../../../scroll';
|
||||
@ -23,6 +23,7 @@ const componentMap = {
|
||||
'PUBLIC': PublicTimeline,
|
||||
'COMMUNITY': CommunityTimeline,
|
||||
'HASHTAG': HashtagTimeline,
|
||||
'DIRECT': DirectTimeline,
|
||||
'FAVOURITES': FavouritedStatuses,
|
||||
};
|
||||
|
||||
|
||||
614
app/javascript/mastodon/features/ui/components/doodle_modal.js
Normal file
614
app/javascript/mastodon/features/ui/components/doodle_modal.js
Normal file
@ -0,0 +1,614 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '../../../components/button';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Atrament from 'atrament'; // the doodling library
|
||||
import { connect } from 'react-redux';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { doodleSet, uploadCompose } from '../../../actions/compose';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
import { debounce, mapValues } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// palette nicked from MyPaint, CC0
|
||||
const palette = [
|
||||
['rgb( 0, 0, 0)', 'Black'],
|
||||
['rgb( 38, 38, 38)', 'Gray 15'],
|
||||
['rgb( 77, 77, 77)', 'Grey 30'],
|
||||
['rgb(128, 128, 128)', 'Grey 50'],
|
||||
['rgb(171, 171, 171)', 'Grey 67'],
|
||||
['rgb(217, 217, 217)', 'Grey 85'],
|
||||
['rgb(255, 255, 255)', 'White'],
|
||||
['rgb(128, 0, 0)', 'Maroon'],
|
||||
['rgb(209, 0, 0)', 'English-red'],
|
||||
['rgb(255, 54, 34)', 'Tomato'],
|
||||
['rgb(252, 60, 3)', 'Orange-red'],
|
||||
['rgb(255, 140, 105)', 'Salmon'],
|
||||
['rgb(252, 232, 32)', 'Cadium-yellow'],
|
||||
['rgb(243, 253, 37)', 'Lemon yellow'],
|
||||
['rgb(121, 5, 35)', 'Dark crimson'],
|
||||
['rgb(169, 32, 62)', 'Deep carmine'],
|
||||
['rgb(255, 140, 0)', 'Orange'],
|
||||
['rgb(255, 168, 18)', 'Dark tangerine'],
|
||||
['rgb(217, 144, 88)', 'Persian orange'],
|
||||
['rgb(194, 178, 128)', 'Sand'],
|
||||
['rgb(255, 229, 180)', 'Peach'],
|
||||
['rgb(100, 54, 46)', 'Bole'],
|
||||
['rgb(108, 41, 52)', 'Dark cordovan'],
|
||||
['rgb(163, 65, 44)', 'Chestnut'],
|
||||
['rgb(228, 136, 100)', 'Dark salmon'],
|
||||
['rgb(255, 195, 143)', 'Apricot'],
|
||||
['rgb(255, 219, 188)', 'Unbleached silk'],
|
||||
['rgb(242, 227, 198)', 'Straw'],
|
||||
['rgb( 53, 19, 13)', 'Bistre'],
|
||||
['rgb( 84, 42, 14)', 'Dark chocolate'],
|
||||
['rgb(102, 51, 43)', 'Burnt sienna'],
|
||||
['rgb(184, 66, 0)', 'Sienna'],
|
||||
['rgb(216, 153, 12)', 'Yellow ochre'],
|
||||
['rgb(210, 180, 140)', 'Tan'],
|
||||
['rgb(232, 204, 144)', 'Dark wheat'],
|
||||
['rgb( 0, 49, 83)', 'Prussian blue'],
|
||||
['rgb( 48, 69, 119)', 'Dark grey blue'],
|
||||
['rgb( 0, 71, 171)', 'Cobalt blue'],
|
||||
['rgb( 31, 117, 254)', 'Blue'],
|
||||
['rgb(120, 180, 255)', 'Bright french blue'],
|
||||
['rgb(171, 200, 255)', 'Bright steel blue'],
|
||||
['rgb(208, 231, 255)', 'Ice blue'],
|
||||
['rgb( 30, 51, 58)', 'Medium jungle green'],
|
||||
['rgb( 47, 79, 79)', 'Dark slate grey'],
|
||||
['rgb( 74, 104, 93)', 'Dark grullo green'],
|
||||
['rgb( 0, 128, 128)', 'Teal'],
|
||||
['rgb( 67, 170, 176)', 'Turquoise'],
|
||||
['rgb(109, 174, 199)', 'Cerulean frost'],
|
||||
['rgb(173, 217, 186)', 'Tiffany green'],
|
||||
['rgb( 22, 34, 29)', 'Gray-asparagus'],
|
||||
['rgb( 36, 48, 45)', 'Medium dark teal'],
|
||||
['rgb( 74, 104, 93)', 'Xanadu'],
|
||||
['rgb(119, 198, 121)', 'Mint'],
|
||||
['rgb(175, 205, 182)', 'Timberwolf'],
|
||||
['rgb(185, 245, 246)', 'Celeste'],
|
||||
['rgb(193, 255, 234)', 'Aquamarine'],
|
||||
['rgb( 29, 52, 35)', 'Cal Poly Pomona'],
|
||||
['rgb( 1, 68, 33)', 'Forest green'],
|
||||
['rgb( 42, 128, 0)', 'Napier green'],
|
||||
['rgb(128, 128, 0)', 'Olive'],
|
||||
['rgb( 65, 156, 105)', 'Sea green'],
|
||||
['rgb(189, 246, 29)', 'Green-yellow'],
|
||||
['rgb(231, 244, 134)', 'Bright chartreuse'],
|
||||
['rgb(138, 23, 137)', 'Purple'],
|
||||
['rgb( 78, 39, 138)', 'Violet'],
|
||||
['rgb(193, 75, 110)', 'Dark thulian pink'],
|
||||
['rgb(222, 49, 99)', 'Cerise'],
|
||||
['rgb(255, 20, 147)', 'Deep pink'],
|
||||
['rgb(255, 102, 204)', 'Rose pink'],
|
||||
['rgb(255, 203, 219)', 'Pink'],
|
||||
['rgb(255, 255, 255)', 'White'],
|
||||
['rgb(229, 17, 1)', 'RGB Red'],
|
||||
['rgb( 0, 255, 0)', 'RGB Green'],
|
||||
['rgb( 0, 0, 255)', 'RGB Blue'],
|
||||
['rgb( 0, 255, 255)', 'CMYK Cyan'],
|
||||
['rgb(255, 0, 255)', 'CMYK Magenta'],
|
||||
['rgb(255, 255, 0)', 'CMYK Yellow'],
|
||||
];
|
||||
|
||||
// re-arrange to the right order for display
|
||||
let palReordered = [];
|
||||
for (let row = 0; row < 7; row++) {
|
||||
for (let col = 0; col < 11; col++) {
|
||||
palReordered.push(palette[col * 7 + row]);
|
||||
}
|
||||
palReordered.push(null); // null indicates a <br />
|
||||
}
|
||||
|
||||
// Utility for converting base64 image to binary for upload
|
||||
// https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
|
||||
function dataURLtoFile(dataurl, filename) {
|
||||
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||
while(n--){
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime });
|
||||
}
|
||||
|
||||
const DOODLE_SIZES = {
|
||||
normal: [500, 500, 'Square 500'],
|
||||
tootbanner: [702, 330, 'Tootbanner'],
|
||||
s640x480: [640, 480, '640×480 - 480p'],
|
||||
s800x600: [800, 600, '800×600 - SVGA'],
|
||||
s720x480: [720, 405, '720x405 - 16:9'],
|
||||
};
|
||||
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
options: state.getIn(['compose', 'doodle']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
/** Set options in the redux store */
|
||||
setOpt: (opts) => dispatch(doodleSet(opts)),
|
||||
/** Submit doodle for upload */
|
||||
submit: (file) => dispatch(uploadCompose([file])),
|
||||
});
|
||||
|
||||
/**
|
||||
* Doodling dialog with drawing canvas
|
||||
*
|
||||
* Keyboard shortcuts:
|
||||
* - Delete: Clear screen, fill with background color
|
||||
* - Backspace, Ctrl+Z: Undo one step
|
||||
* - Ctrl held while drawing: Use background color
|
||||
* - Shift held while clicking screen: Use fill tool
|
||||
*
|
||||
* Palette:
|
||||
* - Left mouse button: pick foreground
|
||||
* - Ctrl + left mouse button: pick background
|
||||
* - Right mouse button: pick background
|
||||
*/
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
export default class DoodleModal extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
options: ImmutablePropTypes.map,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
setOpt: PropTypes.func.isRequired,
|
||||
submit: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
//region Option getters/setters
|
||||
|
||||
/** Foreground color */
|
||||
get fg () {
|
||||
return this.props.options.get('fg');
|
||||
}
|
||||
set fg (value) {
|
||||
this.props.setOpt({ fg: value });
|
||||
}
|
||||
|
||||
/** Background color */
|
||||
get bg () {
|
||||
return this.props.options.get('bg');
|
||||
}
|
||||
set bg (value) {
|
||||
this.props.setOpt({ bg: value });
|
||||
}
|
||||
|
||||
/** Swap Fg and Bg for drawing */
|
||||
get swapped () {
|
||||
return this.props.options.get('swapped');
|
||||
}
|
||||
set swapped (value) {
|
||||
this.props.setOpt({ swapped: value });
|
||||
}
|
||||
|
||||
/** Mode - 'draw' or 'fill' */
|
||||
get mode () {
|
||||
return this.props.options.get('mode');
|
||||
}
|
||||
set mode (value) {
|
||||
this.props.setOpt({ mode: value });
|
||||
}
|
||||
|
||||
/** Base line weight */
|
||||
get weight () {
|
||||
return this.props.options.get('weight');
|
||||
}
|
||||
set weight (value) {
|
||||
this.props.setOpt({ weight: value });
|
||||
}
|
||||
|
||||
/** Drawing opacity */
|
||||
get opacity () {
|
||||
return this.props.options.get('opacity');
|
||||
}
|
||||
set opacity (value) {
|
||||
this.props.setOpt({ opacity: value });
|
||||
}
|
||||
|
||||
/** Adaptive stroke - change width with speed */
|
||||
get adaptiveStroke () {
|
||||
return this.props.options.get('adaptiveStroke');
|
||||
}
|
||||
set adaptiveStroke (value) {
|
||||
this.props.setOpt({ adaptiveStroke: value });
|
||||
}
|
||||
|
||||
/** Smoothing (for mouse drawing) */
|
||||
get smoothing () {
|
||||
return this.props.options.get('smoothing');
|
||||
}
|
||||
set smoothing (value) {
|
||||
this.props.setOpt({ smoothing: value });
|
||||
}
|
||||
|
||||
/** Size preset */
|
||||
get size () {
|
||||
return this.props.options.get('size');
|
||||
}
|
||||
set size (value) {
|
||||
this.props.setOpt({ size: value });
|
||||
}
|
||||
|
||||
//endregion
|
||||
|
||||
/** Key up handler */
|
||||
handleKeyUp = (e) => {
|
||||
if (e.target.nodeName === 'INPUT') return;
|
||||
|
||||
if (e.key === 'Delete') {
|
||||
e.preventDefault();
|
||||
this.handleClearBtn();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Backspace' || (e.key === 'z' && (e.ctrlKey || e.metaKey))) {
|
||||
e.preventDefault();
|
||||
this.undo();
|
||||
}
|
||||
|
||||
if (e.key === 'Control' || e.key === 'Meta') {
|
||||
this.controlHeld = false;
|
||||
this.swapped = false;
|
||||
}
|
||||
|
||||
if (e.key === 'Shift') {
|
||||
this.shiftHeld = false;
|
||||
this.mode = 'draw';
|
||||
}
|
||||
};
|
||||
|
||||
/** Key down handler */
|
||||
handleKeyDown = (e) => {
|
||||
if (e.key === 'Control' || e.key === 'Meta') {
|
||||
this.controlHeld = true;
|
||||
this.swapped = true;
|
||||
}
|
||||
|
||||
if (e.key === 'Shift') {
|
||||
this.shiftHeld = true;
|
||||
this.mode = 'fill';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Component installed in the DOM, do some initial set-up
|
||||
*/
|
||||
componentDidMount () {
|
||||
this.controlHeld = false;
|
||||
this.shiftHeld = false;
|
||||
this.swapped = false;
|
||||
window.addEventListener('keyup', this.handleKeyUp, false);
|
||||
window.addEventListener('keydown', this.handleKeyDown, false);
|
||||
};
|
||||
|
||||
/**
|
||||
* Tear component down
|
||||
*/
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('keyup', this.handleKeyUp, false);
|
||||
window.removeEventListener('keydown', this.handleKeyDown, false);
|
||||
if (this.sketcher) this.sketcher.destroy();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set reference to the canvas element.
|
||||
* This is called during component init
|
||||
*
|
||||
* @param elem - canvas element
|
||||
*/
|
||||
setCanvasRef = (elem) => {
|
||||
this.canvas = elem;
|
||||
if (elem) {
|
||||
elem.addEventListener('dirty', () => {
|
||||
this.saveUndo();
|
||||
this.sketcher._dirty = false;
|
||||
});
|
||||
|
||||
elem.addEventListener('click', () => {
|
||||
// sketcher bug - does not fire dirty on fill
|
||||
if (this.mode === 'fill') {
|
||||
this.saveUndo();
|
||||
}
|
||||
});
|
||||
|
||||
// prevent context menu
|
||||
elem.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
elem.addEventListener('mousedown', (e) => {
|
||||
if (e.button === 2) {
|
||||
this.swapped = true;
|
||||
}
|
||||
});
|
||||
|
||||
elem.addEventListener('mouseup', (e) => {
|
||||
if (e.button === 2) {
|
||||
this.swapped = this.controlHeld;
|
||||
}
|
||||
});
|
||||
|
||||
this.initSketcher(elem);
|
||||
this.mode = 'draw'; // Reset mode - it's confusing if left at 'fill'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set up the sketcher instance
|
||||
*
|
||||
* @param canvas - canvas element. Null if we're just resizing
|
||||
*/
|
||||
initSketcher (canvas = null) {
|
||||
const sizepreset = DOODLE_SIZES[this.size];
|
||||
|
||||
if (this.sketcher) this.sketcher.destroy();
|
||||
this.sketcher = new Atrament(canvas || this.canvas, sizepreset[0], sizepreset[1]);
|
||||
|
||||
if (canvas) {
|
||||
this.ctx = this.sketcher.context;
|
||||
this.updateSketcherSettings();
|
||||
}
|
||||
|
||||
this.clearScreen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Done button handler
|
||||
*/
|
||||
onDoneButton = () => {
|
||||
const dataUrl = this.sketcher.toImage();
|
||||
const file = dataURLtoFile(dataUrl, 'doodle.png');
|
||||
this.props.submit(file);
|
||||
this.props.onClose(); // close dialog
|
||||
};
|
||||
|
||||
/**
|
||||
* Cancel button handler
|
||||
*/
|
||||
onCancelButton = () => {
|
||||
if (this.undos.length > 1 && !confirm('Discard doodle? All changes will be lost!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.onClose(); // close dialog
|
||||
};
|
||||
|
||||
/**
|
||||
* Update sketcher options based on state
|
||||
*/
|
||||
updateSketcherSettings () {
|
||||
if (!this.sketcher) return;
|
||||
|
||||
if (this.oldSize !== this.size) this.initSketcher();
|
||||
|
||||
this.sketcher.color = (this.swapped ? this.bg : this.fg);
|
||||
this.sketcher.opacity = this.opacity;
|
||||
this.sketcher.weight = this.weight;
|
||||
this.sketcher.mode = this.mode;
|
||||
this.sketcher.smoothing = this.smoothing;
|
||||
this.sketcher.adaptiveStroke = this.adaptiveStroke;
|
||||
|
||||
this.oldSize = this.size;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fill screen with background color
|
||||
*/
|
||||
clearScreen = () => {
|
||||
this.ctx.fillStyle = this.bg;
|
||||
this.ctx.fillRect(-1, -1, this.canvas.width+2, this.canvas.height+2);
|
||||
this.undos = [];
|
||||
|
||||
this.doSaveUndo();
|
||||
};
|
||||
|
||||
/**
|
||||
* Undo one step
|
||||
*/
|
||||
undo = () => {
|
||||
if (this.undos.length > 1) {
|
||||
this.undos.pop();
|
||||
const buf = this.undos.pop();
|
||||
|
||||
this.sketcher.clear();
|
||||
this.ctx.putImageData(buf, 0, 0);
|
||||
this.doSaveUndo();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Save canvas content into the undo buffer immediately
|
||||
*/
|
||||
doSaveUndo = () => {
|
||||
this.undos.push(this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height));
|
||||
};
|
||||
|
||||
/**
|
||||
* Called on each canvas change.
|
||||
* Saves canvas content to the undo buffer after some period of inactivity.
|
||||
*/
|
||||
saveUndo = debounce(() => {
|
||||
this.doSaveUndo();
|
||||
}, 100);
|
||||
|
||||
/**
|
||||
* Palette left click.
|
||||
* Selects Fg color (or Bg, if Control/Meta is held)
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
onPaletteClick = (e) => {
|
||||
const c = e.target.dataset.color;
|
||||
|
||||
if (this.controlHeld) {
|
||||
this.bg = c;
|
||||
} else {
|
||||
this.fg = c;
|
||||
}
|
||||
|
||||
e.target.blur();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
/**
|
||||
* Palette right click.
|
||||
* Selects Bg color
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
onPaletteRClick = (e) => {
|
||||
this.bg = e.target.dataset.color;
|
||||
e.target.blur();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle click on the Draw mode button
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
setModeDraw = (e) => {
|
||||
this.mode = 'draw';
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle click on the Fill mode button
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
setModeFill = (e) => {
|
||||
this.mode = 'fill';
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle click on Smooth checkbox
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
tglSmooth = (e) => {
|
||||
this.smoothing = !this.smoothing;
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle click on Adaptive checkbox
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
tglAdaptive = (e) => {
|
||||
this.adaptiveStroke = !this.adaptiveStroke;
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle change of the Weight input field
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
setWeight = (e) => {
|
||||
this.weight = +e.target.value || 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set size - clalback from the select box
|
||||
*
|
||||
* @param e - event
|
||||
*/
|
||||
changeSize = (e) => {
|
||||
let newSize = e.target.value;
|
||||
if (newSize === this.oldSize) return;
|
||||
|
||||
if (this.undos.length > 1 && !confirm('Change size? This will erase your drawing!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.size = newSize;
|
||||
};
|
||||
|
||||
handleClearBtn = () => {
|
||||
if (this.undos.length > 1 && !confirm('Clear screen? This will erase your drawing!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.clearScreen();
|
||||
};
|
||||
|
||||
/**
|
||||
* Render the component
|
||||
*/
|
||||
render () {
|
||||
this.updateSketcherSettings();
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal doodle-modal'>
|
||||
<div className='doodle-modal__container'>
|
||||
<canvas ref={this.setCanvasRef} />
|
||||
</div>
|
||||
|
||||
<div className='doodle-modal__action-bar'>
|
||||
<div className='doodle-toolbar'>
|
||||
<Button text='Done' onClick={this.onDoneButton} />
|
||||
<Button text='Cancel' onClick={this.onCancelButton} />
|
||||
</div>
|
||||
<div className='filler' />
|
||||
<div className='doodle-toolbar with-inputs'>
|
||||
<div>
|
||||
<label htmlFor='dd_smoothing'>Smoothing</label>
|
||||
<span className='val'>
|
||||
<input type='checkbox' id='dd_smoothing' onChange={this.tglSmooth} checked={this.smoothing} />
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor='dd_adaptive'>Adaptive</label>
|
||||
<span className='val'>
|
||||
<input type='checkbox' id='dd_adaptive' onChange={this.tglAdaptive} checked={this.adaptiveStroke} />
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor='dd_weight'>Weight</label>
|
||||
<span className='val'>
|
||||
<input type='number' min={1} id='dd_weight' value={this.weight} onChange={this.setWeight} />
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<select aria-label='Canvas size' onInput={this.changeSize} defaultValue={this.size}>
|
||||
{ Object.values(mapValues(DOODLE_SIZES, (val, k) =>
|
||||
<option key={k} value={k}>{val[2]}</option>
|
||||
)) }
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className='doodle-toolbar'>
|
||||
<IconButton icon='pencil' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === 'draw'} inverted />
|
||||
<IconButton icon='bath' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === 'fill'} inverted />
|
||||
<IconButton icon='undo' title='Undo' label='Undo' onClick={this.undo} size={18} inverted />
|
||||
<IconButton icon='trash' title='Clear' label='Clear' onClick={this.handleClearBtn} size={18} inverted />
|
||||
</div>
|
||||
<div className='doodle-palette'>
|
||||
{
|
||||
palReordered.map((c, i) =>
|
||||
c === null ?
|
||||
<br key={i} /> :
|
||||
<button
|
||||
key={i}
|
||||
style={{ backgroundColor: c[0] }}
|
||||
onClick={this.onPaletteClick}
|
||||
onContextMenu={this.onPaletteRClick}
|
||||
data-color={c[0]}
|
||||
title={c[1]}
|
||||
className={classNames({
|
||||
'foreground': this.fg === c[0],
|
||||
'background': this.bg === c[0],
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -7,11 +7,13 @@ import ActionsModal from './actions_modal';
|
||||
import MediaModal from './media_modal';
|
||||
import VideoModal from './video_modal';
|
||||
import BoostModal from './boost_modal';
|
||||
import DoodleModal from './doodle_modal';
|
||||
import ConfirmationModal from './confirmation_modal';
|
||||
import {
|
||||
OnboardingModal,
|
||||
MuteModal,
|
||||
ReportModal,
|
||||
SettingsModal,
|
||||
EmbedModal,
|
||||
} from '../../../features/ui/util/async-components';
|
||||
|
||||
@ -20,9 +22,11 @@ const MODAL_COMPONENTS = {
|
||||
'ONBOARDING': OnboardingModal,
|
||||
'VIDEO': () => Promise.resolve({ default: VideoModal }),
|
||||
'BOOST': () => Promise.resolve({ default: BoostModal }),
|
||||
'DOODLE': () => Promise.resolve({ default: DoodleModal }),
|
||||
'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
|
||||
'MUTE': MuteModal,
|
||||
'REPORT': ReportModal,
|
||||
'SETTINGS': SettingsModal,
|
||||
'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
|
||||
'EMBED': EmbedModal,
|
||||
};
|
||||
@ -41,7 +45,7 @@ export default class ModalRoot extends React.PureComponent {
|
||||
|
||||
handleKeyUp = (e) => {
|
||||
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
||||
&& !!this.props.type) {
|
||||
&& !!this.props.type && !this.props.props.noEsc) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
@ -86,7 +90,7 @@ export default class ModalRoot extends React.PureComponent {
|
||||
}
|
||||
|
||||
renderLoading = modalId => () => {
|
||||
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
|
||||
return ['MEDIA', 'VIDEO', 'BOOST', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
|
||||
}
|
||||
|
||||
renderError = (props) => {
|
||||
|
||||
@ -10,7 +10,10 @@ import ComposeForm from '../../compose/components/compose_form';
|
||||
import Search from '../../compose/components/search';
|
||||
import NavigationBar from '../../compose/components/navigation_bar';
|
||||
import ColumnHeader from './column_header';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import {
|
||||
List as ImmutableList,
|
||||
Map as ImmutableMap,
|
||||
} from 'immutable';
|
||||
import { me } from '../../../initial_state';
|
||||
|
||||
const noop = () => { };
|
||||
@ -29,8 +32,8 @@ const PageOne = ({ acct, domain }) => (
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1>
|
||||
<p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p>
|
||||
<h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to {domain}!' values={{ domain }} /></h1>
|
||||
<p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='{domain} is an "instance" of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' values={{ domain }} /></p>
|
||||
<p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>@{acct}@{domain}</strong> }} /></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,7 +48,7 @@ const PageTwo = ({ myAccount }) => (
|
||||
<div className='onboarding-modal__page onboarding-modal__page-two'>
|
||||
<div className='figure non-interactive'>
|
||||
<div className='pseudo-drawer'>
|
||||
<NavigationBar account={myAccount} />
|
||||
<NavigationBar onClose={noop} account={myAccount} />
|
||||
</div>
|
||||
<ComposeForm
|
||||
text='Awoo! #introductions'
|
||||
@ -60,7 +63,9 @@ const PageTwo = ({ myAccount }) => (
|
||||
onClearSuggestions={noop}
|
||||
onFetchSuggestions={noop}
|
||||
onSuggestionSelected={noop}
|
||||
onPrivacyChange={noop}
|
||||
showSearch
|
||||
settings={ImmutableMap.of('side_arm', 'none')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -84,7 +89,7 @@ const PageThree = ({ myAccount }) => (
|
||||
/>
|
||||
|
||||
<div className='pseudo-drawer'>
|
||||
<NavigationBar account={myAccount} />
|
||||
<NavigationBar onClose={noop} account={myAccount} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -149,8 +154,8 @@ const PageSix = ({ admin, domain }) => {
|
||||
<div className='onboarding-modal__page onboarding-modal__page-six'>
|
||||
<h1><FormattedMessage id='onboarding.page_six.almost_done' defaultMessage='Almost done...' /></h1>
|
||||
{adminSection}
|
||||
<p><FormattedMessage id='onboarding.page_six.github' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
|
||||
<p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS, Android and other platforms.' values={{ apps: <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>
|
||||
<p><FormattedMessage id='onboarding.page_six.github' defaultMessage='{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ domain, fork: <a href='https://en.wikipedia.org/wiki/Fork_(software_development)' target='_blank' rel='noopener'>fork</a>, Mastodon: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>Mastodon</a>, github: <a href='https://github.com/glitch-soc/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
|
||||
<p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS, Android and other platforms.' values={{ domain, apps: <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>
|
||||
<p><em><FormattedMessage id='onboarding.page_six.appetoot' defaultMessage='Bon Appetoot!' /></em></p>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user