nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/experimental' into dbkr/sas

Browse Source
This commit is contained in:
David Baker
2019-01-23 17:32:18 +00:00
parent 60a8d560d1 94b1d739fb
commit 6a90625d36
172 changed files with 1885 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/structures/CompatibilityPage.js
View File

@@ -41,10 +41,15 @@ module.exports = React.createClass({
<div className="mx_CompatibilityPage_box">
<p>{ _t("Sorry, your browser is <b>not</b> able to run Riot.", {}, { 'b': (sub) => <b>{sub}</b> }) } </p>
<p>
{ _t("Riot uses many advanced browser features, some of which are not available or experimental in your current browser.") }
{ _t(
"Riot uses many advanced browser features, some of which are not available " +
"or experimental in your current browser.",
) }
</p>
<p>
{ _t('Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.',
{ _t(
'Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> ' +
'for the best experience.',
{},
{
'chromeLink': (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
@@ -60,7 +65,12 @@ module.exports = React.createClass({
)}
</p>
<p>
{ _t("With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!") }
{ _t(
"With your current browser, the look and feel of the application may be " +
"completely incorrect, and some or all features may not function. " +
"If you want to try it anyway you can continue, but you are on your own in terms " +
"of any issues you may encounter!",
) }
</p>
<button onClick={this.onAccept}>
{ _t("I understand the risks and wish to continue") }

18
src/components/structures/GroupView.js
View File

@@ -125,7 +125,7 @@ const CategoryRoomList = React.createClass({
(<AccessibleButton className="mx_GroupView_featuredThings_addButton"
onClick={this.onAddRoomsToSummaryClicked}
>
<TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
<TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a Room') }
</div>
@@ -226,7 +226,7 @@ const FeaturedRoom = React.createClass({
const deleteButton = this.props.editing ?
<img
className="mx_GroupView_featuredThing_deleteButton"
src="img/cancel-small.svg"
src={require("../../../res/img/cancel-small.svg")}
width="14"
height="14"
alt="Delete"
@@ -300,7 +300,7 @@ const RoleUserList = React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const addButton = this.props.editing ?
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
<TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
<TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a User') }
</div>
@@ -379,7 +379,7 @@ const FeaturedUser = React.createClass({
const deleteButton = this.props.editing ?
<img
className="mx_GroupView_featuredThing_deleteButton"
src="img/cancel-small.svg"
src={require("../../../res/img/cancel-small.svg")}
width="14"
height="14"
alt="Delete"
@@ -855,7 +855,7 @@ export default React.createClass({
onClick={this._onAddRoomsClick}
>
<div className="mx_GroupView_rooms_header_addRow_button">
<TintableSvg src="img/icons-room-add.svg" width="24" height="24" />
<TintableSvg src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
</div>
<div className="mx_GroupView_rooms_header_addRow_label">
{ _t('Add rooms to this community') }
@@ -1189,7 +1189,7 @@ export default React.createClass({
</label>
<div className="mx_GroupView_avatarPicker_edit">
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
<img src="img/camera.svg"
<img src={require("../../../res/img/camera.svg")}
alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" />
</label>
@@ -1255,7 +1255,7 @@ export default React.createClass({
);
rightButtons.push(
<AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
<img src="img/cancel.svg" className="mx_filterFlipColor"
<img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton>,
);
@@ -1265,13 +1265,13 @@ export default React.createClass({
<AccessibleButton className="mx_GroupHeader_button"
onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
>
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
<TintableSvg src={require("../../../res/img/icons-settings-room.svg")} width="16" height="16" />
</AccessibleButton>,
);
}
rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
<TintableSvg src="img/icons-share.svg" width="16" height="16" />
<TintableSvg src={require("../../../res/img/icons-share.svg")} width="16" height="16" />
</AccessibleButton>,
);
}

2
src/components/structures/HomePage.js
View File

@@ -108,7 +108,7 @@ class HomePage extends React.Component {
if (this.context.matrixClient.isGuest()) {
guestWarning = (
<div className="mx_HomePage_guest_warning">
<img src="img/warning.svg" width="24" height="23" />
<img src={require("../../../res/img/warning.svg")} width="24" height="23" />
<div>
<div>
{ _t("You are currently using Riot anonymously as a guest.") }

6
src/components/structures/IndicatorScrollbar.js
View File

@@ -66,7 +66,11 @@ export default class IndicatorScrollbar extends React.Component {
}
render() {
return (<AutoHideScrollbar ref={this._collectScrollerComponent} wrappedRef={this._collectScroller} {... this.props}>
return (<AutoHideScrollbar
ref={this._collectScrollerComponent}
wrappedRef={this._collectScroller}
{... this.props}
>
{ this.props.children }
</AutoHideScrollbar>);
}

2
src/components/structures/InteractiveAuth.js
View File

@@ -20,7 +20,7 @@ const InteractiveAuth = Matrix.InteractiveAuth;
import React from 'react';
import PropTypes from 'prop-types';
import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
export default React.createClass({
displayName: 'InteractiveAuth',

47
src/components/structures/LoggedInView.js
View File

@@ -35,7 +35,7 @@ import RoomListStore from "../../stores/RoomListStore";
import TagOrderActions from '../../actions/TagOrderActions';
import RoomListActions from '../../actions/RoomListActions';
import ResizeHandle from '../views/elements/ResizeHandle';
import {Resizer, CollapseDistributor} from '../../resizer'
import {Resizer, CollapseDistributor} from '../../resizer';
// We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity.
// NB. this is just for server notices rather than pinned messages in general.
@@ -160,7 +160,7 @@ const LoggedInView = React.createClass({
const classNames = {
handle: "mx_ResizeHandle",
vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse"
reverse: "mx_ResizeHandle_reverse",
};
const collapseConfig = {
toggleSize: 260 - 50,
@@ -183,10 +183,13 @@ const LoggedInView = React.createClass({
},
_loadResizerPreferences() {
const lhsSize = window.localStorage.getItem("mx_lhs_size");
let lhsSize = window.localStorage.getItem("mx_lhs_size");
if (lhsSize !== null) {
this.resizer.forHandleAt(0).resize(parseInt(lhsSize, 10));
lhsSize = parseInt(lhsSize, 10);
} else {
lhsSize = 350;
}
this.resizer.forHandleAt(0).resize(lhsSize);
},
onAccountData: function(event) {
@@ -201,7 +204,11 @@ const LoggedInView = React.createClass({
},
onSync: function(syncState, oldSyncState, data) {
const oldErrCode = this.state.syncErrorData && this.state.syncErrorData.error && this.state.syncErrorData.error.errcode;
const oldErrCode = (
this.state.syncErrorData &&
this.state.syncErrorData.error &&
this.state.syncErrorData.error.errcode
);
const newErrCode = data && data.error && data.error.errcode;
if (syncState === oldSyncState && oldErrCode === newErrCode) return;
@@ -310,7 +317,10 @@ const LoggedInView = React.createClass({
}
},
/** dispatch a page-up/page-down/etc to the appropriate component */
/**
* dispatch a page-up/page-down/etc to the appropriate component
* @param {Object} ev The key event
*/
_onScrollKeyPressed: function(ev) {
if (this.refs.roomView) {
this.refs.roomView.handleScrollKey(ev);
@@ -424,11 +434,11 @@ const LoggedInView = React.createClass({
const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
let page_element;
let pageElement;
switch (this.props.page_type) {
case PageTypes.RoomView:
page_element = <RoomView
pageElement = <RoomView
ref='roomView'
autoJoin={this.props.autoJoin}
onRegistered={this.props.onRegistered}
@@ -444,7 +454,7 @@ const LoggedInView = React.createClass({
break;
case PageTypes.UserSettings:
page_element = <UserSettings
pageElement = <UserSettings
onClose={this.props.onCloseAllSettings}
brand={this.props.config.brand}
referralBaseUrl={this.props.config.referralBaseUrl}
@@ -453,11 +463,11 @@ const LoggedInView = React.createClass({
break;
case PageTypes.MyGroups:
page_element = <MyGroups />;
pageElement = <MyGroups />;
break;
case PageTypes.RoomDirectory:
page_element = <RoomDirectory
pageElement = <RoomDirectory
ref="roomDirectory"
config={this.props.config.roomDirectory}
/>;
@@ -471,7 +481,7 @@ const LoggedInView = React.createClass({
const teamServerUrl = this.props.config.teamServerConfig ?
this.props.config.teamServerConfig.teamServerURL : null;
page_element = <HomePage
pageElement = <HomePage
teamServerUrl={teamServerUrl}
teamToken={this.props.teamToken}
homePageUrl={this.props.config.welcomePageUrl}
@@ -480,12 +490,12 @@ const LoggedInView = React.createClass({
break;
case PageTypes.UserView:
page_element = null; // deliberately null for now
pageElement = null; // deliberately null for now
// TODO: fix/remove UserView
// right_panel = <RightPanel disabled={this.props.rightDisabled} />;
break;
case PageTypes.GroupView:
page_element = <GroupView
pageElement = <GroupView
groupId={this.props.currentGroupId}
isNew={this.props.currentGroupIsNew}
collapsedRhs={this.props.collapsedRhs}
@@ -525,7 +535,10 @@ const LoggedInView = React.createClass({
topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
} else if (this.state.userHasGeneratedPassword) {
topBar = <PasswordNagBar />;
} else if (!isGuest && Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
} else if (
!isGuest && Notifier.supportsDesktopNotifications() &&
!Notifier.isEnabled() && !Notifier.isToolbarHidden()
) {
topBar = <MatrixToolbar />;
}
@@ -546,8 +559,8 @@ const LoggedInView = React.createClass({
collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
disabled={this.props.leftDisabled}
/>
<ResizeHandle/>
{ page_element }
<ResizeHandle />
{ pageElement }
</div>
</DragDropContext>
</div>

57
src/components/structures/LoginBox.js
View File

@@ -1,57 +0,0 @@
/*
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
const React = require('react');
import { _t } from '../../languageHandler';
const dis = require('../../dispatcher');
const AccessibleButton = require('../../components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'LoginBox',
propTypes: {
},
onLoginClick: function() {
dis.dispatch({ action: 'start_login' });
},
onRegisterClick: function() {
dis.dispatch({ action: 'start_registration' });
},
render: function() {
const loginButton = (
<div className="mx_LoginBox_loginButton_wrapper">
<AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
{ _t("Login") }
</AccessibleButton>
<AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
{ _t("Register") }
</AccessibleButton>
</div>
);
return (
<div className="mx_LoginBox">
{ loginButton }
</div>
);
},
});

33
src/components/structures/MatrixChat.js
View File

@@ -183,7 +183,7 @@ export default React.createClass({
register_is_url: null,
register_id_sid: null,
// Parameters used for setting up the login/registration views
// Parameters used for setting up the authentication views
defaultServerName: this.props.config.default_server_name,
defaultHsUrl: this.props.config.default_hs_url,
defaultIsUrl: this.props.config.default_is_url,
@@ -302,7 +302,10 @@ export default React.createClass({
// will check their settings.
this.setState({
defaultServerName: null, // To un-hide any secrets people might be keeping
defaultServerDiscoveryError: _t("Invalid configuration: Cannot supply a default homeserver URL and a default server name"),
defaultServerDiscoveryError: _t(
"Invalid configuration: Cannot supply a default homeserver URL and " +
"a default server name",
),
});
}
@@ -607,7 +610,17 @@ export default React.createClass({
case 'view_indexed_room':
this._viewIndexedRoom(payload.roomIndex);
break;
case 'view_user_settings':
case 'view_user_settings': {
if (SettingsStore.isFeatureEnabled("feature_tabbed_settings")) {
const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {});
} else {
this._setPage(PageTypes.UserSettings);
this.notifyNewScreen('settings');
}
break;
}
case 'view_old_user_settings':
this._setPage(PageTypes.UserSettings);
this.notifyNewScreen('settings');
break;
@@ -1840,7 +1853,11 @@ export default React.createClass({
render: function() {
// console.log(`Rendering MatrixChat with view ${this.state.view}`);
if (this.state.view === VIEWS.LOADING || this.state.view === VIEWS.LOGGING_IN || this.state.loadingDefaultHomeserver) {
if (
this.state.view === VIEWS.LOADING ||
this.state.view === VIEWS.LOGGING_IN ||
this.state.loadingDefaultHomeserver
) {
const Spinner = sdk.getComponent('elements.Spinner');
return (
<div className="mx_MatrixChat_splash">
@@ -1851,7 +1868,7 @@ export default React.createClass({
// needs to be before normal PageTypes as you are logged in technically
if (this.state.view === VIEWS.POST_REGISTRATION) {
const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
return (
<PostRegistration
onComplete={this.onFinishPostRegistration} />
@@ -1906,7 +1923,7 @@ export default React.createClass({
}
if (this.state.view === VIEWS.REGISTER) {
const Registration = sdk.getComponent('structures.login.Registration');
const Registration = sdk.getComponent('structures.auth.Registration');
return (
<Registration
clientSecret={this.state.register_client_secret}
@@ -1935,7 +1952,7 @@ export default React.createClass({
if (this.state.view === VIEWS.FORGOT_PASSWORD) {
const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
const ForgotPassword = sdk.getComponent('structures.auth.ForgotPassword');
return (
<ForgotPassword
defaultServerName={this.getDefaultServerName()}
@@ -1951,7 +1968,7 @@ export default React.createClass({
}
if (this.state.view === VIEWS.LOGIN) {
const Login = sdk.getComponent('structures.login.Login');
const Login = sdk.getComponent('structures.auth.Login');
return (
<Login
onLoggedIn={Lifecycle.setLoggedIn}

22
src/components/structures/MessagePanel.js
View File

@@ -631,13 +631,29 @@ module.exports = React.createClass({
}
},
_scrollDownIfAtBottom: function() {
_onTypingVisible: function() {
const scrollPanel = this.refs.scrollPanel;
if (scrollPanel) {
if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) {
scrollPanel.blockShrinking();
// scroll down if at bottom
scrollPanel.checkScroll();
}
},
updateTimelineMinHeight: function() {
const scrollPanel = this.refs.scrollPanel;
const whoIsTyping = this.refs.whoIsTyping;
const isTypingVisible = whoIsTyping && whoIsTyping.isVisible();
if (scrollPanel) {
if (isTypingVisible) {
scrollPanel.blockShrinking();
} else {
scrollPanel.clearBlockShrinking();
}
}
},
onResize: function() {
dis.dispatch({ action: 'timeline_resize' }, true);
},
@@ -666,7 +682,7 @@ module.exports = React.createClass({
let whoIsTyping;
if (this.props.room) {
whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />);
whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._onTypingVisible} ref="whoIsTyping" />);
}
return (

4
src/components/structures/MyGroups.js
View File

@@ -107,7 +107,7 @@ export default withMatrixClient(React.createClass({
}
return <div className="mx_MyGroups">
<SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
<SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
<div className='mx_MyGroups_header'>
<div className="mx_MyGroups_headerCard">
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
@@ -124,7 +124,7 @@ export default withMatrixClient(React.createClass({
</div>
{/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
<TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
<TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
</AccessibleButton>
<div className="mx_MyGroups_headerCard_content">
<div className="mx_MyGroups_headerCard_header">

2
src/components/structures/RoomDirectory.js
View File

@@ -571,7 +571,7 @@ module.exports = React.createClass({
const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
return (
<div className="mx_RoomDirectory">
<SimpleRoomHeader title={ _t('Directory') } icon="img/icons-directory.svg" />
<SimpleRoomHeader title={ _t('Directory') } icon={require("../../../res/img/icons-directory.svg")} />
<div className="mx_RoomDirectory_list">
<div className="mx_RoomDirectory_listheader">
<DirectorySearchBox

59
src/components/structures/RoomStatusBar.js
View File

@@ -45,14 +45,6 @@ module.exports = React.createClass({
propTypes: {
// the room this statusbar is representing.
room: PropTypes.object.isRequired,
// the number of messages which have arrived since we've been scrolled up
numUnreadMessages: PropTypes.number,
// this is true if we are fully scrolled-down, and are looking at
// the end of the live timeline.
atEndOfLiveTimeline: PropTypes.bool,
// This is true when the user is alone in the room, but has also sent a message.
// Used to suggest to the user to invite someone
sentMessageAndIsAlone: PropTypes.bool,
@@ -82,9 +74,6 @@ module.exports = React.createClass({
// 'you are alone' bar
onStopWarningClick: PropTypes.func,
// callback for when the user clicks on the 'scroll to bottom' button
onScrollToBottomClick: PropTypes.func,
// callback for when we do something that changes the size of the
// status bar. This is used to trigger a re-layout in the parent
// component.
@@ -180,8 +169,6 @@ module.exports = React.createClass({
// indicate other sizes.
_getSize: function() {
if (this._shouldShowConnectionError() ||
this.props.numUnreadMessages ||
!this.props.atEndOfLiveTimeline ||
this.props.hasActiveCall ||
this.props.sentMessageAndIsAlone
) {
@@ -194,32 +181,10 @@ module.exports = React.createClass({
// return suitable content for the image on the left of the status bar.
_getIndicator: function() {
if (this.props.numUnreadMessages) {
return (
<div className="mx_RoomStatusBar_scrollDownIndicator"
onClick={this.props.onScrollToBottomClick}>
<img src="img/newmessages.svg" width="24" height="24"
alt="" />
</div>
);
}
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
if (!this.props.atEndOfLiveTimeline) {
return (
<AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
onClick={this.props.onScrollToBottomClick}>
<img src="img/scrolldown.svg" width="24" height="24"
alt={_t("Scroll to bottom of page")}
title={_t("Scroll to bottom of page")} />
</AccessibleButton>
);
}
if (this.props.hasActiveCall) {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
<TintableSvg src="img/sound-indicator.svg" width="23" height="20" />
<TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
);
}
@@ -231,9 +196,7 @@ module.exports = React.createClass({
},
_shouldShowConnectionError: function() {
// no conn bar trumps unread count since you can't get unread messages
// without a connection! (technically may already have some but meh)
// It also trumps the "some not sent" msg since you can't resend without
// no conn bar trumps the "some not sent" msg since you can't resend without
// a connection!
// There's one situation in which we don't show this 'no connection' bar, and that's
// if it's a resource limit exceeded error: those are shown in the top bar.
@@ -327,7 +290,7 @@ module.exports = React.createClass({
}
return <div className="mx_RoomStatusBar_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
<img src={require("../../../res/img/warning.svg")} width="24" height="23" title={_t("Warning")} alt="" />
<div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
{ title }
@@ -346,7 +309,7 @@ module.exports = React.createClass({
if (this._shouldShowConnectionError()) {
return (
<div className="mx_RoomStatusBar_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
<img src={require("../../../res/img/warning.svg")} width="24" height="23" title="/!\ " alt="/!\ " />
<div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
{ _t('Connectivity to the server has been lost.') }
@@ -363,20 +326,6 @@ module.exports = React.createClass({
return this._getUnsentMessageContent();
}
// unread count trumps who is typing since the unread count is only
// set when you've scrolled up
if (this.props.numUnreadMessages) {
// MUST use var name "count" for pluralization to kick in
const unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
return (
<div className="mx_RoomStatusBar_unreadMessagesBar"
onClick={this.props.onScrollToBottomClick}>
{ unreadMsgs }
</div>
);
}
if (this.props.hasActiveCall) {
return (
<div className="mx_RoomStatusBar_callBar">

29
src/components/structures/RoomView.js
View File

@@ -1473,11 +1473,10 @@ module.exports = React.createClass({
onStatusBarHidden: function() {
// This is currently not desired as it is annoying if it keeps expanding and collapsing
// TODO: Find a less annoying way of hiding the status bar
/*if (this.unmounted) return;
if (this.unmounted) return;
this.setState({
statusBarVisible: false,
});*/
});
},
/**
@@ -1651,14 +1650,11 @@ module.exports = React.createClass({
isStatusAreaExpanded = this.state.statusBarVisible;
statusBar = <RoomStatusBar
room={this.state.room}
numUnreadMessages={this.state.numUnreadMessages}
atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
sentMessageAndIsAlone={this.state.isAlone}
hasActiveCall={inCall}
isPeeking={myMembership !== "join"}
onInviteClick={this.onInviteButtonClick}
onStopWarningClick={this.onStopAloneWarningClick}
onScrollToBottomClick={this.jumpToLiveTimeline}
onResize={this.onChildResize}
onVisible={this.onStatusBarVisible}
onHidden={this.onStatusBarHidden}
@@ -1757,8 +1753,8 @@ module.exports = React.createClass({
}
if (MatrixClientPeg.get().isGuest()) {
const LoginBox = sdk.getComponent('structures.LoginBox');
messageComposer = <LoginBox />;
const AuthButtons = sdk.getComponent('views.auth.AuthButtons');
messageComposer = <AuthButtons />;
}
// TODO: Why aren't we storing the term/scope/count in this format
@@ -1777,20 +1773,20 @@ module.exports = React.createClass({
if (call.type === "video") {
zoomButton = (
<div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
<TintableSvg src="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
<TintableSvg src={require("../../../res/img/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
</div>
);
videoMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
<TintableSvg src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
<TintableSvg src={call.isLocalVideoMuted() ? require("../../../res/img/video-unmute.svg") : require("../../../res/img/video-mute.svg")}
alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
width="31" height="27" />
</div>;
}
voiceMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
<TintableSvg src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
<TintableSvg src={call.isMicrophoneMuted() ? require("../../../res/img/voice-unmute.svg") : require("../../../res/img/voice-mute.svg")}
alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
width="21" height="26" />
</div>;
@@ -1802,7 +1798,7 @@ module.exports = React.createClass({
{ videoMuteButton }
{ zoomButton }
{ statusBar }
<TintableSvg className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17" />
<TintableSvg className="mx_RoomView_voipChevron" src={require("../../../res/img/voip-chevron.svg")} width="22" height="17" />
</div>;
}
@@ -1864,6 +1860,14 @@ module.exports = React.createClass({
onCloseClick={this.forgetReadMarker}
/>);
}
let jumpToBottom;
if (!this.state.atEndOfLiveTimeline) {
const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
jumpToBottom = (<JumpToBottomButton
numUnreadMessages={this.state.numUnreadMessages}
onScrollToBottomClick={this.jumpToLiveTimeline}
/>);
}
const statusBarAreaClass = classNames(
"mx_RoomView_statusArea",
{
@@ -1901,6 +1905,7 @@ module.exports = React.createClass({
{ auxPanel }
<div className="mx_RoomView_timeline">
{ topUnreadMessagesBar }
{ jumpToBottom }
{ messagePanel }
{ searchResultsPanel }
</div>

27
src/components/structures/ScrollPanel.js
View File

@@ -223,6 +223,8 @@ module.exports = React.createClass({
onResize: function() {
this.props.onResize();
// clear min-height as the height might have changed
this.clearBlockShrinking();
this.checkScroll();
if (this._gemScroll) this._gemScroll.forceUpdate();
},
@@ -372,6 +374,8 @@ module.exports = React.createClass({
}
this._unfillDebouncer = setTimeout(() => {
this._unfillDebouncer = null;
// if timeline shrinks, min-height should be cleared
this.clearBlockShrinking();
this.props.onUnfillRequest(backwards, markerScrollToken);
}, UNFILL_REQUEST_DEBOUNCE_MS);
}
@@ -678,6 +682,29 @@ module.exports = React.createClass({
this._gemScroll = gemScroll;
},
/**
* Set the current height as the min height for the message list
* so the timeline cannot shrink. This is used to avoid
* jumping when the typing indicator gets replaced by a smaller message.
*/
blockShrinking: function() {
const messageList = this.refs.itemlist;
if (messageList) {
const currentHeight = messageList.clientHeight;
messageList.style.minHeight = `${currentHeight}px`;
}
},
/**
* Clear the previously set min height
*/
clearBlockShrinking: function() {
const messageList = this.refs.itemlist;
if (messageList) {
messageList.style.minHeight = null;
}
},
render: function() {
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
// TODO: the classnames on the div and ol could do with being updated to

118
src/components/structures/TabbedView.js Normal file
View File

@@ -0,0 +1,118 @@
/*
Copyright 2017 Travis Ralston
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import * as React from "react";
import {_t} from '../../languageHandler';
import PropTypes from "prop-types";
/**
* Represents a tab for the TabbedView.
*/
export class Tab {
/**
* Creates a new tab.
* @param {string} tabLabel The untranslated tab label.
* @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
* @param {string} tabJsx The JSX for the tab container.
*/
constructor(tabLabel, tabIconClass, tabJsx) {
this.label = tabLabel;
this.icon = tabIconClass;
this.body = tabJsx;
}
}
export class TabbedView extends React.Component {
static propTypes = {
// The tabs to show
tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
};
constructor() {
super();
this.state = {
activeTabIndex: 0,
};
}
_getActiveTabIndex() {
if (!this.state || !this.state.activeTabIndex) return 0;
return this.state.activeTabIndex;
}
/**
* Shows the given tab
* @param {Tab} tab the tab to show
* @private
*/
_setActiveTab(tab) {
const idx = this.props.tabs.indexOf(tab);
if (idx !== -1) {
this.setState({activeTabIndex: idx});
} else {
console.error("Could not find tab " + tab.label + " in tabs");
}
}
_renderTabLabel(tab) {
let classes = "mx_TabbedView_tabLabel ";
const idx = this.props.tabs.indexOf(tab);
if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
if (tab.label === "Visit old settings") classes += "mx_TabbedView_tabLabel_TEMP_HACK";
let tabIcon = null;
if (tab.icon) {
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
}
const onClickHandler = () => this._setActiveTab(tab);
return (
<span className={classes} key={"tab_label_" + tab.label}
onClick={onClickHandler}>
{tabIcon}
<span className="mx_TabbedView_tabLabel_text">
{_t(tab.label)}
</span>
</span>
);
}
_renderTabPanel(tab) {
return (
<div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
{tab.body}
</div>
);
}
render() {
const labels = this.props.tabs.map(tab => this._renderTabLabel(tab));
const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]);
return (
<div className="mx_TabbedView">
<div className="mx_TabbedView_tabLabels">
{labels}
</div>
{panel}
</div>
);
}
}

2
src/components/structures/TagPanel.js
View File

@@ -136,7 +136,7 @@ const TagPanel = React.createClass({
let clearButton;
if (itemsSelected) {
clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
<TintableSvg src="img/icons-close.svg" width="24" height="24"
<TintableSvg src={require("../../../res/img/icons-close.svg")} width="24" height="24"
alt={_t("Clear filter")}
title={_t("Clear filter")}
/>

11
src/components/structures/TimelinePanel.js
View File

@@ -455,7 +455,7 @@ var TimelinePanel = React.createClass({
//
const myUserId = MatrixClientPeg.get().credentials.userId;
const sender = ev.sender ? ev.sender.userId : null;
var callback = null;
var callRMUpdated = false;
if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
updatedState.readMarkerVisible = true;
} else if (lastEv && this.getReadMarkerPosition() === 0) {
@@ -465,11 +465,16 @@ var TimelinePanel = React.createClass({
this._setReadMarker(lastEv.getId(), lastEv.getTs(), true);
updatedState.readMarkerVisible = false;
updatedState.readMarkerEventId = lastEv.getId();
callback = this.props.onReadMarkerUpdated;
callRMUpdated = true;
}
}
this.setState(updatedState, callback);
this.setState(updatedState, () => {
this.refs.messagePanel.updateTimelineMinHeight();
if (callRMUpdated) {
this.props.onReadMarkerUpdated();
}
});
});
},

2
src/components/structures/TopLeftMenuButton.js
View File

@@ -89,7 +89,7 @@ export default class TopLeftMenuButton extends React.Component {
resizeMethod="crop"
/>
{ nameElement }
<img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
<img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
</AccessibleButton>
);
}

4
src/components/structures/UploadBar.js
View File

@@ -91,8 +91,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
<div className="mx_UploadBar_uploadProgressOuter">
<div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
</div>
<img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src="img/fileicon.png" width="17" height="22" />
<img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
<img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src={require("../../../res/img/fileicon.png")} width="17" height="22" />
<img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18"
onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
/>
<div className="mx_UploadBar_uploadBytes">

8
src/components/structures/UserSettings.js
View File

@@ -1227,7 +1227,7 @@ module.exports = React.createClass({
/>
</div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<AccessibleButton element="img" src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
<AccessibleButton element="img" src={require("../../../res/img/cancel-small.svg")} width="14" height="14" alt={_t("Remove")}
onClick={onRemoveClick} />
</div>
</div>
@@ -1252,7 +1252,7 @@ module.exports = React.createClass({
onValueChanged={this._onAddEmailEditFinished} />
</div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<AccessibleButton element="img" src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
<AccessibleButton element="img" src={require("../../../res/img/plus.svg")} width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
</div>
</div>
);
@@ -1322,7 +1322,7 @@ module.exports = React.createClass({
<div className="mx_UserSettings_avatarPicker">
<AccessibleButton className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
<img src="img/cancel.svg"
<img src={require("../../../res/img/cancel.svg")}
width="15" height="15"
className="mx_filterFlipColor"
alt={_t("Remove avatar")}
@@ -1334,7 +1334,7 @@ module.exports = React.createClass({
</div>
<div className="mx_UserSettings_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label">
<img src="img/camera.svg" className="mx_filterFlipColor"
<img src={require("../../../res/img/camera.svg")} className="mx_filterFlipColor"
alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" />
</label>

23
src/components/structures/login/ForgotPassword.js → src/components/structures/auth/ForgotPassword.js
View File

@@ -183,10 +183,10 @@ module.exports = React.createClass({
},
render: function() {
const LoginPage = sdk.getComponent("login.LoginPage");
const LoginHeader = sdk.getComponent("login.LoginHeader");
const LoginFooter = sdk.getComponent("login.LoginFooter");
const ServerConfig = sdk.getComponent("login.ServerConfig");
const AuthPage = sdk.getComponent("auth.AuthPage");
const AuthHeader = sdk.getComponent("auth.AuthHeader");
const AuthBody = sdk.getComponent("auth.AuthBody");
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const Spinner = sdk.getComponent("elements.Spinner");
let resetPasswordJsx;
@@ -234,7 +234,7 @@ module.exports = React.createClass({
errorText = <div className="mx_Login_error">{ err }</div>;
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
resetPasswordJsx = (
<div>
@@ -272,7 +272,6 @@ module.exports = React.createClass({
{ _t('Create an account') }
</a>
<LanguageSelector />
<LoginFooter />
</div>
</div>
);
@@ -280,12 +279,12 @@ module.exports = React.createClass({
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
{ resetPasswordJsx }
</div>
</LoginPage>
<AuthPage>
<AuthHeader />
<AuthBody>
{resetPasswordJsx}
</AuthBody>
</AuthPage>
);
},
});

0
src/components/structures/login/LanguageSelector.js → src/components/structures/auth/LanguageSelector.js
View File

57
src/components/structures/login/Login.js → src/components/structures/auth/Login.js
View File

@@ -1,7 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -24,7 +24,6 @@ import { _t, _td } from '../../../languageHandler';
import sdk from '../../../index';
import Login from '../../../Login';
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
import { AutoDiscovery } from "matrix-js-sdk";
@@ -487,7 +486,7 @@ module.exports = React.createClass({
},
_renderPasswordStep: function() {
const PasswordLogin = sdk.getComponent('login.PasswordLogin');
const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
return (
<PasswordLogin
onSubmit={this.onPasswordLogin}
@@ -516,10 +515,10 @@ module.exports = React.createClass({
render: function() {
const Loader = sdk.getComponent("elements.Spinner");
const LoginPage = sdk.getComponent("login.LoginPage");
const LoginHeader = sdk.getComponent("login.LoginHeader");
const LoginFooter = sdk.getComponent("login.LoginFooter");
const ServerConfig = sdk.getComponent("login.ServerConfig");
const AuthPage = sdk.getComponent("auth.AuthPage");
const AuthHeader = sdk.getComponent("auth.AuthHeader");
const AuthBody = sdk.getComponent("auth.AuthBody");
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@@ -533,7 +532,6 @@ module.exports = React.createClass({
}
let serverConfig;
let header;
if (!SdkConfig.get()['disable_custom_urls']) {
serverConfig = <ServerConfig ref="serverConfig"
@@ -546,15 +544,7 @@ module.exports = React.createClass({
delayTimeMs={1000} />;
}
// FIXME: remove status.im theme tweaks
const theme = SettingsStore.getValue("theme");
if (theme !== "status") {
header = <h2>{ _t('Sign in') } { loader }</h2>;
} else {
if (!errorText) {
header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
}
}
const header = <h2>{ _t('Sign in') } { loader }</h2>;
let errorTextSection;
if (errorText) {
@@ -565,26 +555,23 @@ module.exports = React.createClass({
);
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<div>
{ header }
{ errorTextSection }
{ this.componentForStep(this.state.currentFlow) }
{ serverConfig }
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
<LanguageSelector />
<LoginFooter />
</div>
</div>
</LoginPage>
<AuthPage>
<AuthHeader />
<AuthBody>
{ header }
{ errorTextSection }
{ this.componentForStep(this.state.currentFlow) }
{ serverConfig }
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
<LanguageSelector />
</AuthBody>
</AuthPage>
);
},
});

15
src/components/structures/login/PostRegistration.js → src/components/structures/auth/PostRegistration.js
View File

@@ -60,12 +60,13 @@ module.exports = React.createClass({
render: function() {
const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
const LoginPage = sdk.getComponent('login.LoginPage');
const LoginHeader = sdk.getComponent('login.LoginHeader');
const AuthPage = sdk.getComponent('auth.AuthPage');
const AuthHeader = sdk.getComponent('auth.AuthHeader');
const AuthBody = sdk.getComponent("auth.AuthBody");
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<AuthPage>
<AuthHeader />
<AuthBody>
<div className="mx_Login_profile">
{ _t('Set a display name:') }
<ChangeDisplayName />
@@ -75,8 +76,8 @@ module.exports = React.createClass({
<button onClick={this.props.onComplete}>{ _t('Continue') }</button>
{ this.state.errorString }
</div>
</div>
</LoginPage>
</AuthBody>
</AuthPage>
);
},
});

52
src/components/structures/login/Registration.js → src/components/structures/auth/Registration.js
View File

@@ -1,7 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -24,11 +24,10 @@ import PropTypes from 'prop-types';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import RegistrationForm from '../../views/login/RegistrationForm';
import RegistrationForm from '../../views/auth/RegistrationForm';
import RtsClient from '../../../RtsClient';
import { _t, _td } from '../../../languageHandler';
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
const MIN_PASSWORD_LENGTH = 6;
@@ -397,14 +396,12 @@ module.exports = React.createClass({
},
render: function() {
const LoginHeader = sdk.getComponent('login.LoginHeader');
const LoginFooter = sdk.getComponent('login.LoginFooter');
const LoginPage = sdk.getComponent('login.LoginPage');
const AuthHeader = sdk.getComponent('auth.AuthHeader');
const AuthBody = sdk.getComponent("auth.AuthBody");
const AuthPage = sdk.getComponent('auth.AuthPage');
const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
const Spinner = sdk.getComponent("elements.Spinner");
const ServerConfig = sdk.getComponent('views.login.ServerConfig');
const theme = SettingsStore.getValue("theme");
const ServerConfig = sdk.getComponent('views.auth.ServerConfig');
let registerBody;
if (this.state.doingUIAuth) {
@@ -458,47 +455,40 @@ module.exports = React.createClass({
);
}
let header;
let errorText;
// FIXME: remove hardcoded Status team tweaks at some point
const err = this.state.errorText || this.props.defaultServerDiscoveryError;
if (theme === 'status' && err) {
header = <div className="mx_Login_error">{ err }</div>;
} else {
header = <h2>{ _t('Create an account') }</h2>;
if (err) {
errorText = <div className="mx_Login_error">{ err }</div>;
}
const header = <h2>{ _t('Create an account') }</h2>;
if (err) {
errorText = <div className="mx_Login_error">{ err }</div>;
}
let signIn;
if (!this.state.doingUIAuth) {
signIn = (
<a className="mx_Login_create" onClick={this.onLoginClick} href="#">
{ theme === 'status' ? _t('Sign in') : _t('I already have an account') }
{ _t('I already have an account') }
</a>
);
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader
icon={this.state.teamSelected ?
this.props.teamServerConfig.teamServerURL + "/static/common/" +
this.state.teamSelected.domain + "/icon.png" :
null}
/>
<AuthPage>
<AuthHeader
icon={this.state.teamSelected ?
this.props.teamServerConfig.teamServerURL + "/static/common/" +
this.state.teamSelected.domain + "/icon.png" :
null}
/>
<AuthBody>
{ header }
{ registerBody }
{ signIn }
{ errorText }
<LanguageSelector />
<LoginFooter />
</div>
</LoginPage>
</AuthBody>
</AuthPage>
);
},
});