OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'develop' into travis/update-qr-code

pull/21833/head
Travis Ralston 2020-01-28 17:27:17 +00:00
parent e178135bff dc1405c3b3
commit 61b198d7f8
9 changed files with 276 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
babel.config.js
View File

@ -11,7 +11,7 @@ module.exports = {
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", {decoratorsBeforeExport: true}],
["@babel/plugin-proposal-decorators", {legacy: true}],
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-class-properties",

1
res/css/_components.scss
View File

@ -68,6 +68,7 @@
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_NewSessionReviewDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss";
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss";

13
res/css/views/dialogs/_RoomSettingsDialog.scss
View File

@ -56,16 +56,3 @@ limitations under the License.
mask-position: center;
}
.mx_RoomSettingsDialog_BridgeList {
padding: 0;
}
.mx_RoomSettingsDialog_BridgeList li {
list-style-type: none;
padding: 5px;
margin-bottom: 5px;
border-width: 1px 0px;
border-color: #dee1f3;
border-style: solid;
}

112
res/css/views/dialogs/_RoomSettingsDialogBridges.scss Normal file
View File

@ -0,0 +1,112 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
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.
*/
.mx_RoomSettingsDialog_BridgeList {
padding: 0;
.mx_AccessibleButton {
display: inline;
margin: 0;
padding: 0;
}
}
.mx_RoomSettingsDialog_BridgeList li {
list-style-type: none;
padding: 5px;
margin-bottom: 8px;
border-width: 1px 1px;
border-color: $primary-hairline-color;
border-style: solid;
border-radius: 5px;
.column-icon {
float: left;
padding-right: 10px;
* {
border-radius: 5px;
border: 1px solid $input-darker-bg-color;
}
.noProtocolIcon {
width: 48px;
height: 48px;
background: $input-darker-bg-color;
border-radius: 5px;
}
.protocol-icon {
float: left;
margin-right: 5px;
img {
border-radius: 5px;
border-width: 1px 1px;
border-color: $primary-hairline-color;
}
span {
/* Correct letter placement */
left: auto;
}
}
}
.column-data {
display: inline-block;
width: 85%;
> h3 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 16pt;
color: $primary-fg-color;
}
> * {
margin-top: 4px;
margin-bottom: 0;
}
.workspace-channel-details {
color: $primary-fg-color;
font-weight: 600;
.channel {
margin-left: 5px;
}
}
.mx_showMore {
display: block;
text-align: left;
margin-top: 10px;
}
.metadata {
color: $muted-fg-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
}
.metadata.visible {
overflow-y: visible;
text-overflow: ellipsis;
white-space: normal;
}
}
}

7
src/components/views/dialogs/RoomSettingsDialog.js
View File

