treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

OKAY THIS WORKS THIS WORKS

lolsob-rspec
kibigo! 2017-06-24 20:04:46 -07:00
parent 10ca00107d
commit cf1a103ee7
4 changed files with 100 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/javascript/mastodon/features/compose/index.js
View File

@ -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>
);
}

16
app/javascript/mastodon/locales/defaultMessages.json
View File

@ -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"

4
app/javascript/mastodon/locales/en.json
View File

@ -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",

33
app/javascript/styles/components.scss
View File

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