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%);