From 55ac2b9c6085def9e692fa69b849239c1249d9fd Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 19 Mar 2021 02:44:57 +0100 Subject: Add option to opt out of unread notification markers (#15842) Fixes #15133 --- .../features/notifications/components/column_settings.js | 10 ++++++++++ app/javascript/mastodon/features/notifications/index.js | 4 ++-- app/javascript/mastodon/reducers/settings.js | 1 + 3 files changed, 13 insertions(+), 2 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js index 8339a367e..0c24c3294 100644 --- a/app/javascript/mastodon/features/notifications/components/column_settings.js +++ b/app/javascript/mastodon/features/notifications/components/column_settings.js @@ -55,6 +55,16 @@ export default class ColumnSettings extends React.PureComponent { +
+ + + + +
+ +
+
+
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index 108470c9a..cf8fd7127 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -60,8 +60,8 @@ const mapStateToProps = state => ({ isUnread: state.getIn(['notifications', 'unread']) > 0 || state.getIn(['notifications', 'pendingItems']).size > 0, hasMore: state.getIn(['notifications', 'hasMore']), numPending: state.getIn(['notifications', 'pendingItems'], ImmutableList()).size, - lastReadId: state.getIn(['notifications', 'readMarkerId']), - canMarkAsRead: state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0), + lastReadId: state.getIn(['settings', 'notifications', 'showUnread']) ? state.getIn(['notifications', 'readMarkerId']) : '0', + canMarkAsRead: state.getIn(['settings', 'notifications', 'showUnread']) && state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0), needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) === 'default' && !state.getIn(['settings', 'notifications', 'dismissPermissionBanner']), }); diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js index 357ab352a..2a89919e1 100644 --- a/app/javascript/mastodon/reducers/settings.js +++ b/app/javascript/mastodon/reducers/settings.js @@ -45,6 +45,7 @@ const initialState = ImmutableMap({ }), dismissPermissionBanner: false, + showUnread: true, shows: ImmutableMap({ follow: true, -- cgit From db6551ec09cd8f38a9448ba6f4caae56f7a9bb3d Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 19 Mar 2021 12:47:31 +0100 Subject: Add option to opt out of unread notification markers Port 55ac2b9c6085def9e692fa69b849239c1249d9fd to glitch-soc --- .../features/notifications/components/column_settings.js | 10 ++++++++++ app/javascript/flavours/glitch/features/notifications/index.js | 4 ++-- app/javascript/flavours/glitch/reducers/settings.js | 1 + 3 files changed, 13 insertions(+), 2 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js index e502c3173..067696332 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js @@ -56,6 +56,16 @@ export default class ColumnSettings extends React.PureComponent {
+
+ + + + +
+ +
+
+
diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js index 5ceda9a91..842e02371 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.js +++ b/app/javascript/flavours/glitch/features/notifications/index.js @@ -67,8 +67,8 @@ const mapStateToProps = state => ({ hasMore: state.getIn(['notifications', 'hasMore']), numPending: state.getIn(['notifications', 'pendingItems'], ImmutableList()).size, notifCleaningActive: state.getIn(['notifications', 'cleaningMode']), - lastReadId: state.getIn(['local_settings', 'notifications', 'show_unread']) ? state.getIn(['notifications', 'readMarkerId']) : '0', - canMarkAsRead: state.getIn(['local_settings', 'notifications', 'show_unread']) && state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0), + lastReadId: state.getIn(['settings', 'notifications', 'showUnread']) ? state.getIn(['notifications', 'readMarkerId']) : '0', + canMarkAsRead: state.getIn(['settings', 'notifications', 'showUnread']) && state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0), needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) === 'default' && !state.getIn(['settings', 'notifications', 'dismissPermissionBanner']), }); diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js index 091b8feec..a53d34a83 100644 --- a/app/javascript/flavours/glitch/reducers/settings.js +++ b/app/javascript/flavours/glitch/reducers/settings.js @@ -49,6 +49,7 @@ const initialState = ImmutableMap({ }), dismissPermissionBanner: false, + showUnread: true, shows: ImmutableMap({ follow: true, -- cgit From 3b7b607300d662aa1f25d459ca12aec89ab550e8 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 19 Mar 2021 13:33:46 +0100 Subject: Migrate glitch-soc local notification settings to upstream system --- app/javascript/flavours/glitch/actions/store.js | 17 ++++++++++++++++- .../glitch/features/local_settings/page/index.js | 8 -------- .../flavours/glitch/reducers/local_settings.js | 1 - 3 files changed, 16 insertions(+), 10 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/actions/store.js b/app/javascript/flavours/glitch/actions/store.js index 34dcafc51..9dbc0b214 100644 --- a/app/javascript/flavours/glitch/actions/store.js +++ b/app/javascript/flavours/glitch/actions/store.js @@ -1,6 +1,7 @@ import { Iterable, fromJS } from 'immutable'; import { hydrateCompose } from './compose'; import { importFetchedAccounts } from './importer'; +import { saveSettings } from './settings'; export const STORE_HYDRATE = 'STORE_HYDRATE'; export const STORE_HYDRATE_LAZY = 'STORE_HYDRATE_LAZY'; @@ -9,9 +10,22 @@ const convertState = rawState => fromJS(rawState, (k, v) => Iterable.isIndexed(v) ? v.toList() : v.toMap()); +const applyMigrations = (state) => { + return state.withMutations(state => { + // Migrate glitch-soc local-only “Show unread marker” setting to Mastodon's setting + if (state.getIn(['local_settings', 'notifications', 'show_unread']) !== undefined) { + // Only change if the Mastodon setting does not deviate from default + if (state.getIn(['settings', 'notifications', 'showUnread']) !== false) { + state.setIn(['settings', 'notifications', 'showUnread'], state.getIn(['local_settings', 'notifications', 'show_unread'])); + } + state.removeIn(['local_settings', 'notifications', 'show_unread']) + } + }); +}; + export function hydrateStore(rawState) { return dispatch => { - const state = convertState(rawState); + const state = applyMigrations(convertState(rawState)); dispatch({ type: STORE_HYDRATE, @@ -20,5 +34,6 @@ export function hydrateStore(rawState) { dispatch(hydrateCompose()); dispatch(importFetchedAccounts(Object.values(rawState.accounts))); + dispatch(saveSettings()); }; }; diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index 3af6cbdf6..45d10d154 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -113,14 +113,6 @@ class LocalSettingsPage extends React.PureComponent { - - -

diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index ea37ae4aa..c115cad6b 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -55,7 +55,6 @@ const initialState = ImmutableMap({ notifications : ImmutableMap({ favicon_badge : false, tab_badge : true, - show_unread : true, }), }); -- cgit From 200d7a170806ce530218d4d43292f9bf14455ab7 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 18:40:34 +0100 Subject: Change notification settings UI to be more compact Signed-off-by: Claire --- .../notifications/components/column_settings.js | 72 +++++++++++----------- .../notifications/components/pill_bar_button.js | 41 ++++++++++++ .../flavours/glitch/styles/components/columns.scss | 44 +++++++++++++ 3 files changed, 121 insertions(+), 36 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js index 067696332..c01a21e3b 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js @@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl'; import ClearColumnButton from './clear_column_button'; import GrantPermissionButton from './grant_permission_button'; import SettingToggle from './setting_toggle'; +import PillBarButton from './pill_bar_button'; export default class ColumnSettings extends React.PureComponent { @@ -34,7 +35,6 @@ export default class ColumnSettings extends React.PureComponent { const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed'); const pushStr = showPushSettings && ; - const pushMeta = showPushSettings && ; return (
@@ -80,77 +80,77 @@ export default class ColumnSettings extends React.PureComponent {
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
diff --git a/app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js b/app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js new file mode 100644 index 000000000..223b7f75f --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import classNames from 'classnames' + +export default class PillBarButton extends React.PureComponent { + + static propTypes = { + prefix: PropTypes.string, + settings: ImmutablePropTypes.map.isRequired, + settingPath: PropTypes.array.isRequired, + label: PropTypes.node.isRequired, + onChange: PropTypes.func.isRequired, + disabled: PropTypes.bool, + } + + onChange = () => { + const { settings, settingPath } = this.props; + this.props.onChange(settingPath, !settings.getIn(settingPath)); + } + + render () { + const { prefix, settings, settingPath, label, disabled } = this.props; + const id = ['setting-pillbar-button', prefix, ...settingPath].filter(Boolean).join('-'); + const active = settings.getIn(settingPath); + + return ( + + ); + } + +} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 90aa5859d..aaf2c9572 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -483,6 +483,50 @@ margin-right: 5px; } +.column-settings__pillbar { + display: flex; + overflow: hidden; + background-color: transparent; + border: 0; + border-radius: 4px; + margin-bottom: 10px; + align-items: stretch; +} + +.pillbar-button { + border: 0; + color: #fafafa; + padding: 2px; + margin: 0; + margin-left: 2px; + font-size: inherit; + flex: auto; + background-color: $ui-base-color; + transition: background-color 0.2s ease; + + &[disabled] { + cursor: not-allowed; + opacity: 0.5; + } + + &:hover:not([disabled]) { + background-color: darken($ui-base-color, 10%); + } + + &.active { + background-color: $ui-highlight-color; + } + + &.active:hover:not([disabled]) { + background-color: lighten($ui-highlight-color, 10%); + } + + /* TODO: check RTL? */ + &:first-child { + margin-left: 0; + } +} + .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation { -- cgit From e71f4d468b217504f3cd5b8f8c133f9c0e1869fc Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 20:37:46 +0100 Subject: Add more button states? Signed-off-by: Claire --- .../flavours/glitch/styles/components/columns.scss | 34 +++++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index aaf2c9572..7d7642a31 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -509,16 +509,34 @@ opacity: 0.5; } - &:hover:not([disabled]) { - background-color: darken($ui-base-color, 10%); - } + &:not([disabled]) { + &:hover { + background-color: darken($ui-base-color, 10%); + } - &.active { - background-color: $ui-highlight-color; - } + &:focus { + background-color: darken($ui-base-color, 15%); + } - &.active:hover:not([disabled]) { - background-color: lighten($ui-highlight-color, 10%); + &:active { + background-color: darken($ui-base-color, 20%); + } + + &.active { + background-color: $ui-highlight-color; + + &:hover { + background-color: lighten($ui-highlight-color, 10%); + } + + &:focus { + background-color: lighten($ui-highlight-color, 15%); + } + + &:active { + background-color: lighten($ui-highlight-color, 20%); + } + } } /* TODO: check RTL? */ -- cgit From 2bb573d021d53a31efd299763cd55d342d4da307 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 20:45:47 +0100 Subject: Messing around with box-shadow Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/components/columns.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 7d7642a31..42d64c135 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -502,7 +502,8 @@ font-size: inherit; flex: auto; background-color: $ui-base-color; - transition: background-color 0.2s ease; + transition-property: background-color, box-shadow; + transition: all 0.2s ease; &[disabled] { cursor: not-allowed; @@ -524,17 +525,21 @@ &.active { background-color: $ui-highlight-color; + box-shadow: inset 0 5px darken($ui-highlight-color, 20%); &:hover { background-color: lighten($ui-highlight-color, 10%); + box-shadow: inset 0 5px darken($ui-highlight-color, 10%); } &:focus { background-color: lighten($ui-highlight-color, 15%); + box-shadow: inset 0 5px darken($ui-highlight-color, 5%); } &:active { background-color: lighten($ui-highlight-color, 20%); + box-shadow: inset 0 5px $ui-highlight-color; } } } -- cgit From 5d48402be1145201395e7fc297fe32a34638dd98 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 19 Mar 2021 20:23:32 +0100 Subject: Fixing the hero widget (#15926) * Removing last-child padding conflicts with light theme in hero widget * Add missing background color to widget * Reset widget.scss to default * Hope this works Co-authored-by: koyu --- app/javascript/styles/mastodon-light/diff.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'app/javascript') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index d4290d7e6..8e6b0cdd5 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -707,7 +707,6 @@ html { .public-account-bio, .hero-widget__text { background: $account-background-color; - border: 1px solid lighten($ui-base-color, 8%); } .header { -- cgit From c3aef491d66aec743a3a53e934a494f653745b61 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 22 Mar 2021 15:41:47 +0900 Subject: Bump react-select from 3.2.0 to 4.0.2 (#15624) * Bump react-select from 3.2.0 to 4.0.2 Bumps [react-select](https://github.com/JedWatson/react-select) from 3.2.0 to 4.0.2. - [Release notes](https://github.com/JedWatson/react-select/releases) - [Changelog](https://github.com/JedWatson/react-select/blob/master/docs/CHANGELOG.md) - [Commits](https://github.com/JedWatson/react-select/compare/react-select@3.2.0...react-select@4.0.2) Signed-off-by: dependabot[bot] * Add cacheKey to NonceProvider for react-select Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Yamagishi Kazutoshi --- .../hashtag_timeline/components/column_settings.js | 2 +- package.json | 2 +- yarn.lock | 213 +++++++++++---------- 3 files changed, 115 insertions(+), 102 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js b/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js index 27300f020..de1127b0d 100644 --- a/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js +++ b/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js @@ -59,7 +59,7 @@ class ColumnSettings extends React.PureComponent { {this.modeLabel(mode)} - + Date: Wed, 24 Mar 2021 10:19:07 +0100 Subject: Fix compose form behavior in mobile view (#15555) * Fix ComposeForm being mounted twice in mobile view Fixes #13094 * Fix compose form focus and pre-selection behavior in mobile view * Split _updateFocusAndSelection out of componentDidUpdate --- .../features/compose/components/compose_form.js | 8 ++++++++ .../mastodon/features/ui/components/columns_area.js | 21 +++++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 8af806ec4..ba2d20cc7 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -132,7 +132,15 @@ class ComposeForm extends ImmutablePureComponent { } } + componentDidMount () { + this._updateFocusAndSelection({ }); + } + componentDidUpdate (prevProps) { + this._updateFocusAndSelection(prevProps); + } + + _updateFocusAndSelection = (prevProps) => { // This statement does several things: // - If we're beginning a reply, and, // - Replying to zero or one users, places the cursor at the end of the textbox. diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 6837450eb..85a92fc3a 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -70,8 +70,12 @@ class ColumnsArea extends ImmutablePureComponent { children: PropTypes.node, }; + // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS + mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)'); + state = { shouldAnimate: false, + renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches), } componentWillReceiveProps() { @@ -85,6 +89,11 @@ class ColumnsArea extends ImmutablePureComponent { this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); } + if (this.mediaQuery) { + this.mediaQuery.addEventListener('change', this.handleLayoutChange); + this.setState({ renderComposePanel: !this.mediaQuery.matches }); + } + this.lastIndex = getIndex(this.context.router.history.location.pathname); this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); @@ -114,6 +123,10 @@ class ColumnsArea extends ImmutablePureComponent { if (!this.props.singleColumn) { this.node.removeEventListener('wheel', this.handleWheel); } + + if (this.mediaQuery) { + this.mediaQuery.removeEventListener('change', this.handleLayoutChange); + } } handleChildrenContentChange() { @@ -123,6 +136,10 @@ class ColumnsArea extends ImmutablePureComponent { } } + handleLayoutChange = (e) => { + this.setState({ renderComposePanel: !e.matches }); + } + handleSwipe = (index) => { this.pendingIndex = index; @@ -186,7 +203,7 @@ class ColumnsArea extends ImmutablePureComponent { render () { const { columns, children, singleColumn, isModalOpen, intl } = this.props; - const { shouldAnimate } = this.state; + const { shouldAnimate, renderComposePanel } = this.state; const columnIndex = getIndex(this.context.router.history.location.pathname); @@ -205,7 +222,7 @@ class ColumnsArea extends ImmutablePureComponent {
- + {renderComposePanel && }
-- cgit From b61e44461cffb887556e20ba5a07caef72133e10 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 22 Mar 2021 15:41:47 +0900 Subject: [Glitch] Bump react-select from 3.2.0 to 4.0.2 Add cacheKey to NonceProvider for react-select Port changes from c3aef491d66aec743a3a53e934a494f653745b61 to glitch-soc Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Yamagishi Kazutoshi Signed-off-by: Claire --- .../glitch/features/hashtag_timeline/components/column_settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js index 27300f020..de1127b0d 100644 --- a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js @@ -59,7 +59,7 @@ class ColumnSettings extends React.PureComponent { {this.modeLabel(mode)} - + Date: Wed, 24 Mar 2021 10:19:07 +0100 Subject: [Glitch] Fix compose form behavior in mobile view Port 034f37b85a716872f78a72048a5a225cdcaa840a to glitch-soc Signed-off-by: Claire --- .../features/compose/components/compose_form.js | 10 +++++++++- .../glitch/features/ui/components/columns_area.js | 21 +++++++++++++++++++-- 2 files changed, 28 insertions(+), 3 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index 164f4a960..d4804a3c2 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -199,6 +199,14 @@ class ComposeForm extends ImmutablePureComponent { } } + componentDidMount () { + this._updateFocusAndSelection({ }); + } + + componentDidUpdate (prevProps) { + this._updateFocusAndSelection(prevProps); + } + // This statement does several things: // - If we're beginning a reply, and, // - Replying to zero or one users, places the cursor at the end @@ -206,7 +214,7 @@ class ComposeForm extends ImmutablePureComponent { // - Replying to more than one user, selects any usernames past // the first; this provides a convenient shortcut to drop // everyone else from the conversation. - componentDidUpdate (prevProps) { + _updateFocusAndSelection = (prevProps) => { const { textarea, spoilerText, diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index 640be19ab..b41de58d7 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -70,8 +70,12 @@ class ColumnsArea extends ImmutablePureComponent { openSettings: PropTypes.func, }; + // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS + mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)'); + state = { shouldAnimate: false, + renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches), } componentWillReceiveProps() { @@ -85,6 +89,11 @@ class ColumnsArea extends ImmutablePureComponent { this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); } + if (this.mediaQuery) { + this.mediaQuery.addEventListener('change', this.handleLayoutChange); + this.setState({ renderComposePanel: !this.mediaQuery.matches }); + } + this.lastIndex = getIndex(this.context.router.history.location.pathname); this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); @@ -114,6 +123,10 @@ class ColumnsArea extends ImmutablePureComponent { if (!this.props.singleColumn) { this.node.removeEventListener('wheel', this.handleWheel); } + + if (this.mediaQuery) { + this.mediaQuery.removeEventListener('change', this.handleLayoutChange); + } } handleChildrenContentChange() { @@ -123,6 +136,10 @@ class ColumnsArea extends ImmutablePureComponent { } } + handleLayoutChange = (e) => { + this.setState({ renderComposePanel: !e.matches }); + } + handleSwipe = (index) => { this.pendingIndex = index; @@ -186,7 +203,7 @@ class ColumnsArea extends ImmutablePureComponent { render () { const { columns, children, singleColumn, swipeToChangeColumns, intl, navbarUnder, openSettings } = this.props; - const { shouldAnimate } = this.state; + const { shouldAnimate, renderComposePanel } = this.state; const columnIndex = getIndex(this.context.router.history.location.pathname); @@ -205,7 +222,7 @@ class ColumnsArea extends ImmutablePureComponent {
- + {renderComposePanel && }
-- cgit From f8e50eaea351d743bf80e65c2178c4ed46d65881 Mon Sep 17 00:00:00 2001 From: Marcin Mikołajczak Date: Wed, 24 Mar 2021 13:51:32 +0100 Subject: Add transition to media modal background (#15843) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add transition to media modal background * use reduceMotion * Move background color transition into css Signed-off-by: marcin mikołajczak --- app/javascript/styles/mastodon/components.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index bdb7ce768..49432b864 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4472,6 +4472,7 @@ a.status-card.compact:hover { right: 0; bottom: 0; background: rgba($base-overlay-background, 0.7); + transition: background 0.5s; } .modal-root__container { -- cgit