diff --git a/res/css/_components.scss b/res/css/_components.scss index d13b0f5a58..c5aafe282c 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -144,8 +144,6 @@ @import "./views/dialogs/security/_RestoreKeyBackupDialog.scss"; @import "./views/directory/_NetworkDropdown.scss"; @import "./views/elements/_AccessibleButton.scss"; -@import "./views/elements/_AddressSelector.scss"; -@import "./views/elements/_AddressTile.scss"; @import "./views/elements/_CopyableText.scss"; @import "./views/elements/_DesktopCapturerSourcePicker.scss"; @import "./views/elements/_DialPadBackspaceButton.scss"; diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss deleted file mode 100644 index b066d62543..0000000000 --- a/res/css/views/elements/_AddressSelector.scss +++ /dev/null @@ -1,45 +0,0 @@ -/* -Copyright 2016 OpenMarket 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_AddressSelector { - position: absolute; - background-color: $background; - width: 485px; - max-height: 116px; - overflow-y: auto; - border-radius: 3px; - border: solid 1px $accent; - cursor: pointer; - z-index: 1; -} - -.mx_AddressSelector.mx_AddressSelector_empty { - display: none; -} - -.mx_AddressSelector_addressListElement .mx_AddressTile { - background-color: $background; - border: solid 1px $background; -} - -.mx_AddressSelector_addressListElement.mx_AddressSelector_selected { - background-color: $selected-color; -} - -.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile { - background-color: $selected-color; - border: solid 1px $selected-color; -} diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss deleted file mode 100644 index 7e646b1cf6..0000000000 --- a/res/css/views/elements/_AddressTile.scss +++ /dev/null @@ -1,138 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket 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_AddressTile { - display: inline-block; - border-radius: 3px; - background-color: rgba(74, 73, 74, 0.1); - border: solid 1px $input-border-color; - line-height: $font-26px; - color: $primary-content; - font-size: $font-14px; - font-weight: normal; - margin-right: 4px; -} - -.mx_AddressTile.mx_AddressTile_error { - background-color: rgba(255, 0, 100, 0.1); - color: $alert; - border-color: $alert; -} - -.mx_AddressTile_network { - display: inline-block; - position: relative; - padding-left: 2px; - padding-right: 4px; - vertical-align: middle; -} - -.mx_AddressTile_avatar { - display: inline-block; - position: relative; - padding-left: 2px; - padding-right: 7px; - vertical-align: middle; -} - -.mx_AddressTile_mx { - display: inline-block; - margin: 0; - border: 0; - padding: 0; -} - -.mx_AddressTile_name { - display: inline-block; - padding-right: 4px; - font-weight: 600; - overflow: hidden; - height: 26px; - vertical-align: middle; -} - -.mx_AddressTile_name.mx_AddressTile_justified { - width: 180px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - vertical-align: middle; -} - -.mx_AddressTile_id { - display: inline-block; - padding-right: 11px; -} - -.mx_AddressTile_id.mx_AddressTile_justified { - width: 200px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - vertical-align: middle; -} - -.mx_AddressTile_unknownMx { - display: inline-block; - font-weight: 600; - padding-right: 11px; -} - -.mx_AddressTile_unknownMxl.mx_AddressTile_justified { - width: 380px; /* name + id width */ - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - vertical-align: middle; -} - -.mx_AddressTile_email { - display: inline-block; - font-weight: 600; - padding-right: 11px; -} - -.mx_AddressTile_email.mx_AddressTile_justified { - width: 200px; /* same as id width */ - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - vertical-align: middle; -} - -.mx_AddressTile_unknown { - display: inline-block; - padding-right: 11px; -} - -.mx_AddressTile_unknown.mx_AddressTile_justified { - width: 380px; /* name + id width */ - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - vertical-align: middle; -} - -.mx_AddressTile_dismiss { - display: inline-block; - padding-right: 11px; - padding-left: 1px; - cursor: pointer; -} - -.mx_AddressTile_dismiss object { - pointer-events: none; -} diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index f09f146523..2eff623edf 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -37,7 +37,7 @@ $info-plinth-fg-color: #888; $spacePanel-bg-color: $base-color; $inverted-bg-color: $spacePanel-bg-color; -// used by AddressSelector +// used by Autocomplete $selected-color: $room-highlight-color; // selected for hoverover & selected event tiles diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 0e3af16fce..829786f9f0 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -52,7 +52,7 @@ $inverted-bg-color: $spacePanel-bg-color; // used by RoomDropTarget $droptarget-bg-color: rgba(255, 255, 255, 0.5); -// used by AddressSelector +// used by Autocomplete $selected-color: $secondary-accent-color; // selected for hoverover & selected event tiles diff --git a/src/components/views/elements/AddressSelector.tsx b/src/components/views/elements/AddressSelector.tsx deleted file mode 100644 index a084e69098..0000000000 --- a/src/components/views/elements/AddressSelector.tsx +++ /dev/null @@ -1,184 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 Vector Creations 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, { createRef } from 'react'; -import classNames from 'classnames'; - -import { IUserAddress } from '../../../UserAddress'; -import AddressTile from './AddressTile'; - -interface IProps { - onSelected: (index: number) => void; - - // List of the addresses to display - addressList: IUserAddress[]; - // Whether to show the address on the address tiles - showAddress?: boolean; - truncateAt: number; - selected?: number; - - // Element to put as a header on top of the list - header?: JSX.Element; -} - -interface IState { - selected: number; - hover: boolean; -} - -export default class AddressSelector extends React.Component { - private scrollElement = createRef(); - private addressListElement = createRef(); - - constructor(props: IProps) { - super(props); - - this.state = { - selected: this.props.selected === undefined ? 0 : this.props.selected, - hover: false, - }; - } - - // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(props: IProps) { // eslint-disable-line - // Make sure the selected item isn't outside the list bounds - const selected = this.state.selected; - const maxSelected = this.maxSelected(props.addressList); - if (selected > maxSelected) { - this.setState({ selected: maxSelected }); - } - } - - componentDidUpdate() { - // As the user scrolls with the arrow keys keep the selected item - // at the top of the window. - if (this.scrollElement.current && this.props.addressList.length > 0 && !this.state.hover) { - const elementHeight = this.addressListElement.current.getBoundingClientRect().height; - this.scrollElement.current.scrollTop = (this.state.selected * elementHeight) - elementHeight; - } - } - - public moveSelectionTop = (): void => { - if (this.state.selected > 0) { - this.setState({ - selected: 0, - hover: false, - }); - } - }; - - public moveSelectionUp = (): void => { - if (this.state.selected > 0) { - this.setState({ - selected: this.state.selected - 1, - hover: false, - }); - } - }; - - public moveSelectionDown = (): void => { - if (this.state.selected < this.maxSelected(this.props.addressList)) { - this.setState({ - selected: this.state.selected + 1, - hover: false, - }); - } - }; - - public chooseSelection = (): void => { - this.selectAddress(this.state.selected); - }; - - private onClick = (index: number): void => { - this.selectAddress(index); - }; - - private onMouseEnter = (index: number): void => { - this.setState({ - selected: index, - hover: true, - }); - }; - - private onMouseLeave = (): void => { - this.setState({ hover: false }); - }; - - private selectAddress = (index: number): void => { - // Only try to select an address if one exists - if (this.props.addressList.length !== 0) { - this.props.onSelected(index); - this.setState({ hover: false }); - } - }; - - private createAddressListTiles(): JSX.Element[] { - const maxSelected = this.maxSelected(this.props.addressList); - const addressList = []; - - // Only create the address elements if there are address - if (this.props.addressList.length > 0) { - for (let i = 0; i <= maxSelected; i++) { - const classes = classNames({ - "mx_AddressSelector_addressListElement": true, - "mx_AddressSelector_selected": this.state.selected === i, - }); - - // NOTE: Defaulting to "vector" as the network, until the network backend stuff is done. - // Saving the addressListElement so we can use it to work out, in the componentDidUpdate - // method, how far to scroll when using the arrow keys - addressList.push( -
- -
, - ); - } - } - return addressList; - } - - private maxSelected(list: IUserAddress[]): number { - const listSize = list.length === 0 ? 0 : list.length - 1; - const maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize; - return maxSelected; - } - - render() { - const classes = classNames({ - "mx_AddressSelector": true, - "mx_AddressSelector_empty": this.props.addressList.length === 0, - }); - - return ( -
- { this.props.header } - { this.createAddressListTiles() } -
- ); - } -} diff --git a/src/components/views/elements/AddressTile.tsx b/src/components/views/elements/AddressTile.tsx deleted file mode 100644 index 8aafa0381b..0000000000 --- a/src/components/views/elements/AddressTile.tsx +++ /dev/null @@ -1,140 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 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 classNames from 'classnames'; - -import { _t } from '../../../languageHandler'; -import { mediaFromMxc } from "../../../customisations/Media"; -import { IUserAddress } from '../../../UserAddress'; -import BaseAvatar from '../avatars/BaseAvatar'; -import EmailUserIcon from "../../../../res/img/icon-email-user.svg"; - -interface IProps { - address: IUserAddress; - canDismiss?: boolean; - onDismissed?: () => void; - justified?: boolean; - showAddress?: boolean; -} - -export default class AddressTile extends React.Component { - static defaultProps: Partial = { - canDismiss: false, - onDismissed: function() {}, // NOP - justified: false, - }; - - render() { - const address = this.props.address; - const name = address.displayName || address.address; - - const imgUrls = []; - const isMatrixAddress = ['mx-user-id', 'mx-room-id'].includes(address.addressType); - - if (isMatrixAddress && address.avatarMxc) { - imgUrls.push(mediaFromMxc(address.avatarMxc).getSquareThumbnailHttp(25)); - } else if (address.addressType === 'email') { - imgUrls.push(EmailUserIcon); - } - - const nameClasses = classNames({ - "mx_AddressTile_name": true, - "mx_AddressTile_justified": this.props.justified, - }); - - let info; - let error = false; - if (isMatrixAddress && address.isKnown) { - const idClasses = classNames({ - "mx_AddressTile_id": true, - "mx_AddressTile_justified": this.props.justified, - }); - - info = ( -
-
{ name }
- { - this.props.showAddress - ?
{ address.address }
- :
- } -
- ); - } else if (isMatrixAddress) { - const unknownMxClasses = classNames({ - "mx_AddressTile_unknownMx": true, - "mx_AddressTile_justified": this.props.justified, - }); - - info = ( -
{ this.props.address.address }
- ); - } else if (address.addressType === "email") { - const emailClasses = classNames({ - "mx_AddressTile_email": true, - "mx_AddressTile_justified": this.props.justified, - }); - - let nameNode = null; - if (address.displayName) { - nameNode =
{ address.displayName }
; - } - - info = ( -
-
{ address.address }
- { nameNode } -
- ); - } else { - error = true; - const unknownClasses = classNames({ - "mx_AddressTile_unknown": true, - "mx_AddressTile_justified": this.props.justified, - }); - - info = ( -
{ _t("Unknown Address") }
- ); - } - - const classes = classNames({ - "mx_AddressTile": true, - "mx_AddressTile_error": error, - }); - - let dismiss; - if (this.props.canDismiss) { - dismiss = ( -
- -
- ); - } - - return ( -
-
- -
- { info } - { dismiss } -
- ); - } -} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 693299f921..e0b1749c03 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2212,7 +2212,6 @@ "Categories": "Categories", "Quick Reactions": "Quick Reactions", "Cancel search": "Cancel search", - "Unknown Address": "Unknown Address", "Any of the following data may be shared:": "Any of the following data may be shared:", "Your display name": "Your display name", "Your avatar URL": "Your avatar URL",