From 5cdb4c483f732235d3b0b07eeed34757b33b0f83 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 24 May 2019 15:57:31 +0200
Subject: [PATCH 01/14] Forward port version bumps to 2.8.3 and 2.8.4 (#10819)
* Bump version to 2.8.3
* Bump version to 2.8.4
---
CHANGELOG.md | 33 +++++++++++++++++++++++++++++++++
lib/mastodon/version.rb | 2 +-
2 files changed, 34 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 222b7411d4..f183b6f5ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,39 @@ Changelog
All notable changes to this project will be documented in this file.
+## [2.8.4] - 2019-05-24
+### Fixed
+
+- Fix delivery not retrying on some inbox errors that should be retriable ([ThibG](https://github.com/tootsuite/mastodon/pull/10812))
+- Fix unnecessary 5 minute cooldowns on signature verifications in some cases ([ThibG](https://github.com/tootsuite/mastodon/pull/10813))
+- Fix possible race condition when processing statuses ([ThibG](https://github.com/tootsuite/mastodon/pull/10815))
+
+### Security
+
+- Require specific OAuth scopes for specific endpoints of the streaming API, instead of merely requiring a token for all endpoints, and allow using WebSockets protocol negotiation to specify the access token instead of using a query string ([ThibG](https://github.com/tootsuite/mastodon/pull/10818))
+
+## [2.8.3] - 2019-05-19
+### Added
+
+- Add `og:image:alt` OpenGraph tag ([BenLubar](https://github.com/tootsuite/mastodon/pull/10779))
+- Add clickable area below avatar in statuses in web UI ([Dar13](https://github.com/tootsuite/mastodon/pull/10766))
+- Add crossed-out eye icon on account gallery in web UI ([Kjwon15](https://github.com/tootsuite/mastodon/pull/10715))
+- Add media description tooltip to thumbnails in web UI ([ThibG](https://github.com/tootsuite/mastodon/pull/10713))
+
+### Changed
+
+- Change "mark as sensitive" button into a checkbox for clarity ([ThibG](https://github.com/tootsuite/mastodon/pull/10748))
+
+### Fixed
+
+- Fix bug allowing users to publicly boost their private statuses ([ThibG](https://github.com/tootsuite/mastodon/pull/10775), [ThibG](https://github.com/tootsuite/mastodon/pull/10783))
+- Fix performance in formatter by a little ([ThibG](https://github.com/tootsuite/mastodon/pull/10765))
+- Fix some colors in the light theme ([yuzulabo](https://github.com/tootsuite/mastodon/pull/10754))
+- Fix some colors of the high contrast theme ([yuzulabo](https://github.com/tootsuite/mastodon/pull/10711))
+- Fix ambivalent active state of poll refresh button in web UI ([MaciekBaron](https://github.com/tootsuite/mastodon/pull/10720))
+- Fix duplicate posting being possible from web UI ([hinaloe](https://github.com/tootsuite/mastodon/pull/10785))
+- Fix "invited by" not showing up in admin UI ([ThibG](https://github.com/tootsuite/mastodon/pull/10791))
+
## [2.8.2] - 2019-05-05
### Added
diff --git a/lib/mastodon/version.rb b/lib/mastodon/version.rb
index 91f45e45de..59ded05f78 100644
--- a/lib/mastodon/version.rb
+++ b/lib/mastodon/version.rb
@@ -13,7 +13,7 @@ module Mastodon
end
def patch
- 2
+ 4
end
def pre
From 1e5532e693d9533ee37f553aeb191e284178fa52 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 May 2019 21:27:00 +0200
Subject: [PATCH 02/14] Add responsive panels to the single-column layout
(#10820)
* Add responsive panels to the single-column layout
* Fixes
* Fix not being able to save the preference
* Fix code style issues
* Set max-height on the compose textarea and add a link to relationship manager
---
.../settings/preferences_controller.rb | 1 +
app/javascript/mastodon/actions/compose.js | 20 +-
app/javascript/mastodon/actions/statuses.js | 8 +-
.../mastodon/components/autosuggest_input.js | 2 +-
.../features/compose/components/action_bar.js | 2 +-
.../compose/components/navigation_bar.js | 2 +-
.../features/compose/components/search.js | 10 +
.../features/getting_started/index.js | 17 +-
.../mastodon/features/search/index.js | 17 ++
.../features/ui/components/columns_area.js | 14 +-
.../features/ui/components/compose_panel.js | 41 ++++
.../features/ui/components/list_panel.js | 55 +++++
.../ui/components/navigation_panel.js | 27 +++
.../components/notifications_counter_icon.js | 5 +-
.../features/ui/components/tabs_bar.js | 14 +-
app/javascript/mastodon/features/ui/index.js | 14 +-
.../features/ui/util/async-components.js | 4 +
app/javascript/mastodon/initial_state.js | 1 +
app/javascript/mastodon/reducers/settings.js | 2 -
.../styles/mastodon/components.scss | 214 ++++++++++++++----
app/lib/user_settings_decorator.rb | 5 +
app/models/user.rb | 3 +-
app/serializers/initial_state_serializer.rb | 1 +
app/views/settings/preferences/show.html.haml | 3 +
config/locales/simple_form.en.yml | 2 +
config/settings.yml | 1 +
26 files changed, 389 insertions(+), 96 deletions(-)
create mode 100644 app/javascript/mastodon/features/search/index.js
create mode 100644 app/javascript/mastodon/features/ui/components/compose_panel.js
create mode 100644 app/javascript/mastodon/features/ui/components/list_panel.js
create mode 100644 app/javascript/mastodon/features/ui/components/navigation_panel.js
diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb
index 5afdf0eec0..930ff70e7f 100644
--- a/app/controllers/settings/preferences_controller.rb
+++ b/app/controllers/settings/preferences_controller.rb
@@ -49,6 +49,7 @@ class Settings::PreferencesController < Settings::BaseController
:setting_hide_network,
:setting_aggregate_reblogs,
:setting_show_application,
+ :setting_advanced_layout,
notification_emails: %i(follow follow_request reblog favourite mention digest report pending_account),
interactions: %i(must_be_follower must_be_following)
)
diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
index 94062f2be8..33e6313640 100644
--- a/app/javascript/mastodon/actions/compose.js
+++ b/app/javascript/mastodon/actions/compose.js
@@ -63,6 +63,14 @@ const messages = defineMessages({
uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
});
+const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 3);
+
+export const ensureComposeIsVisible = (getState, routerHistory) => {
+ if (!getState().getIn(['compose', 'mounted']) && window.innerWidth < COMPOSE_PANEL_BREAKPOINT) {
+ routerHistory.push('/statuses/new');
+ }
+};
+
export function changeCompose(text) {
return {
type: COMPOSE_CHANGE,
@@ -77,9 +85,7 @@ export function replyCompose(status, routerHistory) {
status: status,
});
- if (!getState().getIn(['compose', 'mounted'])) {
- routerHistory.push('/statuses/new');
- }
+ ensureComposeIsVisible(getState, routerHistory);
};
};
@@ -102,9 +108,7 @@ export function mentionCompose(account, routerHistory) {
account: account,
});
- if (!getState().getIn(['compose', 'mounted'])) {
- routerHistory.push('/statuses/new');
- }
+ ensureComposeIsVisible(getState, routerHistory);
};
};
@@ -115,9 +119,7 @@ export function directCompose(account, routerHistory) {
account: account,
});
- if (!getState().getIn(['compose', 'mounted'])) {
- routerHistory.push('/statuses/new');
- }
+ ensureComposeIsVisible(getState, routerHistory);
};
};
diff --git a/app/javascript/mastodon/actions/statuses.js b/app/javascript/mastodon/actions/statuses.js
index 3916b9ac14..06a19afc3a 100644
--- a/app/javascript/mastodon/actions/statuses.js
+++ b/app/javascript/mastodon/actions/statuses.js
@@ -4,6 +4,7 @@ import { evictStatus } from '../storage/modifier';
import { deleteFromTimelines } from './timelines';
import { importFetchedStatus, importFetchedStatuses, importAccount, importStatus } from './importer';
+import { ensureComposeIsVisible } from './compose';
export const STATUS_FETCH_REQUEST = 'STATUS_FETCH_REQUEST';
export const STATUS_FETCH_SUCCESS = 'STATUS_FETCH_SUCCESS';
@@ -139,7 +140,7 @@ export function redraft(status, raw_text) {
};
};
-export function deleteStatus(id, router, withRedraft = false) {
+export function deleteStatus(id, routerHistory, withRedraft = false) {
return (dispatch, getState) => {
let status = getState().getIn(['statuses', id]);
@@ -156,10 +157,7 @@ export function deleteStatus(id, router, withRedraft = false) {
if (withRedraft) {
dispatch(redraft(status, response.data.text));
-
- if (!getState().getIn(['compose', 'mounted'])) {
- router.push('/statuses/new');
- }
+ ensureComposeIsVisible(getState, routerHistory);
}
}).catch(error => {
dispatch(deleteStatusFail(id, error));
diff --git a/app/javascript/mastodon/components/autosuggest_input.js b/app/javascript/mastodon/components/autosuggest_input.js
index 4b4aa8f0e5..c7d965b53a 100644
--- a/app/javascript/mastodon/components/autosuggest_input.js
+++ b/app/javascript/mastodon/components/autosuggest_input.js
@@ -49,7 +49,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
autoFocus: PropTypes.bool,
className: PropTypes.string,
id: PropTypes.string,
- searchTokens: ImmutablePropTypes.list,
+ searchTokens: PropTypes.arrayOf(PropTypes.string),
maxLength: PropTypes.number,
};
diff --git a/app/javascript/mastodon/features/compose/components/action_bar.js b/app/javascript/mastodon/features/compose/components/action_bar.js
index 95d6eeb06d..077226d70b 100644
--- a/app/javascript/mastodon/features/compose/components/action_bar.js
+++ b/app/javascript/mastodon/features/compose/components/action_bar.js
@@ -46,7 +46,7 @@ class ActionBar extends React.PureComponent {
return (
<div className='compose__action-bar'>
<div className='compose__action-bar-dropdown'>
- <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
+ <DropdownMenuContainer items={menu} icon='chevron-down' size={16} direction='right' />
</div>
</div>
);
diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.js b/app/javascript/mastodon/features/compose/components/navigation_bar.js
index 9910eb4f9f..d8d49cb95c 100644
--- a/app/javascript/mastodon/features/compose/components/navigation_bar.js
+++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js
@@ -20,7 +20,7 @@ export default class NavigationBar extends ImmutablePureComponent {
<div className='navigation-bar'>
<Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
- <Avatar account={this.props.account} size={40} />
+ <Avatar account={this.props.account} size={48} />
</Permalink>
<div className='navigation-bar__profile'>
diff --git a/app/javascript/mastodon/features/compose/components/search.js b/app/javascript/mastodon/features/compose/components/search.js
index 774658b1be..6833c43ef4 100644
--- a/app/javascript/mastodon/features/compose/components/search.js
+++ b/app/javascript/mastodon/features/compose/components/search.js
@@ -47,6 +47,10 @@ class SearchPopout extends React.PureComponent {
export default @injectIntl
class Search extends React.PureComponent {
+ static contextTypes = {
+ router: PropTypes.object.isRequired,
+ };
+
static propTypes = {
value: PropTypes.string.isRequired,
submitted: PropTypes.bool,
@@ -54,6 +58,7 @@ class Search extends React.PureComponent {
onSubmit: PropTypes.func.isRequired,
onClear: PropTypes.func.isRequired,
onShow: PropTypes.func.isRequired,
+ openInRoute: PropTypes.bool,
intl: PropTypes.object.isRequired,
};
@@ -76,7 +81,12 @@ class Search extends React.PureComponent {
handleKeyUp = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
+
this.props.onSubmit();
+
+ if (this.props.openInRoute) {
+ this.context.router.history.push('/search');
+ }
} else if (e.key === 'Escape') {
document.querySelector('.ui').parentElement.focus();
}
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index a671578a00..cb3efb57bc 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -9,12 +9,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { me, invitesEnabled, version, profile_directory, repository, source_url } from '../../initial_state';
import { fetchFollowRequests } from 'mastodon/actions/accounts';
-import { changeSetting } from 'mastodon/actions/settings';
import { List as ImmutableList } from 'immutable';
import { Link } from 'react-router-dom';
import NavigationBar from '../compose/components/navigation_bar';
import Icon from 'mastodon/components/icon';
-import Toggle from 'react-toggle';
const messages = defineMessages({
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
@@ -41,12 +39,10 @@ const messages = defineMessages({
const mapStateToProps = state => ({
myAccount: state.getIn(['accounts', me]),
unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
- forceSingleColumn: state.getIn(['settings', 'forceSingleColumn'], false),
});
const mapDispatchToProps = dispatch => ({
fetchFollowRequests: () => dispatch(fetchFollowRequests()),
- changeForceSingleColumn: checked => dispatch(changeSetting(['forceSingleColumn'], checked)),
});
const badgeDisplay = (number, limit) => {
@@ -71,8 +67,6 @@ class GettingStarted extends ImmutablePureComponent {
fetchFollowRequests: PropTypes.func.isRequired,
unreadFollowRequests: PropTypes.number,
unreadNotifications: PropTypes.number,
- forceSingleColumn: PropTypes.bool,
- changeForceSingleColumn: PropTypes.func.isRequired,
};
componentDidMount () {
@@ -83,12 +77,8 @@ class GettingStarted extends ImmutablePureComponent {
}
}
- handleForceSingleColumnChange = ({ target }) => {
- this.props.changeForceSingleColumn(target.checked);
- }
-
render () {
- const { intl, myAccount, multiColumn, unreadFollowRequests, forceSingleColumn } = this.props;
+ const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props;
const navItems = [];
let i = 1;
@@ -187,11 +177,6 @@ class GettingStarted extends ImmutablePureComponent {
</p>
</div>
</div>
-
- <label className='navigational-toggle'>
- <FormattedMessage id='getting_started.use_simple_layout' defaultMessage='Use simple layout' />
- <Toggle checked={forceSingleColumn} onChange={this.handleForceSingleColumnChange} />
- </label>
</Column>
);
}
diff --git a/app/javascript/mastodon/features/search/index.js b/app/javascript/mastodon/features/search/index.js
new file mode 100644
index 0000000000..76bf70d4bd
--- /dev/null
+++ b/app/javascript/mastodon/features/search/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import SearchContainer from 'mastodon/features/compose/containers/search_container';
+import SearchResultsContainer from 'mastodon/features/compose/containers/search_results_container';
+
+const Search = () => (
+ <div className='column search-page'>
+ <SearchContainer />
+
+ <div className='drawer__pager'>
+ <div className='drawer__inner darker'>
+ <SearchResultsContainer />
+ </div>
+ </div>
+ </div>
+);
+
+export default Search;
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index ae07b89075..756db3c61a 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -14,6 +14,8 @@ import DrawerLoading from './drawer_loading';
import BundleColumnError from './bundle_column_error';
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from '../../ui/util/async-components';
import Icon from 'mastodon/components/icon';
+import ComposePanel from './compose_panel';
+import NavigationPanel from './navigation_panel';
import detectPassiveEvents from 'detect-passive-events';
import { scrollRight } from '../../../scroll';
@@ -173,14 +175,22 @@ class ColumnsArea extends ImmutablePureComponent {
return (
<div className='columns-area__panels'>
- <div className='columns-area__panels__pane' />
+ <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
+ <div className='columns-area__panels__pane__inner'>
+ <ComposePanel />
+ </div>
+ </div>
<div className='columns-area__panels__main'>
<TabsBar key='tabs' />
{content}
</div>
- <div className='columns-area__panels__pane' />
+ <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
+ <div className='columns-area__panels__pane__inner'>
+ <NavigationPanel />
+ </div>
+ </div>
{floatingActionButton}
</div>
diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js
new file mode 100644
index 0000000000..7c1158e5d2
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/compose_panel.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import SearchContainer from 'mastodon/features/compose/containers/search_container';
+import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
+import NavigationContainer from 'mastodon/features/compose/containers/navigation_container';
+import { invitesEnabled, version, repository, source_url } from 'mastodon/initial_state';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+
+const ComposePanel = () => (
+ <div className='compose-panel'>
+ <SearchContainer openInRoute />
+ <NavigationContainer />
+ <ComposeFormContainer />
+
+ <div className='flex-spacer' />
+
+ <div className='getting-started__footer'>
+ <ul>
+ {invitesEnabled && <li><a href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a> · </li>}
+ <li><Link to='/keyboard-shortcuts'><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></Link> · </li>
+ <li><a href='/auth/edit'><FormattedMessage id='getting_started.security' defaultMessage='Security' /></a> · </li>
+ <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this server' /></a> · </li>
+ <li><a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Mobile apps' /></a> · </li>
+ <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li>
+ <li><a href='/settings/applications' target='_blank'><FormattedMessage id='getting_started.developers' defaultMessage='Developers' /></a> · </li>
+ <li><a href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a> · </li>
+ <li><a href='/auth/sign_out' data-method='delete'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a></li>
+ </ul>
+
+ <p>
+ <FormattedMessage
+ id='getting_started.open_source_notice'
+ defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
+ values={{ github: <span><a href={source_url} rel='noopener' target='_blank'>{repository}</a> (v{version})</span> }}
+ />
+ </p>
+ </div>
+ </div>
+);
+
+export default ComposePanel;
diff --git a/app/javascript/mastodon/features/ui/components/list_panel.js b/app/javascript/mastodon/features/ui/components/list_panel.js
new file mode 100644
index 0000000000..9a52c1b10c
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/list_panel.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { fetchLists } from 'mastodon/actions/lists';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { NavLink, withRouter } from 'react-router-dom';
+import Icon from 'mastodon/components/icon';
+
+const getOrderedLists = createSelector([state => state.get('lists')], lists => {
+ if (!lists) {
+ return lists;
+ }
+
+ return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+});
+
+const mapStateToProps = state => ({
+ lists: getOrderedLists(state),
+});
+
+export default @withRouter
+@connect(mapStateToProps)
+class ListPanel extends ImmutablePureComponent {
+
+ static propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ lists: ImmutablePropTypes.list,
+ };
+
+ componentDidMount () {
+ const { dispatch } = this.props;
+ dispatch(fetchLists());
+ }
+
+ render () {
+ const { lists } = this.props;
+
+ if (!lists) {
+ return null;
+ }
+
+ return (
+ <div>
+ <hr />
+
+ {lists.map(list => (
+ <NavLink key={list.get('id')} className='column-link column-link--transparent' strict to={`/timelines/list/${list.get('id')}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.get('title')}</NavLink>
+ ))}
+ </div>
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
new file mode 100644
index 0000000000..e2d962c630
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { NavLink, withRouter } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import Icon from 'mastodon/components/icon';
+import NotificationsCounterIcon from './notifications_counter_icon';
+import ListPanel from './list_panel';
+
+const NavigationPanel = () => (
+ <div className='navigation-panel'>
+ <NavLink className='column-link column-link--transparent' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon className='column-link__icon' id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
+ <NavLink className='column-link column-link--transparent' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon className='column-link__icon' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
+ <NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
+ <NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
+ <NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' id='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
+ <NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' id='star' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
+ <NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' id='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>
+
+ <ListPanel />
+
+ <hr />
+
+ <a className='column-link column-link--transparent' href='/settings/preferences' target='_blank'><Icon className='column-link__icon' id='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>
+ <a className='column-link column-link--transparent' href='/relationships' target='_blank'><Icon className='column-link__icon' id='address-book-o' fixedWidth /><FormattedMessage id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers' /></a>
+ </div>
+);
+
+export default withRouter(NavigationPanel);
diff --git a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
index deb907866d..9673c57fef 100644
--- a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
@@ -9,15 +9,16 @@ const mapStateToProps = state => ({
const formatNumber = num => num > 99 ? '99+' : num;
-const NotificationsCounterIcon = ({ count }) => (
+const NotificationsCounterIcon = ({ count, className }) => (
<i className='icon-with-badge'>
- <Icon id='bell' fixedWidth />
+ <Icon id='bell' fixedWidth className={className} />
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
</i>
);
NotificationsCounterIcon.propTypes = {
count: PropTypes.number.isRequired,
+ className: PropTypes.string,
};
export default connect(mapStateToProps)(NotificationsCounterIcon);
diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js
index 979b782bb0..29583d3d79 100644
--- a/app/javascript/mastodon/features/ui/components/tabs_bar.js
+++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js
@@ -8,14 +8,12 @@ import Icon from 'mastodon/components/icon';
import NotificationsCounterIcon from './notifications_counter_icon';
export const links = [
- <NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>,
- <NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
-
- <NavLink className='tabs-bar__link secondary' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>,
- <NavLink className='tabs-bar__link secondary' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>,
- <NavLink className='tabs-bar__link primary' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><Icon id='search' fixedWidth /><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></NavLink>,
-
- <NavLink className='tabs-bar__link primary' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><Icon id='bars' fixedWidth /></NavLink>,
+ <NavLink className='tabs-bar__link' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>,
+ <NavLink className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
+ <NavLink className='tabs-bar__link' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>,
+ <NavLink className='tabs-bar__link' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>,
+ <NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><Icon id='search' fixedWidth /><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></NavLink>,
+ <NavLink className='tabs-bar__link' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><Icon id='bars' fixedWidth /></NavLink>,
];
export function getIndex (path) {
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 6d52791570..61fd77af74 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -44,8 +44,9 @@ import {
Mutes,
PinnedStatuses,
Lists,
+ Search,
} from './util/async-components';
-import { me } from '../../initial_state';
+import { me, forceSingleColumn } from '../../initial_state';
import { previewState as previewMediaState } from './components/media_modal';
import { previewState as previewVideoState } from './components/video_modal';
@@ -62,7 +63,6 @@ const mapStateToProps = state => ({
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
- forceSingleColumn: state.getIn(['settings', 'forceSingleColumn'], false),
});
const keyMap = {
@@ -101,7 +101,6 @@ class SwitchingColumnsArea extends React.PureComponent {
children: PropTypes.node,
location: PropTypes.object,
onLayoutChange: PropTypes.func.isRequired,
- forceSingleColumn: PropTypes.bool,
};
state = {
@@ -140,7 +139,7 @@ class SwitchingColumnsArea extends React.PureComponent {
}
render () {
- const { children, forceSingleColumn } = this.props;
+ const { children } = this.props;
const { mobile } = this.state;
const singleColumn = forceSingleColumn || mobile;
const redirect = singleColumn ? <Redirect from='/' to='/timelines/home' exact /> : <Redirect from='/' to='/getting-started' exact />;
@@ -162,7 +161,7 @@ class SwitchingColumnsArea extends React.PureComponent {
<WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
<WrappedRoute path='/pinned' component={PinnedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
- <WrappedRoute path='/search' component={Compose} content={children} componentParams={{ isSearchPage: true }} />
+ <WrappedRoute path='/search' component={Search} content={children} />
<WrappedRoute path='/statuses/new' component={Compose} content={children} />
<WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
@@ -207,7 +206,6 @@ class UI extends React.PureComponent {
location: PropTypes.object,
intl: PropTypes.object.isRequired,
dropdownMenuIsOpen: PropTypes.bool,
- forceSingleColumn: PropTypes.bool,
};
state = {
@@ -456,7 +454,7 @@ class UI extends React.PureComponent {
render () {
const { draggingOver } = this.state;
- const { children, isComposing, location, dropdownMenuIsOpen, forceSingleColumn } = this.props;
+ const { children, isComposing, location, dropdownMenuIsOpen } = this.props;
const handlers = {
help: this.handleHotkeyToggleHelp,
@@ -482,7 +480,7 @@ class UI extends React.PureComponent {
return (
<HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
<div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
- <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} forceSingleColumn={forceSingleColumn}>
+ <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
{children}
</SwitchingColumnsArea>
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
index 235fd2a073..6e8ed163a5 100644
--- a/app/javascript/mastodon/features/ui/util/async-components.js
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -129,3 +129,7 @@ export function ListEditor () {
export function ListAdder () {
return import(/*webpackChunkName: "features/list_adder" */'../../list_adder');
}
+
+export function Search () {
+ return import(/*webpackChunkName: "features/search" */'../../search');
+}
diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js
index 74bcfee586..125508c234 100644
--- a/app/javascript/mastodon/initial_state.js
+++ b/app/javascript/mastodon/initial_state.js
@@ -19,5 +19,6 @@ export const version = getMeta('version');
export const mascot = getMeta('mascot');
export const profile_directory = getMeta('profile_directory');
export const isStaff = getMeta('is_staff');
+export const forceSingleColumn = !getMeta('advanced_layout');
export default initialState;
diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js
index 419c313af3..a0eea137f1 100644
--- a/app/javascript/mastodon/reducers/settings.js
+++ b/app/javascript/mastodon/reducers/settings.js
@@ -14,8 +14,6 @@ const initialState = ImmutableMap({
skinTone: 1,
- forceSingleColumn: false,
-
home: ImmutableMap({
shows: ImmutableMap({
reblog: true,
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 351a635bcb..4fbbe67c7b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1801,7 +1801,12 @@ a.account__display-name {
display: flex;
justify-content: flex-end;
+ &--start {
+ justify-content: flex-start;
+ }
+
&__inner {
+ width: 285px;
pointer-events: auto;
height: 100%;
}
@@ -1925,6 +1930,7 @@ a.account__display-name {
display: block;
flex: 1 1 auto;
padding: 15px 10px;
+ padding-bottom: 13px;
color: $primary-text-color;
text-decoration: none;
text-align: center;
@@ -1949,6 +1955,7 @@ a.account__display-name {
&:active {
@media screen and (min-width: 631px) {
background: lighten($ui-base-color, 14%);
+ border-bottom-color: lighten($ui-base-color, 14%);
}
}
@@ -1978,11 +1985,21 @@ a.account__display-name {
padding: 0;
}
- .search__input,
.autosuggest-textarea__textarea {
font-size: 16px;
}
+ .search__input {
+ line-height: 18px;
+ font-size: 16px;
+ padding: 15px;
+ padding-right: 30px;
+ }
+
+ .search__icon .fa {
+ top: 15px;
+ }
+
@media screen and (min-width: 360px) {
padding: 10px 0;
}
@@ -2038,6 +2055,58 @@ a.account__display-name {
margin-top: 10px;
}
}
+
+ .account {
+ padding: 15px 10px;
+ }
+
+ .notification {
+ &__message {
+ margin-left: 48px + 15px * 2;
+ padding-top: 15px;
+ }
+
+ &__favourite-icon-wrapper {
+ left: -32px;
+ }
+
+ .status {
+ padding-top: 8px;
+ }
+
+ .account {
+ padding-top: 8px;
+ }
+
+ .account__avatar-wrapper {
+ margin-left: 17px;
+ margin-right: 15px;
+ }
+ }
+ }
+}
+
+.floating-action-button {
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 3.9375rem;
+ height: 3.9375rem;
+ bottom: 1.3125rem;
+ right: 1.3125rem;
+ background: darken($ui-highlight-color, 3%);
+ color: $white;
+ border-radius: 50%;
+ font-size: 21px;
+ line-height: 21px;
+ text-decoration: none;
+ box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: lighten($ui-highlight-color, 7%);
}
}
@@ -2059,12 +2128,41 @@ a.account__display-name {
}
}
+@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
+ .columns-area__panels__pane--compositional {
+ display: none;
+ }
+}
+
+@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
+ .floating-action-button,
+ .tabs-bar__link.optional {
+ display: none;
+ }
+
+ .search-page .search {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
+ .columns-area__panels__pane--navigational {
+ display: none;
+ }
+}
+
+@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
+ .tabs-bar {
+ display: none;
+ }
+}
+
.icon-with-badge {
position: relative;
&__badge {
position: absolute;
- right: -13px;
+ left: 9px;
top: -13px;
background: $ui-highlight-color;
border: 2px solid lighten($ui-base-color, 8%);
@@ -2077,6 +2175,57 @@ a.account__display-name {
}
}
+.column-link--transparent .icon-with-badge__badge {
+ border-color: darken($ui-base-color, 8%);
+}
+
+.compose-panel {
+ width: 285px;
+ margin-top: 10px;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .search__input {
+ line-height: 18px;
+ font-size: 16px;
+ padding: 15px;
+ padding-right: 30px;
+ }
+
+ .search__icon .fa {
+ top: 15px;
+ }
+
+ .navigation-bar {
+ padding-top: 20px;
+ padding-bottom: 20px;
+ }
+
+ .flex-spacer {
+ background: transparent;
+ }
+
+ .autosuggest-textarea__textarea {
+ max-height: 200px;
+ }
+
+ .compose-form__upload-thumbnail {
+ height: 80px;
+ }
+}
+
+.navigation-panel {
+ margin-top: 10px;
+
+ hr {
+ border: 0;
+ background: transparent;
+ border-top: 1px solid lighten($ui-base-color, 4%);
+ margin: 10px 0;
+ }
+}
+
.drawer__pager {
box-sizing: border-box;
padding: 0;
@@ -2127,15 +2276,6 @@ a.account__display-name {
}
}
-.navigational-toggle {
- padding: 10px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 14px;
- color: $dark-text-color;
-}
-
.pseudo-drawer {
background: lighten($ui-base-color, 13%);
font-size: 13px;
@@ -2365,9 +2505,31 @@ a.account__display-name {
padding: 15px;
text-decoration: none;
- &:hover {
+ &:hover,
+ &:focus,
+ &:active {
background: lighten($ui-base-color, 11%);
}
+
+ &:focus {
+ outline: 0;
+ }
+
+ &--transparent {
+ background: transparent;
+ color: $ui-secondary-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: transparent;
+ color: $primary-text-color;
+ }
+
+ &.active {
+ color: $ui-highlight-color;
+ }
+ }
}
.column-link__icon {
@@ -5436,34 +5598,6 @@ noscript {
}
}
-.floating-action-button {
- position: fixed;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 3.9375rem;
- height: 3.9375rem;
- bottom: 1.3125rem;
- right: 1.3125rem;
- background: darken($ui-highlight-color, 3%);
- color: $white;
- border-radius: 50%;
- font-size: 21px;
- line-height: 21px;
- text-decoration: none;
- box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
-
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-highlight-color, 7%);
- }
-
- @media screen and (min-width: 630px) {
- display: none;
- }
-}
-
.account__header__content {
color: $darker-text-color;
font-size: 14px;
diff --git a/app/lib/user_settings_decorator.rb b/app/lib/user_settings_decorator.rb
index daeb3d936f..bf2e5a962f 100644
--- a/app/lib/user_settings_decorator.rb
+++ b/app/lib/user_settings_decorator.rb
@@ -33,6 +33,7 @@ class UserSettingsDecorator
user.settings['hide_network'] = hide_network_preference if change?('setting_hide_network')
user.settings['aggregate_reblogs'] = aggregate_reblogs_preference if change?('setting_aggregate_reblogs')
user.settings['show_application'] = show_application_preference if change?('setting_show_application')
+ user.settings['advanced_layout'] = advanced_layout_preference if change?('setting_advanced_layout')
end
def merged_notification_emails
@@ -107,6 +108,10 @@ class UserSettingsDecorator
boolean_cast_setting 'setting_aggregate_reblogs'
end
+ def advanced_layout_preference
+ boolean_cast_setting 'setting_advanced_layout'
+ end
+
def boolean_cast_setting(key)
ActiveModel::Type::Boolean.new.cast(settings[key])
end
diff --git a/app/models/user.rb b/app/models/user.rb
index 3d1eb5f206..eb1a2fecef 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -104,7 +104,8 @@ class User < ApplicationRecord
delegate :auto_play_gif, :default_sensitive, :unfollow_modal, :boost_modal, :delete_modal,
:reduce_motion, :system_font_ui, :noindex, :theme, :display_media, :hide_network,
- :expand_spoilers, :default_language, :aggregate_reblogs, :show_application, to: :settings, prefix: :setting, allow_nil: false
+ :expand_spoilers, :default_language, :aggregate_reblogs, :show_application,
+ :advanced_layout, to: :settings, prefix: :setting, allow_nil: false
attr_reader :invite_code
attr_writer :external
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index 0c9fc625f4..184ed867c0 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -31,6 +31,7 @@ class InitialStateSerializer < ActiveModel::Serializer
store[:display_media] = object.current_account.user.setting_display_media
store[:expand_spoilers] = object.current_account.user.setting_expand_spoilers
store[:reduce_motion] = object.current_account.user.setting_reduce_motion
+ store[:advanced_layout] = object.current_account.user.setting_advanced_layout
store[:is_staff] = object.current_account.user.staff?
end
diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
index d81ee61add..35b660a680 100644
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@@ -46,6 +46,9 @@
.fields-group.fields-row__column.fields-row__column-6
= f.input :setting_display_media, collection: ['default', 'show_all', 'hide_all'], wrapper: :with_label, include_blank: false, label_method: lambda { |item| t("simple_form.hints.defaults.setting_display_media_#{item}") }, hint: false
+ .fields-group
+ = f.input :setting_advanced_layout, as: :boolean, wrapper: :with_label
+
.fields-group
= f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
= f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 1a43e19e23..2f75efdbd7 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -26,6 +26,7 @@ en:
password: Use at least 8 characters
phrase: Will be matched regardless of casing in text or content warning of a toot
scopes: Which APIs the application will be allowed to access. If you select a top-level scope, you don't need to select individual ones.
+ setting_advanced_layout: The advanced UI consists of multiple customizable columns
setting_aggregate_reblogs: Do not show new boosts for toots that have been recently boosted (only affects newly-received boosts)
setting_default_language: The language of your toots can be detected automatically, but it's not always accurate
setting_display_media_default: Hide media marked as sensitive
@@ -90,6 +91,7 @@ en:
otp_attempt: Two-factor code
password: Password
phrase: Keyword or phrase
+ setting_advanced_layout: Enable advanced web interface
setting_aggregate_reblogs: Group boosts in timelines
setting_auto_play_gif: Auto-play animated GIFs
setting_boost_modal: Show confirmation dialog before boosting
diff --git a/config/settings.yml b/config/settings.yml
index 63f7c33803..0c35106995 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -31,6 +31,7 @@ defaults: &defaults
noindex: false
theme: 'default'
aggregate_reblogs: true
+ advanced_layout: true
notification_emails:
follow: false
reblog: false
From d55d8a611b5d0d9ea91058cc7d78c7155d0e68cf Mon Sep 17 00:00:00 2001
From: Aditoo17 <42938951+Aditoo17@users.noreply.github.com>
Date: Sat, 25 May 2019 22:34:40 +0200
Subject: [PATCH 03/14] I18n: Update Czech translation (#10832)
---
config/locales/simple_form.cs.yml | 2 ++
1 file changed, 2 insertions(+)
diff --git a/config/locales/simple_form.cs.yml b/config/locales/simple_form.cs.yml
index 2b48884242..fa45fecd55 100644
--- a/config/locales/simple_form.cs.yml
+++ b/config/locales/simple_form.cs.yml
@@ -26,6 +26,7 @@ cs:
password: Použijte alespoň 8 znaků
phrase: Shoda bude nalezena bez ohledu na velikost písmen v těle tootu či varování o obsahu
scopes: Která API bude aplikaci povoleno používat. Pokud vyberete rozsah nejvyššího stupně, nebudete je muset vybírat jednotlivě.
+ setting_advanced_layout: Pokročilé rozhraní se skládá z několika přizpůsobitelných sloupců
setting_aggregate_reblogs: Nezobrazovat nové boosty pro tooty, které byly nedávno boostnuty (ovlivňuje pouze nově přijaté boosty)
setting_default_language: Jazyk vašich tootů může být detekován automaticky, není to však vždy přesné
setting_display_media_default: Skrývat média označená jako citlivá
@@ -90,6 +91,7 @@ cs:
otp_attempt: Dvoufázový kód
password: Heslo
phrase: Klíčové slovo či fráze
+ setting_advanced_layout: Povolit pokročilé webové rozhraní
setting_aggregate_reblogs: Seskupovat boosty v časových osách
setting_auto_play_gif: Automaticky přehrávat animace GIF
setting_boost_modal: Zobrazovat před boostnutím potvrzovací okno
From 4168aeb234fb1cb01162aa586775d52d52c6d02c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9lanie=20Chauvel=20=28ariasuni=29?=
<perso@hack-libre.org>
Date: Sat, 25 May 2019 23:19:39 +0200
Subject: [PATCH 04/14] Avoid cutting bottom of letters of last paragraph of
statuses (#10821)
---
app/javascript/styles/mastodon/components.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 4fbbe67c7b..61f5953628 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -710,7 +710,7 @@
white-space: pre-wrap;
&:last-child {
- margin-bottom: 0;
+ margin-bottom: 2px;
}
}
From 0852e643b7d5ff0f97e2a443a7427fceed5d1421 Mon Sep 17 00:00:00 2001
From: Alfie John <33c6c91f3bb4a391082e8a29642cafaf@alfie.wtf>
Date: Sun, 26 May 2019 07:20:18 +1000
Subject: [PATCH 05/14] Expand abbreviation to minimise confusion (#10826)
---
Dockerfile | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/Dockerfile b/Dockerfile
index 6373172fcb..32af8ddb50 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -86,7 +86,7 @@ RUN apt update && \
useradd -m -u $UID -g $GID -d /opt/mastodon mastodon && \
echo "mastodon:`head /dev/urandom | tr -dc A-Za-z0-9 | head -c 24 | mkpasswd -s -m sha-256`" | chpasswd
-# Install masto runtime deps
+# Install mastodon runtime deps
RUN apt -y --no-install-recommends install \
libssl1.1 libpq5 imagemagick ffmpeg \
libicu60 libprotobuf10 libidn11 libyaml-0-2 \
@@ -104,11 +104,11 @@ ADD https://github.com/krallin/tini/releases/download/v${TINI_VERSION}/tini /tin
RUN echo "$TINI_SUM tini" | sha256sum -c -
RUN chmod +x /tini
-# Copy over masto source, and dependencies from building, and set permissions
+# Copy over mastodon source, and dependencies from building, and set permissions
COPY --chown=mastodon:mastodon . /opt/mastodon
COPY --from=build-dep --chown=mastodon:mastodon /opt/mastodon /opt/mastodon
-# Run masto services in prod mode
+# Run mastodon services in prod mode
ENV RAILS_ENV="production"
ENV NODE_ENV="production"
From c90f3b9865cec8386b3258169c38dbc6128a696e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sandro=20J=C3=A4ckel?= <sandro.jaeckel@gmail.com>
Date: Sat, 25 May 2019 23:20:28 +0200
Subject: [PATCH 06/14] Docker: Keep /var/lib/apt/ to keep apt working (#10830)
---
Dockerfile | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/Dockerfile b/Dockerfile
index 32af8ddb50..46631cde41 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -95,7 +95,7 @@ RUN apt -y --no-install-recommends install \
ln -s /opt/mastodon /mastodon && \
gem install bundler && \
rm -rf /var/cache && \
- rm -rf /var/lib/apt
+ rm -rf /var/lib/apt/lists/*
# Add tini
ENV TINI_VERSION="0.18.0"
From a472190729782f31731674c626c07af483fe9c7f Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sat, 25 May 2019 23:20:51 +0200
Subject: [PATCH 07/14] Add a keyboard shortcut to hide/show media (#10647)
* Move control of media visibility to parent component
* Add keyboard shortcut to toggle media visibility
---
.../mastodon/components/media_gallery.js | 16 +++++++++---
app/javascript/mastodon/components/status.js | 18 +++++++++++++
.../features/keyboard_shortcuts/index.js | 4 +++
.../status/components/detailed_status.js | 6 +++++
.../mastodon/features/status/index.js | 17 ++++++++++++-
app/javascript/mastodon/features/ui/index.js | 1 +
.../mastodon/features/video/index.js | 25 +++++++++++++------
7 files changed, 75 insertions(+), 12 deletions(-)
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index abd17647eb..56618462b4 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -244,6 +244,8 @@ class MediaGallery extends React.PureComponent {
intl: PropTypes.object.isRequired,
defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func,
+ visible: PropTypes.bool,
+ onToggleVisibility: PropTypes.func,
};
static defaultProps = {
@@ -251,18 +253,24 @@ class MediaGallery extends React.PureComponent {
};
state = {
- visible: displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all',
+ visible: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
width: this.props.defaultWidth,
};
componentWillReceiveProps (nextProps) {
- if (!is(nextProps.media, this.props.media)) {
- this.setState({ visible: !nextProps.sensitive });
+ if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
+ this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
+ } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+ this.setState({ visible: nextProps.visible });
}
}
handleOpen = () => {
- this.setState({ visible: !this.state.visible });
+ if (this.props.onToggleVisibility) {
+ this.props.onToggleVisibility();
+ } else {
+ this.setState({ visible: !this.state.visible });
+ }
}
handleClick = (index) => {
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 6f66a4260f..5722d37789 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -17,6 +17,7 @@ import { HotKeys } from 'react-hotkeys';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
import PollContainer from 'mastodon/containers/poll_container';
+import { displayMedia } from '../initial_state';
// We use the component (and not the container) since we do not want
// to use the progress bar to show download progress
@@ -85,6 +86,10 @@ class Status extends ImmutablePureComponent {
'hidden',
];
+ state = {
+ showMedia: displayMedia !== 'hide_all' && !this.props.status.get('sensitive') || displayMedia === 'show_all',
+ };
+
// Track height changes we know about to compensate scrolling
componentDidMount () {
this.didShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
@@ -122,6 +127,10 @@ class Status extends ImmutablePureComponent {
}
}
+ handleToggleMediaVisibility = () => {
+ this.setState({ showMedia: !this.state.showMedia });
+ }
+
handleClick = () => {
if (this.props.onClick) {
this.props.onClick();
@@ -198,6 +207,10 @@ class Status extends ImmutablePureComponent {
this.props.onToggleHidden(this._properStatus());
}
+ handleHotkeyToggleSensitive = () => {
+ this.handleToggleMediaVisibility();
+ }
+
_properStatus () {
const { status } = this.props;
@@ -298,6 +311,8 @@ class Status extends ImmutablePureComponent {
sensitive={status.get('sensitive')}
onOpenVideo={this.handleOpenVideo}
cacheWidth={this.props.cacheMediaWidth}
+ visible={this.state.showMedia}
+ onToggleVisibility={this.handleToggleMediaVisibility}
/>
)}
</Bundle>
@@ -313,6 +328,8 @@ class Status extends ImmutablePureComponent {
onOpenMedia={this.props.onOpenMedia}
cacheWidth={this.props.cacheMediaWidth}
defaultWidth={this.props.cachedMediaWidth}
+ visible={this.state.showMedia}
+ onToggleVisibility={this.handleToggleMediaVisibility}
/>
)}
</Bundle>
@@ -348,6 +365,7 @@ class Status extends ImmutablePureComponent {
moveUp: this.handleHotkeyMoveUp,
moveDown: this.handleHotkeyMoveDown,
toggleHidden: this.handleHotkeyToggleHidden,
+ toggleSensitive: this.handleHotkeyToggleSensitive,
};
return (
diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.js b/app/javascript/mastodon/features/keyboard_shortcuts/index.js
index ab1ac511e0..01b45652c5 100644
--- a/app/javascript/mastodon/features/keyboard_shortcuts/index.js
+++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.js
@@ -60,6 +60,10 @@ class KeyboardShortcuts extends ImmutablePureComponent {
<td><kbd>x</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td>
</tr>
+ <tr>
+ <td><kbd>h</kbd></td>
+ <td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
+ </tr>
<tr>
<td><kbd>up</kbd>, <kbd>k</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 059ecd979d..22821af0c1 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -30,6 +30,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
onHeightChange: PropTypes.func,
domain: PropTypes.string.isRequired,
compact: PropTypes.bool,
+ showMedia: PropTypes.bool,
+ onToggleMediaVisibility: PropTypes.func,
};
state = {
@@ -122,6 +124,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
inline
onOpenVideo={this.handleOpenVideo}
sensitive={status.get('sensitive')}
+ visible={this.props.showMedia}
+ onToggleVisibility={this.props.onToggleMediaVisibility}
/>
);
} else {
@@ -132,6 +136,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
media={status.get('media_attachments')}
height={300}
onOpenMedia={this.props.onOpenMedia}
+ visible={this.props.showMedia}
+ onToggleVisibility={this.props.onToggleMediaVisibility}
/>
);
}
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index 6279bb468e..499afe6f7a 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -41,7 +41,7 @@ import { openModal } from '../../actions/modal';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
-import { boostModal, deleteModal } from '../../initial_state';
+import { boostModal, deleteModal, displayMedia } from '../../initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
import { textForScreenReader } from '../../components/status';
import Icon from 'mastodon/components/icon';
@@ -131,6 +131,7 @@ class Status extends ImmutablePureComponent {
state = {
fullscreen: false,
+ showMedia: !this.props.status ? undefined : (displayMedia !== 'hide_all' && !this.props.status.get('sensitive') || displayMedia === 'show_all'),
};
componentWillMount () {
@@ -146,6 +147,13 @@ class Status extends ImmutablePureComponent {
this._scrolledIntoView = false;
this.props.dispatch(fetchStatus(nextProps.params.statusId));
}
+ if (!Immutable.is(nextProps.status, this.props.status) && nextProps.status) {
+ this.setState({ showMedia: displayMedia !== 'hide_all' && !nextProps.status.get('sensitive') || displayMedia === 'show_all' });
+ }
+ }
+
+ handleToggleMediaVisibility = () => {
+ this.setState({ showMedia: !this.state.showMedia });
}
handleFavouriteClick = (status) => {
@@ -312,6 +320,10 @@ class Status extends ImmutablePureComponent {
this.handleToggleHidden(this.props.status);
}
+ handleHotkeyToggleSensitive = () => {
+ this.handleToggleMediaVisibility();
+ }
+
handleMoveUp = id => {
const { status, ancestorsIds, descendantsIds } = this.props;
@@ -432,6 +444,7 @@ class Status extends ImmutablePureComponent {
mention: this.handleHotkeyMention,
openProfile: this.handleHotkeyOpenProfile,
toggleHidden: this.handleHotkeyToggleHidden,
+ toggleSensitive: this.handleHotkeyToggleSensitive,
};
return (
@@ -455,6 +468,8 @@ class Status extends ImmutablePureComponent {
onOpenMedia={this.handleOpenMedia}
onToggleHidden={this.handleToggleHidden}
domain={domain}
+ showMedia={this.state.showMedia}
+ onToggleMediaVisibility={this.handleToggleMediaVisibility}
/>
<ActionBar
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 61fd77af74..791133afd3 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -93,6 +93,7 @@ const keyMap = {
goToMuted: 'g m',
goToRequests: 'g r',
toggleHidden: 'x',
+ toggleSensitive: 'h',
};
class SwitchingColumnsArea extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js
index 00a63a3d9f..b0c4085277 100644
--- a/app/javascript/mastodon/features/video/index.js
+++ b/app/javascript/mastodon/features/video/index.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { fromJS } from 'immutable';
+import { fromJS, is } from 'immutable';
import { throttle } from 'lodash';
import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
@@ -102,6 +102,8 @@ class Video extends React.PureComponent {
detailed: PropTypes.bool,
inline: PropTypes.bool,
cacheWidth: PropTypes.func,
+ visible: PropTypes.bool,
+ onToggleVisibility: PropTypes.func,
intl: PropTypes.object.isRequired,
blurhash: PropTypes.string,
link: PropTypes.node,
@@ -117,7 +119,7 @@ class Video extends React.PureComponent {
fullscreen: false,
hovered: false,
muted: false,
- revealed: displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all',
+ revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
};
// hard coded in components.scss
@@ -280,7 +282,16 @@ class Video extends React.PureComponent {
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
}
- componentDidUpdate (prevProps) {
+ componentWillReceiveProps (nextProps) {
+ if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+ this.setState({ revealed: nextProps.visible });
+ }
+ }
+
+ componentDidUpdate (prevProps, prevState) {
+ if (prevState.revealed && !this.state.revealed && this.video) {
+ this.video.pause();
+ }
if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
this._decode();
}
@@ -316,11 +327,11 @@ class Video extends React.PureComponent {
}
toggleReveal = () => {
- if (this.state.revealed) {
- this.video.pause();
+ if (this.props.onToggleVisibility) {
+ this.props.onToggleVisibility();
+ } else {
+ this.setState({ revealed: !this.state.revealed });
}
-
- this.setState({ revealed: !this.state.revealed });
}
handleLoadedData = () => {
From 0e445ebb1392c8dbce320509d219f16c7c221406 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 26 May 2019 02:55:37 +0200
Subject: [PATCH 08/14] Improvements to the single column layout (#10835)
* Improvements to the single column layout
- Add follows and followers link to the right panel
- Increase margins around separators in right panel
- Add follow requests link with counter when account is locked to right panel
* Redirect from getting started to home when navigation panel is visible
---
app/javascript/mastodon/actions/compose.js | 2 +-
.../mastodon/components/icon_with_badge.js | 20 +++++++++
.../features/follow_requests/index.js | 2 +-
.../features/getting_started/index.js | 13 +++++-
.../ui/components/follow_requests_nav_link.js | 44 +++++++++++++++++++
.../features/ui/components/list_panel.js | 4 +-
.../ui/components/navigation_panel.js | 2 +
.../components/notifications_counter_icon.js | 21 ++-------
8 files changed, 85 insertions(+), 23 deletions(-)
create mode 100644 app/javascript/mastodon/components/icon_with_badge.js
create mode 100644 app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
index 33e6313640..300fb48a99 100644
--- a/app/javascript/mastodon/actions/compose.js
+++ b/app/javascript/mastodon/actions/compose.js
@@ -63,7 +63,7 @@ const messages = defineMessages({
uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
});
-const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 3);
+const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1);
export const ensureComposeIsVisible = (getState, routerHistory) => {
if (!getState().getIn(['compose', 'mounted']) && window.innerWidth < COMPOSE_PANEL_BREAKPOINT) {
diff --git a/app/javascript/mastodon/components/icon_with_badge.js b/app/javascript/mastodon/components/icon_with_badge.js
new file mode 100644
index 0000000000..7851eb4be9
--- /dev/null
+++ b/app/javascript/mastodon/components/icon_with_badge.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'mastodon/components/icon';
+
+const formatNumber = num => num > 40 ? '40+' : num;
+
+const IconWithBadge = ({ id, count, className }) => (
+ <i className='icon-with-badge'>
+ <Icon id={id} fixedWidth className={className} />
+ {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+ </i>
+);
+
+IconWithBadge.propTypes = {
+ id: PropTypes.string.isRequired,
+ count: PropTypes.number.isRequired,
+ className: PropTypes.string,
+};
+
+export default IconWithBadge;
diff --git a/app/javascript/mastodon/features/follow_requests/index.js b/app/javascript/mastodon/features/follow_requests/index.js
index 3871e0e5d1..44624cb406 100644
--- a/app/javascript/mastodon/features/follow_requests/index.js
+++ b/app/javascript/mastodon/features/follow_requests/index.js
@@ -56,7 +56,7 @@ class FollowRequests extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />;
return (
- <Column icon='users' heading={intl.formatMessage(messages.heading)}>
+ <Column icon='user-plus' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList
scrollKey='follow_requests'
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index cb3efb57bc..bafcc275b0 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -55,10 +55,16 @@ const badgeDisplay = (number, limit) => {
}
};
+const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
+
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class GettingStarted extends ImmutablePureComponent {
+ static contextTypes = {
+ router: PropTypes.object.isRequired,
+ };
+
static propTypes = {
intl: PropTypes.object.isRequired,
myAccount: ImmutablePropTypes.map.isRequired,
@@ -72,6 +78,11 @@ class GettingStarted extends ImmutablePureComponent {
componentDidMount () {
const { myAccount, fetchFollowRequests } = this.props;
+ if (window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
+ this.context.router.history.replace('/timelines/home');
+ return;
+ }
+
if (myAccount.get('locked')) {
fetchFollowRequests();
}
@@ -123,7 +134,7 @@ class GettingStarted extends ImmutablePureComponent {
height += 48*3;
if (myAccount.get('locked')) {
- navItems.push(<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
+ navItems.push(<ColumnLink key={i++} icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
height += 48;
}
diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js b/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
new file mode 100644
index 0000000000..90c953893a
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { fetchFollowRequests } from 'mastodon/actions/accounts';
+import { connect } from 'react-redux';
+import { NavLink, withRouter } from 'react-router-dom';
+import IconWithBadge from 'mastodon/components/icon_with_badge';
+import { me } from 'mastodon/initial_state';
+import { List as ImmutableList } from 'immutable';
+import { FormattedMessage } from 'react-intl';
+
+const mapStateToProps = state => ({
+ locked: state.getIn(['accounts', me, 'locked']),
+ count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
+});
+
+export default @withRouter
+@connect(mapStateToProps)
+class FollowRequestsNavLink extends React.Component {
+
+ static propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ locked: PropTypes.bool,
+ count: PropTypes.number.isRequired,
+ };
+
+ componentDidMount () {
+ const { dispatch, locked } = this.props;
+
+ if (locked) {
+ dispatch(fetchFollowRequests());
+ }
+ }
+
+ render () {
+ const { locked, count } = this.props;
+
+ if (!locked || count === 0) {
+ return null;
+ }
+
+ return <NavLink className='column-link column-link--transparent' to='/follow_requests'><IconWithBadge className='column-link__icon' id='user-plus' count={count} /><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></NavLink>;
+ }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/list_panel.js b/app/javascript/mastodon/features/ui/components/list_panel.js
index 9a52c1b10c..1f7ec683a7 100644
--- a/app/javascript/mastodon/features/ui/components/list_panel.js
+++ b/app/javascript/mastodon/features/ui/components/list_panel.js
@@ -13,7 +13,7 @@ const getOrderedLists = createSelector([state => state.get('lists')], lists => {
return lists;
}
- return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+ return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))).take(4);
});
const mapStateToProps = state => ({
@@ -37,7 +37,7 @@ class ListPanel extends ImmutablePureComponent {
render () {
const { lists } = this.props;
- if (!lists) {
+ if (!lists || lists.isEmpty()) {
return null;
}
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index e2d962c630..1fd28c63ad 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -3,12 +3,14 @@ import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import Icon from 'mastodon/components/icon';
import NotificationsCounterIcon from './notifications_counter_icon';
+import FollowRequestsNavLink from './follow_requests_nav_link';
import ListPanel from './list_panel';
const NavigationPanel = () => (
<div className='navigation-panel'>
<NavLink className='column-link column-link--transparent' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon className='column-link__icon' id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon className='column-link__icon' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
+ <FollowRequestsNavLink />
<NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
<NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' id='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
diff --git a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
index 9673c57fef..da553cd9f0 100644
--- a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
@@ -1,24 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import Icon from 'mastodon/components/icon';
+import IconWithBadge from 'mastodon/components/icon_with_badge';
const mapStateToProps = state => ({
count: state.getIn(['notifications', 'unread']),
+ id: 'bell',
});
-const formatNumber = num => num > 99 ? '99+' : num;
-
-const NotificationsCounterIcon = ({ count, className }) => (
- <i className='icon-with-badge'>
- <Icon id='bell' fixedWidth className={className} />
- {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
- </i>
-);
-
-NotificationsCounterIcon.propTypes = {
- count: PropTypes.number.isRequired,
- className: PropTypes.string,
-};
-
-export default connect(mapStateToProps)(NotificationsCounterIcon);
+export default connect(mapStateToProps)(IconWithBadge);
From 4a818ac2deffaff9925ce5b160dbc5385b815a87 Mon Sep 17 00:00:00 2001
From: Hanage999 <hanage999@crazynewworld.net>
Date: Sun, 26 May 2019 19:22:33 +0900
Subject: [PATCH 09/14] Fix wrong redirect from getting started to home in
advanced Web UI (#10839)
* update Ruby to 2.5.3
* Link to Getting Started will not redirect to Home in multi-column UI (https://github.com/tootsuite/mastodon/pull/10835)
---
app/javascript/mastodon/features/getting_started/index.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index bafcc275b0..129ce77f62 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -76,9 +76,9 @@ class GettingStarted extends ImmutablePureComponent {
};
componentDidMount () {
- const { myAccount, fetchFollowRequests } = this.props;
+ const { myAccount, fetchFollowRequests, multiColumn } = this.props;
- if (window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
+ if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
this.context.router.history.replace('/timelines/home');
return;
}
From 3d219c595677de0ea5814300f3ee1c11d24569b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20=C4=BDach?= <graweeld@googlemail.com>
Date: Sun, 26 May 2019 12:26:39 +0200
Subject: [PATCH 10/14] Update simple_form.sk.yml (#10842)
---
config/locales/simple_form.sk.yml | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/config/locales/simple_form.sk.yml b/config/locales/simple_form.sk.yml
index 28e8629d23..c6de0009d6 100644
--- a/config/locales/simple_form.sk.yml
+++ b/config/locales/simple_form.sk.yml
@@ -26,6 +26,7 @@ sk:
password: Zadaj aspoň osem znakov
phrase: Zhoda sa nájde nezávisle od toho, či je text napísaný, veľkými, alebo malými písmenami, či už v tele, alebo v hlavičke
scopes: Ktoré API budú povolené aplikácii pre prístup. Ak vyberieš vrcholný stupeň, nemusíš už potom vyberať po jednom.
+ setting_advanced_layout: Pokročilé užívateľské rozhranie sa skladá z viacero prispôsobiteľných stĺpcov
setting_aggregate_reblogs: Nezobrazuj nové vyzdvihnutia pre príspevky, ktoré už boli len nedávno povýšené (týka sa iba nanovo získaných povýšení)
setting_default_language: Jazyk tvojích príspevkov môže byť zistený automaticky, ale nieje to vždy presné
setting_display_media_default: Skry médiá označené ako citlivé
@@ -90,6 +91,7 @@ sk:
otp_attempt: Dvoj-faktorový overovací (2FA) kód
password: Heslo
phrase: Kľúčové slovo, alebo fráza
+ setting_advanced_layout: Zapni pokročilé užívateľské rozhranie
setting_aggregate_reblogs: Zoskupuj vyzdvihnutia v časovej osi
setting_auto_play_gif: Automaticky prehrávaj animované GIFy
setting_boost_modal: Zobrazuj potvrdzovacie okno pred povýšením
@@ -99,7 +101,7 @@ sk:
setting_delete_modal: Zobrazuj potvrdzovacie okno pred vymazaním toot-u
setting_display_media: Zobrazovanie médií
setting_display_media_default: Štandard
- setting_display_media_hide_all: Skryť všetky
+ setting_display_media_hide_all: Skry všetky
setting_display_media_show_all: Ukáž všetky
setting_expand_spoilers: Stále rozbaľ príspevky označené varovaním o obsahu
setting_hide_network: Ukri svoju sieť kontaktov
@@ -112,7 +114,7 @@ sk:
severity: Závažnosť
type: Typ importu
username: Prezývka
- username_or_email: Prezívka, alebo email
+ username_or_email: Prezývka, alebo email
whole_word: Celé slovo
featured_tag:
name: Haštag
From 988342a56cb58da9ac660eec3e55c3bcbbd6269b Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 26 May 2019 13:48:16 +0200
Subject: [PATCH 11/14] Fix null error in status component when determining
showMedia state (#10838)
* Fix null error in status component when determining showMedia state
Also update the showMedia value if the status passed to the
component changes
* Refactor media visibility computation into a defaultMediaVisibility function
* Fix default media visibility with reblogs
---
app/javascript/mastodon/components/status.js | 23 ++++++++++++++++++-
.../mastodon/features/status/index.js | 9 ++++----
2 files changed, 27 insertions(+), 5 deletions(-)
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 5722d37789..2d3a32d625 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -18,6 +18,7 @@ import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
import PollContainer from 'mastodon/containers/poll_container';
import { displayMedia } from '../initial_state';
+import { is } from 'immutable';
// We use the component (and not the container) since we do not want
// to use the progress bar to show download progress
@@ -40,6 +41,18 @@ export const textForScreenReader = (intl, status, rebloggedByText = false) => {
return values.join(', ');
};
+export const defaultMediaVisibility = (status) => {
+ if (!status) {
+ return undefined;
+ }
+
+ if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
+ status = status.get('reblog');
+ }
+
+ return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
+};
+
export default @injectIntl
class Status extends ImmutablePureComponent {
@@ -87,7 +100,7 @@ class Status extends ImmutablePureComponent {
];
state = {
- showMedia: displayMedia !== 'hide_all' && !this.props.status.get('sensitive') || displayMedia === 'show_all',
+ showMedia: defaultMediaVisibility(this.props.status),
};
// Track height changes we know about to compensate scrolling
@@ -103,11 +116,19 @@ class Status extends ImmutablePureComponent {
}
}
+ componentWillReceiveProps (nextProps) {
+ if (!is(nextProps.status, this.props.status) && nextProps.status) {
+ this.setState({ showMedia: defaultMediaVisibility(nextProps.status) });
+ }
+ }
+
// Compensate height changes
componentDidUpdate (prevProps, prevState, snapshot) {
const doShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
+
if (doShowCard && !this.didShowCard) {
this.didShowCard = true;
+
if (snapshot !== null && this.props.updateScrollBottom) {
if (this.node && this.node.offsetTop < snapshot.top) {
this.props.updateScrollBottom(snapshot.height - snapshot.top);
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index 499afe6f7a..d8c4c50dc3 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -41,9 +41,9 @@ import { openModal } from '../../actions/modal';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
-import { boostModal, deleteModal, displayMedia } from '../../initial_state';
+import { boostModal, deleteModal } from '../../initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
-import { textForScreenReader } from '../../components/status';
+import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
import Icon from 'mastodon/components/icon';
const messages = defineMessages({
@@ -131,7 +131,7 @@ class Status extends ImmutablePureComponent {
state = {
fullscreen: false,
- showMedia: !this.props.status ? undefined : (displayMedia !== 'hide_all' && !this.props.status.get('sensitive') || displayMedia === 'show_all'),
+ showMedia: defaultMediaVisibility(this.props.status),
};
componentWillMount () {
@@ -147,8 +147,9 @@ class Status extends ImmutablePureComponent {
this._scrolledIntoView = false;
this.props.dispatch(fetchStatus(nextProps.params.statusId));
}
+
if (!Immutable.is(nextProps.status, this.props.status) && nextProps.status) {
- this.setState({ showMedia: displayMedia !== 'hide_all' && !nextProps.status.get('sensitive') || displayMedia === 'show_all' });
+ this.setState({ showMedia: defaultMediaVisibility(nextProps.status) });
}
}
From 63483ee543eb6c81e2cf6450a682cdb657e92751 Mon Sep 17 00:00:00 2001
From: Neil Moore <dar13.dev@gmail.com>
Date: Sun, 26 May 2019 07:48:45 -0400
Subject: [PATCH 12/14] Create new click handler for status__expand area in
status (#10837)
This click handler only activates on left-click, resolving #10798.
This matches behavior in status_content.js, as added in #536
---
app/javascript/mastodon/components/status.js | 13 ++++++++++++-
1 file changed, 12 insertions(+), 1 deletion(-)
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 2d3a32d625..b67354b01a 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -166,6 +166,17 @@ class Status extends ImmutablePureComponent {
this.context.router.history.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
}
+ handleExpandClick = (e) => {
+ if (e.button === 0) {
+ if (!this.context.router) {
+ return;
+ }
+
+ const { status } = this.props;
+ this.context.router.history.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
+ }
+ }
+
handleAccountClick = (e) => {
if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
const id = e.currentTarget.getAttribute('data-id');
@@ -395,7 +406,7 @@ class Status extends ImmutablePureComponent {
{prepend}
<div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted, read: unread === false })} data-id={status.get('id')}>
- <div className='status__expand' onClick={this.handleClick} role='presentation' />
+ <div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
<div className='status__info'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
From b4d4138cf9753b0c25a17f01702b61a74de6ec2c Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Sun, 26 May 2019 18:58:14 +0200
Subject: [PATCH 13/14] [Glitch] Add keyboard shortcut to hide/show media
Port a472190729782f31731674c626c07af483fe9c7f and 988342a56cb58da9ac660eec3e55c3bcbbd6269b to glitch-soc
---
.../glitch/components/media_gallery.js | 17 +++++--
.../flavours/glitch/components/status.js | 49 ++++++++++++++++++-
.../features/keyboard_shortcuts/index.js | 4 ++
.../status/components/detailed_status.js | 8 ++-
.../flavours/glitch/features/status/index.js | 46 +++++++++++++----
.../flavours/glitch/features/ui/index.js | 1 +
.../flavours/glitch/features/video/index.js | 21 +++++---
7 files changed, 120 insertions(+), 26 deletions(-)
diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index 194800d527..6ef101f115 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -257,7 +257,6 @@ export default class MediaGallery extends React.PureComponent {
static propTypes = {
sensitive: PropTypes.bool,
- revealed: PropTypes.bool,
standalone: PropTypes.bool,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
@@ -268,6 +267,8 @@ export default class MediaGallery extends React.PureComponent {
intl: PropTypes.object.isRequired,
defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func,
+ visible: PropTypes.bool,
+ onToggleVisibility: PropTypes.func,
};
static defaultProps = {
@@ -275,13 +276,15 @@ export default class MediaGallery extends React.PureComponent {
};
state = {
- visible: this.props.revealed === undefined ? (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all') : this.props.revealed,
+ visible: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
width: this.props.defaultWidth,
};
componentWillReceiveProps (nextProps) {
- if (!is(nextProps.media, this.props.media) || nextProps.revealed === true) {
- this.setState({ visible: nextProps.revealed === undefined ? (displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all') : nextProps.revealed });
+ if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
+ this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
+ } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+ this.setState({ visible: nextProps.visible });
}
}
@@ -294,7 +297,11 @@ export default class MediaGallery extends React.PureComponent {
}
handleOpen = () => {
- this.setState({ visible: !this.state.visible });
+ if (this.props.onToggleVisibility) {
+ this.props.onToggleVisibility();
+ } else {
+ this.setState({ visible: !this.state.visible });
+ }
}
handleClick = (index) => {
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 5f10e0c52b..7014cab17c 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -16,6 +16,7 @@ import NotificationOverlayContainer from 'flavours/glitch/features/notifications
import classNames from 'classnames';
import { autoUnfoldCW } from 'flavours/glitch/util/content_warning';
import PollContainer from 'flavours/glitch/containers/poll_container';
+import { displayMedia } from 'flavours/glitch/util/initial_state';
// We use the component (and not the container) since we do not want
// to use the progress bar to show download progress
@@ -38,6 +39,22 @@ export const textForScreenReader = (intl, status, rebloggedByText = false, expan
return values.join(', ');
};
+export const defaultMediaVisibility = (status, settings) => {
+ if (!status) {
+ return undefined;
+ }
+
+ if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
+ status = status.get('reblog');
+ }
+
+ if (settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text')) {
+ return true;
+ }
+
+ return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
+}
+
@injectIntl
export default class Status extends ImmutablePureComponent {
@@ -82,6 +99,9 @@ export default class Status extends ImmutablePureComponent {
isCollapsed: false,
autoCollapsed: false,
isExpanded: undefined,
+ showMedia: undefined,
+ statusId: undefined,
+ revealBehindCW: undefined,
}
// Avoid checking props that are functions (and whose equality will always
@@ -103,6 +123,7 @@ export default class Status extends ImmutablePureComponent {
updateOnStates = [
'isExpanded',
'isCollapsed',
+ 'showMedia',
]
// If our settings have changed to disable collapsed statuses, then we
@@ -160,6 +181,20 @@ export default class Status extends ImmutablePureComponent {
}
}
+ if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
+ update.showMedia = defaultMediaVisibility(nextProps.status, nextProps.settings);
+ update.statusId = nextProps.status.get('id');
+ updated = true;
+ }
+
+ if (nextProps.settings.getIn(['media', 'reveal_behind_cw']) !== prevState.revealBehindCW) {
+ update.revealBehindCW = nextProps.settings.getIn(['media', 'reveal_behind_cw']);
+ if (update.revealBehindCW) {
+ update.showMedia = defaultMediaVisibility(nextProps.status, nextProps.settings);
+ }
+ updated = true;
+ }
+
return updated ? update : null;
}
@@ -305,6 +340,10 @@ export default class Status extends ImmutablePureComponent {
}
}
+ handleToggleMediaVisibility = () => {
+ this.setState({ showMedia: !this.state.showMedia });
+ }
+
handleAccountClick = (e) => {
if (this.context.router && e.button === 0) {
const id = e.currentTarget.getAttribute('data-id');
@@ -374,6 +413,9 @@ export default class Status extends ImmutablePureComponent {
this.setCollapsed(!this.state.isCollapsed);
}
+ handleHotkeyToggleSensitive = () => {
+ this.handleToggleMediaVisibility();
+ }
handleRef = c => {
this.node = c;
@@ -490,7 +532,8 @@ export default class Status extends ImmutablePureComponent {
onOpenVideo={this.handleOpenVideo}
width={this.props.cachedMediaWidth}
cacheWidth={this.props.cacheMediaWidth}
- revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined}
+ visible={this.state.showMedia}
+ onToggleVisibility={this.handleToggleMediaVisibility}
/>)}
</Bundle>
);
@@ -508,7 +551,8 @@ export default class Status extends ImmutablePureComponent {
onOpenMedia={this.props.onOpenMedia}
cacheWidth={this.props.cacheMediaWidth}
defaultWidth={this.props.cachedMediaWidth}
- revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined}
+ visible={this.state.showMedia}
+ onToggleVisibility={this.handleToggleMediaVisibility}
/>
)}
</Bundle>
@@ -566,6 +610,7 @@ export default class Status extends ImmutablePureComponent {
toggleSpoiler: this.handleExpandedToggle,
bookmark: this.handleHotkeyBookmark,
toggleCollapse: this.handleHotkeyCollapse,
+ toggleSensitive: this.handleHotkeyToggleSensitive,
};
const computedClass = classNames('status', `status-${status.get('visibility')}`, {
diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
index 2935a60214..f7b475f8d8 100644
--- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
+++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
@@ -71,6 +71,10 @@ export default class KeyboardShortcuts extends ImmutablePureComponent {
<td><kbd>x</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td>
</tr>
+ <tr>
+ <td><kbd>h</kbd></td>
+ <td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
+ </tr>
{collapseEnabled && (
<tr>
<td><kbd>shift</kbd>+<kbd>x</kbd></td>
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 03d98fde85..ddedac4d4d 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -33,6 +33,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
onHeightChange: PropTypes.func,
domain: PropTypes.string.isRequired,
compact: PropTypes.bool,
+ showMedia: PropTypes.bool,
+ onToggleMediaVisibility: PropTypes.func,
};
state = {
@@ -144,7 +146,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
preventPlayback={!expanded}
onOpenVideo={this.handleOpenVideo}
autoplay
- revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined}
+ visible={this.props.showMedia}
+ onToggleVisibility={this.props.onToggleMediaVisibility}
/>
);
mediaIcon = 'video-camera';
@@ -158,7 +161,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
fullwidth={settings.getIn(['media', 'fullwidth'])}
hidden={!expanded}
onOpenMedia={this.props.onOpenMedia}
- revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined}
+ visible={this.props.showMedia}
+ onToggleVisibility={this.props.onToggleMediaVisibility}
/>
);
mediaIcon = 'picture-o';
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index 57d70db1a2..145a33fff7 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -41,7 +41,7 @@ import { HotKeys } from 'react-hotkeys';
import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen';
import { autoUnfoldCW } from 'flavours/glitch/util/content_warning';
-import { textForScreenReader } from 'flavours/glitch/components/status';
+import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -134,6 +134,9 @@ export default class Status extends ImmutablePureComponent {
isExpanded: undefined,
threadExpanded: undefined,
statusId: undefined,
+ loadedStatusId: undefined,
+ showMedia: undefined,
+ revealBehindCW: undefined,
};
componentDidMount () {
@@ -152,17 +155,31 @@ export default class Status extends ImmutablePureComponent {
}
static getDerivedStateFromProps(props, state) {
- if (state.statusId === props.params.statusId || !props.params.statusId) {
- return null;
+ let update = {};
+ let updated = false;
+
+ if (props.params.statusId && state.statusId !== props.params.statusId) {
+ props.dispatch(fetchStatus(props.params.statusId));
+ update.threadExpanded = undefined;
+ update.statusId = props.params.statusId;
+ updated = true;
}
- props.dispatch(fetchStatus(props.params.statusId));
+ const revealBehindCW = props.settings.getIn(['media', 'reveal_behind_cw']);
+ if (revealBehindCW !== state.revealBehindCW) {
+ update.revealBehindCW = revealBehindCW;
+ if (revealBehindCW) update.showMedia = defaultMediaVisibility(props.status, props.settings);
+ updated = true;
+ }
- return {
- threadExpanded: undefined,
- isExpanded: autoUnfoldCW(props.settings, props.status),
- statusId: props.params.statusId,
- };
+ if (props.status && state.loadedStatusId !== props.status.get('id')) {
+ update.showMedia = defaultMediaVisibility(props.status, props.settings);
+ update.loadedStatusId = props.status.get('id');
+ update.isExpanded = autoUnfoldCW(props.settings, props.status);
+ updated = true;
+ }
+
+ return updated ? update : null;
}
handleExpandedToggle = () => {
@@ -171,6 +188,10 @@ export default class Status extends ImmutablePureComponent {
}
};
+ handleToggleMediaVisibility = () => {
+ this.setState({ showMedia: !this.state.showMedia });
+ }
+
handleModalFavourite = (status) => {
this.props.dispatch(favourite(status));
}
@@ -304,6 +325,10 @@ export default class Status extends ImmutablePureComponent {
this.props.dispatch(openModal('EMBED', { url: status.get('url') }));
}
+ handleHotkeyToggleSensitive = () => {
+ this.handleToggleMediaVisibility();
+ }
+
handleHotkeyMoveUp = () => {
this.handleMoveUp(this.props.status.get('id'));
}
@@ -477,6 +502,7 @@ export default class Status extends ImmutablePureComponent {
mention: this.handleHotkeyMention,
openProfile: this.handleHotkeyOpenProfile,
toggleSpoiler: this.handleExpandedToggle,
+ toggleSensitive: this.handleHotkeyToggleSensitive,
};
return (
@@ -505,6 +531,8 @@ export default class Status extends ImmutablePureComponent {
expanded={isExpanded}
onToggleHidden={this.handleExpandedToggle}
domain={domain}
+ showMedia={this.state.showMedia}
+ onToggleMediaVisibility={this.handleToggleMediaVisibility}
/>
<ActionBar
diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index 13c71337a0..f8fff934dd 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -101,6 +101,7 @@ const keyMap = {
toggleSpoiler: 'x',
bookmark: 'd',
toggleCollapse: 'shift+x',
+ toggleSensitive: 'h',
};
@connect(mapStateToProps)
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index 2e0d59d473..3dd296c3c1 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { fromJS } from 'immutable';
+import { fromJS, is } from 'immutable';
import { throttle } from 'lodash';
import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
@@ -94,7 +94,6 @@ export default class Video extends React.PureComponent {
width: PropTypes.number,
height: PropTypes.number,
sensitive: PropTypes.bool,
- revealed: PropTypes.bool,
startTime: PropTypes.number,
onOpenVideo: PropTypes.func,
onCloseVideo: PropTypes.func,
@@ -102,9 +101,11 @@ export default class Video extends React.PureComponent {
fullwidth: PropTypes.bool,
detailed: PropTypes.bool,
inline: PropTypes.bool,
- preventPlayback: PropTypes.bool,
- intl: PropTypes.object.isRequired,
cacheWidth: PropTypes.func,
+ intl: PropTypes.object.isRequired,
+ visible: PropTypes.bool,
+ onToggleVisibility: PropTypes.func,
+ preventPlayback: PropTypes.bool,
blurhash: PropTypes.string,
link: PropTypes.node,
};
@@ -119,12 +120,12 @@ export default class Video extends React.PureComponent {
fullscreen: false,
hovered: false,
muted: false,
- revealed: this.props.revealed === undefined ? (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all') : this.props.revealed,
+ revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
};
componentWillReceiveProps (nextProps) {
- if (nextProps.revealed === true) {
- this.setState({ revealed: true });
+ if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+ this.setState({ revealed: nextProps.visible });
}
}
@@ -349,7 +350,11 @@ export default class Video extends React.PureComponent {
this.video.pause();
}
- this.setState({ revealed: !this.state.revealed });
+ if (this.props.onToggleVisibility) {
+ this.props.onToggleVisibility();
+ } else {
+ this.setState({ revealed: !this.state.revealed });
+ }
}
handleLoadedData = () => {
From 6d60701bfaa3a4b2bc168ea413c8f0c8e1545526 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Sun, 26 May 2019 19:55:58 +0200
Subject: [PATCH 14/14] Fix video player regressions introduced by blurhash
merge
---
app/javascript/flavours/glitch/features/video/index.js | 3 ---
1 file changed, 3 deletions(-)
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index 3dd296c3c1..b73ea0b07b 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -306,9 +306,6 @@ export default class Video extends React.PureComponent {
if (this.video && this.state.revealed && this.props.preventPlayback && !prevProps.preventPlayback) {
this.video.pause();
}
- }
-
- componentDidUpdate (prevProps) {
if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
this._decode();
}