OKAY THIS WORKS THIS WORKS
This commit is contained in:
parent
10ca00107d
commit
cf1a103ee7
4 changed files with 100 additions and 10 deletions
|
@ -4,8 +4,9 @@ import NavigationContainer from './containers/navigation_container';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { mountCompose, unmountCompose } from '../../actions/compose';
|
import { mountCompose, unmountCompose } from '../../actions/compose';
|
||||||
|
import { changeLocalSetting } from '../../actions/local_settings';
|
||||||
import Link from 'react-router-dom/Link';
|
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 SearchContainer from './containers/search_container';
|
||||||
import Motion from 'react-motion/lib/Motion';
|
import Motion from 'react-motion/lib/Motion';
|
||||||
import spring from 'react-motion/lib/spring';
|
import spring from 'react-motion/lib/spring';
|
||||||
|
@ -21,6 +22,7 @@ const messages = defineMessages({
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
|
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
|
||||||
|
layout: state.getIn(['localSettings', 'layout']),
|
||||||
});
|
});
|
||||||
|
|
||||||
@connect(mapStateToProps)
|
@connect(mapStateToProps)
|
||||||
|
@ -32,6 +34,7 @@ export default class Compose extends React.PureComponent {
|
||||||
multiColumn: PropTypes.bool,
|
multiColumn: PropTypes.bool,
|
||||||
showSearch: PropTypes.bool,
|
showSearch: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
|
layout: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
|
@ -42,8 +45,14 @@ export default class Compose extends React.PureComponent {
|
||||||
this.props.dispatch(unmountCompose());
|
this.props.dispatch(unmountCompose());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onLayoutClick = (e) => {
|
||||||
|
const layout = e.currentTarget.getAttribute('data-mastodon-layout');
|
||||||
|
this.props.dispatch(changeLocalSetting(['layout'], layout));
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { multiColumn, showSearch, intl } = this.props;
|
const { multiColumn, showSearch, intl, layout } = this.props;
|
||||||
|
|
||||||
let header = '';
|
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 (
|
return (
|
||||||
<div className='drawer'>
|
<div className='drawer'>
|
||||||
{header}
|
{header}
|
||||||
|
@ -79,6 +129,9 @@ export default class Compose extends React.PureComponent {
|
||||||
}
|
}
|
||||||
</Motion>
|
</Motion>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{layoutContent}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -658,6 +658,22 @@
|
||||||
{
|
{
|
||||||
"defaultMessage": "Logout",
|
"defaultMessage": "Logout",
|
||||||
"id": "navigation_bar.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"
|
"path": "app/javascript/mastodon/features/compose/index.json"
|
||||||
|
|
|
@ -79,6 +79,10 @@
|
||||||
"home.column_settings.show_reblogs": "Show boosts",
|
"home.column_settings.show_reblogs": "Show boosts",
|
||||||
"home.column_settings.show_replies": "Show replies",
|
"home.column_settings.show_replies": "Show replies",
|
||||||
"home.settings": "Column settings",
|
"home.settings": "Column settings",
|
||||||
|
"layout.auto": "Auto",
|
||||||
|
"layout.current_is": "Your current layout is:",
|
||||||
|
"layout.desktop": "Desktop",
|
||||||
|
"layout.mobile": "Mobile",
|
||||||
"lightbox.close": "Close",
|
"lightbox.close": "Close",
|
||||||
"loading_indicator.label": "Loading...",
|
"loading_indicator.label": "Loading...",
|
||||||
"media_gallery.toggle_visible": "Toggle visibility",
|
"media_gallery.toggle_visible": "Toggle visibility",
|
||||||
|
|
|
@ -1447,28 +1447,26 @@
|
||||||
.drawer__pager {
|
.drawer__pager {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex-grow: 1;
|
flex: 0 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer__inner {
|
.drawer__inner {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: lighten($ui-base-color, 13%);
|
background: lighten($ui-base-color, 13%);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&.darker {
|
&.darker {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
background: $ui-base-color;
|
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 {
|
.tabs-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: lighten($ui-base-color, 8%);
|
background: lighten($ui-base-color, 8%);
|
||||||
|
|
Loading…
Reference in a new issue