haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rn,recent-list: replace swipe options with long-press sheet 

This change serves 2 purposes:

- (Hopefully) make the recent list entry options easier to discover
- Remove the (now unmaintained) swipeout dependency
This commit is contained in:
Saúl Ibarra Corretgé 2020-09-08 18:06:06 +02:00 committed by Saúl Ibarra Corretgé
parent 39af6f5943
commit 63fe1de789
13 changed files with 331 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lang/main.json
View File

@ -366,7 +366,7 @@
"password": "$t(lockRoomPasswordUppercase):",
"title": "Share",
"tooltip": "Share link and dial-in info for this meeting",
"label": "Meeting info"
"label": "Dial-in info"
},
"inviteDialog": {
"alertText": "Failed to invite some participants.",
@ -876,12 +876,12 @@
"getHelp": "Get help",
"go": "GO",
"goSmall": "GO",
"info": "Info",
"info": "Dial-in info",
"join": "CREATE / JOIN",
"moderatedMessage": "Or <a href=\"{{url}}\" rel=\"noopener noreferrer\" target=\"_blank\">book a meeting URL</a> in advance where you are the only moderator.",
"privacy": "Privacy",
"recentList": "Recent",
"recentListDelete": "Delete",
"recentListDelete": "Delete entry",
"recentListEmpty": "Your recent list is currently empty. Chat with your team and you will find all your recent meetings here.",
"reducedUIText": "Welcome to {{app}}!",
"roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",

1
package.json
View File

@ -81,7 +81,6 @@
"react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
"react-native-svg": "9.7.1",
"react-native-svg-transformer": "0.13.0",
"react-native-swipeout": "2.3.6",
"react-native-watch-connectivity": "0.4.3",
"react-native-webrtc": "1.84.0",
"react-native-webview": "10.9.0",

1
react/features/base/icons/svg/index.js
View File

@ -91,6 +91,7 @@ export { default as IconShareVideo } from './shared-video.svg';
export { default as IconSwitchCamera } from './switch-camera.svg';
export { default as IconTileView } from './tiles-many.svg';
export { default as IconToggleRecording } from './camera-take-picture.svg';
export { default as IconTrash } from './trash.svg';
export { default as IconVideoQualityAudioOnly } from './AUD.svg';
export { default as IconVideoQualityHD } from './HD.svg';
export { default as IconVideoQualityLD } from './LD.svg';

1
react/features/base/icons/svg/trash.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 577 B

40
react/features/base/react/components/NavigateSectionList.js
View File

@ -20,6 +20,11 @@ type Props = {
*/
disabled: boolean,
/**
* Function to be invoked when an item is long pressed. The item is passed.
*/
onLongPress: Function,
/**
* Function to be invoked when an item is pressed. The item's URL is passed.
*/
@ -44,13 +49,7 @@ type Props = {
/**
* An array of sections
*/
sections: Array<Section>,
/**
* Optional array of on-slide actions this list should support. For details
* see https://github.com/dancormier/react-native-swipeout.
*/
slideActions?: Array<Object>
sections: Array<Section>
};
/**
@ -83,11 +82,11 @@ class NavigateSectionList extends Component<Props> {
constructor(props: Props) {
super(props);
this._getItemKey = this._getItemKey.bind(this);
this._onLongPress = this._onLongPress.bind(this);
this._onPress = this._onPress.bind(this);
this._onRefresh = this._onRefresh.bind(this);
this._renderItem = this._renderItem.bind(this);
this._renderListEmptyComponent
= this._renderListEmptyComponent.bind(this);
this._renderListEmptyComponent = this._renderListEmptyComponent.bind(this);
this._renderSectionHeader = this._renderSectionHeader.bind(this);
}
@ -131,6 +130,25 @@ class NavigateSectionList extends Component<Props> {
return `${index}-${item.key}`;
}
_onLongPress: string => Function;
/**
* Returns a function that is used in the onLongPress callback of the items.
*
* @param {Object} item - The item that was long-pressed.
* @private
* @returns {Function}
*/
_onLongPress(item) {
const { disabled, onLongPress } = this.props;
if (!disabled && typeof onLongPress === 'function') {
return () => onLongPress(item);
}
return null;
}
_onPress: string => Function;
/**
@ -210,10 +228,10 @@ class NavigateSectionList extends Component<Props> {
<NavigateSectionListItem
item = { item }
key = { key }
onLongPress = { url ? this._onLongPress(item) : undefined }
onPress = { url ? this._onPress(url) : undefined }
secondaryAction = {
url ? undefined : this._onSecondaryAction(id) }
slideActions = { this.props.slideActions } />
url ? undefined : this._onSecondaryAction(id) } />
);
}

12
react/features/base/react/components/native/AvatarListItem.js
View File

@ -52,6 +52,11 @@ type Props = {
*/
linesStyle?: StyleType,
/**
* Function to invoke on long press.
*/
onLongPress: ?Function,
/**
* Function to invoke on press.
*/
@ -88,13 +93,16 @@ export default class AvatarListItem extends Component<Props> {
avatarOnly,
avatarSize = AVATAR_SIZE,
avatarStatus,
avatarStyle
avatarStyle,
onLongPress,
onPress
} = this.props;
const { avatar, colorBase, lines, title } = this.props.item;
return (
<Container
onClick = { this.props.onPress }
onClick = { onPress }
onLongPress = { onLongPress }
style = { styles.listItem }
underlayColor = { UNDERLAY_COLOR }>
<Avatar

51
react/features/base/react/components/native/NavigateSectionListItem.js
View File

@ -1,9 +1,7 @@
// @flow
import React, { Component } from 'react';
import Swipeout from 'react-native-swipeout';
import { ColorPalette } from '../../../styles';
import type { Item } from '../../Types';
import AvatarListItem from './AvatarListItem';
@ -18,6 +16,11 @@ type Props = {
*/
item: Item,
/**
* Function to be invoked when an item is long pressed. The item is passed.
*/
onLongPress: ?Function,
/**
* Function to be invoked when an Item is pressed. The Item's URL is passed.
*/
@ -26,13 +29,7 @@ type Props = {
/**
* Function to be invoked when secondary action was performed on an Item.
*/
secondaryAction: ?Function,
/**
* Optional array of on-slide actions this list should support. For details
* see https://github.com/dancormier/react-native-swipeout.
*/
slideActions?: Array<Object>
secondaryAction: ?Function
}
/**
@ -116,37 +113,15 @@ export default class NavigateSectionListItem extends Component<Props> {
* @returns {ReactElement}
*/
render() {
const { item, slideActions } = this.props;
const { id } = item;
let right;
// NOTE: The {@code Swipeout} component has an onPress prop encapsulated
// in the {@code right} array, but we need to bind it to the ID of the
// item too.
if (slideActions) {
right = [];
for (const slideAction of slideActions) {
right.push({
backgroundColor: slideAction.backgroundColor,
onPress: slideAction.onPress.bind(undefined, id),
text: slideAction.text
});
}
}
const { item, onLongPress, onPress, secondaryAction } = this.props;
return (
<Swipeout
autoClose = { true }
backgroundColor = { ColorPalette.transparent }
right = { right }>
<AvatarListItem
item = { item }
onPress = { this.props.onPress } >
{ this.props.secondaryAction
&& this._renderSecondaryAction() }
</AvatarListItem>
</Swipeout>
<AvatarListItem
item = { item }
onLongPress = { onLongPress }
onPress = { onPress } >
{ secondaryAction && this._renderSecondaryAction() }
</AvatarListItem>
);
}
}

6
react/features/calendar-sync/components/CalendarListContent.native.js
View File

@ -106,7 +106,7 @@ class CalendarListContent extends Component<Props> {
);
}
_onPress: (string, ?string) => Function;
_onPress: (string, ?string) => void;
/**
* Handles the list's navigate action.
@ -259,9 +259,7 @@ class CalendarListContent extends Component<Props> {
* Maps redux state to component props.
*
* @param {Object} state - The redux state.
* @returns {{
* _eventList: Array<Object>
* }}
* @returns {Props}
*/
function _mapStateToProps(state: Object) {
return {

48
react/features/recent-list/components/DeleteItemButton.native.js Normal file
View File

@ -0,0 +1,48 @@
// @flow
import { translate } from '../../base/i18n';
import { IconTrash } from '../../base/icons';
import { connect } from '../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { deleteRecentListEntry } from '../actions';
export type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
/**
* The ID of the entry to be deleted.
*/
itemId: Object,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
/**
* A recent list menu button which deletes the selected entry.
*/
class DeleteItemButton extends AbstractButton<Props, *> {
accessibilityLabel = 'welcomepage.recentListDelete';
icon = IconTrash;
label = 'welcomepage.recentListDelete';
/**
* Handles clicking / pressing the button.
*
* @private
* @returns {void}
*/
_handleClick() {
const { dispatch, itemId } = this.props;
dispatch(deleteRecentListEntry(itemId));
}
}
export default translate(connect()(DeleteItemButton));

52
react/features/recent-list/components/RecentList.native.js
View File

@ -4,16 +4,14 @@ import React from 'react';
import type { Dispatch } from 'redux';
import { getDefaultURL } from '../../app/functions';
import { openDialog } from '../../base/dialog/actions';
import { translate } from '../../base/i18n';
import { setActiveModalId } from '../../base/modal';
import { NavigateSectionList, type Section } from '../../base/react';
import { connect } from '../../base/redux';
import { ColorPalette } from '../../base/styles';
import { DIAL_IN_SUMMARY_VIEW_ID } from '../../invite/constants';
import { deleteRecentListEntry } from '../actions';
import { isRecentListEnabled, toDisplayableList } from '../functions';
import AbstractRecentList from './AbstractRecentList';
import RecentListItemMenu from './RecentListItemMenu.native';
/**
* The type of the React {@code Component} props of {@link RecentList}
@ -62,8 +60,8 @@ class RecentList extends AbstractRecentList<Props> {
constructor(props: Props) {
super(props);
this._onDelete = this._onDelete.bind(this);
this._onShowDialInInfo = this._onShowDialInInfo.bind(this);
// Bind event handlers so they are only bound once per instance.
this._onLongPress = this._onLongPress.bind(this);
}
/**
@ -82,50 +80,29 @@ class RecentList extends AbstractRecentList<Props> {
_recentList
} = this.props;
const recentList = toDisplayableList(_recentList, t, _defaultServerURL);
const slideActions = [ {
backgroundColor: ColorPalette.blue,
onPress: this._onShowDialInInfo,
text: t('welcomepage.info')
}, {
backgroundColor: 'red',
onPress: this._onDelete,
text: t('welcomepage.recentListDelete')
} ];
return (
<NavigateSectionList
disabled = { disabled }
onLongPress = { this._onLongPress }
onPress = { this._onPress }
renderListEmptyComponent
= { this._getRenderListEmptyComponent() }
sections = { recentList }
slideActions = { slideActions } />
sections = { recentList } />
);
}
_onDelete: Object => void
_onLongPress: (Object) => void;
/**
* Callback for the delete action of the list.
* Handles the list's navigate action.
*
* @param {Object} itemId - The ID of the entry thats deletion is
* requested.
* @private
* @param {Object} item - The item which was long pressed.
* @returns {void}
*/
_onDelete(itemId) {
this.props.dispatch(deleteRecentListEntry(itemId));
}
_onShowDialInInfo: Object => void
/**
* Callback for the dial-in info action of the list.
*
* @param {Object} itemId - The ID of the entry for which we'd like to show the dial in numbers.
* @returns {void}
*/
_onShowDialInInfo(itemId) {
this.props.dispatch(setActiveModalId(DIAL_IN_SUMMARY_VIEW_ID, { summaryUrl: itemId.url }));
_onLongPress(item) {
this.props.dispatch(openDialog(RecentListItemMenu, { item }));
}
}
@ -133,10 +110,7 @@ class RecentList extends AbstractRecentList<Props> {
* Maps redux state to component props.
*
* @param {Object} state - The redux state.
* @returns {{
* _defaultServerURL: string,
* _recentList: Array
* }}
* @returns {Props}
*/
export function _mapStateToProps(state: Object) {
return {

143
react/features/recent-list/components/RecentListItemMenu.native.js Normal file
View File

@ -0,0 +1,143 @@
// @flow
import React, { PureComponent } from 'react';
import { Text, View } from 'react-native';
import { ColorSchemeRegistry } from '../../base/color-scheme';
import { BottomSheet, hideDialog, isDialogOpen } from '../../base/dialog';
import { type Item } from '../../base/react/Types';
import { connect } from '../../base/redux';
import { StyleType } from '../../base/styles';
import DeleteItemButton from './DeleteItemButton.native';
import ShowDialInInfoButton from './ShowDialInInfoButton.native';
import styles from './styles';
type Props = {
/**
* The Redux dispatch function.
*/
dispatch: Function,
/**
* Item being rendered in this menu.
*/
item: Item,
/**
* The color-schemed stylesheet of the BottomSheet.
*/
_bottomSheetStyles: StyleType,
/**
* True if the menu is currently open, false otherwise.
*/
_isOpen: boolean
}
// eslint-disable-next-line prefer-const
let RecentListItemMenu_;
/**
* Class to implement a popup menu that opens upon long pressing a recent list item.
*/
class RecentListItemMenu extends PureComponent<Props> {
/**
* Constructor of the component.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this._onCancel = this._onCancel.bind(this);
this._renderMenuHeader = this._renderMenuHeader.bind(this);
}
/**
* Implements {@code Component#render}.
*
* @inheritdoc
*/
render() {
const { _bottomSheetStyles, item } = this.props;
const buttonProps = {
afterClick: this._onCancel,
itemId: item.id,
showLabel: true,
styles: _bottomSheetStyles.buttons
};
return (
<BottomSheet
onCancel = { this._onCancel }
renderHeader = { this._renderMenuHeader }>
<DeleteItemButton { ...buttonProps } />
<ShowDialInInfoButton { ...buttonProps } />
</BottomSheet>
);
}
_onCancel: () => boolean;
/**
* Callback to hide this menu.
*
* @private
* @returns {boolean}
*/
_onCancel() {
if (this.props._isOpen) {
this.props.dispatch(hideDialog(RecentListItemMenu_));
return true;
}
return false;
}
_renderMenuHeader: () => React$Element<any>;
/**
* Function to render the menu's header.
*
* @returns {React$Element}
*/
_renderMenuHeader() {
const { _bottomSheetStyles, item } = this.props;
return (
<View
style = { [
_bottomSheetStyles.sheet,
styles.entryNameContainer
] }>
<Text
ellipsizeMode = { 'middle' }
numberOfLines = { 1 }
style = { styles.entryNameLabel }>
{ item.title }
</Text>
</View>
);
}
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @private
* @returns {Props}
*/
function _mapStateToProps(state) {
return {
_bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
_isOpen: isDialogOpen(state, RecentListItemMenu_)
};
}
RecentListItemMenu_ = connect(_mapStateToProps)(RecentListItemMenu);
export default RecentListItemMenu_;

49
react/features/recent-list/components/ShowDialInInfoButton.native.js Normal file
View File

@ -0,0 +1,49 @@
// @flow
import { translate } from '../../base/i18n';
import { IconInfo } from '../../base/icons';
import { setActiveModalId } from '../../base/modal';
import { connect } from '../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { DIAL_IN_SUMMARY_VIEW_ID } from '../../invite/constants';
export type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
/**
* The ID of the entry to be deleted.
*/
itemId: Object,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
/**
* A recent list menu button which opens the dial-in info dialog.
*/
class ShowDialInInfoButton extends AbstractButton<Props, *> {
accessibilityLabel = 'welcomepage.info';
icon = IconInfo;
label = 'welcomepage.info';
/**
* Handles clicking / pressing the button.
*
* @private
* @returns {void}
*/
_handleClick() {
const { dispatch, itemId } = this.props;
dispatch(setActiveModalId(DIAL_IN_SUMMARY_VIEW_ID, { summaryUrl: itemId.url }));
}
}
export default translate(connect()(ShowDialInInfoButton));

20
react/features/recent-list/components/styles.native.js
View File

@ -1,4 +1,4 @@
import { createStyleSheet } from '../../base/styles';
import { ColorPalette, createStyleSheet } from '../../base/styles';
/**
* The styles of the React {@code Component}s of the feature recent-list i.e.
@ -22,5 +22,23 @@ export default createStyleSheet({
alignItems: 'center',
justifyContent: 'center',
padding: 20
},
entryNameContainer: {
alignItems: 'center',
borderBottomColor: ColorPalette.lightGrey,
borderBottomWidth: 1,
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
flexDirection: 'row',
justifyContent: 'center',
height: 48
},
entryNameLabel: {
color: ColorPalette.lightGrey,
flexShrink: 1,
fontSize: 16,
opacity: 0.90
}
});