diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index 747fe421641..51216719354 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -4,8 +4,9 @@ import NavigationContainer from './containers/navigation_container'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { mountCompose, unmountCompose } from '../../actions/compose'; +import { changeLocalSetting } from '../../actions/local_settings'; import Link from 'react-router-dom/Link'; -import { injectIntl, defineMessages } from 'react-intl'; +import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import SearchContainer from './containers/search_container'; import Motion from 'react-motion/lib/Motion'; import spring from 'react-motion/lib/spring'; @@ -21,6 +22,7 @@ const messages = defineMessages({ const mapStateToProps = state => ({ showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), + layout: state.getIn(['localSettings', 'layout']), }); @connect(mapStateToProps) @@ -32,6 +34,7 @@ export default class Compose extends React.PureComponent { multiColumn: PropTypes.bool, showSearch: PropTypes.bool, intl: PropTypes.object.isRequired, + layout: PropTypes.string, }; componentDidMount () { @@ -42,8 +45,14 @@ export default class Compose extends React.PureComponent { this.props.dispatch(unmountCompose()); } + onLayoutClick = (e) => { + const layout = e.currentTarget.getAttribute('data-mastodon-layout'); + this.props.dispatch(changeLocalSetting(['layout'], layout)); + e.preventDefault(); + } + render () { - const { multiColumn, showSearch, intl } = this.props; + const { multiColumn, showSearch, intl, layout } = this.props; let header = ''; @@ -59,6 +68,47 @@ export default class Compose extends React.PureComponent { ); } + let layoutContent = ''; + + switch (layout) { + case 'single': + layoutContent = ( +
+

+ +

+

+ +

+
+ ); + break; + case 'multiple': + layoutContent = ( +
+

+ +

+

+ +

+
+ ); + break; + default: + layoutContent = ( +
+

+ +

+

+ +

+
+ ); + break; + } + return (
{header} @@ -79,6 +129,9 @@ export default class Compose extends React.PureComponent { }
+ + {layoutContent} + ); } diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json index dd790f659be..803d9b292ee 100644 --- a/app/javascript/mastodon/locales/defaultMessages.json +++ b/app/javascript/mastodon/locales/defaultMessages.json @@ -658,6 +658,22 @@ { "defaultMessage": "Logout", "id": "navigation_bar.logout" + }, + { + "defaultMessage": "Your current layout is:", + "id": "layout.current_is" + }, + { + "defaultMessage": "Mobile", + "id": "layout.mobile" + }, + { + "defaultMessage": "Desktop", + "id": "layout.desktop" + }, + { + "defaultMessage": "Auto", + "id": "layout.auto" } ], "path": "app/javascript/mastodon/features/compose/index.json" diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 8fb409618b3..c19d4aa024c 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -79,6 +79,10 @@ "home.column_settings.show_reblogs": "Show boosts", "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", + "layout.auto": "Auto", + "layout.current_is": "Your current layout is:", + "layout.desktop": "Desktop", + "layout.mobile": "Mobile", "lightbox.close": "Close", "loading_indicator.label": "Loading...", "media_gallery.toggle_visible": "Toggle visibility", diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index e204f36374f..1fa20a7312b 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1447,28 +1447,26 @@ .drawer__pager { box-sizing: border-box; padding: 0; - flex-grow: 1; + flex: 0 0 auto; position: relative; overflow: hidden; - display: flex; } .drawer__inner { - position: absolute; - top: 0; - left: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; - display: flex; - flex-direction: column; overflow: hidden; overflow-y: auto; width: 100%; - height: 100%; &.darker { + position: absolute; + top: 0; + left: 0; background: $ui-base-color; + width: 100%; + height: 100%; } } @@ -1496,6 +1494,25 @@ } } +.layout__selector { + margin-top: 20px; + + a { + text-decoration: underline; + cursor: pointer; + color: lighten($ui-base-color, 26%); + } + + b { + font-weight: bold; + } + + p { + font-size: 13px; + color: $ui-secondary-color; + } +} + .tabs-bar { display: flex; background: lighten($ui-base-color, 8%);