diff --git a/res/css/_components.scss b/res/css/_components.scss index 35b4c1b9656..4c253c7d9a5 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -101,6 +101,7 @@ @import "./views/elements/_AccessibleButton.scss"; @import "./views/elements/_AddressSelector.scss"; @import "./views/elements/_AddressTile.scss"; +@import "./views/elements/_DesktopBuildsNotice.scss"; @import "./views/elements/_DirectorySearchBox.scss"; @import "./views/elements/_Dropdown.scss"; @import "./views/elements/_EditableItemList.scss"; diff --git a/res/css/views/elements/_DesktopBuildsNotice.scss b/res/css/views/elements/_DesktopBuildsNotice.scss new file mode 100644 index 00000000000..3672595bf1e --- /dev/null +++ b/res/css/views/elements/_DesktopBuildsNotice.scss @@ -0,0 +1,28 @@ +/* +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_DesktopBuildsNotice { + text-align: center; + padding: 0 16px; + + > * { + vertical-align: middle; + } + + > img { + margin-right: 8px; + } +} diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss index fecc8d78d85..d9f730a8b6a 100644 --- a/res/css/views/rooms/_SearchBar.scss +++ b/res/css/views/rooms/_SearchBar.scss @@ -68,3 +68,4 @@ limitations under the License. cursor: pointer; } } + diff --git a/res/img/element-desktop-logo.svg b/res/img/element-desktop-logo.svg new file mode 100644 index 00000000000..2031733ce38 --- /dev/null +++ b/res/img/element-desktop-logo.svg @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/SdkConfig.ts b/src/SdkConfig.ts index b914aaaf6d6..7d7caa2d247 100644 --- a/src/SdkConfig.ts +++ b/src/SdkConfig.ts @@ -33,6 +33,11 @@ export const DEFAULTS: ConfigOptions = { // Default conference domain preferredDomain: "jitsi.riot.im", }, + desktopBuilds: { + available: true, + logo: require("../res/img/element-desktop-logo.svg"), + url: "https://element.io/get-started", + }, }; export default class SdkConfig { diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js index 6d618d0b9d9..4836b0f5541 100644 --- a/src/components/structures/FilePanel.js +++ b/src/components/structures/FilePanel.js @@ -25,6 +25,7 @@ import EventIndexPeg from "../../indexing/EventIndexPeg"; import { _t } from '../../languageHandler'; import BaseCard from "../views/right_panel/BaseCard"; import {RightPanelPhases} from "../../stores/RightPanelStorePhases"; +import DesktopBuildsNotice, {WarningKind} from "../views/elements/DesktopBuildsNotice"; /* * Component which shows the filtered file using a TimelinePanel @@ -222,6 +223,8 @@ class FilePanel extends React.Component {

{_t('Attach files from chat or just drag and drop them anywhere in a room.')}

); + const isRoomEncrypted = this.noRoom ? false : MatrixClientPeg.get().isRoomEncrypted(this.props.roomId); + if (this.state.timelineSet) { // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " + // "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId); @@ -232,6 +235,7 @@ class FilePanel extends React.Component { previousPhase={RightPanelPhases.RoomSummary} withoutScrollContainer > + { searchInProgress={this.state.searchInProgress} onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch} + isRoomEncrypted={this.context.isRoomEncrypted(this.state.room.roomId)} />; } else if (showRoomUpgradeBar) { aux = ; diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx new file mode 100644 index 00000000000..fd1c7848aaf --- /dev/null +++ b/src/components/views/elements/DesktopBuildsNotice.tsx @@ -0,0 +1,77 @@ +/* +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 EventIndexPeg from "../../../indexing/EventIndexPeg"; +import { _t } from "../../../languageHandler"; +import SdkConfig from "../../../SdkConfig"; +import React from "react"; + +export enum WarningKind { + Files, + Search, +} + +interface IProps { + isRoomEncrypted: boolean; + kind: WarningKind; +} + +export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) { + if (!isRoomEncrypted) return null; + if (EventIndexPeg.get()) return null; + + const {desktopBuilds, brand} = SdkConfig.get(); + + let text = null; + let logo = null; + if (desktopBuilds.available) { + logo = ; + switch (kind) { + case WarningKind.Files: + text = _t("Use the Desktop app to see all encrypted files", {}, { + a: sub => ({sub}), + }); + break; + case WarningKind.Search: + text = _t("Use the Desktop app to search encrypted messages", {}, { + a: sub => ({sub}), + }); + break; + } + } else { + switch (kind) { + case WarningKind.Files: + text = _t("This version of %(brand)s does not support viewing some encrypted files", {brand}); + break; + case WarningKind.Search: + text = _t("This version of %(brand)s does not support searching encrypted messages", {brand}); + break; + } + } + + // for safety + if (!text) { + console.warn("Unknown desktop builds warning kind: ", kind); + return null; + } + + return ( +
+ {logo} + {text} +
+ ); +} diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js index 767f5a35f51..ac637673e4e 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.js @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -19,6 +20,7 @@ import AccessibleButton from "../elements/AccessibleButton"; import classNames from "classnames"; import { _t } from '../../../languageHandler'; import {Key} from "../../../Keyboard"; +import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice"; export default class SearchBar extends React.Component { constructor(props) { @@ -72,21 +74,24 @@ export default class SearchBar extends React.Component { }); return ( -
-
- - {_t("This Room")} - - - {_t("All Rooms")} - + <> +
+
+ + {_t("This Room")} + + + {_t("All Rooms")} + +
+
+ + +
+
-
- - -
- -
+ + ); } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2263bf75f60..01fd172879c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1487,6 +1487,10 @@ "Maximize apps": "Maximize apps", "Popout widget": "Popout widget", "More options": "More options", + "Use the Desktop app to see all encrypted files": "Use the Desktop app to see all encrypted files", + "Use the Desktop app to search encrypted messages": "Use the Desktop app to search encrypted messages", + "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files", + "This version of %(brand)s does not support searching encrypted messages": "This version of %(brand)s does not support searching encrypted messages", "Join": "Join", "No results": "No results", "Please create a new issue on GitHub so that we can investigate this bug.": "Please create a new issue on GitHub so that we can investigate this bug.",