diff --git a/res/css/_components.scss b/res/css/_components.scss index 60f749de9c..f6a680c438 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -66,6 +66,7 @@ @import "./views/dialogs/_InviteDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.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"; diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss new file mode 100644 index 0000000000..85d5c76ffc --- /dev/null +++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss @@ -0,0 +1,93 @@ +/* +Copyright 2020 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. +*/ + +.mx_RoomSettingsDialog_BridgeList { + padding: 0; + + .mx_AccessibleButton { + display: inline; + margin: 0; + padding: 0; + float: left; + } +} + +.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; + + .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; + } + } + + h3 { + margin-top: 0; + margin-bottom: 4px; + font-size: 16pt; + color: $primary-fg-color; + } + + .column-icon { + float: left; + padding-right: 10px; + + .noProtocolIcon { + width: 48px; + height: 48px; + background: $settings-profile-placeholder-bg-color; + border-radius: 5px; + } + } + + .column-data { + display: inline-block; + width: 85%; + } + + .workspace-channel-details { + margin-top: 0; + color: $primary-fg-color; + } + + .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; + } +} diff --git a/src/components/views/settings/BridgeTile.js b/src/components/views/settings/BridgeTile.js new file mode 100644 index 0000000000..330af4a18a --- /dev/null +++ b/src/components/views/settings/BridgeTile.js @@ -0,0 +1,116 @@ +/* +Copyright 2020 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 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"; + +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: , + }); + } + + const bot = _t("This bridge is managed by .", {}, { + user: , + }); + + let networkIcon; + + if (protocol.avatar) { + const avatarUrl = getHttpUriForMxc( + MatrixClientPeg.get().getHomeserverUrl(), + protocol.avatar, 64, 64, "crop", + ); + + networkIcon = ; + } else { + networkIcon =
; + } + + + const workspaceChannelDetails = _t("Workspace: %(networkName)s Channel: %(channelName)s", { + networkName, + channelName, + }); + const id = this.props.ev.getId(); + const metadataClassname = "metadata" + (this.state.visible ? " visible" : ""); + return (
  • +
    + {networkIcon} +
    +
    +

    {protocolName}

    +

    + {workspaceChannelDetails} +

    +

    + {creator} {bot} +

    + + Show { this.state.visible ? "less" : "more" } + +
    +
    • ); + } +} diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index 8090cf7d4d..7a859b0594 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -18,10 +18,7 @@ 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", @@ -35,17 +32,6 @@ export default class BridgeSettingsTab extends React.Component { constructor() { super(); - - this.state = { - showMoreCard: null, - }; - } - - - _showMoreDetails(eventId) { - this.setState({ - showMoreCard: eventId, - }); } _renderBridgeCard(event, room) { @@ -53,68 +39,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 = _t("This bridge was provisioned by .", {}, { - user: , - }); - } - - const bot = _t("This bridge is managed by .", {}, { - user: , - }); - - const avatarUrl = network.avatar ? getHttpUriForMxc( - MatrixClientPeg.get().getHomeserverUrl(), - network.avatar, 32, 32, "crop", - ) : null; - - const networkIcon = ; - - const workspaceChannelDetails = _t("Workspace: %(networkName)s Channel: %(channelName)s", { - networkName, - channelName, - }); - const id = event.getId(); - const isVisible = this.state.showMoreCard === id; - const metadataClassname = "metadata " + (isVisible ? "visible" : ""); - return (
  • -
    - {networkIcon} -
    -
    -

    {protocolName}

    -

    - {workspaceChannelDetails} -

    -

    - {creator} {bot} -

    - this._showMoreDetails(isVisible ? null : id)}>Show { isVisible ? "less" : "more" } -
    -
    • ); + return } static getBridgeStateEvents(roomId) {