diff --git a/res/css/_components.scss b/res/css/_components.scss index 6e644802cc..11baf7fee7 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -56,6 +56,7 @@ @import "./views/dialogs/_SetEmailDialog.scss"; @import "./views/dialogs/_SetMxIdDialog.scss"; @import "./views/dialogs/_SetPasswordDialog.scss"; +@import "./views/dialogs/_SettingsDialog.scss"; @import "./views/dialogs/_ShareDialog.scss"; @import "./views/dialogs/_UnknownDeviceDialog.scss"; @import "./views/dialogs/_UserSettingsDialog.scss"; @@ -136,6 +137,7 @@ @import "./views/settings/_PhoneNumbers.scss"; @import "./views/settings/_ProfileSettings.scss"; @import "./views/settings/tabs/_GeneralSettingsTab.scss"; +@import "./views/settings/tabs/_HelpSettingsTab.scss"; @import "./views/settings/tabs/_PreferencesSettingsTab.scss"; @import "./views/settings/tabs/_SecuritySettingsTab.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index d9d66f470a..1118ac7aea 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -25,6 +25,7 @@ limitations under the License. .mx_TabbedView_tabLabels { width: 136px; + max-width: 136px; height: 100%; color: $tab-label-fg-color; } diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss new file mode 100644 index 0000000000..2cc7c08039 --- /dev/null +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -0,0 +1,70 @@ +/* +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. +*/ + +.mx_SettingsDialog { + .mx_Dialog { + max-width: 784px; // 900px - 58px (left padding) - 58px (right padding) + width: 80%; + height: 80%; + border-radius: 4px; + + .mx_TabbedView_tabLabels { + // Force the sidebar to be always visible, letting the rest of the content scroll + position: fixed; + } + + .mx_TabbedView_tabPanel { + max-width: 485px; + margin-left: 206px; // 70px margin + 136px for the sidebar + } + + .mx_SettingsDialog_header { + font-size: 24px; + display: block; + text-align: center; + color: $dialog-title-fg-color; + margin-top: 16px; + margin-bottom: 24px; + padding: 0; + } + + .mx_SettingsDialog_close { + position: absolute; + top: 16px; + right: 25px; + } + + .mx_SettingsDialog_closeIcon { + width: 16px; + height: 16px; + display: inline-block; + } + + .mx_SettingsDialog_closeIcon:before { + mask: url('$(res)/img/feather-icons/cancel.svg'); + background-color: $dialog-close-fg-color; + mask-repeat: no-repeat; + mask-size: 16px; + mask-position: center; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + } +} diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss index d7a31d0c99..2849573790 100644 --- a/res/css/views/dialogs/_UserSettingsDialog.scss +++ b/res/css/views/dialogs/_UserSettingsDialog.scss @@ -1,39 +1,18 @@ -.mx_UserSettingsDialog_header { - font-size: 24px; - display: block; - text-align: center; - color: $dialog-title-fg-color; - margin-top: 16px; - margin-bottom: 24px; - padding: 0; -} +/* +Copyright 2019 New Vector Ltd. -.mx_UserSettingsDialog_close { - position: absolute; - top: 16px; - right: 25px; -} +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 -.mx_UserSettingsDialog_closeIcon { - width: 16px; - height: 16px; - display: inline-block; -} - -.mx_UserSettingsDialog_closeIcon:before { - mask: url('$(res)/img/feather-icons/cancel.svg'); - background-color: $dialog-close-fg-color; - mask-repeat: no-repeat; - mask-size: 16px; - mask-position: center; - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; -} + 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. +*/ // ICONS // ========================================================== diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 0955648d50..4076414086 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -14,9 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -// TODO: Fancy transitions - .mx_ToggleSwitch { + transition: background-color 0.20s ease-out 0.1s; width: 48px; height: 24px; border-radius: 14px; @@ -33,6 +32,7 @@ limitations under the License. } .mx_ToggleSwitch_ball { + transition: left 0.15s ease-out 0.1s; margin: 2px; width: 20px; height: 20px; @@ -47,5 +47,5 @@ limitations under the License. } .mx_ToggleSwitch_on > .mx_ToggleSwitch_ball { - right: 2px; + left: 23px; // 48px switch - 20px ball - 5px padding = 23px } diff --git a/res/css/views/settings/tabs/_HelpSettingsTab.scss b/res/css/views/settings/tabs/_HelpSettingsTab.scss new file mode 100644 index 0000000000..a1199b59b6 --- /dev/null +++ b/res/css/views/settings/tabs/_HelpSettingsTab.scss @@ -0,0 +1,24 @@ +/* +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. +*/ + +.mx_HelpSettingsTab_debugButton { + margin-bottom: 5px; + margin-top: 5px; +} + +.mx_HelpSettingsTab span.mx_AccessibleButton { + word-break: break-word; +} \ No newline at end of file diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index d5ad130edd..305ee4ec2f 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -613,7 +613,7 @@ export default React.createClass({ case 'view_user_settings': { if (SettingsStore.isFeatureEnabled("feature_tabbed_settings")) { const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog"); - Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}); + Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, 'mx_SettingsDialog'); } else { this._setPage(PageTypes.UserSettings); this.notifyNewScreen('settings'); diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js index addd16bdf0..b47b2368f9 100644 --- a/src/components/views/dialogs/UserSettingsDialog.js +++ b/src/components/views/dialogs/UserSettingsDialog.js @@ -27,6 +27,7 @@ import SecuritySettingsTab from "../settings/tabs/SecuritySettingsTab"; import NotificationSettingsTab from "../settings/tabs/NotificationSettingsTab"; import PreferencesSettingsTab from "../settings/tabs/PreferencesSettingsTab"; import VoiceSettingsTab from "../settings/tabs/VoiceSettingsTab"; +import HelpSettingsTab from "../settings/tabs/HelpSettingsTab"; // TODO: Ditch this whole component export class TempTab extends React.Component { @@ -87,7 +88,7 @@ export default class UserSettingsDialog extends React.Component { tabs.push(new Tab( _td("Help & About"), "mx_UserSettingsDialog_helpIcon", -
Help Test
, + , )); tabs.push(new Tab( _td("Visit old settings"), @@ -101,10 +102,10 @@ export default class UserSettingsDialog extends React.Component { render() { return (
-
+
{_t("Settings")} - - + +
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index 87cfb70306..774ec1db88 100644 --- a/src/components/views/elements/Field.js +++ b/src/components/views/elements/Field.js @@ -25,7 +25,7 @@ export default class Field extends React.PureComponent { type: PropTypes.string, // The field's label string. label: PropTypes.string, - // The field's placeholder string. + // The field's placeholder string. Defaults to the label. placeholder: PropTypes.string, // The type of field to create. Defaults to "input". Should be "input" or "select". // To define options for a select, use @@ -55,6 +55,7 @@ export default class Field extends React.PureComponent { // Set some defaults for the element extraProps.type = extraProps.type || "text"; extraProps.ref = "fieldInput"; + extraProps.placeholder = extraProps.placeholder || extraProps.label; const element = this.props.element || "input"; const fieldInput = React.createElement(element, extraProps, this.props.children); diff --git a/src/components/views/settings/tabs/HelpSettingsTab.js b/src/components/views/settings/tabs/HelpSettingsTab.js new file mode 100644 index 0000000000..c0892cf448 --- /dev/null +++ b/src/components/views/settings/tabs/HelpSettingsTab.js @@ -0,0 +1,227 @@ +/* +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 React from 'react'; +import PropTypes from 'prop-types'; +import {_t, getCurrentLanguage} from "../../../../languageHandler"; +import MatrixClientPeg from "../../../../MatrixClientPeg"; +import AccessibleButton from "../../elements/AccessibleButton"; +import SdkConfig from "../../../../SdkConfig"; +import createRoom from "../../../../createRoom"; +const packageJson = require('../../../../../package.json'); +const Modal = require("../../../../Modal"); +const sdk = require("../../../../index"); +const PlatformPeg = require("../../../../PlatformPeg"); + +// if this looks like a release, use the 'version' from package.json; else use +// the git sha. Prepend version with v, to look like riot-web version +const REACT_SDK_VERSION = 'dist' in packageJson ? packageJson.version : packageJson.gitHead || ''; + +// Simple method to help prettify GH Release Tags and Commit Hashes. +const semVerRegex = /^v?(\d+\.\d+\.\d+(?:-rc.+)?)(?:-(?:\d+-g)?([0-9a-fA-F]+))?(?:-dirty)?$/i; +const ghVersionLabel = function(repo, token='') { + const match = token.match(semVerRegex); + let url; + if (match && match[1]) { // basic semVer string possibly with commit hash + url = (match.length > 1 && match[2]) + ? `https://github.com/${repo}/commit/${match[2]}` + : `https://github.com/${repo}/releases/tag/v${match[1]}`; + } else { + url = `https://github.com/${repo}/commit/${token.split('-')[0]}`; + } + return { token }; +}; + +export default class HelpSettingsTab extends React.Component { + static propTypes = { + closeSettingsFn: PropTypes.func.isRequired, + }; + + constructor() { + super(); + + this.state = { + vectorVersion: null, + canUpdate: false, + }; + } + + componentWillMount(): void { + PlatformPeg.get().getAppVersion().then((ver) => this.setState({vectorVersion: ver})).catch((e) => { + console.error("Error getting vector version: ", e); + }); + PlatformPeg.get().canSelfUpdate().then((v) => this.setState({canUpdate: v})).catch((e) => { + console.error("Error getting self updatability: ", e); + }); + } + + _onClearCacheAndReload = (e) => { + if (!PlatformPeg.get()) return; + + MatrixClientPeg.get().stopClient(); + MatrixClientPeg.get().store.deleteAllData().done(() => { + PlatformPeg.get().reload(); + }); + }; + + _onBugReport = (e) => { + const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog"); + if (!BugReportDialog) { + return; + } + Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {}); + }; + + _onStartBotChat = (e) => { + this.props.closeSettingsFn(); + createRoom({ + dmUserId: SdkConfig.get().welcomeUserId, + andView: true, + }); + }; + + _showSpoiler = (event) => { + const target = event.target; + target.innerHTML = target.getAttribute('data-spoiler'); + + const range = document.createRange(); + range.selectNodeContents(target); + + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + }; + + _renderLegal() { + const tocLinks = SdkConfig.get().terms_and_conditions_links; + if (!tocLinks) return null; + + const legalLinks = []; + for (const tocEntry of SdkConfig.get().terms_and_conditions_links) { + legalLinks.push(); + } + + return ( +
+ {_t("Legal")} +
+ {legalLinks} +
+
+ ); + } + + render() { + let faqText = _t('For help with using Riot, click here.', {}, { + 'a': (sub) => {sub}, + }); + if (SdkConfig.get().welcomeUserId && getCurrentLanguage().startsWith('en')) { + faqText = ( +
+ { + _t('For help with using Riot, click here or start a chat with our ' + + 'bot using the button below.', {}, { + 'a': (sub) => {sub}, + }) + } + + {_t("Start a chat with Riot Bot")} + +
+ ); + } + + const reactSdkVersion = REACT_SDK_VERSION !== '' + ? ghVersionLabel('matrix-org/matrix-react-sdk', REACT_SDK_VERSION) + : REACT_SDK_VERSION; + const vectorVersion = this.state.vectorVersion + ? ghVersionLabel('vector-im/riot-web', this.state.vectorVersion) + : 'unknown'; + + let olmVersion = MatrixClientPeg.get().olmVersion; + olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : ''; + + let updateButton = null; + if (this.state.canUpdate) { + const platform = PlatformPeg.get(); + updateButton = ( + + {_t('Check for update')} + + ); + } + + return ( +
+
{_t("Help & About")}
+
+ {_t('Bug reporting')} +
+ { + _t( "If you've submitted a bug via GitHub, debug logs can help " + + "us track down the problem. Debug logs contain application " + + "usage data including your username, the IDs or aliases of " + + "the rooms or groups you have visited and the usernames of " + + "other users. They do not contain messages.", + ) + } +
+ + {_t("Submit debug logs")} + +
+
+ + {_t("Clear Cache and Reload")} + +
+
+
+
+ {_t("FAQ")} +
+ {faqText} +
+
+
+ {_t("Versions")} +
+ {_t("matrix-react-sdk version:")} {reactSdkVersion}
+ {_t("riot-web version:")} {vectorVersion}
+ {_t("olm version:")} {olmVersion}
+ {updateButton} +
+
+ {this._renderLegal()} +
+ {_t("Advanced")} +
+ {_t("Homeserver is")} {MatrixClientPeg.get().getHomeserverUrl()}
+ {_t("Identity Server is")} {MatrixClientPeg.get().getIdentityServerUrl()}
+ {_t("Access Token:") + ' '} + + <{ _t("click to reveal") }> + +
+
+
+ ); + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 50539e84dd..3a423b7aa5 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -439,6 +439,26 @@ "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!", "Close Account": "Close Account", "General": "General", + "Legal": "Legal", + "For help with using Riot, click here.": "For help with using Riot, click here.", + "For help with using Riot, click here or start a chat with our bot using the button below.": "For help with using Riot, click here or start a chat with our bot using the button below.", + "Start a chat with Riot Bot": "Start a chat with Riot Bot", + "Check for update": "Check for update", + "Help & About": "Help & About", + "Bug reporting": "Bug reporting", + "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.", + "Submit debug logs": "Submit debug logs", + "Clear Cache and Reload": "Clear Cache and Reload", + "FAQ": "FAQ", + "Versions": "Versions", + "matrix-react-sdk version:": "matrix-react-sdk version:", + "riot-web version:": "riot-web version:", + "olm version:": "olm version:", + "Advanced": "Advanced", + "Homeserver is": "Homeserver is", + "Identity Server is": "Identity Server is", + "Access Token:": "Access Token:", + "click to reveal": "click to reveal", "Lazy loading members not supported": "Lazy loading members not supported", "Lazy loading is not supported by your current homeserver.": "Lazy loading is not supported by your current homeserver.", "Labs": "Labs", @@ -448,7 +468,6 @@ "Composer": "Composer", "Room list": "Room list", "Timeline": "Timeline", - "Advanced": "Advanced", "Autocomplete delay (ms)": "Autocomplete delay (ms)", "Unignore": "Unignore", "": "", @@ -929,7 +948,6 @@ "Logs sent": "Logs sent", "Thank you!": "Thank you!", "Failed to send logs: ": "Failed to send logs: ", - "Submit debug logs": "Submit debug logs", "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.", "Before submitting logs, you must create a GitHub issue to describe your problem.": "Before submitting logs, you must create a GitHub issue to describe your problem.", "What GitHub issue are these logs for?": "What GitHub issue are these logs for?", @@ -1069,7 +1087,7 @@ "Room contains unknown devices": "Room contains unknown devices", "\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.", "Unknown devices": "Unknown devices", - "Help & About": "Help & About", + "Security & Privacy": "Security & Privacy", "Visit old settings": "Visit old settings", "Unable to load backup status": "Unable to load backup status", "Unable to restore backup": "Unable to restore backup", @@ -1303,15 +1321,15 @@ "Key Backup": "Key Backup", "Ignored Users": "Ignored Users", "Submit Debug Logs": "Submit Debug Logs", - "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.", + "Riot collects anonymous analytics to allow us to improve the application.": "Riot collects anonymous analytics to allow us to improve the application.", + "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.", + "Learn more about how we use analytics.": "Learn more about how we use analytics.", "These are experimental features that may break in unexpected ways": "These are experimental features that may break in unexpected ways", "Use with caution": "Use with caution", "Deactivate my account": "Deactivate my account", - "Legal": "Legal", "Clear Cache": "Clear Cache", - "Clear Cache and Reload": "Clear Cache and Reload", "Updates": "Updates", - "Check for update": "Check for update", + "Reject all %(invitedRooms)s invites": "Reject all %(invitedRooms)s invites", "Bulk Options": "Bulk Options", "Desktop specific": "Desktop specific", "Missing Media Permissions, click here to request.": "Missing Media Permissions, click here to request.", @@ -1321,13 +1339,6 @@ "Display name": "Display name", "To return to your account in future you need to set a password": "To return to your account in future you need to set a password", "Logged in as:": "Logged in as:", - "Access Token:": "Access Token:", - "click to reveal": "click to reveal", - "Homeserver is": "Homeserver is", - "Identity Server is": "Identity Server is", - "matrix-react-sdk version:": "matrix-react-sdk version:", - "riot-web version:": "riot-web version:", - "olm version:": "olm version:", "Failed to send email": "Failed to send email", "The email address linked to your account must be entered.": "The email address linked to your account must be entered.", "A new password must be entered.": "A new password must be entered.",