From 531dadad864ce6832033fbf8aa0c49fd228faf86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Sat, 14 Oct 2017 00:58:38 +0200 Subject: [PATCH] Doodle palette, options, fill tool (#172) --- app/javascript/mastodon/actions/compose.js | 9 + .../mastodon/components/icon_button.js | 10 +- .../containers/doodle_button_container.js | 20 +- .../features/ui/components/doodle_modal.js | 349 ++++++++++++++++-- app/javascript/mastodon/reducers/compose.js | 12 + app/javascript/styles/components.scss | 8 +- app/javascript/styles/doodle.scss | 70 ++++ 7 files changed, 430 insertions(+), 48 deletions(-) create mode 100644 app/javascript/styles/doodle.scss diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 8d035e82f7..24e64e06cc 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -45,6 +45,8 @@ export const COMPOSE_UPLOAD_CHANGE_REQUEST = 'COMPOSE_UPLOAD_UPDATE_REQUEST' export const COMPOSE_UPLOAD_CHANGE_SUCCESS = 'COMPOSE_UPLOAD_UPDATE_SUCCESS'; export const COMPOSE_UPLOAD_CHANGE_FAIL = 'COMPOSE_UPLOAD_UPDATE_FAIL'; +export const COMPOSE_DOODLE_SET = 'COMPOSE_DOODLE_SET'; + export function changeCompose(text) { return { type: COMPOSE_CHANGE, @@ -158,6 +160,13 @@ export function submitComposeFail(error) { }; }; +export function doodleSet(options) { + return { + type: COMPOSE_DOODLE_SET, + options: options, + }; +}; + export function uploadCompose(files) { return function (dispatch, getState) { if (getState().getIn(['compose', 'media_attachments']).size > 3) { diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index ca4b14b825..6fb191c6b4 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -22,6 +22,7 @@ export default class IconButton extends React.PureComponent { flip: PropTypes.bool, overlay: PropTypes.bool, tabIndex: PropTypes.string, + label: PropTypes.string, }; static defaultProps = { @@ -42,14 +43,18 @@ export default class IconButton extends React.PureComponent { } render () { - const style = { + let style = { fontSize: `${this.props.size}px`, - width: `${this.props.size * 1.28571429}px`, height: `${this.props.size * 1.28571429}px`, lineHeight: `${this.props.size}px`, ...this.props.style, ...(this.props.active ? this.props.activeStyle : {}), }; + if (!this.props.label) { + style.width = `${this.props.size * 1.28571429}px`; + } else { + style.textAlign = 'left'; + } const classes = ['icon-button']; @@ -102,6 +107,7 @@ export default class IconButton extends React.PureComponent { tabIndex={this.props.tabIndex} >