@ -54,9 +54,6 @@ export default class RoomSettingsDialog extends React.Component {
_getTabs() {
const tabs = [];
const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state");
const shouldShowBridgeIcon = featureFlag &&
BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0;
tabs.push(new Tab(
_td("General"),
@ -79,9 +76,9 @@ export default class RoomSettingsDialog extends React.Component {
<NotificationSettingsTab roomId={this.props.roomId} />,
));
if (shouldShowBridgeIcon) {
if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
tabs.push(new Tab(
_td("Bridge Info"),
_td("Bridges"),
"mx_RoomSettingsDialog_bridgesIcon",
<BridgeSettingsTab roomId={this.props.roomId} />,
));

114
src/components/views/settings/BridgeTile.js Normal file
View File

@ -0,0 +1,114 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
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 React from 'react';
import PropTypes from 'prop-types';
import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import {_t} from "../../../languageHandler";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import Pill from "../elements/Pill";
import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
import BaseAvatar from "../avatars/BaseAvatar";
import AccessibleButton from "../elements/AccessibleButton";
import {replaceableComponent} from "../../../utils/replaceableComponent";
@replaceableComponent("views.settings.BridgeTile")
export default class BridgeTile extends React.PureComponent {
static propTypes = {
ev: PropTypes.object.isRequired,
room: PropTypes.object.isRequired,
}
state = {
visible: false,
}
_toggleVisible() {
this.setState({
visible: !this.state.visible,
});
}
render() {
const content = this.props.ev.getContent();
const { channel, network, protocol } = content;
const protocolName = protocol.displayname || protocol.id;
const channelName = channel.displayname || channel.id;
const networkName = network ? network.displayname || network.id : protocolName;
let creator = null;
if (content.creator) {
creator = _t("This bridge was provisioned by <user />.", {}, {
user: <Pill
type={Pill.TYPE_USER_MENTION}
room={this.props.room}
url={makeUserPermalink(content.creator)}
shouldShowPillAvatar={true}
/>,
});
}
const bot = _t("This bridge is managed by <user />.", {}, {
user: <Pill
type={Pill.TYPE_USER_MENTION}
room={this.props.room}
url={makeUserPermalink(this.props.ev.getSender())}
shouldShowPillAvatar={true}
/>,
});
let networkIcon;
if (protocol.avatar) {
const avatarUrl = getHttpUriForMxc(
MatrixClientPeg.get().getHomeserverUrl(),
protocol.avatar, 64, 64, "crop",
);
networkIcon = <BaseAvatar className="protocol-icon"
width={48}
height={48}
resizeMethod='crop'
name={ protocolName }
idName={ protocolName }
url={ avatarUrl }
/>;
} else {
networkIcon = <div class="noProtocolIcon"></div>;
}
const id = this.props.ev.getId();
const metadataClassname = "metadata" + (this.state.visible ? " visible" : "");
return (<li key={id}>
<div className="column-icon">
{networkIcon}
</div>
<div className="column-data">
<h3>{protocolName}</h3>
<p className="workspace-channel-details">
<span>{_t("Workspace: %(networkName)s", {networkName})}</span>
<span className="channel">{_t("Channel: %(channelName)s", {channelName})}</span>
</p>
<p className={metadataClassname}>
{creator} {bot}
</p>
<AccessibleButton className="mx_showMore" kind="secondary" onClick={this._toggleVisible.bind(this)}>
{ this.state.visible ? _t("Show less") : _t("Show more") }
</AccessibleButton>
</div>
</li>);
}
}

137
src/components/views/settings/tabs/room/BridgeSettingsTab.js
View File

@ -18,16 +18,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import {_t} from "../../../../../languageHandler";
import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
import Pill from "../../../elements/Pill";
import {makeUserPermalink} from "../../../../../utils/permalinks/Permalinks";
import BaseAvatar from "../../../avatars/BaseAvatar";
import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import BridgeTile from "../../BridgeTile";
const BRIDGE_EVENT_TYPES = [
"uk.half-shot.bridge",
// m.bridge
];
const BRIDGES_LINK = "https://matrix.org/bridges/";
export default class BridgeSettingsTab extends React.Component {
static propTypes = {
roomId: PropTypes.string.isRequired,
@ -38,99 +37,7 @@ export default class BridgeSettingsTab extends React.Component {
if (!content || !content.channel || !content.protocol) {
return null;
}
const { channel, network } = content;
const protocolName = content.protocol.displayname || content.protocol.id;
const channelName = channel.displayname || channel.id;
const networkName = network ? network.displayname || network.id : protocolName;
let creator = null;
if (content.creator) {
creator = <p> { _t("This bridge was provisioned by <user />", {}, {
user: <Pill
type={Pill.TYPE_USER_MENTION}
room={room}
url={makeUserPermalink(content.creator)}
shouldShowPillAvatar={true}
/>,
})}</p>;
}
const bot = (<p> {_t("This bridge is managed by <user />.", {}, {
user: <Pill
type={Pill.TYPE_USER_MENTION}
room={room}
url={makeUserPermalink(event.getSender())}
shouldShowPillAvatar={true}
/>,
})} </p>);
let channelLink = channelName;
if (channel.external_url) {
channelLink = <a target="_blank" href={channel.external_url} rel="noopener">{channelName}</a>;
}
let networkLink = networkName;
if (network && network.external_url) {
networkLink = <a target="_blank" href={network.external_url} rel="noopener">{networkName}</a>;
}
const chanAndNetworkInfo = (
_t("Bridged into <channelLink /> <networkLink />, on <protocolName />", {}, {
channelLink,
networkLink,
protocolName,
})
);
let networkIcon = null;
if (networkName && network.avatar) {
const avatarUrl = getHttpUriForMxc(
MatrixClientPeg.get().getHomeserverUrl(),
network.avatar, 32, 32, "crop",
);
networkIcon = <BaseAvatar
width={32}
height={32}
resizeMethod='crop'
name={ networkName }
idName={ networkName }
url={ avatarUrl }
/>;
}
let channelIcon = null;
if (channel.avatar) {
const avatarUrl = getHttpUriForMxc(
MatrixClientPeg.get().getHomeserverUrl(),
channel.avatar, 32, 32, "crop",
);
channelIcon = <BaseAvatar
width={32}
height={32}
resizeMethod='crop'
name={ networkName }
idName={ networkName }
url={ avatarUrl }
/>;
}
const heading = _t("Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />", { }, {
channelIcon,
channelName,
networkName,
networkIcon,
});
return (<li key={event.stateKey}>
<div>
<h3>{heading}</h3>
<p>{_t("Connected via %(protocolName)s", { protocolName })}</p>
<details>
{creator}
{bot}
<p>{chanAndNetworkInfo}</p>
</details>
</div>
</li>);
return <BridgeTile room={room} ev={event}></BridgeTile>;
}
static getBridgeStateEvents(roomId) {
@ -151,14 +58,40 @@ export default class BridgeSettingsTab extends React.Component {
const client = MatrixClientPeg.get();
const room = client.getRoom(this.props.roomId);
let content = null;
if (bridgeEvents.length > 0) {
content = <div>
<p>{_t(
"This room is bridging messages to the following platforms. " +
"<a>Learn more.</a>", {},
{
// TODO: We don't have this link yet: this will prevent the translators
// having to re-translate the string when we do.
a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noopener">{sub}</a>,
},
)}</p>
<ul className="mx_RoomSettingsDialog_BridgeList">
{ bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
</ul>
</div>;
} else {
content = <p>{_t(
"This room isn’t bridging messages to any platforms. " +
"<a>Learn more.</a>", {},
{
// TODO: We don't have this link yet: this will prevent the translators
// having to re-translate the string when we do.
a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noopener">{sub}</a>,
},
)}</p>;
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Bridge Info")}</div>
<div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
<p>{ _t("Below is a list of bridges connected to this room.") }</p>
<ul className="mx_RoomSettingsDialog_BridgeList">
{ bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
</ul>
{content}
</div>
</div>
);

17
src/i18n/strings/en_EN.json
View File

@ -524,6 +524,12 @@
"Accept <policyLink /> to continue:": "Accept <policyLink /> to continue:",
"Upload": "Upload",
"Remove": "Remove",
"This bridge was provisioned by <user />.": "This bridge was provisioned by <user />.",
"This bridge is managed by <user />.": "This bridge is managed by <user />.",
"Workspace: %(networkName)s": "Workspace: %(networkName)s",
"Channel: %(channelName)s": "Channel: %(channelName)s",
"Show less": "Show less",
"Show more": "Show more",
"Failed to upload profile picture!": "Failed to upload profile picture!",
"Upload new:": "Upload new:",
"No display name": "No display name",
@ -792,13 +798,9 @@
"Room version:": "Room version:",
"Developer options": "Developer options",
"Open Devtools": "Open Devtools",
"This bridge was provisioned by <user />": "This bridge was provisioned by <user />",
"This bridge is managed by <user />.": "This bridge is managed by <user />.",
"Bridged into <channelLink /> <networkLink />, on <protocolName />": "Bridged into <channelLink /> <networkLink />, on <protocolName />",
"Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />": "Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />",
"Connected via %(protocolName)s": "Connected via %(protocolName)s",
"Bridge Info": "Bridge Info",
"Below is a list of bridges connected to this room.": "Below is a list of bridges connected to this room.",
"This room is bridging messages to the following platforms. <a>Learn more.</a>": "This room is bridging messages to the following platforms. <a>Learn more.</a>",
"This room isn’t bridging messages to any platforms. <a>Learn more.</a>": "This room isn’t bridging messages to any platforms. <a>Learn more.</a>",
"Bridges": "Bridges",
"Room Addresses": "Room Addresses",
"Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?",
"URL Previews": "URL Previews",
@ -1485,7 +1487,6 @@
"Recent Conversations": "Recent Conversations",
"Suggestions": "Suggestions",
"Recently Direct Messaged": "Recently Direct Messaged",
"Show more": "Show more",
"If you can't find someone, ask them for their username, share your username (%(userId)s) or <a>profile link</a>.": "If you can't find someone, ask them for their username, share your username (%(userId)s) or <a>profile link</a>.",
"Go": "Go",
"If you can't find someone, ask them for their username (e.g. @user:server.com) or <a>share this room</a>.": "If you can't find someone, ask them for their username (e.g. @user:server.com) or <a>share this room</a>.",

8
src/utils/replaceableComponent.ts
View File

@ -32,13 +32,9 @@ import * as sdk from '../index';
* with a skinned version. If no skinned version is available, this component
* will be used.
*/
export function replaceableComponent<T extends{new(...args: any[])}>(name: string) {
export function replaceableComponent(name: string, origComponent: React.Component) {
// Decorators return a function to override the class (origComponent). This
// ultimately assumes that `getComponent()` won't throw an error and instead
// return a falsey value like `null` when the skin doesn't have a component.
return (origComponent) => {
const c = sdk.getComponent(name) || origComponent;
c.kind = "class"; // appeases babel
return c;
};
return () => sdk.getComponent(name) || origComponent;
}