From 91c2f14fd2050855ef6c89cde14f41406a73b316 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 5 Nov 2020 02:21:05 +0900 Subject: [Glitch] Bump detect-passive-events from 1.0.5 to 2.0.1 Port e16b0fb15a7ef2607f080e8c0b884c1cf37e5ebb to glitch-soc Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Yamagishi Kazutoshi Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/features/emoji_picker/index.js | 4 ++-- .../flavours/glitch/features/ui/components/columns_area.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index 89219d739..5fd904593 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -10,7 +10,7 @@ import { EmojiPicker as EmojiPickerAsync } from 'flavours/glitch/util/async-comp import Overlay from 'react-overlays/lib/Overlay'; import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import detectPassiveEvents from 'detect-passive-events'; +import { supportsPassiveEvents } from 'detect-passive-events'; import { buildCustomEmojis, categoriesFromEmojis } from 'flavours/glitch/util/emoji'; import { useSystemEmojiFont } from 'flavours/glitch/util/initial_state'; import { assetHost } from 'flavours/glitch/util/config'; @@ -109,7 +109,7 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({ let EmojiPicker, Emoji; // load asynchronously const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`; -const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false; +const listenerOptions = supportsPassiveEvents ? { passive: true } : false; class ModifierPickerMenu extends React.PureComponent { 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 2de24bea5..729ade212 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -29,7 +29,7 @@ import Icon from 'flavours/glitch/components/icon'; import ComposePanel from './compose_panel'; import NavigationPanel from './navigation_panel'; -import detectPassiveEvents from 'detect-passive-events'; +import { supportsPassiveEvents } from 'detect-passive-events'; import { scrollRight } from 'flavours/glitch/util/scroll'; const componentMap = { @@ -80,7 +80,7 @@ class ColumnsArea extends ImmutablePureComponent { componentDidMount() { if (!this.props.singleColumn) { - this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false); + this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); } this.lastIndex = getIndex(this.context.router.history.location.pathname); @@ -97,7 +97,7 @@ class ColumnsArea extends ImmutablePureComponent { componentDidUpdate(prevProps) { if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) { - this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false); + this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); } this.lastIndex = getIndex(this.context.router.history.location.pathname); this.setState({ shouldAnimate: true }); -- cgit From e4d62042bdb3b0d675c2367b4c48a2a48647af5e Mon Sep 17 00:00:00 2001 From: Mashiro Date: Thu, 5 Nov 2020 03:43:31 +0800 Subject: [Glitch] Add limitation of image's max zoom rate (max to the original size of image) Port f720af6b721b773e68c00a546256ff20eeb3226d to glitch-soc Signed-off-by: Thibaut Girka --- .../features/ui/components/zoomable_image.js | 69 ++++++++++++++++------ 1 file changed, 51 insertions(+), 18 deletions(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js index 2efc70890..caeeced64 100644 --- a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js +++ b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js @@ -113,7 +113,8 @@ class ZoomableImage extends React.PureComponent { state = { scale: MIN_SCALE, zoomMatrix: { - type: null, // 'full-width' 'full-height' + type: null, // 'width' 'height' + fullScreen: null, // bool rate: null, // full screen scale rate clientWidth: null, clientHeight: null, @@ -122,12 +123,15 @@ class ZoomableImage extends React.PureComponent { clientHeightFixed: null, scrollTop: null, scrollLeft: null, + translateX: null, + translateY: null, }, zoomState: 'expand', // 'expand' 'compress' navigationHidden: false, dragPosition: { top: 0, left: 0, x: 0, y: 0 }, dragged: false, lockScroll: { x: 0, y: 0 }, + lockTranslate: { x: 0, y: 0 }, } removers = []; @@ -168,18 +172,24 @@ class ZoomableImage extends React.PureComponent { } componentDidUpdate () { + this.setState({ zoomState: this.state.scale >= this.state.zoomMatrix.rate ? 'compress' : 'expand' }); + + if (this.state.scale === MIN_SCALE) { + this.container.style.removeProperty('cursor'); + } + } + + UNSAFE_componentWillReceiveProps () { + // reset when slide to next image if (this.props.zoomButtonHidden) { - this.setState({ scale: MIN_SCALE }, () => { + this.setState({ + scale: MIN_SCALE, + lockTranslate: { x: 0, y: 0 }, + }, () => { this.container.scrollLeft = 0; this.container.scrollTop = 0; }); } - - this.setState({ zoomState: this.state.scale >= this.state.zoomMatrix.rate ? 'compress' : 'expand' }); - - if (this.state.scale === 1) { - this.container.style.removeProperty('cursor'); - } } removeEventListeners () { @@ -192,7 +202,7 @@ class ZoomableImage extends React.PureComponent { const event = normalizeWheel(e); - if (this.state.zoomMatrix.type === 'full-width') { + if (this.state.zoomMatrix.type === 'width') { // full width, scroll vertical this.container.scrollTop = Math.max(this.container.scrollTop + event.pixelY, this.state.lockScroll.y); } else { @@ -268,7 +278,7 @@ class ZoomableImage extends React.PureComponent { } zoom(nextScale, midpoint) { - const { scale } = this.state; + const { scale, zoomMatrix } = this.state; const { scrollLeft, scrollTop } = this.container; // math memo: @@ -283,6 +293,15 @@ class ZoomableImage extends React.PureComponent { this.setState({ scale: nextScale }, () => { this.container.scrollLeft = nextScrollLeft; this.container.scrollTop = nextScrollTop; + // reset the translateX/Y constantly + if (nextScale < zoomMatrix.rate) { + this.setState({ + lockTranslate: { + x: zoomMatrix.fullScreen ? 0 : zoomMatrix.translateX * ((nextScale - MIN_SCALE) / (zoomMatrix.rate - MIN_SCALE)), + y: zoomMatrix.fullScreen ? 0 : zoomMatrix.translateY * ((nextScale - MIN_SCALE) / (zoomMatrix.rate - MIN_SCALE)), + }, + }); + } }); } @@ -307,14 +326,18 @@ class ZoomableImage extends React.PureComponent { const { offsetWidth, offsetHeight } = this.image; const clientHeightFixed = clientHeight - NAV_BAR_HEIGHT; - const type = width/height < clientWidth / clientHeightFixed ? 'full-width' : 'full-height'; - const rate = type === 'full-width' ? clientWidth / offsetWidth : clientHeightFixed / offsetHeight; - const scrollTop = type === 'full-width' ? (clientHeight - offsetHeight) / 2 - NAV_BAR_HEIGHT : (clientHeightFixed - offsetHeight) / 2; + const type = width / height < clientWidth / clientHeightFixed ? 'width' : 'height'; + const fullScreen = type === 'width' ? width > clientWidth : height > clientHeightFixed; + const rate = type === 'width' ? Math.min(clientWidth, width) / offsetWidth : Math.min(clientHeightFixed, height) / offsetHeight; + const scrollTop = type === 'width' ? (clientHeight - offsetHeight) / 2 - NAV_BAR_HEIGHT : (clientHeightFixed - offsetHeight) / 2; const scrollLeft = (clientWidth - offsetWidth) / 2; + const translateX = type === 'width' ? (width - offsetWidth) / (2 * rate) : 0; + const translateY = type === 'height' ? (height - offsetHeight) / (2 * rate) : 0; this.setState({ zoomMatrix: { type: type, + fullScreen: fullScreen, rate: rate, clientWidth: clientWidth, clientHeight: clientHeight, @@ -323,6 +346,8 @@ class ZoomableImage extends React.PureComponent { clientHeightFixed: clientHeightFixed, scrollTop: scrollTop, scrollLeft: scrollLeft, + translateX: translateX, + translateY: translateY, }, }); } @@ -340,6 +365,10 @@ class ZoomableImage extends React.PureComponent { x: 0, y: 0, }, + lockTranslate: { + x: 0, + y: 0, + }, }, () => { this.container.scrollLeft = 0; this.container.scrollTop = 0; @@ -351,6 +380,10 @@ class ZoomableImage extends React.PureComponent { x: zoomMatrix.scrollLeft, y: zoomMatrix.scrollTop, }, + lockTranslate: { + x: zoomMatrix.fullScreen ? 0 : zoomMatrix.translateX, + y: zoomMatrix.fullScreen ? 0 : zoomMatrix.translateY, + }, }, () => { this.container.scrollLeft = zoomMatrix.scrollLeft; this.container.scrollTop = zoomMatrix.scrollTop; @@ -371,15 +404,15 @@ class ZoomableImage extends React.PureComponent { render () { const { alt, src, width, height, intl } = this.props; - const { scale } = this.state; - const overflow = scale === 1 ? 'hidden' : 'scroll'; - const zoomButtonSshouldHide = !this.state.navigationHidden && !this.props.zoomButtonHidden ? '' : 'media-modal__zoom-button--hidden'; + const { scale, lockTranslate } = this.state; + const overflow = scale === MIN_SCALE ? 'hidden' : 'scroll'; + const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? 'media-modal__zoom-button--hidden' : ''; const zoomButtonTitle = this.state.zoomState === 'compress' ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand); return ( Date: Wed, 11 Nov 2020 05:36:29 +0100 Subject: [Glitch] Add button to dismiss desktop notifications permissions banner Port 4790a126bebddd83cbaf1a8436611536dcc417a0 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/actions/notifications.js | 9 +++++++-- .../components/notifications_permission_banner.js | 23 +++++++++++++++++++--- .../picture_in_picture/components/header.js | 11 +++++++++-- .../flavours/glitch/reducers/notifications.js | 3 +++ .../flavours/glitch/styles/components/columns.scss | 7 +++++++ 5 files changed, 46 insertions(+), 7 deletions(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js index eb7087027..7273191b2 100644 --- a/app/javascript/flavours/glitch/actions/notifications.js +++ b/app/javascript/flavours/glitch/actions/notifications.js @@ -50,8 +50,9 @@ export const NOTIFICATIONS_SET_VISIBILITY = 'NOTIFICATIONS_SET_VISIBILITY'; export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ'; -export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT'; -export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION'; +export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT'; +export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION'; +export const NOTIFICATIONS_DISMISS_BROWSER_PERMISSION = 'NOTIFICATIONS_DISMISS_BROWSER_PERMISSION'; defineMessages({ mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' }, @@ -371,3 +372,7 @@ export function setBrowserPermission (value) { value, }; } + +export const dismissBrowserPermission = () => ({ + type: NOTIFICATIONS_DISMISS_BROWSER_PERMISSION, +}); diff --git a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js index 8e77f5a03..73fc05dea 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js +++ b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js @@ -1,25 +1,42 @@ import React from 'react'; import Icon from 'flavours/glitch/components/icon'; import Button from 'flavours/glitch/components/button'; -import { requestBrowserPermission } from 'flavours/glitch/actions/notifications'; +import IconButton from 'flavours/glitch/components/icon_button'; +import { requestBrowserPermission, dismissBrowserPermission } from 'flavours/glitch/actions/notifications'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -export default @connect(() => {}) +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, +}); + +export default @connect() +@injectIntl class NotificationsPermissionBanner extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, }; handleClick = () => { this.props.dispatch(requestBrowserPermission()); } + handleClose = () => { + this.props.dispatch(dismissBrowserPermission()); + } + render () { + const { intl } = this.props; + return (
+
+ +
+

}} />

diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js index 24adcde25..28526ca88 100644 --- a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js +++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js @@ -7,12 +7,18 @@ import IconButton from 'flavours/glitch/components/icon_button'; import { Link } from 'react-router-dom'; import Avatar from 'flavours/glitch/components/avatar'; import DisplayName from 'flavours/glitch/components/display_name'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, +}); const mapStateToProps = (state, { accountId }) => ({ account: state.getIn(['accounts', accountId]), }); export default @connect(mapStateToProps) +@injectIntl class Header extends ImmutablePureComponent { static propTypes = { @@ -20,10 +26,11 @@ class Header extends ImmutablePureComponent { statusId: PropTypes.string.isRequired, account: ImmutablePropTypes.map.isRequired, onClose: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, }; render () { - const { account, statusId, onClose } = this.props; + const { account, statusId, onClose, intl } = this.props; return (
@@ -32,7 +39,7 @@ class Header extends ImmutablePureComponent { - +
); } diff --git a/app/javascript/flavours/glitch/reducers/notifications.js b/app/javascript/flavours/glitch/reducers/notifications.js index b4c5ef71a..c630cc7e3 100644 --- a/app/javascript/flavours/glitch/reducers/notifications.js +++ b/app/javascript/flavours/glitch/reducers/notifications.js @@ -19,6 +19,7 @@ import { NOTIFICATIONS_MARK_AS_READ, NOTIFICATIONS_SET_BROWSER_SUPPORT, NOTIFICATIONS_SET_BROWSER_PERMISSION, + NOTIFICATIONS_DISMISS_BROWSER_PERMISSION, } from 'flavours/glitch/actions/notifications'; import { ACCOUNT_BLOCK_SUCCESS, @@ -283,6 +284,8 @@ export default function notifications(state = initialState, action) { return state.set('browserSupport', action.value); case NOTIFICATIONS_SET_BROWSER_PERMISSION: return state.set('browserPermission', action.value); + case NOTIFICATIONS_DISMISS_BROWSER_PERMISSION: + return state.set('browserPermission', 'denied'); case NOTIFICATION_MARK_FOR_DELETE: return markForDelete(state, action.id, action.yes); diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index be32ae52e..2550f50f4 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -702,6 +702,13 @@ flex-direction: column; align-items: center; justify-content: center; + position: relative; + + &__close { + position: absolute; + top: 10px; + right: 10px; + } h2 { font-size: 16px; -- cgit