mirror of https://github.com/Siphonay/mastodon
OKAY THIS WORKS THIS WORKS
This commit is contained in:
parent
da05cde721
commit
ca0d30c04b
|
@ -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 = (
|
||||
<div className='layout__selector'>
|
||||
<p>
|
||||
<FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></b>
|
||||
</p>
|
||||
<p>
|
||||
<a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='auto'><FormattedMessage id='layout.auto' defaultMessage='Auto' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='multiple'><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
case 'multiple':
|
||||
layoutContent = (
|
||||
<div className='layout__selector'>
|
||||
<p>
|
||||
<FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></b>
|
||||
</p>
|
||||
<p>
|
||||
<a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='auto'><FormattedMessage id='layout.auto' defaultMessage='Auto' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='single'><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
layoutContent = (
|
||||
<div className='layout__selector'>
|
||||
<p>
|
||||
<FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.auto' defaultMessage='Auto' /></b>
|
||||
</p>
|
||||
<p>
|
||||
<a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='multiple'><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='single'><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='drawer'>
|
||||
{header}
|
||||
|
@ -79,6 +129,9 @@ export default class Compose extends React.PureComponent {
|
|||
}
|
||||
</Motion>
|
||||
</div>
|
||||
|
||||
{layoutContent}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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%);
|
||||
|
|
Loading…
Reference in New Issue