From 60f7ba7301515f8b6d26338837ad3727d173ae35 Mon Sep 17 00:00:00 2001 From: Bettenbuk Zoltan Date: Tue, 18 Sep 2018 12:52:52 +0200 Subject: [PATCH] [RN] Remove mobile notifications --- .../components/Conference.native.js | 37 +----- .../components/Notification.native.js | 106 ------------------ .../NotificationsContainer.native.js | 68 ----------- .../notifications/components/styles.js | 104 ----------------- 4 files changed, 1 insertion(+), 314 deletions(-) delete mode 100644 react/features/notifications/components/styles.js diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index 41bb7d9e9..98b2b6a8e 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -11,21 +11,18 @@ import { connect, disconnect } from '../../base/connection'; import { getParticipantCount } from '../../base/participants'; import { Container, LoadingIndicator, TintedView } from '../../base/react'; import { - isNarrowAspectRatio, makeAspectRatioAware } from '../../base/responsive-ui'; import { TestConnectionInfo } from '../../base/testing'; import { createDesiredLocalTracks } from '../../base/tracks'; import { ConferenceNotification } from '../../calendar-sync'; import { - FILMSTRIP_SIZE, Filmstrip, isFilmstripVisible, TileView } from '../../filmstrip'; import { LargeVideo } from '../../large-video'; import { CalleeInfoContainer } from '../../invite'; -import { NotificationsContainer } from '../../notifications'; import { Captions } from '../../subtitles'; import { setToolboxVisible, Toolbox } from '../../toolbox'; import { shouldDisplayTileView } from '../../video-layout'; @@ -305,12 +302,6 @@ class Conference extends Component { - {/* - * Notifications are rendered on the very top of other - * components like subtitles, toolbox and filmstrip. - */ - this._renderNotificationsContainer() - } @@ -336,6 +327,7 @@ class Conference extends Component { { this._renderConferenceNotification() } + ); } @@ -386,33 +378,6 @@ class Conference extends Component { ? : undefined); } - - /** - * Renders a container for notifications to be displayed by the - * base/notifications feature. - * - * @private - * @returns {React$Element} - */ - _renderNotificationsContainer() { - const notificationsStyle = {}; - - // In the landscape mode (wide) there's problem with notifications being - // shadowed by the filmstrip rendered on the right. This makes the "x" - // button not clickable. In order to avoid that a margin of the - // filmstrip's size is added to the right. - // - // Pawel: after many attempts I failed to make notifications adjust to - // their contents width because of column and rows being used in the - // flex layout. The only option that seemed to limit the notification's - // size was explicit 'width' value which is not better than the margin - // added here. - if (this.props._filmstripVisible && !isNarrowAspectRatio(this)) { - notificationsStyle.marginRight = FILMSTRIP_SIZE; - } - - return ; - } } /** diff --git a/react/features/notifications/components/Notification.native.js b/react/features/notifications/components/Notification.native.js index 1b7ffc5ab..e69de29bb 100644 --- a/react/features/notifications/components/Notification.native.js +++ b/react/features/notifications/components/Notification.native.js @@ -1,106 +0,0 @@ -// @flow - -import React from 'react'; -import { Text, TouchableOpacity, View } from 'react-native'; - -import { Icon } from '../../base/font-icons'; -import { translate } from '../../base/i18n'; - -import { NOTIFICATION_TYPE } from '../constants'; - -import AbstractNotification, { - type Props -} from './AbstractNotification'; -import styles from './styles'; - -/** - * Implements a React {@link Component} to display a notification. - * - * @extends Component - */ -class Notification extends AbstractNotification { - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { - appearance, - isDismissAllowed, - t, - title, - titleArguments, - titleKey - } = this.props; - - let notificationStyle; - - switch (appearance) { - case NOTIFICATION_TYPE.ERROR: - notificationStyle = styles.notificationTypeError; - break; - case NOTIFICATION_TYPE.NORMAL: - notificationStyle = styles.notificationTypeNormal; - break; - case NOTIFICATION_TYPE.SUCCESS: - notificationStyle = styles.notificationTypeSuccess; - break; - case NOTIFICATION_TYPE.WARNING: - notificationStyle = styles.notificationTypeWarning; - break; - case NOTIFICATION_TYPE.INFO: - default: - notificationStyle = styles.notificationTypeInfo; - } - - return ( - - - - - { - title || t(titleKey, titleArguments) - } - - - - { - this._getDescription().map((line, index) => ( - - { line } - - )) - } - - - { - isDismissAllowed - && - - - } - - ); - } - - _getDescription: () => Array; - - _onDismissed: () => void; -} - -export default translate(Notification); diff --git a/react/features/notifications/components/NotificationsContainer.native.js b/react/features/notifications/components/NotificationsContainer.native.js index fbe87bf20..e69de29bb 100644 --- a/react/features/notifications/components/NotificationsContainer.native.js +++ b/react/features/notifications/components/NotificationsContainer.native.js @@ -1,68 +0,0 @@ -// @flow - -import React from 'react'; -import { View } from 'react-native'; -import { connect } from 'react-redux'; - -import AbstractNotificationsContainer, { - _abstractMapStateToProps, - type Props as AbstractProps -} from './AbstractNotificationsContainer'; -import Notification from './Notification'; -import styles from './styles'; - -type Props = AbstractProps & { - - /** - * Any custom styling applied to the notifications container. - */ - style: Object -}; - -/** - * Implements a React {@link Component} which displays notifications and handles - * automatic dismissmal after a notification is shown for a defined timeout - * period. - * - * @extends {Component} - */ -class NotificationsContainer - extends AbstractNotificationsContainer { - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { _notifications } = this.props; - - if (!_notifications || !_notifications.length) { - return null; - } - - return ( - - { - _notifications.map( - ({ props, uid }) => ( - )) - } - - ); - } - - _onDismissed: number => void; -} - -export default connect(_abstractMapStateToProps)(NotificationsContainer); diff --git a/react/features/notifications/components/styles.js b/react/features/notifications/components/styles.js deleted file mode 100644 index 70f6c93f8..000000000 --- a/react/features/notifications/components/styles.js +++ /dev/null @@ -1,104 +0,0 @@ -// @flow - -import { BoxModel, createStyleSheet, ColorPalette } from '../../base/styles'; - -/** - * The styles of the React {@code Components} of the feature notifications. - */ -export default createStyleSheet({ - - /** - * The content (left) column of the notification. - */ - contentColumn: { - flex: 1, - flexDirection: 'column', - padding: BoxModel.padding - }, - - /** - * Test style of the notification. - */ - contentText: { - color: ColorPalette.white - }, - - /** - * Dismiss icon style. - */ - dismissIcon: { - alignSelf: 'center', - color: ColorPalette.white, - fontSize: 16, - padding: 1.5 * BoxModel.padding - }, - - /** - * Outermost view of a single notification. - */ - notification: { - borderRadius: 5, - flexDirection: 'row', - marginTop: 0.5 * BoxModel.margin - }, - - /** - * Outermost container of a list of notifications. - */ - notificationContainer: { - flexGrow: 0, - justifyContent: 'flex-end', - padding: 2 * BoxModel.padding, - paddingBottom: BoxModel.padding - }, - - /** - * Wrapper for the message (without title). - */ - notificationContent: { - flexDirection: 'column', - paddingVertical: 0.5 * BoxModel.padding - }, - - /** - * The View containing the title. - */ - notificationTitle: { - paddingVertical: 0.5 * BoxModel.padding - }, - - /** - * Background settings for different notification types. - */ - - notificationTypeError: { - backgroundColor: ColorPalette.R400 - }, - - notificationTypeInfo: { - backgroundColor: ColorPalette.N500 - }, - - notificationTypeNormal: { - // NOTE: Mobile has black background when the large video doesn't render - // a stream, so we avoid using black as the background of the normal - // type notifications. - backgroundColor: ColorPalette.N500 - }, - - notificationTypeSuccess: { - backgroundColor: ColorPalette.G400 - }, - - notificationTypeWarning: { - backgroundColor: ColorPalette.Y200 - }, - - /** - * Title text style. - */ - titleText: { - color: ColorPalette.white, - fontWeight: 'bold' - } -});