From 9e4d8e7dfee11e151144ac47d4bbc9cbdccba6e0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 31 May 2019 15:00:26 +0200 Subject: [PATCH 01/93] document settingDefaults --- docs/settings.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/settings.md b/docs/settings.md index 1ba8981f84..30818625d2 100644 --- a/docs/settings.md +++ b/docs/settings.md @@ -51,6 +51,17 @@ Settings are the different options a user may set or experience in the applicati } ``` +Settings that support the config level can be set in the config file under the `settingDefaults` key (note that the "theme" setting is special cased to the `default_theme` in the config file): +``` +{ + ... + settingDefaults: { + settingName: true + }, + ... +} +``` + ### Getting values for a setting After importing `SettingsStore`, simply make a call to `SettingsStore.getValue`. The `roomId` parameter should always From 984f9ea4aabbac033ee70470713ddff948b41ba3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 27 Mar 2020 13:44:32 -0600 Subject: [PATCH 02/93] Fix fallback auth link to act and look like a link --- .../views/auth/InteractiveAuthEntryComponents.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index aaf8c88440..db73467ff7 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -598,7 +598,10 @@ export const FallbackAuthEntry = createReactClass({ } }, - _onShowFallbackClick: function() { + _onShowFallbackClick: function(e) { + e.preventDefault(); + e.stopPropagation(); + const url = this.props.matrixClient.getFallbackAuthUrl( this.props.loginType, this.props.authSessionId, @@ -627,7 +630,7 @@ export const FallbackAuthEntry = createReactClass({ } return (
- { _t("Start authentication") } + { _t("Start authentication") } {errorSection}
); From 1e30bdb73956e0d103b5d5168645aa635cca6b33 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 27 Mar 2020 14:39:59 -0600 Subject: [PATCH 03/93] Early proof of concept for SSO UIA It works well enough to start doing design. --- .../auth/InteractiveAuthEntryComponents.js | 66 ++++++++++++++++++- src/i18n/strings/en_EN.json | 1 + 2 files changed, 65 insertions(+), 2 deletions(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index db73467ff7..9f0d5f1534 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -1,7 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019, 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. @@ -565,6 +565,67 @@ export const MsisdnAuthEntry = createReactClass({ }, }); +export class SSOAuthEntry extends React.Component { + static propTypes = { + matrixClient: PropTypes.object.isRequired, + authSessionId: PropTypes.string.isRequired, + loginType: PropTypes.string.isRequired, + submitAuthDict: PropTypes.func.isRequired, + errorText: PropTypes.string, + }; + + static LOGIN_TYPE = "m.login.sso"; + static UNSTABLE_LOGIN_TYPE = "org.matrix.login.sso"; + + static STAGE_PREAUTH = 1; // button to start SSO + static STAGE_POSTAUTH = 2; // button to confirm SSO completed + + constructor(props) { + super(props); + + this.state = { + // We actually send the user through fallback auth so we don't have to + // deal with a redirect back to us, losing application context. + ssoUrl: props.matrixClient.getFallbackAuthUrl( + this.props.loginType, + this.props.authSessionId, + ), + stage: SSOAuthEntry.STAGE_PREAUTH, + }; + } + + onStartAuthClick = (e) => { + e.preventDefault(); + e.stopPropagation(); + + // Note: We don't use PlatformPeg's startSsoAuth functions because we almost + // certainly will need to open the thing in a new tab to avoid loosing application + // context. + + window.open(e.target.href, '_blank'); + this.setState({stage: SSOAuthEntry.STAGE_POSTAUTH}); + }; + + onConfirmClick = (e) => { + e.preventDefault(); + e.stopPropagation(); + + this.props.submitAuthDict({}); + }; + + render () { + if (this.state.stage === SSOAuthEntry.STAGE_PREAUTH) { + return + {_t("Single Sign On")} + ; + } else { + return + {_t("Continue")} + ; + } + } +} + export const FallbackAuthEntry = createReactClass({ displayName: 'FallbackAuthEntry', @@ -643,11 +704,12 @@ const AuthEntryComponents = [ EmailIdentityAuthEntry, MsisdnAuthEntry, TermsAuthEntry, + SSOAuthEntry, ]; export default function getEntryComponentForLoginType(loginType) { for (const c of AuthEntryComponents) { - if (c.LOGIN_TYPE == loginType) { + if (c.LOGIN_TYPE === loginType || c.UNSTABLE_LOGIN_TYPE === loginType) { return c; } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a6e195aa16..ed89068f91 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1831,6 +1831,7 @@ "Please enter the code it contains:": "Please enter the code it contains:", "Code": "Code", "Submit": "Submit", + "Single Sign On": "Single Sign On", "Start authentication": "Start authentication", "Unable to validate homeserver/identity server": "Unable to validate homeserver/identity server", "Your Modular server": "Your Modular server", From 21a41fa343e4b2f7829c2d84ca82341b6a7098ab Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 30 Mar 2020 10:05:40 +0100 Subject: [PATCH 04/93] Update link to css location. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d6fd6db1b7..69aafeb724 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ Code should be committed as follows: * In practice, `matrix-react-sdk` is still evolving so fast that the maintenance burden of customising and overriding these components for Riot can seriously impede development. So right now, there should be very few (if any) customisations for Riot. - * CSS: https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk + * CSS: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/css * Theme specific CSS & resources: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/themes React components in matrix-react-sdk are come in two different flavours: From 8c2b910c03e1e2dc26cba810bc74c0ff97459ce7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Mar 2020 13:59:08 +0100 Subject: [PATCH 05/93] rework SlashCommands to better expose aliases Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/{SlashCommands.js => SlashCommands.tsx} | 270 ++++++++---------- src/autocomplete/CommandProvider.js | 46 +-- .../views/dialogs/SlashCommandHelpDialog.js | 6 +- 3 files changed, 155 insertions(+), 167 deletions(-) rename src/{SlashCommands.js => SlashCommands.tsx} (91%) diff --git a/src/SlashCommands.js b/src/SlashCommands.tsx similarity index 91% rename from src/SlashCommands.js rename to src/SlashCommands.tsx index d306978f78..e69afbde48 100644 --- a/src/SlashCommands.js +++ b/src/SlashCommands.tsx @@ -2,6 +2,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2018 New Vector Ltd Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +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. @@ -17,7 +18,8 @@ limitations under the License. */ -import React from 'react'; +import * as React from 'react'; + import {MatrixClientPeg} from './MatrixClientPeg'; import dis from './dispatcher'; import * as sdk from './index'; @@ -34,11 +36,16 @@ import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from './utils/I import {isPermalinkHost, parsePermalink} from "./utils/permalinks/Permalinks"; import {inviteUsersToRoom} from "./RoomInvite"; -const singleMxcUpload = async () => { +// XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816 +interface HTMLInputEvent extends Event { + target: HTMLInputElement & EventTarget; +} + +const singleMxcUpload = async (): Promise => { return new Promise((resolve) => { const fileSelector = document.createElement('input'); fileSelector.setAttribute('type', 'file'); - fileSelector.onchange = (ev) => { + fileSelector.onchange = (ev: HTMLInputEvent) => { const file = ev.target.files[0]; const UploadConfirmDialog = sdk.getComponent("dialogs.UploadConfirmDialog"); @@ -62,9 +69,36 @@ export const CommandCategories = { "other": _td("Other"), }; +type RunFn = ((roomId: string, args: string, cmd: string) => {error: any} | {promise: Promise}); + class Command { - constructor({name, args='', description, runFn, category=CommandCategories.other, hideCompletionAfterSpace=false}) { - this.command = '/' + name; + command: string; + aliases: string[]; + args: undefined | string; + description: string; + runFn: undefined | RunFn; + category: string; + hideCompletionAfterSpace: boolean; + + constructor({ + command, + aliases=[], + args='', + description, + runFn=undefined, + category=CommandCategories.other, + hideCompletionAfterSpace=false, + }: { + command: string; + aliases?: string[]; + args?: string; + description: string; + runFn?: RunFn; + category: string; + hideCompletionAfterSpace?: boolean; + }) { + this.command = command; + this.aliases = aliases; this.args = args; this.description = description; this.runFn = runFn; @@ -73,17 +107,17 @@ class Command { } getCommand() { - return this.command; + return `/${this.command}`; } getCommandWithArgs() { return this.getCommand() + " " + this.args; } - run(roomId, args) { + run(roomId: string, args: string, cmd: string) { // if it has no runFn then its an ignored/nop command (autocomplete only) e.g `/me` if (!this.runFn) return; - return this.runFn.bind(this)(roomId, args); + return this.runFn.bind(this)(roomId, args, cmd); } getUsage() { @@ -95,7 +129,7 @@ function reject(error) { return {error}; } -function success(promise) { +function success(promise?: Promise) { return {promise}; } @@ -103,11 +137,9 @@ function success(promise) { * functions are called with `this` bound to the Command instance. */ -/* eslint-disable babel/no-invalid-this */ - -export const CommandMap = { - shrug: new Command({ - name: 'shrug', +export const Commands = [ + new Command({ + command: 'shrug', args: '', description: _td('Prepends ¯\\_(ツ)_/¯ to a plain-text message'), runFn: function(roomId, args) { @@ -119,8 +151,8 @@ export const CommandMap = { }, category: CommandCategories.messages, }), - plain: new Command({ - name: 'plain', + new Command({ + command: 'plain', args: '', description: _td('Sends a message as plain text, without interpreting it as markdown'), runFn: function(roomId, messages) { @@ -128,11 +160,11 @@ export const CommandMap = { }, category: CommandCategories.messages, }), - ddg: new Command({ - name: 'ddg', + new Command({ + command: 'ddg', args: '', description: _td('Searches DuckDuckGo for results'), - runFn: function(roomId, args) { + runFn: function() { const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog'); // TODO Don't explain this away, actually show a search UI here. Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, { @@ -144,9 +176,8 @@ export const CommandMap = { category: CommandCategories.actions, hideCompletionAfterSpace: true, }), - - upgraderoom: new Command({ - name: 'upgraderoom', + new Command({ + command: 'upgraderoom', args: '', description: _td('Upgrades a room to a new version'), runFn: function(roomId, args) { @@ -215,9 +246,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - nick: new Command({ - name: 'nick', + new Command({ + command: 'nick', args: '', description: _td('Changes your display nickname'), runFn: function(roomId, args) { @@ -228,9 +258,9 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - myroomnick: new Command({ - name: 'myroomnick', + new Command({ + command: 'myroomnick', + aliases: ['roomnick'], args: '', description: _td('Changes your display nickname in the current room only'), runFn: function(roomId, args) { @@ -239,7 +269,7 @@ export const CommandMap = { const ev = cli.getRoom(roomId).currentState.getStateEvents('m.room.member', cli.getUserId()); const content = { ...ev ? ev.getContent() : { membership: 'join' }, - displayname: args, + displaycommand: args, }; return success(cli.sendStateEvent(roomId, 'm.room.member', content, cli.getUserId())); } @@ -247,9 +277,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - roomavatar: new Command({ - name: 'roomavatar', + new Command({ + command: 'roomavatar', args: '[]', description: _td('Changes the avatar of the current room'), runFn: function(roomId, args) { @@ -265,9 +294,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - myroomavatar: new Command({ - name: 'myroomavatar', + new Command({ + command: 'myroomavatar', args: '[]', description: _td('Changes your avatar in this current room only'), runFn: function(roomId, args) { @@ -292,9 +320,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - myavatar: new Command({ - name: 'myavatar', + new Command({ + command: 'myavatar', args: '[]', description: _td('Changes your avatar in all rooms'), runFn: function(roomId, args) { @@ -310,9 +337,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - topic: new Command({ - name: 'topic', + new Command({ + command: 'topic', args: '[]', description: _td('Gets or sets the room topic'), runFn: function(roomId, args) { @@ -336,9 +362,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - roomname: new Command({ - name: 'roomname', + new Command({ + command: 'roomname', args: '', description: _td('Sets the room name'), runFn: function(roomId, args) { @@ -349,9 +374,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - invite: new Command({ - name: 'invite', + new Command({ + command: 'invite', args: '', description: _td('Invites user with given id to current room'), runFn: function(roomId, args) { @@ -390,7 +414,7 @@ export const CommandMap = { } } const inviter = new MultiInviter(roomId); - return success(finished.then(([useDefault] = []) => { + return success(finished.then(([useDefault]: any) => { if (useDefault) { useDefaultIdentityServer(); } else if (useDefault === false) { @@ -408,9 +432,9 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - join: new Command({ - name: 'join', + new Command({ + command: 'join', + aliases: ['j', 'goto'], args: '', description: _td('Joins room with given alias'), runFn: function(roomId, args) { @@ -521,9 +545,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - part: new Command({ - name: 'part', + new Command({ + command: 'part', args: '[]', description: _td('Leave room'), runFn: function(roomId, args) { @@ -569,9 +592,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - kick: new Command({ - name: 'kick', + new Command({ + command: 'kick', args: ' [reason]', description: _td('Kicks user with given id'), runFn: function(roomId, args) { @@ -585,10 +607,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - // Ban a user from the room with an optional reason - ban: new Command({ - name: 'ban', + new Command({ + command: 'ban', args: ' [reason]', description: _td('Bans user with given id'), runFn: function(roomId, args) { @@ -602,10 +622,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - // Unban a user from ythe room - unban: new Command({ - name: 'unban', + new Command({ + command: 'unban', args: '', description: _td('Unbans user with given ID'), runFn: function(roomId, args) { @@ -620,9 +638,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - ignore: new Command({ - name: 'ignore', + new Command({ + command: 'ignore', args: '', description: _td('Ignores a user, hiding their messages from you'), runFn: function(roomId, args) { @@ -651,9 +668,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - unignore: new Command({ - name: 'unignore', + new Command({ + command: 'unignore', args: '', description: _td('Stops ignoring a user, showing their messages going forward'), runFn: function(roomId, args) { @@ -683,10 +699,8 @@ export const CommandMap = { }, category: CommandCategories.actions, }), - - // Define the power level of a user - op: new Command({ - name: 'op', + new Command({ + command: 'op', args: ' []', description: _td('Define the power level of a user'), runFn: function(roomId, args) { @@ -712,10 +726,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - // Reset the power level of a user - deop: new Command({ - name: 'deop', + new Command({ + command: 'deop', args: '', description: _td('Deops user with given id'), runFn: function(roomId, args) { @@ -734,9 +746,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - devtools: new Command({ - name: 'devtools', + new Command({ + command: 'devtools', description: _td('Opens the Developer Tools dialog'), runFn: function(roomId) { const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog'); @@ -745,9 +756,8 @@ export const CommandMap = { }, category: CommandCategories.advanced, }), - - addwidget: new Command({ - name: 'addwidget', + new Command({ + command: 'addwidget', args: '', description: _td('Adds a custom widget by URL to the room'), runFn: function(roomId, args) { @@ -766,10 +776,8 @@ export const CommandMap = { }, category: CommandCategories.admin, }), - - // Verify a user, device, and pubkey tuple - verify: new Command({ - name: 'verify', + new Command({ + command: 'verify', args: ' ', description: _td('Verifies a user, session, and pubkey tuple'), runFn: function(roomId, args) { @@ -834,20 +842,9 @@ export const CommandMap = { }, category: CommandCategories.advanced, }), - - // Command definitions for autocompletion ONLY: - - // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes - me: new Command({ - name: 'me', - args: '', - description: _td('Displays action'), - category: CommandCategories.messages, - hideCompletionAfterSpace: true, - }), - - discardsession: new Command({ - name: 'discardsession', + new Command({ + command: 'discardsession', + aliases: ['newballsplease'], description: _td('Forces the current outbound group session in an encrypted room to be discarded'), runFn: function(roomId) { try { @@ -859,9 +856,8 @@ export const CommandMap = { }, category: CommandCategories.advanced, }), - - rainbow: new Command({ - name: "rainbow", + new Command({ + command: "rainbow", description: _td("Sends the given message coloured as a rainbow"), args: '', runFn: function(roomId, args) { @@ -870,9 +866,8 @@ export const CommandMap = { }, category: CommandCategories.messages, }), - - rainbowme: new Command({ - name: "rainbowme", + new Command({ + command: "rainbowme", description: _td("Sends the given emote coloured as a rainbow"), args: '', runFn: function(roomId, args) { @@ -881,9 +876,8 @@ export const CommandMap = { }, category: CommandCategories.messages, }), - - help: new Command({ - name: "help", + new Command({ + command: "help", description: _td("Displays list of commands with usages and descriptions"), runFn: function() { const SlashCommandHelpDialog = sdk.getComponent('dialogs.SlashCommandHelpDialog'); @@ -894,36 +888,25 @@ export const CommandMap = { category: CommandCategories.advanced, }), - whois: new Command({ - name: "whois", - description: _td("Displays information about a user"), - args: '', - runFn: function(roomId, userId) { - if (!userId || !userId.startsWith("@") || !userId.includes(":")) { - return reject(this.getUsage()); - } - - const member = MatrixClientPeg.get().getRoom(roomId).getMember(userId); - - dis.dispatch({ - action: 'view_user', - member: member || {userId}, - }); - return success(); - }, - category: CommandCategories.advanced, + // Command definitions for autocompletion ONLY: + // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes + new Command({ + command: 'me', + args: '', + description: _td('Displays action'), + category: CommandCategories.messages, + hideCompletionAfterSpace: true, }), -}; -/* eslint-enable babel/no-invalid-this */ +]; - -// helpful aliases -const aliases = { - j: "join", - newballsplease: "discardsession", - goto: "join", // because it handles event permalinks magically - roomnick: "myroomnick", -}; +// build a map from names and aliases to the Command objects. +export const CommandMap = new Map(); +Commands.forEach(cmd => { + CommandMap.set(cmd.command, cmd); + cmd.aliases.forEach(alias => { + CommandMap.set(alias, cmd); + }); +}); /** @@ -950,10 +933,7 @@ export function getCommand(roomId, input) { cmd = input; } - if (aliases[cmd]) { - cmd = aliases[cmd]; - } - if (CommandMap[cmd]) { - return () => CommandMap[cmd].run(roomId, args); + if (CommandMap.has(cmd)) { + return () => CommandMap.get(cmd).run(roomId, args, cmd); } } diff --git a/src/autocomplete/CommandProvider.js b/src/autocomplete/CommandProvider.js index da8fa3ed3c..0b8af4d6f9 100644 --- a/src/autocomplete/CommandProvider.js +++ b/src/autocomplete/CommandProvider.js @@ -23,17 +23,16 @@ import AutocompleteProvider from './AutocompleteProvider'; import QueryMatcher from './QueryMatcher'; import {TextualCompletion} from './Components'; import type {Completion, SelectionRange} from "./Autocompleter"; -import {CommandMap} from '../SlashCommands'; - -const COMMANDS = Object.values(CommandMap); +import {Commands, CommandMap} from '../SlashCommands'; const COMMAND_RE = /(^\/\w*)(?: .*)?/g; export default class CommandProvider extends AutocompleteProvider { constructor() { super(COMMAND_RE); - this.matcher = new QueryMatcher(COMMANDS, { - keys: ['command', 'args', 'description'], + this.matcher = new QueryMatcher(Commands, { + keys: ['command', 'args', 'description'], + funcs: [({aliases}) => aliases.join(" ")], // aliases }); } @@ -46,31 +45,40 @@ export default class CommandProvider extends AutocompleteProvider { if (command[0] !== command[1]) { // The input looks like a command with arguments, perform exact match const name = command[1].substr(1); // strip leading `/` - if (CommandMap[name]) { + if (CommandMap.has(name)) { // some commands, namely `me` and `ddg` don't suit having the usage shown whilst typing their arguments - if (CommandMap[name].hideCompletionAfterSpace) return []; - matches = [CommandMap[name]]; + if (CommandMap.get(name).hideCompletionAfterSpace) return []; + matches = [CommandMap.get(name)]; } } else { if (query === '/') { // If they have just entered `/` show everything - matches = COMMANDS; + matches = Commands; } else { // otherwise fuzzy match against all of the fields matches = this.matcher.match(command[1]); } } - return matches.map((result) => ({ - // If the command is the same as the one they entered, we don't want to discard their arguments - completion: result.command === command[1] ? command[0] : (result.command + ' '), - type: "command", - component: , - range, - })); + + return matches.map((result) => { + let completion = result.getCommand() + ' '; + const usedAlias = result.aliases.find(alias => `/${alias}` === command[1]); + // If the command (or an alias) is the same as the one they entered, we don't want to discard their arguments + if (usedAlias || result.getCommand() === command[1]) { + completion = command[0]; + } + + return { + completion, + type: "command", + component: , + range, + }; + }); } getName() { diff --git a/src/components/views/dialogs/SlashCommandHelpDialog.js b/src/components/views/dialogs/SlashCommandHelpDialog.js index 9e48a92ed1..bae5b37993 100644 --- a/src/components/views/dialogs/SlashCommandHelpDialog.js +++ b/src/components/views/dialogs/SlashCommandHelpDialog.js @@ -16,14 +16,14 @@ limitations under the License. import React from 'react'; import {_t} from "../../../languageHandler"; -import {CommandCategories, CommandMap} from "../../../SlashCommands"; +import {CommandCategories, Commands} from "../../../SlashCommands"; import * as sdk from "../../../index"; export default ({onFinished}) => { const InfoDialog = sdk.getComponent('dialogs.InfoDialog'); const categories = {}; - Object.values(CommandMap).forEach(cmd => { + Commands.forEach(cmd => { if (!categories[cmd.category]) { categories[cmd.category] = []; } @@ -41,7 +41,7 @@ export default ({onFinished}) => { categories[category].forEach(cmd => { rows.push( - {cmd.command} + {cmd.getCommand()} {cmd.args} {cmd.description} ); From c6d69f3d3fa072052d11f989671d7deea4311a3c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Mar 2020 14:09:10 +0100 Subject: [PATCH 06/93] de-tslint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/SlashCommands.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index e69afbde48..728f67987a 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -82,12 +82,12 @@ class Command { constructor({ command, - aliases=[], - args='', + aliases = [], + args = '', description, runFn=undefined, - category=CommandCategories.other, - hideCompletionAfterSpace=false, + category = CommandCategories.other, + hideCompletionAfterSpace = false, }: { command: string; aliases?: string[]; @@ -437,7 +437,7 @@ export const Commands = [ aliases: ['j', 'goto'], args: '', description: _td('Joins room with given alias'), - runFn: function(roomId, args) { + runFn: function(_, args) { if (args) { // Note: we support 2 versions of this command. The first is // the public-facing one for most users and the other is a @@ -710,7 +710,7 @@ export const Commands = [ if (matches) { const userId = matches[1]; if (matches.length === 4 && undefined !== matches[3]) { - powerLevel = parseInt(matches[3]); + powerLevel = parseInt(matches[3], 10); } if (!isNaN(powerLevel)) { const cli = MatrixClientPeg.get(); From 559b8e174ba355c6151157be09d6a7d43de5f904 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Mar 2020 14:13:08 +0100 Subject: [PATCH 07/93] undo accidental changes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/SlashCommands.tsx | 20 +++++++++++++++++++- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 728f67987a..8351013a5a 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -269,7 +269,7 @@ export const Commands = [ const ev = cli.getRoom(roomId).currentState.getStateEvents('m.room.member', cli.getUserId()); const content = { ...ev ? ev.getContent() : { membership: 'join' }, - displaycommand: args, + displayname: args, }; return success(cli.sendStateEvent(roomId, 'm.room.member', content, cli.getUserId())); } @@ -887,6 +887,24 @@ export const Commands = [ }, category: CommandCategories.advanced, }), + new Command({ + command: "whois", + description: _td("Displays information about a user"), + args: "", + runFn: function (roomId, userId) { + if (!userId || !userId.startsWith("@") || !userId.includes(":")) { + return reject(this.getUsage()); + } + + const member = MatrixClientPeg.get().getRoom(roomId).getMember(userId); + dis.dispatch({ + action: 'view_user', + member: member || {userId}, + }); + return success(); + }, + category: CommandCategories.advanced, + }), // Command definitions for autocompletion ONLY: // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2f19fc982c..151d5a2b0d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -197,12 +197,12 @@ "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!", "Verified key": "Verified key", "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.", - "Displays action": "Displays action", "Forces the current outbound group session in an encrypted room to be discarded": "Forces the current outbound group session in an encrypted room to be discarded", "Sends the given message coloured as a rainbow": "Sends the given message coloured as a rainbow", "Sends the given emote coloured as a rainbow": "Sends the given emote coloured as a rainbow", "Displays list of commands with usages and descriptions": "Displays list of commands with usages and descriptions", "Displays information about a user": "Displays information about a user", + "Displays action": "Displays action", "Reason": "Reason", "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.", "%(targetName)s accepted an invitation.": "%(targetName)s accepted an invitation.", From da34e6241dd521a41354e10db8e1bf10810c97f8 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 30 Mar 2020 18:18:10 +0100 Subject: [PATCH 08/93] Make all 'font-size's and 'line-height's rem Font size of the whole app would ideally be controlled by a single value. This value is currently hard coded using the :root CSS selector. It is the intention to make this value configurable within riot. In the interim all font-sizes have been converted to rem by the simple process of regex. Replacing px values with their equivalent rem values assuming a font size of 15px and then rounded to three decimal places, which was the base at the time of this transformation. I'm expecting another commit cleaning up rem values but I thought it best to leave that to review. This commit doesn't address any scaling issues. I thought it better to land this unwieldy, mechanical, invisible change before the others otherwise the pr would be impossible to review thoroughly. --- res/css/_common.scss | 20 +++++++------ res/css/structures/_ContextualMenu.scss | 2 +- res/css/structures/_CreateRoom.scss | 2 +- res/css/structures/_FilePanel.scss | 8 +++--- res/css/structures/_GroupView.scss | 10 +++---- res/css/structures/_LeftPanel.scss | 2 +- res/css/structures/_MyGroups.scss | 8 +++--- res/css/structures/_NotificationPanel.scss | 4 +-- res/css/structures/_RightPanel.scss | 2 +- res/css/structures/_RoomDirectory.scss | 10 +++---- res/css/structures/_RoomStatusBar.scss | 14 +++++----- res/css/structures/_RoomSubList.scss | 4 +-- res/css/structures/_RoomView.scss | 4 +-- res/css/structures/_TabbedView.scss | 2 +- res/css/structures/_TagPanel.scss | 4 +-- res/css/structures/_ToastContainer.scss | 6 ++-- res/css/structures/_TopLeftMenuButton.scss | 2 +- res/css/structures/_ViewSource.scss | 2 +- .../structures/auth/_CompleteSecurity.scss | 2 +- res/css/views/auth/_AuthBody.scss | 8 +++--- res/css/views/auth/_AuthButtons.scss | 2 +- res/css/views/auth/_AuthFooter.scss | 2 +- res/css/views/auth/_CompleteSecurityBody.scss | 4 +-- res/css/views/auth/_LanguageSelector.scss | 2 +- res/css/views/auth/_ServerTypeSelector.scss | 2 +- .../context_menus/_RoomTileContextMenu.scss | 2 +- .../_StatusMessageContextMenu.scss | 2 +- .../context_menus/_TagTileContextMenu.scss | 2 +- res/css/views/context_menus/_TopLeftMenu.scss | 4 +-- .../views/dialogs/_AddressPickerDialog.scss | 4 +-- .../dialogs/_ConfirmUserActionDialog.scss | 8 +++--- res/css/views/dialogs/_CreateGroupDialog.scss | 4 +-- res/css/views/dialogs/_CreateRoomDialog.scss | 2 +- res/css/views/dialogs/_DevtoolsDialog.scss | 4 +-- res/css/views/dialogs/_InviteDialog.scss | 18 ++++++------ .../dialogs/_MessageEditHistoryDialog.scss | 4 +-- .../dialogs/_NewSessionReviewDialog.scss | 2 +- res/css/views/dialogs/_SetEmailDialog.scss | 2 +- res/css/views/dialogs/_SetMxIdDialog.scss | 2 +- res/css/views/dialogs/_SetPasswordDialog.scss | 2 +- res/css/views/dialogs/_TermsDialog.scss | 2 +- .../views/dialogs/_UnknownDeviceDialog.scss | 2 +- res/css/views/directory/_NetworkDropdown.scss | 14 +++++----- res/css/views/elements/_AccessibleButton.scss | 2 +- res/css/views/elements/_AddressTile.scss | 4 +-- .../views/elements/_DirectorySearchBox.scss | 2 +- res/css/views/elements/_Dropdown.scss | 4 +-- res/css/views/elements/_EventListSummary.scss | 14 +++++----- res/css/views/elements/_Field.scss | 6 ++-- res/css/views/elements/_FormButton.scss | 4 +-- res/css/views/elements/_ImageView.scss | 10 +++---- .../views/elements/_InteractiveTooltip.scss | 2 +- res/css/views/elements/_RichText.scss | 2 +- res/css/views/elements/_Tooltip.scss | 6 ++-- res/css/views/elements/_TooltipButton.scss | 4 +-- res/css/views/emojipicker/_EmojiPicker.scss | 8 +++--- res/css/views/messages/_DateSeparator.scss | 2 +- res/css/views/messages/_MessageActionBar.scss | 2 +- res/css/views/messages/_MessageTimestamp.scss | 2 +- res/css/views/messages/_ReactionsRow.scss | 2 +- .../views/messages/_ReactionsRowButton.scss | 2 +- res/css/views/messages/_ViewSourceEvent.scss | 2 +- .../views/messages/_common_CryptoEvent.scss | 4 +-- res/css/views/right_panel/_UserInfo.scss | 18 ++++++------ .../views/right_panel/_VerificationPanel.scss | 2 +- res/css/views/rooms/_AppsDrawer.scss | 10 +++---- .../views/rooms/_BasicMessageComposer.scss | 4 +-- res/css/views/rooms/_EntityTile.scss | 6 ++-- res/css/views/rooms/_EventTile.scss | 28 +++++++++---------- res/css/views/rooms/_JumpToBottomButton.scss | 4 +-- res/css/views/rooms/_MemberDeviceInfo.scss | 2 +- res/css/views/rooms/_MemberInfo.scss | 14 +++++----- res/css/views/rooms/_MemberList.scss | 2 +- res/css/views/rooms/_MessageComposer.scss | 6 ++-- .../rooms/_MessageComposerFormatBar.scss | 4 +-- res/css/views/rooms/_PresenceLabel.scss | 2 +- res/css/views/rooms/_RoomDropTarget.scss | 4 +-- res/css/views/rooms/_RoomHeader.scss | 8 +++--- res/css/views/rooms/_RoomList.scss | 4 +-- res/css/views/rooms/_RoomPreviewBar.scss | 6 ++-- res/css/views/rooms/_RoomTile.scss | 6 ++-- res/css/views/rooms/_SearchBar.scss | 4 +-- res/css/views/rooms/_SendMessageComposer.scss | 2 +- res/css/views/rooms/_WhoIsTypingTile.scss | 4 +-- res/css/views/settings/tabs/_SettingsTab.scss | 8 +++--- .../views/terms/_InlineTermsAgreement.scss | 2 +- .../verification/_VerificationShowSas.scss | 4 +-- res/css/views/voip/_CallView.scss | 2 +- res/css/views/voip/_IncomingCallbox.scss | 2 +- res/themes/dark/css/_dark.scss | 2 +- res/themes/light/css/_light.scss | 4 +-- 91 files changed, 230 insertions(+), 226 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index ad64aced50..657fb21244 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -16,6 +16,10 @@ See the License for the specific language governing permissions and limitations under the License. */ +:root { + font-size: 15px; +} + html { /* hack to stop overscroll bounce on OSX and iOS. N.B. Breaks things when we have legitimate horizontal overscroll */ @@ -25,7 +29,7 @@ html { body { font-family: $font-family; - font-size: 15px; + font-size: 1rem; background-color: $primary-bg-color; color: $primary-fg-color; border: 0px; @@ -60,7 +64,7 @@ b { h2 { color: $primary-fg-color; font-weight: 400; - font-size: 18px; + font-size: 1.2rem; margin-top: 16px; margin-bottom: 16px; } @@ -76,7 +80,7 @@ input[type=search], input[type=password] { padding: 9px; font-family: $font-family; - font-size: 14px; + font-size: 0.933rem; font-weight: 600; min-width: 0; } @@ -253,7 +257,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { color: $light-fg-color; z-index: 4012; font-weight: 300; - font-size: 15px; + font-size: 1rem; position: relative; padding: 25px 30px 30px 30px; max-height: 80%; @@ -321,8 +325,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } .mx_Dialog_title { - font-size: 22px; - line-height: 36px; + font-size: 1.467rem; + line-height: 2.400rem; color: $dialog-title-fg-color; } @@ -350,7 +354,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { .mx_Dialog_content { margin: 24px 0 68px; - font-size: 14px; + font-size: 0.933rem; color: $primary-fg-color; word-wrap: break-word; } @@ -446,7 +450,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } .mx_TextInputDialog_input { - font-size: 15px; + font-size: 1rem; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index fa2d87029d..67e7a7a8d6 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -36,7 +36,7 @@ limitations under the License. background-color: $menu-bg-color; color: $primary-fg-color; position: absolute; - font-size: 14px; + font-size: 0.933rem; z-index: 5001; } diff --git a/res/css/structures/_CreateRoom.scss b/res/css/structures/_CreateRoom.scss index 10f9e23a02..3a66805bfe 100644 --- a/res/css/structures/_CreateRoom.scss +++ b/res/css/structures/_CreateRoom.scss @@ -26,7 +26,7 @@ limitations under the License. border-radius: 3px; border: 1px solid $strong-input-border-color; font-weight: 300; - font-size: 13px; + font-size: 0.867rem; padding: 9px; margin-top: 6px; } diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index 87e885e668..eceeab2e1b 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -49,7 +49,7 @@ limitations under the License. .mx_FilePanel .mx_EventTile .mx_MFileBody_download { display: flex; - font-size: 14px; + font-size: 0.933rem; color: $event-timestamp-color; } @@ -60,7 +60,7 @@ limitations under the License. .mx_FilePanel .mx_EventTile .mx_MImageBody_size { flex: 1 0 0; - font-size: 11px; + font-size: 0.733rem; text-align: right; white-space: nowrap; } @@ -80,7 +80,7 @@ limitations under the License. flex: 1 1 auto; line-height: initial; padding: 0px; - font-size: 11px; + font-size: 0.733rem; opacity: 1.0; color: $event-timestamp-color; } @@ -90,7 +90,7 @@ limitations under the License. text-align: right; visibility: visible; position: initial; - font-size: 11px; + font-size: 0.733rem; opacity: 1.0; color: $event-timestamp-color; } diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index 72a1132c15..6eb5e33462 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -134,7 +134,7 @@ limitations under the License. overflow: hidden; color: $primary-fg-color; font-weight: bold; - font-size: 22px; + font-size: 1.467rem; padding-left: 19px; padding-right: 16px; /* why isn't text-overflow working? */ @@ -148,7 +148,7 @@ limitations under the License. max-height: 42px; color: $settings-grey-fg-color; font-weight: 300; - font-size: 13px; + font-size: 0.867rem; padding-left: 19px; margin-right: 16px; overflow: hidden; @@ -196,7 +196,7 @@ limitations under the License. text-transform: uppercase; color: $h3-color; font-weight: 600; - font-size: 13px; + font-size: 0.867rem; margin-bottom: 10px; } @@ -226,7 +226,7 @@ limitations under the License. .mx_GroupView_rooms_header_addRow_label { display: inline-block; vertical-align: top; - line-height: 24px; + line-height: 1.600rem; padding-left: 28px; color: $accent-color; } @@ -258,7 +258,7 @@ limitations under the License. .mx_GroupView_membershipSection_description { /* To match textButton */ - line-height: 34px; + line-height: 2.267rem; } .mx_GroupView_membershipSection_description .mx_BaseAvatar { diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 85fdfa092d..6af4b54f91 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -147,7 +147,7 @@ limitations under the License. } .mx_AccessibleButton { - font-size: 14px; + font-size: 0.933rem; margin: 4px 0 1px 9px; padding: 9px; padding-left: 42px; diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss index 36150c33a5..042994e48c 100644 --- a/res/css/structures/_MyGroups.scss +++ b/res/css/structures/_MyGroups.scss @@ -105,7 +105,7 @@ limitations under the License. .mx_MyGroups_placeholder { background-color: $info-plinth-bg-color; color: $info-plinth-fg-color; - line-height: 400px; + line-height: 26.667rem; border-radius: 10px; text-align: center; } @@ -149,11 +149,11 @@ limitations under the License. .mx_GroupTile_profile .mx_GroupTile_name { margin: 0px; - font-size: 15px; + font-size: 1rem; } .mx_GroupTile_profile .mx_GroupTile_groupId { - font-size: 13px; + font-size: 0.867rem; opacity: 0.7; } @@ -161,7 +161,7 @@ limitations under the License. display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - font-size: 13px; + font-size: 0.867rem; max-height: 36px; overflow: hidden; } diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index c9e0261ec9..ff95cc2dba 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -39,7 +39,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile_roomName { font-weight: bold; - font-size: 14px; + font-size: 0.933rem; } .mx_NotificationPanel .mx_EventTile_roomName a { @@ -54,7 +54,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { color: $primary-fg-color; - font-size: 12px; + font-size: 0.8rem; display: inline; padding-left: 0px; } diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 3c373e8883..b0c2b4650f 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -96,7 +96,7 @@ limitations under the License. } .mx_RightPanel_headerButton_badge { - font-size: 8px; + font-size: 0.533rem; border-radius: 8px; color: $accent-fg-color; background-color: $accent-color; diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index f3a7b0e243..b62f726d09 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -64,7 +64,7 @@ limitations under the License. } .mx_RoomDirectory_table { - font-size: 12px; + font-size: 0.8rem; color: $primary-fg-color; width: 100%; text-align: left; @@ -112,7 +112,7 @@ limitations under the License. .mx_RoomDirectory_name { display: inline-block; - font-size: 18px; + font-size: 1.2rem; font-weight: 600; } @@ -124,7 +124,7 @@ limitations under the License. border-radius: 10px; display: inline-block; height: 20px; - line-height: 20px; + line-height: 1.333rem; padding: 0 5px; color: $accent-fg-color; background-color: $rte-room-pill-color; @@ -136,7 +136,7 @@ limitations under the License. } .mx_RoomDirectory_alias { - font-size: 12px; + font-size: 0.8rem; color: $settings-grey-fg-color; } @@ -150,7 +150,7 @@ limitations under the License. } .mx_RoomDirectory > span { - font-size: 15px; + font-size: 1rem; margin-top: 0; .mx_AccessibleButton { diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index 090a40235f..1dc99b26f0 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -32,7 +32,7 @@ limitations under the License. .mx_RoomStatusBar_callBar { height: 50px; - line-height: 50px; + line-height: 3.333rem; } .mx_RoomStatusBar_placeholderIndicator span { @@ -94,7 +94,7 @@ limitations under the License. border-radius: 40px; width: 24px; height: 24px; - line-height: 24px; + line-height: 1.600rem; font-size: 0.8em; vertical-align: top; text-align: center; @@ -132,7 +132,7 @@ limitations under the License. .mx_RoomStatusBar_connectionLostBar_desc { color: $primary-fg-color; - font-size: 13px; + font-size: 0.867rem; opacity: 0.5; padding-bottom: 20px; } @@ -145,7 +145,7 @@ limitations under the License. .mx_RoomStatusBar_typingBar { height: 50px; - line-height: 50px; + line-height: 3.333rem; color: $primary-fg-color; opacity: 0.5; @@ -155,7 +155,7 @@ limitations under the License. .mx_RoomStatusBar_isAlone { height: 50px; - line-height: 50px; + line-height: 3.333rem; color: $primary-fg-color; opacity: 0.5; @@ -174,11 +174,11 @@ limitations under the License. .mx_RoomStatusBar_callBar { height: 40px; - line-height: 40px; + line-height: 2.667rem; } .mx_RoomStatusBar_typingBar { height: 40px; - line-height: 40px; + line-height: 2.667rem; } } diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 1934e681c2..a76872a745 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -68,7 +68,7 @@ limitations under the License. text-transform: uppercase; color: $roomsublist-label-fg-color; font-weight: 700; - font-size: 12px; + font-size: 0.8rem; margin-left: 8px; } @@ -76,7 +76,7 @@ limitations under the License. flex: 0 0 auto; border-radius: 8px; font-weight: 600; - font-size: 12px; + font-size: 0.8rem; padding: 0 5px; color: $roomtile-badge-fg-color; background-color: $roomtile-name-color; diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 5e826306c6..52de9384d7 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -23,7 +23,7 @@ limitations under the License. .mx_RoomView_fileDropTarget { min-width: 0px; width: 100%; - font-size: 18px; + font-size: 1.2rem; text-align: center; pointer-events: none; @@ -186,7 +186,7 @@ limitations under the License. .mx_RoomView_empty { flex: 1 1 auto; - font-size: 13px; + font-size: 0.867rem; padding-left: 3em; padding-right: 3em; margin-right: 20px; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 7904df5a82..20e2120bfd 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -39,7 +39,7 @@ limitations under the License. cursor: pointer; display: block; border-radius: 3px; - font-size: 14px; + font-size: 0.933rem; min-height: 24px; // use min-height instead of height to allow the label to overflow a bit margin-bottom: 6px; position: relative; diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 472831c0d9..5173358bcc 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -139,7 +139,7 @@ limitations under the License. background-color: $neutral-badge-color; color: #ffffff; font-weight: 600; - font-size: 10px; + font-size: 0.667rem; text-align: center; padding-top: 1px; padding-left: 4px; @@ -157,7 +157,7 @@ limitations under the License. border-radius: 8px; color: $accent-fg-color; font-weight: 600; - font-size: 14px; + font-size: 0.933rem; padding: 0 5px; background-color: $roomtile-name-color; } diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index d1687743d6..07daf3f865 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -77,7 +77,7 @@ limitations under the License. grid-column: 1 / 3; grid-row: 1; margin: 0; - font-size: 15px; + font-size: 1rem; font-weight: 600; } @@ -96,11 +96,11 @@ limitations under the License. white-space: nowrap; text-overflow: ellipsis; margin: 4px 0 11px 0; - font-size: 12px; + font-size: 0.8rem; } .mx_Toast_deviceID { - font-size: 10px; + font-size: 0.667rem; } } } diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss index ee03978f18..9bdffb530a 100644 --- a/res/css/structures/_TopLeftMenuButton.scss +++ b/res/css/structures/_TopLeftMenuButton.scss @@ -32,7 +32,7 @@ limitations under the License. .mx_TopLeftMenuButton_name { margin: 0 7px; - font-size: 18px; + font-size: 1.2rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss index b908861c6f..c84c48240e 100644 --- a/res/css/structures/_ViewSource.scss +++ b/res/css/structures/_ViewSource.scss @@ -29,7 +29,7 @@ limitations under the License. .mx_ViewSource pre { text-align: left; - font-size: 12px; + font-size: 0.8rem; padding: 0.5em 1em 0.5em 1em; word-wrap: break-word; white-space: pre-wrap; diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss index 601492d43c..9367c2c996 100644 --- a/res/css/structures/auth/_CompleteSecurity.scss +++ b/res/css/structures/auth/_CompleteSecurity.scss @@ -34,7 +34,7 @@ limitations under the License. } .mx_CompleteSecurity_body { - font-size: 15px; + font-size: 1rem; } .mx_CompleteSecurity_waiting { diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 7c5b008535..219bf6d0e7 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_AuthBody { width: 500px; - font-size: 12px; + font-size: 0.8rem; color: $authpage-secondary-color; background-color: $authpage-body-bg-color; border-radius: 0 4px 4px 0; @@ -25,14 +25,14 @@ limitations under the License. box-sizing: border-box; h2 { - font-size: 24px; + font-size: 1.600rem; font-weight: 600; margin-top: 8px; color: $authpage-primary-color; } h3 { - font-size: 14px; + font-size: 0.933rem; font-weight: 600; color: $authpage-primary-color; } @@ -98,7 +98,7 @@ limitations under the License. .mx_AuthBody_editServerDetails { padding-left: 1em; - font-size: 12px; + font-size: 0.8rem; font-weight: normal; } diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss index 553adeee14..109a1f4670 100644 --- a/res/css/views/auth/_AuthButtons.scss +++ b/res/css/views/auth/_AuthButtons.scss @@ -43,7 +43,7 @@ limitations under the License. cursor: pointer; - font-size: 15px; + font-size: 1rem; padding: 0 11px; word-break: break-word; } diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss index ab169a6898..b1bdcb697e 100644 --- a/res/css/views/auth/_AuthFooter.scss +++ b/res/css/views/auth/_AuthFooter.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_AuthFooter { text-align: center; width: 100%; - font-size: 14px; + font-size: 0.933rem; opacity: 0.72; padding: 20px 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss index c7860fbe74..af0620c329 100644 --- a/res/css/views/auth/_CompleteSecurityBody.scss +++ b/res/css/views/auth/_CompleteSecurityBody.scss @@ -24,13 +24,13 @@ limitations under the License. box-sizing: border-box; h2 { - font-size: 24px; + font-size: 1.600rem; font-weight: 600; margin-top: 0; } h3 { - font-size: 14px; + font-size: 0.933rem; font-weight: 600; } diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss index 6f7eac0cf6..e9ac8688ed 100644 --- a/res/css/views/auth/_LanguageSelector.scss +++ b/res/css/views/auth/_LanguageSelector.scss @@ -20,7 +20,7 @@ limitations under the License. .mx_AuthBody_language .mx_Dropdown_input { border: none; - font-size: 14px; + font-size: 0.933rem; font-weight: 600; color: $authpage-lang-color; } diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss index ed781726b7..2042358b8a 100644 --- a/res/css/views/auth/_ServerTypeSelector.scss +++ b/res/css/views/auth/_ServerTypeSelector.scss @@ -65,5 +65,5 @@ limitations under the License. } .mx_ServerTypeSelector_description { - font-size: 10px; + font-size: 0.667rem; } diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss index 308cecfe1e..1e1a5f889f 100644 --- a/res/css/views/context_menus/_RoomTileContextMenu.scss +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -38,7 +38,7 @@ limitations under the License. white-space: nowrap; display: flex; align-items: center; - line-height: 16px; + line-height: 1.067rem; } .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet { diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss index 2c8d608950..b68d16281a 100644 --- a/res/css/views/context_menus/_StatusMessageContextMenu.scss +++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss @@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message { .mx_StatusMessageContextMenu_clear { @mixin mx_DialogButton; align-self: start; - font-size: 12px; + font-size: 0.8rem; padding: 6px 1em; border: 1px solid transparent; margin-right: 10px; diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss index 46b279ce2d..20f95d7f84 100644 --- a/res/css/views/context_menus/_TagTileContextMenu.scss +++ b/res/css/views/context_menus/_TagTileContextMenu.scss @@ -22,7 +22,7 @@ limitations under the License. white-space: nowrap; display: flex; align-items: center; - line-height: 16px; + line-height: 1.067rem; } .mx_TagTileContextMenu_item object { diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss index ed0d0106bc..abcaa4fcb5 100644 --- a/res/css/views/context_menus/_TopLeftMenu.scss +++ b/res/css/views/context_menus/_TopLeftMenu.scss @@ -19,12 +19,12 @@ limitations under the License. border-radius: 4px; .mx_TopLeftMenu_greyedText { - font-size: 12px; + font-size: 0.8rem; opacity: 0.5; } .mx_TopLeftMenu_upgradeLink { - font-size: 12px; + font-size: 0.8rem; img { margin-left: 5px; diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss index 39a9260ba3..6b107b3253 100644 --- a/res/css/views/dialogs/_AddressPickerDialog.scss +++ b/res/css/views/dialogs/_AddressPickerDialog.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_AddressPickerDialog_input, .mx_AddressPickerDialog_input:focus { height: 26px; - font-size: 14px; + font-size: 0.933rem; font-family: $font-family; padding-left: 12px; padding-right: 12px; @@ -50,7 +50,7 @@ limitations under the License. .mx_AddressPickerDialog_inputContainer { border-radius: 3px; border: solid 1px $input-border-color; - line-height: 36px; + line-height: 2.400rem; padding-left: 4px; padding-right: 4px; padding-top: 1px; diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss index b859d6bf4d..e589ef0450 100644 --- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss +++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss @@ -26,22 +26,22 @@ limitations under the License. } .mx_ConfirmUserActionDialog_name { - font-size: 18px; + font-size: 1.2rem; } .mx_ConfirmUserActionDialog_userId { - font-size: 13px; + font-size: 0.867rem; } .mx_ConfirmUserActionDialog_reasonField { font-family: $font-family; - font-size: 14px; + font-size: 0.933rem; color: $primary-fg-color; background-color: $primary-bg-color; border-radius: 3px; border: solid 1px $input-border-color; - line-height: 36px; + line-height: 2.400rem; padding-left: 16px; padding-right: 16px; padding-top: 1px; diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss index 128eacc3ce..4159944e5d 100644 --- a/res/css/views/dialogs/_CreateGroupDialog.scss +++ b/res/css/views/dialogs/_CreateGroupDialog.scss @@ -25,7 +25,7 @@ limitations under the License. } .mx_CreateGroupDialog_input { - font-size: 15px; + font-size: 1rem; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; @@ -44,7 +44,7 @@ limitations under the License. .mx_CreateGroupDialog_prefix, .mx_CreateGroupDialog_suffix { padding: 0px 5px; - line-height: 37px; + line-height: 2.467rem; background-color: $input-darker-bg-color; border: 1px solid $input-border-color; text-align: center; diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 7416ec2ef4..1cdbe99843 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -49,7 +49,7 @@ limitations under the License. } .mx_CreateRoomDialog_input { - font-size: 15px; + font-size: 1rem; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 500c46b5fd..399c7225f6 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -68,11 +68,11 @@ limitations under the License. width: 240px; color: $input-fg-color; font-family: $font-family; - font-size: 16px; + font-size: 1.067rem; } .mx_DevTools_textarea { - font-size: 12px; + font-size: 0.8rem; max-width: 684px; min-height: 250px; padding: 10px; diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 5e0893b8fd..22b1867002 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -40,8 +40,8 @@ limitations under the License. textarea, textarea:focus { height: 34px; - line-height: 34px; - font-size: 14px; + line-height: 2.267rem; + font-size: 0.933rem; padding-left: 12px; margin: 0 !important; border: 0 !important; @@ -65,7 +65,7 @@ limitations under the License. min-width: 48px; margin-left: 10px; height: 25px; - line-height: 25px; + line-height: 1.667rem; } .mx_InviteDialog_buttonAndSpinner { @@ -84,7 +84,7 @@ limitations under the License. padding-bottom: 10px; h3 { - font-size: 12px; + font-size: 0.8rem; color: $muted-fg-color; font-weight: bold; text-transform: uppercase; @@ -143,23 +143,23 @@ limitations under the License. .mx_InviteDialog_roomTile_name { font-weight: 600; - font-size: 14px; + font-size: 0.933rem; color: $primary-fg-color; margin-left: 7px; } .mx_InviteDialog_roomTile_userId { - font-size: 12px; + font-size: 0.8rem; color: $muted-fg-color; margin-left: 7px; } .mx_InviteDialog_roomTile_time { text-align: right; - font-size: 12px; + font-size: 0.8rem; color: $muted-fg-color; float: right; - line-height: 36px; // Height of the avatar to keep the time vertically aligned + line-height: 2.400rem; // Height of the avatar to keep the time vertically aligned } .mx_InviteDialog_roomTile_highlight { @@ -176,7 +176,7 @@ limitations under the License. border-radius: 12px; display: inline-block; height: 24px; - line-height: 24px; + line-height: 1.600rem; padding-left: 8px; padding-right: 8px; color: #ffffff; // this is fine without a var because it's for both themes diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss index 0066faccae..8d989f6a00 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss @@ -35,7 +35,7 @@ limitations under the License. .mx_MessageEditHistoryDialog_edits { list-style-type: none; - font-size: 14px; + font-size: 0.933rem; padding: 0; color: $primary-fg-color; @@ -60,7 +60,7 @@ limitations under the License. } .mx_MessageActionBar .mx_AccessibleButton { - font-size: 10px; + font-size: 0.667rem; padding: 0 8px; } } diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss index 7e35fe941e..633b3a063b 100644 --- a/res/css/views/dialogs/_NewSessionReviewDialog.scss +++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss @@ -32,6 +32,6 @@ limitations under the License. } .mx_NewSessionReviewDialog_deviceID { - font-size: 12px; + font-size: 0.8rem; color: $notice-secondary-color; } diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss index 9d09a208df..a5013f79b1 100644 --- a/res/css/views/dialogs/_SetEmailDialog.scss +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -20,7 +20,7 @@ limitations under the License. padding: 9px; color: $input-fg-color; background-color: $primary-bg-color; - font-size: 15px; + font-size: 1rem; width: 100%; max-width: 280px; margin-bottom: 10px; diff --git a/res/css/views/dialogs/_SetMxIdDialog.scss b/res/css/views/dialogs/_SetMxIdDialog.scss index f7d8a3d001..8208a679fd 100644 --- a/res/css/views/dialogs/_SetMxIdDialog.scss +++ b/res/css/views/dialogs/_SetMxIdDialog.scss @@ -29,7 +29,7 @@ limitations under the License. padding: 9px; color: $primary-fg-color; background-color: $primary-bg-color; - font-size: 15px; + font-size: 1rem; width: 100%; max-width: 280px; } diff --git a/res/css/views/dialogs/_SetPasswordDialog.scss b/res/css/views/dialogs/_SetPasswordDialog.scss index 325ff6c6ed..cff11c8afb 100644 --- a/res/css/views/dialogs/_SetPasswordDialog.scss +++ b/res/css/views/dialogs/_SetPasswordDialog.scss @@ -20,7 +20,7 @@ limitations under the License. padding: 9px; color: $primary-fg-color; background-color: $primary-bg-color; - font-size: 15px; + font-size: 1rem; max-width: 280px; margin-bottom: 10px; } diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss index beb507e778..e9805d1b35 100644 --- a/res/css/views/dialogs/_TermsDialog.scss +++ b/res/css/views/dialogs/_TermsDialog.scss @@ -31,7 +31,7 @@ limitations under the License. } .mx_TermsDialog_termsTable { - font-size: 12px; + font-size: 0.8rem; width: 100%; } diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss index 2b0f8dceca..8bb0ed4ff4 100644 --- a/res/css/views/dialogs/_UnknownDeviceDialog.scss +++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss @@ -27,7 +27,7 @@ limitations under the License. // userid .mx_UnknownDeviceDialog p { font-weight: bold; - font-size: 16px; + font-size: 1.067rem; } .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons { diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 106392f880..2f0e3e6a17 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -47,9 +47,9 @@ limitations under the License. .mx_NetworkDropdown_server_title { padding: 0 10px; - font-size: 15px; + font-size: 1rem; font-weight: 600; - line-height: 20px; + line-height: 1.333rem; margin-bottom: 4px; // remove server button @@ -77,16 +77,16 @@ limitations under the License. .mx_NetworkDropdown_server_subtitle { padding: 0 10px; - font-size: 10px; - line-height: 14px; + font-size: 0.667rem; + line-height: 0.933rem; margin-top: -4px; margin-bottom: 4px; color: $muted-fg-color; } .mx_NetworkDropdown_server_network { - font-size: 12px; - line-height: 16px; + font-size: 0.8rem; + line-height: 1.067rem; padding: 4px 10px; cursor: pointer; position: relative; @@ -154,7 +154,7 @@ limitations under the License. .mx_NetworkDropdown_handle_server { color: $muted-fg-color; - font-size: 12px; + font-size: 0.8rem; } } diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index b87071745d..b7439d5856 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -27,7 +27,7 @@ limitations under the License. text-align: center; border-radius: 4px; display: inline-block; - font-size: 14px; + font-size: 0.933rem; } .mx_AccessibleButton_kind_primary { diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss index 0ecfb17c83..94028481d4 100644 --- a/res/css/views/elements/_AddressTile.scss +++ b/res/css/views/elements/_AddressTile.scss @@ -19,9 +19,9 @@ limitations under the License. border-radius: 3px; background-color: rgba(74, 73, 74, 0.1); border: solid 1px $input-border-color; - line-height: 26px; + line-height: 1.733rem; color: $primary-fg-color; - font-size: 14px; + font-size: 0.933rem; font-weight: normal; margin-right: 4px; } diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss index 75ef3fbabd..35fb80f5df 100644 --- a/res/css/views/elements/_DirectorySearchBox.scss +++ b/res/css/views/elements/_DirectorySearchBox.scss @@ -32,7 +32,7 @@ limitations under the License. background-repeat: no-repeat; text-indent: 18px; font-weight: 600; - font-size: 12px; + font-size: 0.8rem; user-select: none; cursor: pointer; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 102ac56bf9..64bcf7a33a 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -29,7 +29,7 @@ limitations under the License. position: relative; border-radius: 3px; border: 1px solid $strong-input-border-color; - font-size: 12px; + font-size: 0.8rem; user-select: none; } @@ -53,7 +53,7 @@ limitations under the License. .mx_Dropdown_option { height: 35px; - line-height: 35px; + line-height: 2.333rem; padding-left: 8px; padding-right: 8px; } diff --git a/res/css/views/elements/_EventListSummary.scss b/res/css/views/elements/_EventListSummary.scss index 99a5c06a5f..a40c1384d7 100644 --- a/res/css/views/elements/_EventListSummary.scss +++ b/res/css/views/elements/_EventListSummary.scss @@ -19,7 +19,7 @@ limitations under the License. } .mx_TextualEvent.mx_EventListSummary_summary { - font-size: 14px; + font-size: 0.933rem; display: inline-flex; } @@ -27,7 +27,7 @@ limitations under the License. display: inline-block; margin-right: 8px; padding-top: 8px; - line-height: 12px; + line-height: 0.8rem; } .mx_EventListSummary_avatars .mx_BaseAvatar { @@ -46,19 +46,19 @@ limitations under the License. .mx_EventListSummary_line { border-bottom: 1px solid $primary-hairline-color; margin-left: 63px; - line-height: 30px; + line-height: 2.000rem; } .mx_MatrixChat_useCompactLayout { .mx_EventListSummary { - font-size: 13px; + font-size: 0.867rem; .mx_EventTile_line { - line-height: 20px; + line-height: 1.333rem; } } .mx_EventListSummary_line { - line-height: 22px; + line-height: 1.467rem; } .mx_EventListSummary_toggle { @@ -66,6 +66,6 @@ limitations under the License. } .mx_TextualEvent.mx_EventListSummary_summary { - font-size: 13px; + font-size: 0.867rem; } } diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index b260d4b097..26d24dba3a 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -40,7 +40,7 @@ limitations under the License. .mx_Field textarea { font-weight: normal; font-family: $font-family; - font-size: 14px; + font-size: 0.933rem; border: none; // Even without a border here, we still need this avoid overlapping the rounded // corners on the field above. @@ -102,7 +102,7 @@ limitations under the License. background-color 0.25s ease-out 0.1s; color: $primary-fg-color; background-color: transparent; - font-size: 14px; + font-size: 0.933rem; position: absolute; left: 0px; top: 0px; @@ -126,7 +126,7 @@ limitations under the License. color 0.25s ease-out 0s, top 0.25s ease-out 0s, background-color 0.25s ease-out 0s; - font-size: 10px; + font-size: 0.667rem; top: -13px; padding: 0 2px; background-color: $field-focused-label-bg-color; diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss index 1483fe2091..c23ab6ee30 100644 --- a/res/css/views/elements/_FormButton.scss +++ b/res/css/views/elements/_FormButton.scss @@ -15,9 +15,9 @@ limitations under the License. */ .mx_FormButton { - line-height: 16px; + line-height: 1.067rem; padding: 5px 15px; - font-size: 12px; + font-size: 0.8rem; height: min-content; &:not(:last-child) { diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss index 67b0d6d7df..cc7fca67d3 100644 --- a/res/css/views/elements/_ImageView.scss +++ b/res/css/views/elements/_ImageView.scss @@ -102,13 +102,13 @@ limitations under the License. } .mx_ImageView_name { - font-size: 18px; + font-size: 1.2rem; margin-bottom: 6px; word-wrap: break-word; } .mx_ImageView_metadata { - font-size: 15px; + font-size: 1rem; opacity: 0.5; } @@ -118,13 +118,13 @@ limitations under the License. margin-bottom: 6px; border-radius: 5px; background-color: $lightbox-bg-color; - font-size: 14px; + font-size: 0.933rem; padding: 9px; border: 1px solid $lightbox-border-color; } .mx_ImageView_size { - font-size: 11px; + font-size: 0.733rem; } .mx_ImageView_link { @@ -133,7 +133,7 @@ limitations under the License. } .mx_ImageView_button { - font-size: 15px; + font-size: 1rem; opacity: 0.5; margin-top: 18px; cursor: pointer; diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss index 17a76436e8..07441ef85d 100644 --- a/res/css/views/elements/_InteractiveTooltip.scss +++ b/res/css/views/elements/_InteractiveTooltip.scss @@ -24,7 +24,7 @@ limitations under the License. background-color: $interactive-tooltip-bg-color; color: $interactive-tooltip-fg-color; position: absolute; - font-size: 10px; + font-size: 0.667rem; font-weight: 600; padding: 6px; z-index: 5001; diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 5066ee10f3..d821f52e3d 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -9,7 +9,7 @@ border-radius: 16px; display: inline-block; height: 20px; - line-height: 20px; + line-height: 1.333rem; padding-left: 5px; } diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index cc4eb409df..61762ced92 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -58,8 +58,8 @@ limitations under the License. z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs padding: 10px; pointer-events: none; - line-height: 14px; - font-size: 12px; + line-height: 0.933rem; + font-size: 0.8rem; font-weight: 600; color: $primary-fg-color; max-width: 200px; @@ -82,7 +82,7 @@ limitations under the License. text-align: center; border: none; border-radius: 3px; - font-size: 14px; + font-size: 0.933rem; line-height: 1.2; padding: 6px 8px; diff --git a/res/css/views/elements/_TooltipButton.scss b/res/css/views/elements/_TooltipButton.scss index 6ea36c800e..c350fc22e2 100644 --- a/res/css/views/elements/_TooltipButton.scss +++ b/res/css/views/elements/_TooltipButton.scss @@ -28,7 +28,7 @@ limitations under the License. transition: opacity 0.2s ease-in; opacity: 0.6; - line-height: 11px; + line-height: 0.733rem; text-align: center; cursor: pointer; @@ -47,6 +47,6 @@ limitations under the License. .mx_TooltipButton_helpText { width: 400px; text-align: start; - line-height: 17px !important; + line-height: 1.133rem !important; } diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss index 5d9b3f2687..64b27b9ab3 100644 --- a/res/css/views/emojipicker/_EmojiPicker.scss +++ b/res/css/views/emojipicker/_EmojiPicker.scss @@ -163,7 +163,7 @@ limitations under the License. .mx_EmojiPicker_item { display: inline-block; - font-size: 20px; + font-size: 1.333rem; padding: 5px; width: 100%; height: 100%; @@ -183,7 +183,7 @@ limitations under the License. } .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name { - font-size: 16px; + font-size: 1.067rem; font-weight: 600; margin: 0; } @@ -197,7 +197,7 @@ limitations under the License. } .mx_EmojiPicker_preview_emoji { - font-size: 32px; + font-size: 2.133rem; padding: 8px 16px; } @@ -212,7 +212,7 @@ limitations under the License. .mx_EmojiPicker_shortcode { color: $light-fg-color; - font-size: 14px; + font-size: 0.933rem; &::before, &::after { content: ":"; diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss index 935ee1aba3..b02e72814f 100644 --- a/res/css/views/messages/_DateSeparator.scss +++ b/res/css/views/messages/_DateSeparator.scss @@ -19,7 +19,7 @@ limitations under the License. margin: 4px 0; display: flex; align-items: center; - font-size: 14px; + font-size: 0.933rem; color: $roomtopic-color; } diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index c032051c36..66ba0b227d 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -21,7 +21,7 @@ limitations under the License. cursor: pointer; display: flex; height: 24px; - line-height: 24px; + line-height: 1.600rem; border-radius: 4px; background: $message-action-bar-bg-color; top: -18px; diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss index e5c228aa68..3a2a8d6336 100644 --- a/res/css/views/messages/_MessageTimestamp.scss +++ b/res/css/views/messages/_MessageTimestamp.scss @@ -16,5 +16,5 @@ limitations under the License. .mx_MessageTimestamp { color: $event-timestamp-color; - font-size: 10px; + font-size: 0.667rem; } diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss index 57c02ed3e5..ee816e0fc0 100644 --- a/res/css/views/messages/_ReactionsRow.scss +++ b/res/css/views/messages/_ReactionsRow.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_ReactionsRow_showAll { text-decoration: none; - font-size: 10px; + font-size: 0.667rem; font-weight: 600; margin-left: 6px; vertical-align: top; diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index e54201d963..7160c223be 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_ReactionsRowButton { display: inline-flex; height: 20px; - line-height: 21px; + line-height: 1.400rem; margin-right: 6px; padding: 0 6px; border: 1px solid $reaction-row-button-border-color; diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss index a15924e759..088b66445d 100644 --- a/res/css/views/messages/_ViewSourceEvent.scss +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_EventTile_content.mx_ViewSourceEvent { display: flex; opacity: 0.6; - font-size: 12px; + font-size: 0.8rem; pre, code { flex: 1; diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index 98e1e97e39..c9499b763f 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -45,7 +45,7 @@ limitations under the License. .mx_cryptoEvent_title { font-weight: 600; - font-size: 15px; + font-size: 1rem; grid-column: 2; grid-row: 1; } @@ -56,7 +56,7 @@ limitations under the License. } .mx_cryptoEvent_state, .mx_cryptoEvent_subtitle { - font-size: 12px; + font-size: 0.8rem; } .mx_cryptoEvent_state, .mx_cryptoEvent_buttons { diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 0e4b1bda9e..acc5e4641f 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -20,7 +20,7 @@ limitations under the License. flex-direction: column; flex: 1; overflow-y: auto; - font-size: 12px; + font-size: 0.8rem; .mx_UserInfo_cancel { cursor: pointer; @@ -43,7 +43,7 @@ limitations under the License. } h2 { - font-size: 18px; + font-size: 1.2rem; font-weight: 600; margin: 18px 0 0 0; } @@ -109,7 +109,7 @@ limitations under the License. justify-content: center; // override the calculated sizes so that the letter isn't HUGE - font-size: 56px !important; + font-size: 3.733rem !important; width: 100% !important; transition: font-size 0.5s; } @@ -122,7 +122,7 @@ limitations under the License. text-transform: uppercase; color: $notice-secondary-color; font-weight: bold; - font-size: 12px; + font-size: 0.8rem; margin: 4px 0; } @@ -134,8 +134,8 @@ limitations under the License. text-align: center; h2 { - font-size: 18px; - line-height: 25px; + font-size: 1.2rem; + line-height: 1.667rem; flex: 1; justify-content: center; align-items: center; @@ -197,7 +197,7 @@ limitations under the License. .mx_UserInfo_field { cursor: pointer; color: $accent-color; - line-height: 16px; + line-height: 1.067rem; margin: 8px 0; &.mx_UserInfo_destructive { @@ -206,7 +206,7 @@ limitations under the License. } .mx_UserInfo_statusMessage { - font-size: 11px; + font-size: 0.733rem; opacity: 0.5; overflow: hidden; white-space: nowrap; @@ -282,6 +282,6 @@ limitations under the License. } .mx_UserInfo_avatar .mx_BaseAvatar_initial { - font-size: 40px !important; // override the other override because here the avatar is smaller + font-size: 2.667rem !important; // override the other override because here the avatar is smaller } } diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss index 459622b277..4a10dcbbcd 100644 --- a/res/css/views/right_panel/_VerificationPanel.scss +++ b/res/css/views/right_panel/_VerificationPanel.scss @@ -95,7 +95,7 @@ limitations under the License. } .mx_VerificationPanel_QRPhase_helpText { - font-size: 14px; + font-size: 0.933rem; margin-top: 71px; text-align: center; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index a3fe573ad0..171cf49ba5 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px; padding: 0; margin: 5px auto 5px auto; color: $accent-color; - font-size: 12px; + font-size: 0.8rem; } .mx_AddWidget_button_full_width { @@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px; padding: 9px; color: $primary-hairline-color; background-color: $primary-bg-color; - font-size: 15px; + font-size: 1rem; } .mx_AppTile { @@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px; .mx_AppTileMenuBar { margin: 0; - font-size: 12px; + font-size: 0.8rem; background-color: $widget-menu-bar-bg-color; display: flex; flex-direction: row; @@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div { flex-direction: column; justify-content: center; align-items: center; - font-size: 16px; + font-size: 1.067rem; } .mx_AppPermissionWarning_row { @@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div { } .mx_AppPermissionWarning_smallText { - font-size: 12px; + font-size: 0.8rem; } .mx_AppPermissionWarning_bolder { diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index ce519b1ea7..c1f9663ea3 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -63,8 +63,8 @@ limitations under the License. border-radius: 8px; text-align: center; font-weight: normal; - line-height: 16px; - font-size: 10.4px; + line-height: 1.067rem; + font-size: 0.667rem; } } } diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index a2867de3a7..d66e4efe5c 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -78,7 +78,7 @@ limitations under the License. .mx_GroupRoomTile_name { flex: 1 1 0; overflow: hidden; - font-size: 14px; + font-size: 0.933rem; text-overflow: ellipsis; white-space: nowrap; } @@ -116,7 +116,7 @@ limitations under the License. } .mx_EntityTile_subtext { - font-size: 11px; + font-size: 0.733rem; opacity: 0.5; overflow: hidden; white-space: nowrap; @@ -125,7 +125,7 @@ limitations under the License. .mx_EntityTile_power { padding-inline-start: 6px; - font-size: 10px; + font-size: 0.667rem; color: $notice-secondary-color; max-width: 6em; overflow: hidden; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2fa9994155..436b158644 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -19,7 +19,7 @@ limitations under the License. max-width: 100%; clear: both; padding-top: 18px; - font-size: 14px; + font-size: 0.933rem; position: relative; } @@ -64,7 +64,7 @@ limitations under the License. .mx_EventTile .mx_SenderProfile { color: $primary-fg-color; - font-size: 14px; + font-size: 0.933rem; display: inline-block; /* anti-zalgo, with overflow hidden */ overflow: hidden; cursor: pointer; @@ -72,7 +72,7 @@ limitations under the License. padding-bottom: 0px; padding-top: 0px; margin: 0px; - line-height: 17px; + line-height: 1.133rem; /* the next three lines, along with overflow hidden, truncate long display names */ white-space: nowrap; text-overflow: ellipsis; @@ -117,7 +117,7 @@ limitations under the License. padding-bottom: 2px; border-radius: 4px; min-height: 24px; - line-height: 22px; + line-height: 1.467rem; } .mx_RoomView_timeline_rr_enabled { @@ -152,8 +152,8 @@ limitations under the License. /* HACK to override line-height which is already marked important elsewhere */ .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { - font-size: 48px !important; - line-height: 57px !important; + font-size: 3.200rem !important; + line-height: 3.800rem !important; } .mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { @@ -312,7 +312,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_readAvatarRemainder { color: $event-timestamp-color; - font-size: 11px; + font-size: 0.733rem; position: absolute; } @@ -341,7 +341,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_spoiler_reason { color: $event-timestamp-color; - font-size: 11px; + font-size: 0.733rem; } .mx_EventTile_spoiler_content { @@ -393,7 +393,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } .mx_EventTile_keyRequestInfo { - font-size: 12px; + font-size: 0.8rem; } .mx_EventTile_keyRequestInfo_text { @@ -471,7 +471,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_content .mx_EventTile_edited { user-select: none; - font-size: 12px; + font-size: 0.8rem; color: $roomtopic-color; display: inline-block; margin-left: 9px; @@ -489,7 +489,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { white-space: normal !important; line-height: inherit !important; color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) - font-size: 14px; + font-size: 0.933rem; pre, code { font-family: $monospace-font-family !important; @@ -589,9 +589,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile.mx_EventTile_info { // same as the padding for non-compact .mx_EventTile.mx_EventTile_info padding-top: 0px; - font-size: 13px; + font-size: 0.867rem; .mx_EventTile_line, .mx_EventTile_reply { - line-height: 20px; + line-height: 1.333rem; } .mx_EventTile_avatar { top: 4px; @@ -599,7 +599,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } .mx_EventTile .mx_SenderProfile { - font-size: 13px; + font-size: 0.867rem; } .mx_EventTile.mx_EventTile_emote { diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 7f458092fb..2c44eed1b8 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -34,8 +34,8 @@ limitations under the License. top: -12px; border-radius: 16px; font-weight: bold; - font-size: 12px; - line-height: 14px; + font-size: 0.8rem; + line-height: 0.933rem; text-align: center; // to be able to get it centered // with text-align in parent diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss index 15b4832dc5..fe5a4b7659 100644 --- a/res/css/views/rooms/_MemberDeviceInfo.scss +++ b/res/css/views/rooms/_MemberDeviceInfo.scss @@ -59,7 +59,7 @@ limitations under the License. .mx_MemberDeviceInfo_deviceId { word-break: break-word; - font-size: 13px; + font-size: 0.867rem; } .mx_MemberDeviceInfo_deviceInfo { diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index e3f746e9d3..d4c8fbb097 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -48,7 +48,7 @@ limitations under the License. } .mx_MemberInfo h2 { - font-size: 18px; + font-size: 1.2rem; font-weight: 600; margin: 16px 0 16px 15px; } @@ -94,12 +94,12 @@ limitations under the License. text-transform: uppercase; color: $input-darker-fg-color; font-weight: bold; - font-size: 12px; + font-size: 0.8rem; margin: 4px 0; } .mx_MemberInfo_profileField { - font-size: 15px; + font-size: 1rem; position: relative; } @@ -109,10 +109,10 @@ limitations under the License. .mx_MemberInfo_field { cursor: pointer; - font-size: 15px; + font-size: 1rem; color: $primary-fg-color; margin-left: 8px; - line-height: 23px; + line-height: 1.533rem; } .mx_MemberInfo_createRoom { @@ -128,7 +128,7 @@ limitations under the License. } .mx_MemberInfo label { - font-size: 13px; + font-size: 0.867rem; } .mx_MemberInfo label .mx_MemberInfo_label_text { @@ -144,7 +144,7 @@ limitations under the License. } .mx_MemberInfo_statusMessage { - font-size: 11px; + font-size: 0.733rem; opacity: 0.5; overflow: hidden; white-space: nowrap; diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 6e4465583c..0f676645a9 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -30,7 +30,7 @@ limitations under the License. text-transform: uppercase; color: $h3-color; font-weight: 600; - font-size: 13px; + font-size: 0.867rem; padding-left: 3px; padding-right: 12px; margin-top: 8px; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index a05b4c0c0e..3777acf423 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -105,7 +105,7 @@ limitations under the License. min-height: 60px; justify-content: flex-start; align-items: flex-start; - font-size: 14px; + font-size: 0.933rem; margin-right: 6px; } @@ -161,7 +161,7 @@ limitations under the License. box-shadow: none; color: $primary-fg-color; background-color: $primary-bg-color; - font-size: 14px; + font-size: 0.933rem; max-height: 120px; overflow: auto; /* needed for FF */ @@ -242,7 +242,7 @@ limitations under the License. flex-direction: row; align-items: center; - font-size: 10px; + font-size: 0.667rem; color: $greyed-fg-color; } diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss index 1b5a21bed0..0558cd48cf 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.scss +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -97,13 +97,13 @@ limitations under the License. .mx_MessageComposerFormatBar_buttonTooltip { white-space: nowrap; - font-size: 13px; + font-size: 0.867rem; font-weight: 600; min-width: 54px; text-align: center; .mx_MessageComposerFormatBar_tooltipShortcut { - font-size: 9px; + font-size: 0.600rem; opacity: 0.7; } } diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss index 26ed1aa6a3..6d044a69b5 100644 --- a/res/css/views/rooms/_PresenceLabel.scss +++ b/res/css/views/rooms/_PresenceLabel.scss @@ -15,6 +15,6 @@ limitations under the License. */ .mx_PresenceLabel { - font-size: 11px; + font-size: 0.733rem; opacity: 0.5; } diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss index 1076a0563a..1ae8f73e88 100644 --- a/res/css/views/rooms/_RoomDropTarget.scss +++ b/res/css/views/rooms/_RoomDropTarget.scss @@ -28,7 +28,7 @@ limitations under the License. } .mx_RoomDropTarget { - font-size: 13px; + font-size: 0.867rem; padding-top: 5px; padding-bottom: 5px; border: 1px dashed $accent-color; @@ -41,7 +41,7 @@ limitations under the License. .mx_RoomDropTarget_label { position: relative; margin-top: 3px; - line-height: 21px; + line-height: 1.400rem; z-index: 1; text-align: center; } diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 47b8131ef0..1737014248 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -77,9 +77,9 @@ limitations under the License. } .mx_RoomHeader_simpleHeader { - line-height: 52px; + line-height: 3.467rem; color: $roomheader-color; - font-size: 18px; + font-size: 1.2rem; font-weight: 600; overflow: hidden; margin-left: 63px; @@ -102,7 +102,7 @@ limitations under the License. overflow: hidden; color: $roomheader-color; font-weight: 600; - font-size: 18px; + font-size: 1.2rem; margin: 0 7px; border-bottom: 1px solid transparent; display: flex; @@ -161,7 +161,7 @@ limitations under the License. flex: 1; color: $roomtopic-color; font-weight: 400; - font-size: 13px; + font-size: 0.867rem; margin: 0 7px; margin-top: 4px; // to align baseline of topic with room name overflow: hidden; diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 5ed22f997d..b9cb2dc8e4 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -47,13 +47,13 @@ limitations under the License. } .mx_RoomList_emptySubListTip { - font-size: 13px; + font-size: 0.867rem; padding: 5px; border: 1px dashed $accent-color; color: $primary-fg-color; background-color: $droptarget-bg-color; border-radius: 4px; - line-height: 16px; + line-height: 1.067rem; } .mx_RoomList_emptySubListTip .mx_RoleButton { diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index 981cf06c69..8e61524fda 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -23,7 +23,7 @@ limitations under the License. -webkit-align-items: center; h3 { - font-size: 18px; + font-size: 1.2rem; font-weight: 600; &.mx_RoomPreviewBar_spinnerTitle { @@ -48,8 +48,8 @@ limitations under the License. } .mx_RoomPreviewBar_footer { - font-size: 12px; - line-height: 20px; + font-size: 0.8rem; + line-height: 1.333rem; .mx_Spinner { vertical-align: middle; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 31d887cbbb..57d42f6be2 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -64,7 +64,7 @@ limitations under the License. .mx_RoomTile_subtext { display: inline-block; - font-size: 11px; + font-size: 0.733rem; padding: 0 0 0 7px; margin: 0; overflow: hidden; @@ -112,7 +112,7 @@ limitations under the License. } .mx_RoomTile_name { - font-size: 14px; + font-size: 0.933rem; padding: 0 4px; color: $roomtile-name-color; white-space: nowrap; @@ -126,7 +126,7 @@ limitations under the License. padding: 0 0.4em; color: $roomtile-badge-fg-color; font-weight: 600; - font-size: 12px; + font-size: 0.8rem; } .collapsed { diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss index b6748e5ad2..5b80585cef 100644 --- a/res/css/views/rooms/_SearchBar.scss +++ b/res/css/views/rooms/_SearchBar.scss @@ -22,7 +22,7 @@ limitations under the License. .mx_SearchBar_input { // border: 1px solid $input-border-color; - // font-size: 15px; + // font-size: 1rem; flex: 1 1 0; margin-left: 22px; } @@ -45,7 +45,7 @@ limitations under the License. border: 0; margin: 0 0 0 22px; padding: 5px; - font-size: 15px; + font-size: 1rem; cursor: pointer; color: $primary-fg-color; border-bottom: 2px solid $accent-color; diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss index d20f7107b3..7233d373a3 100644 --- a/res/css/views/rooms/_SendMessageComposer.scss +++ b/res/css/views/rooms/_SendMessageComposer.scss @@ -18,7 +18,7 @@ limitations under the License. flex: 1; display: flex; flex-direction: column; - font-size: 14px; + font-size: 0.933rem; justify-content: center; margin-right: 6px; // don't grow wider than available space diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss index 579ea7e73e..a1e6f3a3bf 100644 --- a/res/css/views/rooms/_WhoIsTypingTile.scss +++ b/res/css/views/rooms/_WhoIsTypingTile.scss @@ -49,7 +49,7 @@ limitations under the License. border-radius: 40px; width: 24px; height: 24px; - line-height: 24px; + line-height: 1.600rem; font-size: 0.8em; vertical-align: top; text-align: center; @@ -57,7 +57,7 @@ limitations under the License. .mx_WhoIsTypingTile_label { flex: 1; - font-size: 14px; + font-size: 0.933rem; font-weight: 600; color: $eventtile-meta-color; } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 01a1d94956..03bd3221cd 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -19,7 +19,7 @@ limitations under the License. } .mx_SettingsTab_heading { - font-size: 20px; + font-size: 1.333rem; font-weight: 600; color: $primary-fg-color; } @@ -29,7 +29,7 @@ limitations under the License. } .mx_SettingsTab_subheading { - font-size: 16px; + font-size: 1.067rem; display: block; font-family: $font-family; font-weight: 600; @@ -40,7 +40,7 @@ limitations under the License. .mx_SettingsTab_subsectionText { color: $settings-subsection-fg-color; - font-size: 14px; + font-size: 0.933rem; display: block; margin: 10px 100px 10px 0; // Align with the rest of the view } @@ -61,7 +61,7 @@ limitations under the License. .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label { vertical-align: middle; display: inline-block; - font-size: 14px; + font-size: 0.933rem; color: $primary-fg-color; max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch box-sizing: border-box; diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss index e00dcf31d1..1f9ea7a33d 100644 --- a/res/css/views/terms/_InlineTermsAgreement.scss +++ b/res/css/views/terms/_InlineTermsAgreement.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_InlineTermsAgreement_cbContainer { margin-bottom: 10px; - font-size: 14px; + font-size: 0.933rem; a { color: $accent-color; diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss index 5038d40b73..fd83bf7ad4 100644 --- a/res/css/views/verification/_VerificationShowSas.scss +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -48,14 +48,14 @@ limitations under the License. } .mx_VerificationShowSas_emojiSas_emoji { - font-size: 32px; + font-size: 2.133rem; } .mx_VerificationShowSas_emojiSas_label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - font-size: 12px; + font-size: 0.8rem; } .mx_VerificationShowSas_emojiSas_break { diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index b01fbf8c66..06c9f7bed6 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -21,5 +21,5 @@ limitations under the License. text-align: center; padding: 6px; font-weight: bold; - font-size: 13px; + font-size: 0.867rem; } diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss index 64eac25d01..3c8ed46639 100644 --- a/res/css/views/voip/_IncomingCallbox.scss +++ b/res/css/views/voip/_IncomingCallbox.scss @@ -54,7 +54,7 @@ limitations under the License. vertical-align: middle; width: 80px; height: 36px; - line-height: 36px; + line-height: 2.400rem; border-radius: 36px; color: $accent-fg-color; margin: auto; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index bfa2272283..1f11fd5620 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -185,7 +185,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color; border: 0px; border-radius: 4px; font-family: $font-family; - font-size: 14px; + font-size: 0.933rem; color: $button-fg-color; background-color: $button-bg-color; width: auto; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 9bdd712e07..2a993a7934 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -310,7 +310,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color; border: 0px; border-radius: 4px; font-family: $font-family; - font-size: 14px; + font-size: 0.933rem; color: $button-fg-color; background-color: $button-bg-color; width: auto; @@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color; @define-mixin mx_DialogButton_small { @mixin mx_DialogButton; - font-size: 15px; + font-size: 1rem; padding: 0px 1.5em 0px 1.5em; } From bbb9a67ced8f431c0a7a91d76d387d55959a2169 Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Mon, 30 Mar 2020 17:28:01 -0400 Subject: [PATCH 09/93] use new method for checking key --- src/CrossSigningManager.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/CrossSigningManager.js b/src/CrossSigningManager.js index 5c254bbd00..f6a4c914b7 100644 --- a/src/CrossSigningManager.js +++ b/src/CrossSigningManager.js @@ -96,11 +96,8 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) { { keyInfo: info, checkPrivateKey: async (input) => { - if (!info.pubkey) { - return true; - } const key = await inputToKey(input); - return MatrixClientPeg.get().checkSecretStoragePrivateKey(key, info.pubkey); + return await MatrixClientPeg.get().checkSecretStorageKey(key, info); }, }, /* className= */ null, From ffa75ef48c47a0d75caeb1490bb1d4066ede2728 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 30 Mar 2020 20:03:46 -0600 Subject: [PATCH 10/93] Wire up all the dialog parts for SSO, using device deletion as a POC --- .../auth/_InteractiveAuthEntryComponents.scss | 11 ++ res/css/views/elements/_AccessibleButton.scss | 17 ++- src/components/structures/InteractiveAuth.js | 29 ++++- .../auth/InteractiveAuthEntryComponents.js | 100 ++++++++++++++---- .../views/dialogs/InteractiveAuthDialog.js | 68 +++++++++++- src/components/views/settings/DevicesPanel.js | 19 ++++ src/i18n/strings/en_EN.json | 9 +- 7 files changed, 224 insertions(+), 29 deletions(-) diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index 85007aeecb..05cddf2c48 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -60,3 +60,14 @@ limitations under the License. .mx_InteractiveAuthEntryComponents_passwordSection { width: 300px; } + +.mx_InteractiveAuthEntryComponents_sso_buttons { + display: flex; + flex-direction: row; + justify-content: flex-end; + margin-top: 20px; + + .mx_AccessibleButton { + margin-left: 5px; + } +} diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index b87071745d..0c48a07ccf 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -36,6 +36,13 @@ limitations under the License. font-weight: 600; } +.mx_AccessibleButton_kind_primary_outline { + color: $button-primary-bg-color; + background-color: $button-secondary-bg-color; + border: 1px solid $button-primary-bg-color; + font-weight: 600; +} + .mx_AccessibleButton_kind_secondary { color: $accent-color; font-weight: 600; @@ -60,7 +67,15 @@ limitations under the License. background-color: $button-danger-bg-color; } -.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled { +.mx_AccessibleButton_kind_danger_outline { + color: $button-danger-bg-color; + background-color: $button-secondary-bg-color; + border: 1px solid $button-danger-bg-color; +} + +.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled, +mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled +{ color: $button-danger-disabled-fg-color; background-color: $button-danger-disabled-bg-color; } diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js index f4adb5751f..2492bf79a0 100644 --- a/src/components/structures/InteractiveAuth.js +++ b/src/components/structures/InteractiveAuth.js @@ -1,6 +1,6 @@ /* Copyright 2017 Vector Creations Ltd. -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019, 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. @@ -24,6 +24,8 @@ import getEntryComponentForLoginType from '../views/auth/InteractiveAuthEntryCom import * as sdk from '../../index'; +export const ERROR_USER_CANCELLED = new Error("User cancelled auth session"); + export default createReactClass({ displayName: 'InteractiveAuth', @@ -47,7 +49,7 @@ export default createReactClass({ // @param {bool} status True if the operation requiring // auth was completed sucessfully, false if canceled. // @param {object} result The result of the authenticated call - // if successful, otherwise the error object + // if successful, otherwise the error object. // @param {object} extra Additional information about the UI Auth // process: // * emailSid {string} If email auth was performed, the sid of @@ -75,6 +77,15 @@ export default createReactClass({ // is managed by some other party and should not be managed by // the component itself. continueIsManaged: PropTypes.bool, + + // Called when the stage changes, or the stage's phase changes. First + // argument is the stage, second is the phase. Some stages do not have + // phases and will be counted as 0 (numeric). + onStagePhaseChange: PropTypes.func, + + // continueText and continueKind are passed straight through to the AuthEntryComponent. + continueText: PropTypes.string, + continueKind: PropTypes.string, }, getInitialState: function() { @@ -204,6 +215,16 @@ export default createReactClass({ this._authLogic.submitAuthDict(authData); }, + _onPhaseChange: function(newPhase) { + if (this.props.onStagePhaseChange) { + this.props.onStagePhaseChange(this.state.authStage, newPhase || 0); + } + }, + + _onStageCancel: function() { + this.props.onAuthFinished(false, ERROR_USER_CANCELLED); + }, + _renderCurrentStage: function() { const stage = this.state.authStage; if (!stage) { @@ -232,6 +253,10 @@ export default createReactClass({ fail={this._onAuthStageFailed} setEmailSid={this._setEmailSid} showContinue={!this.props.continueIsManaged} + onPhaseChange={this._onPhaseChange} + continueText={this.props.continueText} + continueKind={this.props.continueKind} + onCancel={this._onStageCancel} /> ); }, diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index 26a293724a..d262a5525d 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -25,6 +25,7 @@ import classnames from 'classnames'; import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import SettingsStore from "../../../settings/SettingsStore"; +import AccessibleButton from "../elements/AccessibleButton"; /* This file contains a collection of components which are used by the * InteractiveAuth to prompt the user to enter the information needed @@ -59,11 +60,21 @@ import SettingsStore from "../../../settings/SettingsStore"; * session to be failed and the process to go back to the start. * setEmailSid: m.login.email.identity only: a function to be called with the * email sid after a token is requested. + * onPhaseChange: A function which is called when the stage's phase changes. If + * the stage has no phases, call this with DEFAULT_PHASE. Takes + * one argument, the phase, and is always defined/required. + * continueText: For stages which have a continue button, the text to use. + * continueKind: For stages which have a continue button, the style of button to + * use. For example, 'danger' or 'primary'. + * onCancel A function with no arguments which is called by the stage if the + * user knowingly cancelled/dismissed the authentication attempt. * * Each component may also provide the following functions (beyond the standard React ones): * focus: set the input focus appropriately in the form. */ +export const DEFAULT_PHASE = 0; + export const PasswordAuthEntry = createReactClass({ displayName: 'PasswordAuthEntry', @@ -78,6 +89,11 @@ export const PasswordAuthEntry = createReactClass({ // is the auth logic currently waiting for something to // happen? busy: PropTypes.bool, + onPhaseChange: PropTypes.func.isRequired, + }, + + componentDidMount: function() { + this.props.onPhaseChange(DEFAULT_PHASE); }, getInitialState: function() { @@ -175,6 +191,11 @@ export const RecaptchaAuthEntry = createReactClass({ stageParams: PropTypes.object.isRequired, errorText: PropTypes.string, busy: PropTypes.bool, + onPhaseChange: PropTypes.func.isRequired, + }, + + componentDidMount: function() { + this.props.onPhaseChange(DEFAULT_PHASE); }, _onCaptchaResponse: function(response) { @@ -236,6 +257,11 @@ export const TermsAuthEntry = createReactClass({ errorText: PropTypes.string, busy: PropTypes.bool, showContinue: PropTypes.bool, + onPhaseChange: PropTypes.func.isRequired, + }, + + componentDidMount: function() { + this.props.onPhaseChange(DEFAULT_PHASE); }, componentWillMount: function() { @@ -378,6 +404,11 @@ export const EmailIdentityAuthEntry = createReactClass({ stageState: PropTypes.object.isRequired, fail: PropTypes.func.isRequired, setEmailSid: PropTypes.func.isRequired, + onPhaseChange: PropTypes.func.isRequired, + }, + + componentDidMount: function() { + this.props.onPhaseChange(DEFAULT_PHASE); }, getInitialState: function() { @@ -420,6 +451,11 @@ export const MsisdnAuthEntry = createReactClass({ clientSecret: PropTypes.func, submitAuthDict: PropTypes.func.isRequired, matrixClient: PropTypes.object, + onPhaseChange: PropTypes.func.isRequired, + }, + + componentDidMount: function() { + this.props.onPhaseChange(DEFAULT_PHASE); }, getInitialState: function() { @@ -571,13 +607,17 @@ export class SSOAuthEntry extends React.Component { loginType: PropTypes.string.isRequired, submitAuthDict: PropTypes.func.isRequired, errorText: PropTypes.string, + onPhaseChange: PropTypes.func.isRequired, + continueText: PropTypes.string, + continueKind: PropTypes.string, + onCancel: PropTypes.func, }; static LOGIN_TYPE = "m.login.sso"; static UNSTABLE_LOGIN_TYPE = "org.matrix.login.sso"; - static STAGE_PREAUTH = 1; // button to start SSO - static STAGE_POSTAUTH = 2; // button to confirm SSO completed + static PHASE_PREAUTH = 1; // button to start SSO + static PHASE_POSTAUTH = 2; // button to confirm SSO completed constructor(props) { super(props); @@ -589,39 +629,56 @@ export class SSOAuthEntry extends React.Component { this.props.loginType, this.props.authSessionId, ), - stage: SSOAuthEntry.STAGE_PREAUTH, + phase: SSOAuthEntry.PHASE_PREAUTH, }; } - onStartAuthClick = (e) => { - e.preventDefault(); - e.stopPropagation(); + componentDidMount(): void { + this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH); + } + onStartAuthClick = () => { // Note: We don't use PlatformPeg's startSsoAuth functions because we almost // certainly will need to open the thing in a new tab to avoid loosing application // context. - window.open(e.target.href, '_blank'); - this.setState({stage: SSOAuthEntry.STAGE_POSTAUTH}); + window.open(this.state.ssoUrl, '_blank'); + this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH}); + this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH); }; - onConfirmClick = (e) => { - e.preventDefault(); - e.stopPropagation(); - + onConfirmClick = () => { this.props.submitAuthDict({}); }; render () { - if (this.state.stage === SSOAuthEntry.STAGE_PREAUTH) { - return - {_t("Single Sign On")} - ; + let continueButton = null; + const cancelButton = ( + {_t("Cancel")} + ); + if (this.state.phase === SSOAuthEntry.PHASE_PREAUTH) { + continueButton = ( + {this.props.continueText || _t("Single Sign On")} + ); } else { - return - {_t("Continue")} - ; + continueButton = ( + {this.props.continueText || _t("Confirm")} + ); } + + return
+ {cancelButton} + {continueButton} +
; } } @@ -634,6 +691,11 @@ export const FallbackAuthEntry = createReactClass({ loginType: PropTypes.string.isRequired, submitAuthDict: PropTypes.func.isRequired, errorText: PropTypes.string, + onPhaseChange: PropTypes.func.isRequired, + }, + + componentDidMount: function() { + this.props.onPhaseChange(DEFAULT_PHASE); }, componentWillMount: function() { diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js index ff9f55cb74..c070cc6589 100644 --- a/src/components/views/dialogs/InteractiveAuthDialog.js +++ b/src/components/views/dialogs/InteractiveAuthDialog.js @@ -1,6 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations 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. @@ -23,6 +24,7 @@ import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import AccessibleButton from '../elements/AccessibleButton'; +import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth"; export default createReactClass({ displayName: 'InteractiveAuthDialog', @@ -44,12 +46,36 @@ export default createReactClass({ onFinished: PropTypes.func.isRequired, + // Optional title and body to show when not showing a particular stage title: PropTypes.string, + body: PropTypes.string, + + // Optional title and body pairs for particular stages and phases within + // those stages. Object structure/example is: + // { + // "org.example.stage_type": { + // 1: { + // "body": "This is a body for phase 1" of org.example.stage_type, + // "title": "Title for phase 1 of org.example.stage_type" + // }, + // 2: { + // "body": "This is a body for phase 2 of org.example.stage_type", + // "title": "Title for phase 2 of org.example.stage_type" + // "continueText": "Confirm identity with Example Auth", + // "continueKind": "danger" + // } + // } + // } + aestheticsForStagePhases: PropTypes.object, }, getInitialState: function() { return { authError: null, + + // See _onUpdateStagePhase() + uiaStage: null, + uiaStagePhase: null, }; }, @@ -57,12 +83,22 @@ export default createReactClass({ if (success) { this.props.onFinished(true, result); } else { - this.setState({ - authError: result, - }); + if (result === ERROR_USER_CANCELLED) { + this.props.onFinished(false, null); + } else { + this.setState({ + authError: result, + }); + } } }, + _onUpdateStagePhase: function(newStage, newPhase) { + console.log({newStage, newPhase}); + // We copy the stage and stage phase params into state for title selection in render() + this.setState({uiaStage: newStage, uiaStagePhase: newPhase}); + }, + _onDismissClick: function() { this.props.onFinished(false); }, @@ -71,6 +107,23 @@ export default createReactClass({ const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth"); const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + // Let's pick a title, body, and other params text that we'll show to the user. The order + // is most specific first, so stagePhase > our props > defaults. + + let title = this.state.authError ? 'Error' : (this.props.title || _t('Authentication')); + let body = this.state.authError ? null : this.props.body; + let continueText = null; + let continueKind = null; + if (!this.state.authError && this.props.aestheticsForStagePhases) { + if (this.props.aestheticsForStagePhases[this.state.uiaStage]) { + const aesthetics = this.props.aestheticsForStagePhases[this.state.uiaStage][this.state.uiaStagePhase]; + if (aesthetics && aesthetics.title) title = aesthetics.title; + if (aesthetics && aesthetics.body) body = aesthetics.body; + if (aesthetics && aesthetics.continueText) continueText = aesthetics.continueText; + if (aesthetics && aesthetics.continueKind) continueKind = aesthetics.continueKind; + } + } + let content; if (this.state.authError) { content = ( @@ -88,11 +141,16 @@ export default createReactClass({ } else { content = (
-
); @@ -101,7 +159,7 @@ export default createReactClass({ return ( { content } diff --git a/src/components/views/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js index 2120801a81..61e7724a6f 100644 --- a/src/components/views/settings/DevicesPanel.js +++ b/src/components/views/settings/DevicesPanel.js @@ -23,6 +23,7 @@ import * as sdk from '../../../index'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; import { _t } from '../../../languageHandler'; import Modal from '../../../Modal'; +import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents"; export default class DevicesPanel extends React.Component { constructor(props) { @@ -123,11 +124,29 @@ export default class DevicesPanel extends React.Component { // pop up an interactive auth dialog const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog"); + const dialogAesthetics = { + [SSOAuthEntry.PHASE_PREAUTH]: { + title: _t("Use Single Sign On to continue"), + body: _t("Confirm deleting these sessions by using Single Sign On to prove your identity."), + continueText: _t("Single Sign On"), + continueKind: "primary", + }, + [SSOAuthEntry.PHASE_POSTAUTH]: { + title: _t("Confirm deleting these sessions"), + body: _t("Click the button below to confirm deleting these sessions."), + continueText: _t("Delete sessions"), + continueKind: "danger", + }, + }; Modal.createTrackedDialog('Delete Device Dialog', '', InteractiveAuthDialog, { title: _t("Authentication"), matrixClient: MatrixClientPeg.get(), authData: error.data, makeRequest: this._makeDeleteRequest.bind(this), + aestheticsForStagePhases: { + [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics, + [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics, + }, }); }).catch((e) => { console.error("Error deleting sessions", e); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e867623cc9..ecc2698f6d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -598,6 +598,12 @@ "up to date": "up to date", "Your homeserver does not support session management.": "Your homeserver does not support session management.", "Unable to load session list": "Unable to load session list", + "Use Single Sign On to continue": "Use Single Sign On to continue", + "Confirm deleting these sessions by using Single Sign On to prove your identity.": "Confirm deleting these sessions by using Single Sign On to prove your identity.", + "Single Sign On": "Single Sign On", + "Confirm deleting these sessions": "Confirm deleting these sessions", + "Click the button below to confirm deleting these sessions.": "Click the button below to confirm deleting these sessions.", + "Delete sessions": "Delete sessions", "Authentication": "Authentication", "Delete %(count)s sessions|other": "Delete %(count)s sessions", "Delete %(count)s sessions|one": "Delete %(count)s session", @@ -1831,7 +1837,7 @@ "Please enter the code it contains:": "Please enter the code it contains:", "Code": "Code", "Submit": "Submit", - "Single Sign On": "Single Sign On", + "Confirm": "Confirm", "Start authentication": "Start authentication", "Unable to validate homeserver/identity server": "Unable to validate homeserver/identity server", "Your Modular server": "Your Modular server", @@ -1862,7 +1868,6 @@ "Use lowercase letters, numbers, dashes and underscores only": "Use lowercase letters, numbers, dashes and underscores only", "Enter username": "Enter username", "Email (optional)": "Email (optional)", - "Confirm": "Confirm", "Phone (optional)": "Phone (optional)", "Create your Matrix account on %(serverName)s": "Create your Matrix account on %(serverName)s", "Create your Matrix account on ": "Create your Matrix account on ", From 6112d92f809c952fe80520a93b0f98d0993057d3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 30 Mar 2020 20:11:23 -0600 Subject: [PATCH 11/93] Remove debugging --- src/components/views/dialogs/InteractiveAuthDialog.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js index c070cc6589..af5dc5108c 100644 --- a/src/components/views/dialogs/InteractiveAuthDialog.js +++ b/src/components/views/dialogs/InteractiveAuthDialog.js @@ -94,7 +94,6 @@ export default createReactClass({ }, _onUpdateStagePhase: function(newStage, newPhase) { - console.log({newStage, newPhase}); // We copy the stage and stage phase params into state for title selection in render() this.setState({uiaStage: newStage, uiaStagePhase: newPhase}); }, From de7952015086e8e5d3bab204fd23665def9435c2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 30 Mar 2020 20:18:52 -0600 Subject: [PATCH 12/93] Add SSO dialog copy for 3PID adding (email/phone) --- src/AddThreepid.js | 38 +++++++++++++++++++++++++++++++++++++ src/i18n/strings/en_EN.json | 12 +++++++++--- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/AddThreepid.js b/src/AddThreepid.js index 7a3250d0ca..1fc492ef85 100644 --- a/src/AddThreepid.js +++ b/src/AddThreepid.js @@ -21,6 +21,7 @@ import * as sdk from './index'; import Modal from './Modal'; import { _t } from './languageHandler'; import IdentityAuthClient from './IdentityAuthClient'; +import {SSOAuthEntry} from "./components/views/auth/InteractiveAuthEntryComponents"; function getIdServerDomain() { return MatrixClientPeg.get().idBaseUrl.split("://")[1]; @@ -188,11 +189,30 @@ export default class AddThreepid { // pop up an interactive auth dialog const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog"); + + const dialogAesthetics = { + [SSOAuthEntry.PHASE_PREAUTH]: { + title: _t("Use Single Sign On to continue"), + body: _t("Confirm adding this email address by using Single Sign On to prove your identity."), + continueText: _t("Single Sign On"), + continueKind: "primary", + }, + [SSOAuthEntry.PHASE_POSTAUTH]: { + title: _t("Confirm adding email"), + body: _t("Click the button below to confirm adding this email address."), + continueText: _t("Confirm"), + continueKind: "primary", + }, + }; const { finished } = Modal.createTrackedDialog('Add Email', '', InteractiveAuthDialog, { title: _t("Add Email Address"), matrixClient: MatrixClientPeg.get(), authData: e.data, makeRequest: this._makeAddThreepidOnlyRequest, + aestheticsForStagePhases: { + [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics, + [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics, + }, }); return finished; } @@ -285,11 +305,29 @@ export default class AddThreepid { // pop up an interactive auth dialog const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog"); + const dialogAesthetics = { + [SSOAuthEntry.PHASE_PREAUTH]: { + title: _t("Use Single Sign On to continue"), + body: _t("Confirm adding this phone number by using Single Sign On to prove your identity."), + continueText: _t("Single Sign On"), + continueKind: "primary", + }, + [SSOAuthEntry.PHASE_POSTAUTH]: { + title: _t("Confirm adding phone number"), + body: _t("Click the button below to confirm adding this phone number."), + continueText: _t("Confirm"), + continueKind: "primary", + }, + }; const { finished } = Modal.createTrackedDialog('Add MSISDN', '', InteractiveAuthDialog, { title: _t("Add Phone Number"), matrixClient: MatrixClientPeg.get(), authData: e.data, makeRequest: this._makeAddThreepidOnlyRequest, + aestheticsForStagePhases: { + [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics, + [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics, + }, }); return finished; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ecc2698f6d..572268f90d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1,8 +1,17 @@ { "This email address is already in use": "This email address is already in use", "This phone number is already in use": "This phone number is already in use", + "Use Single Sign On to continue": "Use Single Sign On to continue", + "Confirm adding this email address by using Single Sign On to prove your identity.": "Confirm adding this email address by using Single Sign On to prove your identity.", + "Single Sign On": "Single Sign On", + "Confirm adding email": "Confirm adding email", + "Click the button below to confirm adding this email address.": "Click the button below to confirm adding this email address.", + "Confirm": "Confirm", "Add Email Address": "Add Email Address", "Failed to verify email address: make sure you clicked the link in the email": "Failed to verify email address: make sure you clicked the link in the email", + "Confirm adding this phone number by using Single Sign On to prove your identity.": "Confirm adding this phone number by using Single Sign On to prove your identity.", + "Confirm adding phone number": "Confirm adding phone number", + "Click the button below to confirm adding this phone number.": "Click the button below to confirm adding this phone number.", "Add Phone Number": "Add Phone Number", "The platform you're on": "The platform you're on", "The version of Riot": "The version of Riot", @@ -598,9 +607,7 @@ "up to date": "up to date", "Your homeserver does not support session management.": "Your homeserver does not support session management.", "Unable to load session list": "Unable to load session list", - "Use Single Sign On to continue": "Use Single Sign On to continue", "Confirm deleting these sessions by using Single Sign On to prove your identity.": "Confirm deleting these sessions by using Single Sign On to prove your identity.", - "Single Sign On": "Single Sign On", "Confirm deleting these sessions": "Confirm deleting these sessions", "Click the button below to confirm deleting these sessions.": "Click the button below to confirm deleting these sessions.", "Delete sessions": "Delete sessions", @@ -1837,7 +1844,6 @@ "Please enter the code it contains:": "Please enter the code it contains:", "Code": "Code", "Submit": "Submit", - "Confirm": "Confirm", "Start authentication": "Start authentication", "Unable to validate homeserver/identity server": "Unable to validate homeserver/identity server", "Your Modular server": "Your Modular server", From 8bc86deaaaf93928c722a077bd17ece980a0821d Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 30 Mar 2020 20:23:34 -0600 Subject: [PATCH 13/93] Appease the style linter --- res/css/views/elements/_AccessibleButton.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index 0c48a07ccf..de39525588 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -48,7 +48,8 @@ limitations under the License. font-weight: 600; } -.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled { +.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled, +.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled { opacity: 0.4; } @@ -74,8 +75,7 @@ limitations under the License. } .mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled, -mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled -{ +.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled { color: $button-danger-disabled-fg-color; background-color: $button-danger-disabled-bg-color; } From d899576578b6b2bfc66ceef7a8b13c857c8857f3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 30 Mar 2020 20:24:53 -0600 Subject: [PATCH 14/93] Appease the linter --- src/AddThreepid.js | 6 ++++-- src/components/views/auth/InteractiveAuthEntryComponents.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/AddThreepid.js b/src/AddThreepid.js index 1fc492ef85..f06f7c187d 100644 --- a/src/AddThreepid.js +++ b/src/AddThreepid.js @@ -193,7 +193,8 @@ export default class AddThreepid { const dialogAesthetics = { [SSOAuthEntry.PHASE_PREAUTH]: { title: _t("Use Single Sign On to continue"), - body: _t("Confirm adding this email address by using Single Sign On to prove your identity."), + body: _t("Confirm adding this email address by using " + + "Single Sign On to prove your identity."), continueText: _t("Single Sign On"), continueKind: "primary", }, @@ -308,7 +309,8 @@ export default class AddThreepid { const dialogAesthetics = { [SSOAuthEntry.PHASE_PREAUTH]: { title: _t("Use Single Sign On to continue"), - body: _t("Confirm adding this phone number by using Single Sign On to prove your identity."), + body: _t("Confirm adding this phone number by using " + + "Single Sign On to prove your identity."), continueText: _t("Single Sign On"), continueKind: "primary", }, diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index d262a5525d..a59b1354b6 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -651,7 +651,7 @@ export class SSOAuthEntry extends React.Component { this.props.submitAuthDict({}); }; - render () { + render() { let continueButton = null; const cancelButton = ( Date: Tue, 31 Mar 2020 11:53:26 +0100 Subject: [PATCH 15/93] iterate PR based on feedback. Remove newballsplease cmd alias Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/SlashCommands.tsx | 45 ++++++++++++++++++------------------------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 9fb0a151cf..c62aa9c3e5 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -71,6 +71,16 @@ export const CommandCategories = { type RunFn = ((roomId: string, args: string, cmd: string) => {error: any} | {promise: Promise}); +interface ICommandOpts { + command: string; + aliases?: string[]; + args?: string; + description: string; + runFn?: RunFn; + category: string; + hideCompletionAfterSpace?: boolean; +} + class Command { command: string; aliases: string[]; @@ -80,30 +90,14 @@ class Command { category: string; hideCompletionAfterSpace: boolean; - constructor({ - command, - aliases = [], - args = '', - description, - runFn = undefined, - category = CommandCategories.other, - hideCompletionAfterSpace = false, - }: { - command: string; - aliases?: string[]; - args?: string; - description: string; - runFn?: RunFn; - category: string; - hideCompletionAfterSpace?: boolean; - }) { - this.command = command; - this.aliases = aliases; - this.args = args; - this.description = description; - this.runFn = runFn; - this.category = category; - this.hideCompletionAfterSpace = hideCompletionAfterSpace; + constructor(opts: ICommandOpts) { + this.command = opts.command; + this.aliases = opts.aliases || []; + this.args = opts.args || ""; + this.description = opts.description; + this.runFn = opts.runFn; + this.category = opts.category || CommandCategories.other; + this.hideCompletionAfterSpace = opts.hideCompletionAfterSpace || false; } getCommand() { @@ -853,7 +847,6 @@ export const Commands = [ }), new Command({ command: 'discardsession', - aliases: ['newballsplease'], description: _td('Forces the current outbound group session in an encrypted room to be discarded'), runFn: function(roomId) { try { @@ -900,7 +893,7 @@ export const Commands = [ command: "whois", description: _td("Displays information about a user"), args: "", - runFn: function (roomId, userId) { + runFn: function(roomId, userId) { if (!userId || !userId.startsWith("@") || !userId.includes(":")) { return reject(this.getUsage()); } From 9e8a401dc88af6fc09ed711b9aa13a911bb8acd4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 31 Mar 2020 12:29:58 +0100 Subject: [PATCH 16/93] Fix EventListSummary when RR rendering is disabled Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_EventTile.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2fa9994155..1cf9fb6edb 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -120,7 +120,9 @@ limitations under the License. line-height: 22px; } -.mx_RoomView_timeline_rr_enabled { +.mx_RoomView_timeline_rr_enabled, +// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter +.mx_EventListSummary { .mx_EventTile_line, .mx_EventTile_reply { /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ margin-right: 110px; From 6cf9166c4a3e4a85406679e997a9e0e8c3538468 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 31 Mar 2020 15:26:23 +0100 Subject: [PATCH 17/93] Use variables for the rem values. It's become obvious that these random floating points everywhere are unwieldy. Now they're all in one place with some fairly logical variable names which will help out in design->implementation phase. --- res/css/_common.scss | 18 +++---- res/css/_font-sizes.scss | 47 +++++++++++++++++++ res/css/rethemendex.sh | 2 +- res/css/structures/_ContextualMenu.scss | 2 +- res/css/structures/_CreateRoom.scss | 2 +- res/css/structures/_FilePanel.scss | 8 ++-- res/css/structures/_GroupView.scss | 10 ++-- res/css/structures/_LeftPanel.scss | 2 +- res/css/structures/_MyGroups.scss | 8 ++-- res/css/structures/_NotificationPanel.scss | 4 +- res/css/structures/_RightPanel.scss | 2 +- res/css/structures/_RoomDirectory.scss | 10 ++-- res/css/structures/_RoomStatusBar.scss | 14 +++--- res/css/structures/_RoomSubList.scss | 4 +- res/css/structures/_RoomView.scss | 4 +- res/css/structures/_TabbedView.scss | 2 +- res/css/structures/_TagPanel.scss | 4 +- res/css/structures/_ToastContainer.scss | 6 +-- res/css/structures/_TopLeftMenuButton.scss | 2 +- res/css/structures/_ViewSource.scss | 2 +- .../structures/auth/_CompleteSecurity.scss | 2 +- res/css/views/auth/_AuthBody.scss | 8 ++-- res/css/views/auth/_AuthButtons.scss | 2 +- res/css/views/auth/_AuthFooter.scss | 2 +- res/css/views/auth/_CompleteSecurityBody.scss | 4 +- res/css/views/auth/_LanguageSelector.scss | 2 +- res/css/views/auth/_ServerTypeSelector.scss | 2 +- .../context_menus/_RoomTileContextMenu.scss | 2 +- .../_StatusMessageContextMenu.scss | 2 +- .../context_menus/_TagTileContextMenu.scss | 2 +- res/css/views/context_menus/_TopLeftMenu.scss | 4 +- .../views/dialogs/_AddressPickerDialog.scss | 4 +- .../dialogs/_ConfirmUserActionDialog.scss | 8 ++-- res/css/views/dialogs/_CreateGroupDialog.scss | 4 +- res/css/views/dialogs/_CreateRoomDialog.scss | 2 +- res/css/views/dialogs/_DevtoolsDialog.scss | 4 +- res/css/views/dialogs/_InviteDialog.scss | 18 +++---- .../dialogs/_MessageEditHistoryDialog.scss | 4 +- .../dialogs/_NewSessionReviewDialog.scss | 2 +- res/css/views/dialogs/_SetEmailDialog.scss | 2 +- res/css/views/dialogs/_SetMxIdDialog.scss | 2 +- res/css/views/dialogs/_SetPasswordDialog.scss | 2 +- res/css/views/dialogs/_TermsDialog.scss | 2 +- .../views/dialogs/_UnknownDeviceDialog.scss | 2 +- res/css/views/directory/_NetworkDropdown.scss | 14 +++--- res/css/views/elements/_AccessibleButton.scss | 2 +- res/css/views/elements/_AddressTile.scss | 4 +- .../views/elements/_DirectorySearchBox.scss | 2 +- res/css/views/elements/_Dropdown.scss | 4 +- res/css/views/elements/_EventListSummary.scss | 14 +++--- res/css/views/elements/_Field.scss | 6 +-- res/css/views/elements/_FormButton.scss | 4 +- res/css/views/elements/_ImageView.scss | 10 ++-- .../views/elements/_InteractiveTooltip.scss | 2 +- res/css/views/elements/_RichText.scss | 2 +- res/css/views/elements/_Tooltip.scss | 6 +-- res/css/views/elements/_TooltipButton.scss | 4 +- res/css/views/emojipicker/_EmojiPicker.scss | 8 ++-- res/css/views/messages/_DateSeparator.scss | 2 +- res/css/views/messages/_MessageActionBar.scss | 2 +- res/css/views/messages/_MessageTimestamp.scss | 2 +- res/css/views/messages/_ReactionsRow.scss | 2 +- .../views/messages/_ReactionsRowButton.scss | 2 +- res/css/views/messages/_ViewSourceEvent.scss | 2 +- .../views/messages/_common_CryptoEvent.scss | 4 +- res/css/views/right_panel/_UserInfo.scss | 18 +++---- .../views/right_panel/_VerificationPanel.scss | 2 +- res/css/views/rooms/_AppsDrawer.scss | 10 ++-- .../views/rooms/_BasicMessageComposer.scss | 4 +- res/css/views/rooms/_EntityTile.scss | 6 +-- res/css/views/rooms/_EventTile.scss | 28 +++++------ res/css/views/rooms/_JumpToBottomButton.scss | 4 +- res/css/views/rooms/_MemberDeviceInfo.scss | 2 +- res/css/views/rooms/_MemberInfo.scss | 14 +++--- res/css/views/rooms/_MemberList.scss | 2 +- res/css/views/rooms/_MessageComposer.scss | 6 +-- .../rooms/_MessageComposerFormatBar.scss | 4 +- res/css/views/rooms/_PresenceLabel.scss | 2 +- res/css/views/rooms/_RoomDropTarget.scss | 4 +- res/css/views/rooms/_RoomHeader.scss | 8 ++-- res/css/views/rooms/_RoomList.scss | 4 +- res/css/views/rooms/_RoomPreviewBar.scss | 6 +-- res/css/views/rooms/_RoomTile.scss | 6 +-- res/css/views/rooms/_SearchBar.scss | 4 +- res/css/views/rooms/_SendMessageComposer.scss | 2 +- res/css/views/rooms/_WhoIsTypingTile.scss | 4 +- res/css/views/settings/tabs/_SettingsTab.scss | 8 ++-- .../views/terms/_InlineTermsAgreement.scss | 2 +- .../verification/_VerificationShowSas.scss | 4 +- res/css/views/voip/_CallView.scss | 2 +- res/css/views/voip/_IncomingCallbox.scss | 2 +- res/themes/dark-custom/css/dark-custom.scss | 1 + res/themes/dark/css/_dark.scss | 2 +- res/themes/dark/css/dark.scss | 1 + res/themes/light-custom/css/light-custom.scss | 1 + res/themes/light/css/_light.scss | 4 +- res/themes/light/css/light.scss | 1 + 97 files changed, 280 insertions(+), 227 deletions(-) create mode 100644 res/css/_font-sizes.scss diff --git a/res/css/_common.scss b/res/css/_common.scss index 657fb21244..03442ca510 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -16,6 +16,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +@import "./_font-sizes.scss"; + :root { font-size: 15px; } @@ -29,7 +31,7 @@ html { body { font-family: $font-family; - font-size: 1rem; + font-size: $font-15px; background-color: $primary-bg-color; color: $primary-fg-color; border: 0px; @@ -64,7 +66,7 @@ b { h2 { color: $primary-fg-color; font-weight: 400; - font-size: 1.2rem; + font-size: $font-18px; margin-top: 16px; margin-bottom: 16px; } @@ -80,7 +82,7 @@ input[type=search], input[type=password] { padding: 9px; font-family: $font-family; - font-size: 0.933rem; + font-size: $font-14px; font-weight: 600; min-width: 0; } @@ -257,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { color: $light-fg-color; z-index: 4012; font-weight: 300; - font-size: 1rem; + font-size: $font-15px; position: relative; padding: 25px 30px 30px 30px; max-height: 80%; @@ -325,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } .mx_Dialog_title { - font-size: 1.467rem; - line-height: 2.400rem; + font-size: $font-22px; + line-height: $font-36px; color: $dialog-title-fg-color; } @@ -354,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { .mx_Dialog_content { margin: 24px 0 68px; - font-size: 0.933rem; + font-size: $font-14px; color: $primary-fg-color; word-wrap: break-word; } @@ -450,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } .mx_TextInputDialog_input { - font-size: 1rem; + font-size: $font-15px; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss new file mode 100644 index 0000000000..6baf11e9d6 --- /dev/null +++ b/res/css/_font-sizes.scss @@ -0,0 +1,47 @@ +$font-8px: 0.533rem; +$font-9px: 0.600rem; +$font-10px: 0.667rem; +$font-10-4px: 0.693rem; +$font-11px: 0.733rem; +$font-12px: 0.800rem; +$font-13px: 0.867rem; +$font-14px: 0.933rem; +$font-15px: 1.000rem; +$font-16px: 1.067rem; +$font-17px: 1.133rem; +$font-18px: 1.200rem; +$font-19px: 1.267rem; +$font-20px: 1.333rem; +$font-21px: 1.400rem; +$font-22px: 1.467rem; +$font-23px: 1.533rem; +$font-24px: 1.600rem; +$font-25px: 1.667rem; +$font-26px: 1.733rem; +$font-27px: 1.800rem; +$font-28px: 1.867rem; +$font-29px: 1.933rem; +$font-30px: 2.000rem; +$font-31px: 2.067rem; +$font-32px: 2.133rem; +$font-33px: 2.200rem; +$font-34px: 2.267rem; +$font-35px: 2.333rem; +$font-36px: 2.400rem; +$font-37px: 2.467rem; +$font-38px: 2.533rem; +$font-39px: 2.600rem; +$font-40px: 2.667rem; +$font-41px: 2.733rem; +$font-42px: 2.800rem; +$font-43px: 2.867rem; +$font-44px: 2.933rem; +$font-45px: 3.000rem; +$font-46px: 3.067rem; +$font-47px: 3.133rem; +$font-48px: 3.200rem; +$font-49px: 3.267rem; +$font-50px: 3.333rem; +$font-51px: 3.400rem; +$font-52px: 3.467rem; +$font-400px: 26.667rem; diff --git a/res/css/rethemendex.sh b/res/css/rethemendex.sh index 13be73f9a9..5d9e789982 100755 --- a/res/css/rethemendex.sh +++ b/res/css/rethemendex.sh @@ -8,7 +8,7 @@ cd `dirname $0` # we used to have exclude /themes from the find at this point. # as themes are no longer a spurious subdirectory of css/, we don't # need it any more. - find . -iname _\*.scss | fgrep -v _components.scss | LC_ALL=C sort | + find . -iname _\*.scss | sort | fgrep -v _components.scss | LC_ALL=C sort | while read i; do echo "@import \"$i\";" done diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 67e7a7a8d6..61070a0541 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -36,7 +36,7 @@ limitations under the License. background-color: $menu-bg-color; color: $primary-fg-color; position: absolute; - font-size: 0.933rem; + font-size: $font-14px; z-index: 5001; } diff --git a/res/css/structures/_CreateRoom.scss b/res/css/structures/_CreateRoom.scss index 3a66805bfe..e859beb20e 100644 --- a/res/css/structures/_CreateRoom.scss +++ b/res/css/structures/_CreateRoom.scss @@ -26,7 +26,7 @@ limitations under the License. border-radius: 3px; border: 1px solid $strong-input-border-color; font-weight: 300; - font-size: 0.867rem; + font-size: $font-13px; padding: 9px; margin-top: 6px; } diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index eceeab2e1b..859ee28035 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -49,7 +49,7 @@ limitations under the License. .mx_FilePanel .mx_EventTile .mx_MFileBody_download { display: flex; - font-size: 0.933rem; + font-size: $font-14px; color: $event-timestamp-color; } @@ -60,7 +60,7 @@ limitations under the License. .mx_FilePanel .mx_EventTile .mx_MImageBody_size { flex: 1 0 0; - font-size: 0.733rem; + font-size: $font-11px; text-align: right; white-space: nowrap; } @@ -80,7 +80,7 @@ limitations under the License. flex: 1 1 auto; line-height: initial; padding: 0px; - font-size: 0.733rem; + font-size: $font-11px; opacity: 1.0; color: $event-timestamp-color; } @@ -90,7 +90,7 @@ limitations under the License. text-align: right; visibility: visible; position: initial; - font-size: 0.733rem; + font-size: $font-11px; opacity: 1.0; color: $event-timestamp-color; } diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index 6eb5e33462..ed0cf121a4 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -134,7 +134,7 @@ limitations under the License. overflow: hidden; color: $primary-fg-color; font-weight: bold; - font-size: 1.467rem; + font-size: $font-22px; padding-left: 19px; padding-right: 16px; /* why isn't text-overflow working? */ @@ -148,7 +148,7 @@ limitations under the License. max-height: 42px; color: $settings-grey-fg-color; font-weight: 300; - font-size: 0.867rem; + font-size: $font-13px; padding-left: 19px; margin-right: 16px; overflow: hidden; @@ -196,7 +196,7 @@ limitations under the License. text-transform: uppercase; color: $h3-color; font-weight: 600; - font-size: 0.867rem; + font-size: $font-13px; margin-bottom: 10px; } @@ -226,7 +226,7 @@ limitations under the License. .mx_GroupView_rooms_header_addRow_label { display: inline-block; vertical-align: top; - line-height: 1.600rem; + line-height: $font-24px; padding-left: 28px; color: $accent-color; } @@ -258,7 +258,7 @@ limitations under the License. .mx_GroupView_membershipSection_description { /* To match textButton */ - line-height: 2.267rem; + line-height: $font-34px; } .mx_GroupView_membershipSection_description .mx_BaseAvatar { diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 6af4b54f91..7d57425f6f 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -147,7 +147,7 @@ limitations under the License. } .mx_AccessibleButton { - font-size: 0.933rem; + font-size: $font-14px; margin: 4px 0 1px 9px; padding: 9px; padding-left: 42px; diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss index 042994e48c..73f1332cd0 100644 --- a/res/css/structures/_MyGroups.scss +++ b/res/css/structures/_MyGroups.scss @@ -105,7 +105,7 @@ limitations under the License. .mx_MyGroups_placeholder { background-color: $info-plinth-bg-color; color: $info-plinth-fg-color; - line-height: 26.667rem; + line-height: $font-400px; border-radius: 10px; text-align: center; } @@ -149,11 +149,11 @@ limitations under the License. .mx_GroupTile_profile .mx_GroupTile_name { margin: 0px; - font-size: 1rem; + font-size: $font-15px; } .mx_GroupTile_profile .mx_GroupTile_groupId { - font-size: 0.867rem; + font-size: $font-13px; opacity: 0.7; } @@ -161,7 +161,7 @@ limitations under the License. display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - font-size: 0.867rem; + font-size: $font-13px; max-height: 36px; overflow: hidden; } diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index ff95cc2dba..44205b1f01 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -39,7 +39,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile_roomName { font-weight: bold; - font-size: 0.933rem; + font-size: $font-14px; } .mx_NotificationPanel .mx_EventTile_roomName a { @@ -54,7 +54,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { color: $primary-fg-color; - font-size: 0.8rem; + font-size: $font-12px; display: inline; padding-left: 0px; } diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index b0c2b4650f..10878322e3 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -96,7 +96,7 @@ limitations under the License. } .mx_RightPanel_headerButton_badge { - font-size: 0.533rem; + font-size: $font-8px; border-radius: 8px; color: $accent-fg-color; background-color: $accent-color; diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index b62f726d09..e0814182f5 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -64,7 +64,7 @@ limitations under the License. } .mx_RoomDirectory_table { - font-size: 0.8rem; + font-size: $font-12px; color: $primary-fg-color; width: 100%; text-align: left; @@ -112,7 +112,7 @@ limitations under the License. .mx_RoomDirectory_name { display: inline-block; - font-size: 1.2rem; + font-size: $font-18px; font-weight: 600; } @@ -124,7 +124,7 @@ limitations under the License. border-radius: 10px; display: inline-block; height: 20px; - line-height: 1.333rem; + line-height: $font-20px; padding: 0 5px; color: $accent-fg-color; background-color: $rte-room-pill-color; @@ -136,7 +136,7 @@ limitations under the License. } .mx_RoomDirectory_alias { - font-size: 0.8rem; + font-size: $font-12px; color: $settings-grey-fg-color; } @@ -150,7 +150,7 @@ limitations under the License. } .mx_RoomDirectory > span { - font-size: 1rem; + font-size: $font-15px; margin-top: 0; .mx_AccessibleButton { diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index 1dc99b26f0..cd4390ee5c 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -32,7 +32,7 @@ limitations under the License. .mx_RoomStatusBar_callBar { height: 50px; - line-height: 3.333rem; + line-height: $font-50px; } .mx_RoomStatusBar_placeholderIndicator span { @@ -94,7 +94,7 @@ limitations under the License. border-radius: 40px; width: 24px; height: 24px; - line-height: 1.600rem; + line-height: $font-24px; font-size: 0.8em; vertical-align: top; text-align: center; @@ -132,7 +132,7 @@ limitations under the License. .mx_RoomStatusBar_connectionLostBar_desc { color: $primary-fg-color; - font-size: 0.867rem; + font-size: $font-13px; opacity: 0.5; padding-bottom: 20px; } @@ -145,7 +145,7 @@ limitations under the License. .mx_RoomStatusBar_typingBar { height: 50px; - line-height: 3.333rem; + line-height: $font-50px; color: $primary-fg-color; opacity: 0.5; @@ -155,7 +155,7 @@ limitations under the License. .mx_RoomStatusBar_isAlone { height: 50px; - line-height: 3.333rem; + line-height: $font-50px; color: $primary-fg-color; opacity: 0.5; @@ -174,11 +174,11 @@ limitations under the License. .mx_RoomStatusBar_callBar { height: 40px; - line-height: 2.667rem; + line-height: $font-40px; } .mx_RoomStatusBar_typingBar { height: 40px; - line-height: 2.667rem; + line-height: $font-40px; } } diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index a76872a745..2e0c94263e 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -68,7 +68,7 @@ limitations under the License. text-transform: uppercase; color: $roomsublist-label-fg-color; font-weight: 700; - font-size: 0.8rem; + font-size: $font-12px; margin-left: 8px; } @@ -76,7 +76,7 @@ limitations under the License. flex: 0 0 auto; border-radius: 8px; font-weight: 600; - font-size: 0.8rem; + font-size: $font-12px; padding: 0 5px; color: $roomtile-badge-fg-color; background-color: $roomtile-name-color; diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 52de9384d7..f2154ef448 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -23,7 +23,7 @@ limitations under the License. .mx_RoomView_fileDropTarget { min-width: 0px; width: 100%; - font-size: 1.2rem; + font-size: $font-18px; text-align: center; pointer-events: none; @@ -186,7 +186,7 @@ limitations under the License. .mx_RoomView_empty { flex: 1 1 auto; - font-size: 0.867rem; + font-size: $font-13px; padding-left: 3em; padding-right: 3em; margin-right: 20px; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 20e2120bfd..4a4bb125a3 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -39,7 +39,7 @@ limitations under the License. cursor: pointer; display: block; border-radius: 3px; - font-size: 0.933rem; + font-size: $font-14px; min-height: 24px; // use min-height instead of height to allow the label to overflow a bit margin-bottom: 6px; position: relative; diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 5173358bcc..f56b318e70 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -139,7 +139,7 @@ limitations under the License. background-color: $neutral-badge-color; color: #ffffff; font-weight: 600; - font-size: 0.667rem; + font-size: $font-10px; text-align: center; padding-top: 1px; padding-left: 4px; @@ -157,7 +157,7 @@ limitations under the License. border-radius: 8px; color: $accent-fg-color; font-weight: 600; - font-size: 0.933rem; + font-size: $font-14px; padding: 0 5px; background-color: $roomtile-name-color; } diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 07daf3f865..af595aaeee 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -77,7 +77,7 @@ limitations under the License. grid-column: 1 / 3; grid-row: 1; margin: 0; - font-size: 1rem; + font-size: $font-15px; font-weight: 600; } @@ -96,11 +96,11 @@ limitations under the License. white-space: nowrap; text-overflow: ellipsis; margin: 4px 0 11px 0; - font-size: 0.8rem; + font-size: $font-12px; } .mx_Toast_deviceID { - font-size: 0.667rem; + font-size: $font-10px; } } } diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss index 9bdffb530a..53d44e7c24 100644 --- a/res/css/structures/_TopLeftMenuButton.scss +++ b/res/css/structures/_TopLeftMenuButton.scss @@ -32,7 +32,7 @@ limitations under the License. .mx_TopLeftMenuButton_name { margin: 0 7px; - font-size: 1.2rem; + font-size: $font-18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss index c84c48240e..421d1f03cd 100644 --- a/res/css/structures/_ViewSource.scss +++ b/res/css/structures/_ViewSource.scss @@ -29,7 +29,7 @@ limitations under the License. .mx_ViewSource pre { text-align: left; - font-size: 0.8rem; + font-size: $font-12px; padding: 0.5em 1em 0.5em 1em; word-wrap: break-word; white-space: pre-wrap; diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss index 9367c2c996..3050840fe8 100644 --- a/res/css/structures/auth/_CompleteSecurity.scss +++ b/res/css/structures/auth/_CompleteSecurity.scss @@ -34,7 +34,7 @@ limitations under the License. } .mx_CompleteSecurity_body { - font-size: 1rem; + font-size: $font-15px; } .mx_CompleteSecurity_waiting { diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 219bf6d0e7..468a4b3d62 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_AuthBody { width: 500px; - font-size: 0.8rem; + font-size: $font-12px; color: $authpage-secondary-color; background-color: $authpage-body-bg-color; border-radius: 0 4px 4px 0; @@ -25,14 +25,14 @@ limitations under the License. box-sizing: border-box; h2 { - font-size: 1.600rem; + font-size: $font-24px; font-weight: 600; margin-top: 8px; color: $authpage-primary-color; } h3 { - font-size: 0.933rem; + font-size: $font-14px; font-weight: 600; color: $authpage-primary-color; } @@ -98,7 +98,7 @@ limitations under the License. .mx_AuthBody_editServerDetails { padding-left: 1em; - font-size: 0.8rem; + font-size: $font-12px; font-weight: normal; } diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss index 109a1f4670..8deb0f80ac 100644 --- a/res/css/views/auth/_AuthButtons.scss +++ b/res/css/views/auth/_AuthButtons.scss @@ -43,7 +43,7 @@ limitations under the License. cursor: pointer; - font-size: 1rem; + font-size: $font-15px; padding: 0 11px; word-break: break-word; } diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss index b1bdcb697e..0bc2743d54 100644 --- a/res/css/views/auth/_AuthFooter.scss +++ b/res/css/views/auth/_AuthFooter.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_AuthFooter { text-align: center; width: 100%; - font-size: 0.933rem; + font-size: $font-14px; opacity: 0.72; padding: 20px 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss index af0620c329..46b7abe2cc 100644 --- a/res/css/views/auth/_CompleteSecurityBody.scss +++ b/res/css/views/auth/_CompleteSecurityBody.scss @@ -24,13 +24,13 @@ limitations under the License. box-sizing: border-box; h2 { - font-size: 1.600rem; + font-size: $font-24px; font-weight: 600; margin-top: 0; } h3 { - font-size: 0.933rem; + font-size: $font-14px; font-weight: 600; } diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss index e9ac8688ed..781561f876 100644 --- a/res/css/views/auth/_LanguageSelector.scss +++ b/res/css/views/auth/_LanguageSelector.scss @@ -20,7 +20,7 @@ limitations under the License. .mx_AuthBody_language .mx_Dropdown_input { border: none; - font-size: 0.933rem; + font-size: $font-14px; font-weight: 600; color: $authpage-lang-color; } diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss index 2042358b8a..fbd3d2655d 100644 --- a/res/css/views/auth/_ServerTypeSelector.scss +++ b/res/css/views/auth/_ServerTypeSelector.scss @@ -65,5 +65,5 @@ limitations under the License. } .mx_ServerTypeSelector_description { - font-size: 0.667rem; + font-size: $font-10px; } diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss index 1e1a5f889f..9697ac9bef 100644 --- a/res/css/views/context_menus/_RoomTileContextMenu.scss +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -38,7 +38,7 @@ limitations under the License. white-space: nowrap; display: flex; align-items: center; - line-height: 1.067rem; + line-height: $font-16px; } .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet { diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss index b68d16281a..fceb7fba34 100644 --- a/res/css/views/context_menus/_StatusMessageContextMenu.scss +++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss @@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message { .mx_StatusMessageContextMenu_clear { @mixin mx_DialogButton; align-self: start; - font-size: 0.8rem; + font-size: $font-12px; padding: 6px 1em; border: 1px solid transparent; margin-right: 10px; diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss index 20f95d7f84..e4ccc030a2 100644 --- a/res/css/views/context_menus/_TagTileContextMenu.scss +++ b/res/css/views/context_menus/_TagTileContextMenu.scss @@ -22,7 +22,7 @@ limitations under the License. white-space: nowrap; display: flex; align-items: center; - line-height: 1.067rem; + line-height: $font-16px; } .mx_TagTileContextMenu_item object { diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss index abcaa4fcb5..973c306695 100644 --- a/res/css/views/context_menus/_TopLeftMenu.scss +++ b/res/css/views/context_menus/_TopLeftMenu.scss @@ -19,12 +19,12 @@ limitations under the License. border-radius: 4px; .mx_TopLeftMenu_greyedText { - font-size: 0.8rem; + font-size: $font-12px; opacity: 0.5; } .mx_TopLeftMenu_upgradeLink { - font-size: 0.8rem; + font-size: $font-12px; img { margin-left: 5px; diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss index 6b107b3253..136e497994 100644 --- a/res/css/views/dialogs/_AddressPickerDialog.scss +++ b/res/css/views/dialogs/_AddressPickerDialog.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_AddressPickerDialog_input, .mx_AddressPickerDialog_input:focus { height: 26px; - font-size: 0.933rem; + font-size: $font-14px; font-family: $font-family; padding-left: 12px; padding-right: 12px; @@ -50,7 +50,7 @@ limitations under the License. .mx_AddressPickerDialog_inputContainer { border-radius: 3px; border: solid 1px $input-border-color; - line-height: 2.400rem; + line-height: $font-36px; padding-left: 4px; padding-right: 4px; padding-top: 1px; diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss index e589ef0450..823f4d1e28 100644 --- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss +++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss @@ -26,22 +26,22 @@ limitations under the License. } .mx_ConfirmUserActionDialog_name { - font-size: 1.2rem; + font-size: $font-18px; } .mx_ConfirmUserActionDialog_userId { - font-size: 0.867rem; + font-size: $font-13px; } .mx_ConfirmUserActionDialog_reasonField { font-family: $font-family; - font-size: 0.933rem; + font-size: $font-14px; color: $primary-fg-color; background-color: $primary-bg-color; border-radius: 3px; border: solid 1px $input-border-color; - line-height: 2.400rem; + line-height: $font-36px; padding-left: 16px; padding-right: 16px; padding-top: 1px; diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss index 4159944e5d..f7bfc61a98 100644 --- a/res/css/views/dialogs/_CreateGroupDialog.scss +++ b/res/css/views/dialogs/_CreateGroupDialog.scss @@ -25,7 +25,7 @@ limitations under the License. } .mx_CreateGroupDialog_input { - font-size: 1rem; + font-size: $font-15px; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; @@ -44,7 +44,7 @@ limitations under the License. .mx_CreateGroupDialog_prefix, .mx_CreateGroupDialog_suffix { padding: 0px 5px; - line-height: 2.467rem; + line-height: $font-37px; background-color: $input-darker-bg-color; border: 1px solid $input-border-color; text-align: center; diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 1cdbe99843..c542741c30 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -49,7 +49,7 @@ limitations under the License. } .mx_CreateRoomDialog_input { - font-size: 1rem; + font-size: $font-15px; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 399c7225f6..35cb6bc7ab 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -68,11 +68,11 @@ limitations under the License. width: 240px; color: $input-fg-color; font-family: $font-family; - font-size: 1.067rem; + font-size: $font-16px; } .mx_DevTools_textarea { - font-size: 0.8rem; + font-size: $font-12px; max-width: 684px; min-height: 250px; padding: 10px; diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 22b1867002..a77d0bfbba 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -40,8 +40,8 @@ limitations under the License. textarea, textarea:focus { height: 34px; - line-height: 2.267rem; - font-size: 0.933rem; + line-height: $font-34px; + font-size: $font-14px; padding-left: 12px; margin: 0 !important; border: 0 !important; @@ -65,7 +65,7 @@ limitations under the License. min-width: 48px; margin-left: 10px; height: 25px; - line-height: 1.667rem; + line-height: $font-25px; } .mx_InviteDialog_buttonAndSpinner { @@ -84,7 +84,7 @@ limitations under the License. padding-bottom: 10px; h3 { - font-size: 0.8rem; + font-size: $font-12px; color: $muted-fg-color; font-weight: bold; text-transform: uppercase; @@ -143,23 +143,23 @@ limitations under the License. .mx_InviteDialog_roomTile_name { font-weight: 600; - font-size: 0.933rem; + font-size: $font-14px; color: $primary-fg-color; margin-left: 7px; } .mx_InviteDialog_roomTile_userId { - font-size: 0.8rem; + font-size: $font-12px; color: $muted-fg-color; margin-left: 7px; } .mx_InviteDialog_roomTile_time { text-align: right; - font-size: 0.8rem; + font-size: $font-12px; color: $muted-fg-color; float: right; - line-height: 2.400rem; // Height of the avatar to keep the time vertically aligned + line-height: $font-36px; // Height of the avatar to keep the time vertically aligned } .mx_InviteDialog_roomTile_highlight { @@ -176,7 +176,7 @@ limitations under the License. border-radius: 12px; display: inline-block; height: 24px; - line-height: 1.600rem; + line-height: $font-24px; padding-left: 8px; padding-right: 8px; color: #ffffff; // this is fine without a var because it's for both themes diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss index 8d989f6a00..e9d777effd 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss @@ -35,7 +35,7 @@ limitations under the License. .mx_MessageEditHistoryDialog_edits { list-style-type: none; - font-size: 0.933rem; + font-size: $font-14px; padding: 0; color: $primary-fg-color; @@ -60,7 +60,7 @@ limitations under the License. } .mx_MessageActionBar .mx_AccessibleButton { - font-size: 0.667rem; + font-size: $font-10px; padding: 0 8px; } } diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss index 633b3a063b..b35c570c80 100644 --- a/res/css/views/dialogs/_NewSessionReviewDialog.scss +++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss @@ -32,6 +32,6 @@ limitations under the License. } .mx_NewSessionReviewDialog_deviceID { - font-size: 0.8rem; + font-size: $font-12px; color: $notice-secondary-color; } diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss index a5013f79b1..37bee7a9ff 100644 --- a/res/css/views/dialogs/_SetEmailDialog.scss +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -20,7 +20,7 @@ limitations under the License. padding: 9px; color: $input-fg-color; background-color: $primary-bg-color; - font-size: 1rem; + font-size: $font-15px; width: 100%; max-width: 280px; margin-bottom: 10px; diff --git a/res/css/views/dialogs/_SetMxIdDialog.scss b/res/css/views/dialogs/_SetMxIdDialog.scss index 8208a679fd..1df34f3408 100644 --- a/res/css/views/dialogs/_SetMxIdDialog.scss +++ b/res/css/views/dialogs/_SetMxIdDialog.scss @@ -29,7 +29,7 @@ limitations under the License. padding: 9px; color: $primary-fg-color; background-color: $primary-bg-color; - font-size: 1rem; + font-size: $font-15px; width: 100%; max-width: 280px; } diff --git a/res/css/views/dialogs/_SetPasswordDialog.scss b/res/css/views/dialogs/_SetPasswordDialog.scss index cff11c8afb..1f99353298 100644 --- a/res/css/views/dialogs/_SetPasswordDialog.scss +++ b/res/css/views/dialogs/_SetPasswordDialog.scss @@ -20,7 +20,7 @@ limitations under the License. padding: 9px; color: $primary-fg-color; background-color: $primary-bg-color; - font-size: 1rem; + font-size: $font-15px; max-width: 280px; margin-bottom: 10px; } diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss index e9805d1b35..939a31dee6 100644 --- a/res/css/views/dialogs/_TermsDialog.scss +++ b/res/css/views/dialogs/_TermsDialog.scss @@ -31,7 +31,7 @@ limitations under the License. } .mx_TermsDialog_termsTable { - font-size: 0.8rem; + font-size: $font-12px; width: 100%; } diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss index 8bb0ed4ff4..daa6bd2352 100644 --- a/res/css/views/dialogs/_UnknownDeviceDialog.scss +++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss @@ -27,7 +27,7 @@ limitations under the License. // userid .mx_UnknownDeviceDialog p { font-weight: bold; - font-size: 1.067rem; + font-size: $font-16px; } .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons { diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 2f0e3e6a17..269b507e3c 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -47,9 +47,9 @@ limitations under the License. .mx_NetworkDropdown_server_title { padding: 0 10px; - font-size: 1rem; + font-size: $font-15px; font-weight: 600; - line-height: 1.333rem; + line-height: $font-20px; margin-bottom: 4px; // remove server button @@ -77,16 +77,16 @@ limitations under the License. .mx_NetworkDropdown_server_subtitle { padding: 0 10px; - font-size: 0.667rem; - line-height: 0.933rem; + font-size: $font-10px; + line-height: $font-14px; margin-top: -4px; margin-bottom: 4px; color: $muted-fg-color; } .mx_NetworkDropdown_server_network { - font-size: 0.8rem; - line-height: 1.067rem; + font-size: $font-12px; + line-height: $font-16px; padding: 4px 10px; cursor: pointer; position: relative; @@ -154,7 +154,7 @@ limitations under the License. .mx_NetworkDropdown_handle_server { color: $muted-fg-color; - font-size: 0.8rem; + font-size: $font-12px; } } diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index b7439d5856..0ee1186934 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -27,7 +27,7 @@ limitations under the License. text-align: center; border-radius: 4px; display: inline-block; - font-size: 0.933rem; + font-size: $font-14px; } .mx_AccessibleButton_kind_primary { diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss index 94028481d4..c42f52f8f4 100644 --- a/res/css/views/elements/_AddressTile.scss +++ b/res/css/views/elements/_AddressTile.scss @@ -19,9 +19,9 @@ limitations under the License. border-radius: 3px; background-color: rgba(74, 73, 74, 0.1); border: solid 1px $input-border-color; - line-height: 1.733rem; + line-height: $font-26px; color: $primary-fg-color; - font-size: 0.933rem; + font-size: $font-14px; font-weight: normal; margin-right: 4px; } diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss index 35fb80f5df..e4b1ac5574 100644 --- a/res/css/views/elements/_DirectorySearchBox.scss +++ b/res/css/views/elements/_DirectorySearchBox.scss @@ -32,7 +32,7 @@ limitations under the License. background-repeat: no-repeat; text-indent: 18px; font-weight: 600; - font-size: 0.8rem; + font-size: $font-12px; user-select: none; cursor: pointer; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 64bcf7a33a..0dd9656c9c 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -29,7 +29,7 @@ limitations under the License. position: relative; border-radius: 3px; border: 1px solid $strong-input-border-color; - font-size: 0.8rem; + font-size: $font-12px; user-select: none; } @@ -53,7 +53,7 @@ limitations under the License. .mx_Dropdown_option { height: 35px; - line-height: 2.333rem; + line-height: $font-35px; padding-left: 8px; padding-right: 8px; } diff --git a/res/css/views/elements/_EventListSummary.scss b/res/css/views/elements/_EventListSummary.scss index a40c1384d7..f3e9f77aa3 100644 --- a/res/css/views/elements/_EventListSummary.scss +++ b/res/css/views/elements/_EventListSummary.scss @@ -19,7 +19,7 @@ limitations under the License. } .mx_TextualEvent.mx_EventListSummary_summary { - font-size: 0.933rem; + font-size: $font-14px; display: inline-flex; } @@ -27,7 +27,7 @@ limitations under the License. display: inline-block; margin-right: 8px; padding-top: 8px; - line-height: 0.8rem; + line-height: $font-12px; } .mx_EventListSummary_avatars .mx_BaseAvatar { @@ -46,19 +46,19 @@ limitations under the License. .mx_EventListSummary_line { border-bottom: 1px solid $primary-hairline-color; margin-left: 63px; - line-height: 2.000rem; + line-height: $font-30px; } .mx_MatrixChat_useCompactLayout { .mx_EventListSummary { - font-size: 0.867rem; + font-size: $font-13px; .mx_EventTile_line { - line-height: 1.333rem; + line-height: $font-20px; } } .mx_EventListSummary_line { - line-height: 1.467rem; + line-height: $font-22px; } .mx_EventListSummary_toggle { @@ -66,6 +66,6 @@ limitations under the License. } .mx_TextualEvent.mx_EventListSummary_summary { - font-size: 0.867rem; + font-size: $font-13px; } } diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 26d24dba3a..cf5bc7ab41 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -40,7 +40,7 @@ limitations under the License. .mx_Field textarea { font-weight: normal; font-family: $font-family; - font-size: 0.933rem; + font-size: $font-14px; border: none; // Even without a border here, we still need this avoid overlapping the rounded // corners on the field above. @@ -102,7 +102,7 @@ limitations under the License. background-color 0.25s ease-out 0.1s; color: $primary-fg-color; background-color: transparent; - font-size: 0.933rem; + font-size: $font-14px; position: absolute; left: 0px; top: 0px; @@ -126,7 +126,7 @@ limitations under the License. color 0.25s ease-out 0s, top 0.25s ease-out 0s, background-color 0.25s ease-out 0s; - font-size: 0.667rem; + font-size: $font-10px; top: -13px; padding: 0 2px; background-color: $field-focused-label-bg-color; diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss index c23ab6ee30..7ec01f17e6 100644 --- a/res/css/views/elements/_FormButton.scss +++ b/res/css/views/elements/_FormButton.scss @@ -15,9 +15,9 @@ limitations under the License. */ .mx_FormButton { - line-height: 1.067rem; + line-height: $font-16px; padding: 5px 15px; - font-size: 0.8rem; + font-size: $font-12px; height: min-content; &:not(:last-child) { diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss index cc7fca67d3..0a4ed2a194 100644 --- a/res/css/views/elements/_ImageView.scss +++ b/res/css/views/elements/_ImageView.scss @@ -102,13 +102,13 @@ limitations under the License. } .mx_ImageView_name { - font-size: 1.2rem; + font-size: $font-18px; margin-bottom: 6px; word-wrap: break-word; } .mx_ImageView_metadata { - font-size: 1rem; + font-size: $font-15px; opacity: 0.5; } @@ -118,13 +118,13 @@ limitations under the License. margin-bottom: 6px; border-radius: 5px; background-color: $lightbox-bg-color; - font-size: 0.933rem; + font-size: $font-14px; padding: 9px; border: 1px solid $lightbox-border-color; } .mx_ImageView_size { - font-size: 0.733rem; + font-size: $font-11px; } .mx_ImageView_link { @@ -133,7 +133,7 @@ limitations under the License. } .mx_ImageView_button { - font-size: 1rem; + font-size: $font-15px; opacity: 0.5; margin-top: 18px; cursor: pointer; diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss index 07441ef85d..db98d95709 100644 --- a/res/css/views/elements/_InteractiveTooltip.scss +++ b/res/css/views/elements/_InteractiveTooltip.scss @@ -24,7 +24,7 @@ limitations under the License. background-color: $interactive-tooltip-bg-color; color: $interactive-tooltip-fg-color; position: absolute; - font-size: 0.667rem; + font-size: $font-10px; font-weight: 600; padding: 6px; z-index: 5001; diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index d821f52e3d..e3f88cc779 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -9,7 +9,7 @@ border-radius: 16px; display: inline-block; height: 20px; - line-height: 1.333rem; + line-height: $font-20px; padding-left: 5px; } diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 61762ced92..73ac9b3558 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -58,8 +58,8 @@ limitations under the License. z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs padding: 10px; pointer-events: none; - line-height: 0.933rem; - font-size: 0.8rem; + line-height: $font-14px; + font-size: $font-12px; font-weight: 600; color: $primary-fg-color; max-width: 200px; @@ -82,7 +82,7 @@ limitations under the License. text-align: center; border: none; border-radius: 3px; - font-size: 0.933rem; + font-size: $font-14px; line-height: 1.2; padding: 6px 8px; diff --git a/res/css/views/elements/_TooltipButton.scss b/res/css/views/elements/_TooltipButton.scss index c350fc22e2..0c85dac818 100644 --- a/res/css/views/elements/_TooltipButton.scss +++ b/res/css/views/elements/_TooltipButton.scss @@ -28,7 +28,7 @@ limitations under the License. transition: opacity 0.2s ease-in; opacity: 0.6; - line-height: 0.733rem; + line-height: $font-11px; text-align: center; cursor: pointer; @@ -47,6 +47,6 @@ limitations under the License. .mx_TooltipButton_helpText { width: 400px; text-align: start; - line-height: 1.133rem !important; + line-height: 17px !important; } diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss index 64b27b9ab3..24561eeeb9 100644 --- a/res/css/views/emojipicker/_EmojiPicker.scss +++ b/res/css/views/emojipicker/_EmojiPicker.scss @@ -163,7 +163,7 @@ limitations under the License. .mx_EmojiPicker_item { display: inline-block; - font-size: 1.333rem; + font-size: $font-20px; padding: 5px; width: 100%; height: 100%; @@ -183,7 +183,7 @@ limitations under the License. } .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name { - font-size: 1.067rem; + font-size: $font-16px; font-weight: 600; margin: 0; } @@ -197,7 +197,7 @@ limitations under the License. } .mx_EmojiPicker_preview_emoji { - font-size: 2.133rem; + font-size: $font-32px; padding: 8px 16px; } @@ -212,7 +212,7 @@ limitations under the License. .mx_EmojiPicker_shortcode { color: $light-fg-color; - font-size: 0.933rem; + font-size: $font-14px; &::before, &::after { content: ":"; diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss index b02e72814f..867f58d860 100644 --- a/res/css/views/messages/_DateSeparator.scss +++ b/res/css/views/messages/_DateSeparator.scss @@ -19,7 +19,7 @@ limitations under the License. margin: 4px 0; display: flex; align-items: center; - font-size: 0.933rem; + font-size: $font-14px; color: $roomtopic-color; } diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 66ba0b227d..9f3971ecf0 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -21,7 +21,7 @@ limitations under the License. cursor: pointer; display: flex; height: 24px; - line-height: 1.600rem; + line-height: $font-24px; border-radius: 4px; background: $message-action-bar-bg-color; top: -18px; diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss index 3a2a8d6336..f8d91cc083 100644 --- a/res/css/views/messages/_MessageTimestamp.scss +++ b/res/css/views/messages/_MessageTimestamp.scss @@ -16,5 +16,5 @@ limitations under the License. .mx_MessageTimestamp { color: $event-timestamp-color; - font-size: 0.667rem; + font-size: $font-10px; } diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss index ee816e0fc0..2f5695e1fb 100644 --- a/res/css/views/messages/_ReactionsRow.scss +++ b/res/css/views/messages/_ReactionsRow.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_ReactionsRow_showAll { text-decoration: none; - font-size: 0.667rem; + font-size: $font-10px; font-weight: 600; margin-left: 6px; vertical-align: top; diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index 7160c223be..941153ca5b 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_ReactionsRowButton { display: inline-flex; height: 20px; - line-height: 1.400rem; + line-height: $font-21px; margin-right: 6px; padding: 0 6px; border: 1px solid $reaction-row-button-border-color; diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss index 088b66445d..076932ee97 100644 --- a/res/css/views/messages/_ViewSourceEvent.scss +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_EventTile_content.mx_ViewSourceEvent { display: flex; opacity: 0.6; - font-size: 0.8rem; + font-size: $font-12px; pre, code { flex: 1; diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index c9499b763f..637d25d7a1 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -45,7 +45,7 @@ limitations under the License. .mx_cryptoEvent_title { font-weight: 600; - font-size: 1rem; + font-size: $font-15px; grid-column: 2; grid-row: 1; } @@ -56,7 +56,7 @@ limitations under the License. } .mx_cryptoEvent_state, .mx_cryptoEvent_subtitle { - font-size: 0.8rem; + font-size: $font-12px; } .mx_cryptoEvent_state, .mx_cryptoEvent_buttons { diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index acc5e4641f..b45858e491 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -20,7 +20,7 @@ limitations under the License. flex-direction: column; flex: 1; overflow-y: auto; - font-size: 0.8rem; + font-size: $font-12px; .mx_UserInfo_cancel { cursor: pointer; @@ -43,7 +43,7 @@ limitations under the License. } h2 { - font-size: 1.2rem; + font-size: $font-18px; font-weight: 600; margin: 18px 0 0 0; } @@ -109,7 +109,7 @@ limitations under the License. justify-content: center; // override the calculated sizes so that the letter isn't HUGE - font-size: 3.733rem !important; + font-size: 56px !important; width: 100% !important; transition: font-size 0.5s; } @@ -122,7 +122,7 @@ limitations under the License. text-transform: uppercase; color: $notice-secondary-color; font-weight: bold; - font-size: 0.8rem; + font-size: $font-12px; margin: 4px 0; } @@ -134,8 +134,8 @@ limitations under the License. text-align: center; h2 { - font-size: 1.2rem; - line-height: 1.667rem; + font-size: $font-18px; + line-height: $font-25px; flex: 1; justify-content: center; align-items: center; @@ -197,7 +197,7 @@ limitations under the License. .mx_UserInfo_field { cursor: pointer; color: $accent-color; - line-height: 1.067rem; + line-height: $font-16px; margin: 8px 0; &.mx_UserInfo_destructive { @@ -206,7 +206,7 @@ limitations under the License. } .mx_UserInfo_statusMessage { - font-size: 0.733rem; + font-size: $font-11px; opacity: 0.5; overflow: hidden; white-space: nowrap; @@ -282,6 +282,6 @@ limitations under the License. } .mx_UserInfo_avatar .mx_BaseAvatar_initial { - font-size: 2.667rem !important; // override the other override because here the avatar is smaller + font-size: 40px !important; // override the other override because here the avatar is smaller } } diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss index 4a10dcbbcd..6165420275 100644 --- a/res/css/views/right_panel/_VerificationPanel.scss +++ b/res/css/views/right_panel/_VerificationPanel.scss @@ -95,7 +95,7 @@ limitations under the License. } .mx_VerificationPanel_QRPhase_helpText { - font-size: 0.933rem; + font-size: $font-14px; margin-top: 71px; text-align: center; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 171cf49ba5..1b1bab67bc 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px; padding: 0; margin: 5px auto 5px auto; color: $accent-color; - font-size: 0.8rem; + font-size: $font-12px; } .mx_AddWidget_button_full_width { @@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px; padding: 9px; color: $primary-hairline-color; background-color: $primary-bg-color; - font-size: 1rem; + font-size: $font-15px; } .mx_AppTile { @@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px; .mx_AppTileMenuBar { margin: 0; - font-size: 0.8rem; + font-size: $font-12px; background-color: $widget-menu-bar-bg-color; display: flex; flex-direction: row; @@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div { flex-direction: column; justify-content: center; align-items: center; - font-size: 1.067rem; + font-size: $font-16px; } .mx_AppPermissionWarning_row { @@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div { } .mx_AppPermissionWarning_smallText { - font-size: 0.8rem; + font-size: $font-12px; } .mx_AppPermissionWarning_bolder { diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index c1f9663ea3..cc76623a8c 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -63,8 +63,8 @@ limitations under the License. border-radius: 8px; text-align: center; font-weight: normal; - line-height: 1.067rem; - font-size: 0.667rem; + line-height: $font-16px; + font-size: $font-10-4px; } } } diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index d66e4efe5c..966d2c4e70 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -78,7 +78,7 @@ limitations under the License. .mx_GroupRoomTile_name { flex: 1 1 0; overflow: hidden; - font-size: 0.933rem; + font-size: $font-14px; text-overflow: ellipsis; white-space: nowrap; } @@ -116,7 +116,7 @@ limitations under the License. } .mx_EntityTile_subtext { - font-size: 0.733rem; + font-size: $font-11px; opacity: 0.5; overflow: hidden; white-space: nowrap; @@ -125,7 +125,7 @@ limitations under the License. .mx_EntityTile_power { padding-inline-start: 6px; - font-size: 0.667rem; + font-size: $font-10px; color: $notice-secondary-color; max-width: 6em; overflow: hidden; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 436b158644..9d798dcb20 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -19,7 +19,7 @@ limitations under the License. max-width: 100%; clear: both; padding-top: 18px; - font-size: 0.933rem; + font-size: $font-14px; position: relative; } @@ -64,7 +64,7 @@ limitations under the License. .mx_EventTile .mx_SenderProfile { color: $primary-fg-color; - font-size: 0.933rem; + font-size: $font-14px; display: inline-block; /* anti-zalgo, with overflow hidden */ overflow: hidden; cursor: pointer; @@ -72,7 +72,7 @@ limitations under the License. padding-bottom: 0px; padding-top: 0px; margin: 0px; - line-height: 1.133rem; + line-height: $font-17px; /* the next three lines, along with overflow hidden, truncate long display names */ white-space: nowrap; text-overflow: ellipsis; @@ -117,7 +117,7 @@ limitations under the License. padding-bottom: 2px; border-radius: 4px; min-height: 24px; - line-height: 1.467rem; + line-height: $font-22px; } .mx_RoomView_timeline_rr_enabled { @@ -152,8 +152,8 @@ limitations under the License. /* HACK to override line-height which is already marked important elsewhere */ .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { - font-size: 3.200rem !important; - line-height: 3.800rem !important; + font-size: 48px !important; + line-height: 57px !important; } .mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { @@ -312,7 +312,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_readAvatarRemainder { color: $event-timestamp-color; - font-size: 0.733rem; + font-size: $font-11px; position: absolute; } @@ -341,7 +341,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_spoiler_reason { color: $event-timestamp-color; - font-size: 0.733rem; + font-size: $font-11px; } .mx_EventTile_spoiler_content { @@ -393,7 +393,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } .mx_EventTile_keyRequestInfo { - font-size: 0.8rem; + font-size: $font-12px; } .mx_EventTile_keyRequestInfo_text { @@ -471,7 +471,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_content .mx_EventTile_edited { user-select: none; - font-size: 0.8rem; + font-size: $font-12px; color: $roomtopic-color; display: inline-block; margin-left: 9px; @@ -489,7 +489,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { white-space: normal !important; line-height: inherit !important; color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) - font-size: 0.933rem; + font-size: $font-14px; pre, code { font-family: $monospace-font-family !important; @@ -589,9 +589,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile.mx_EventTile_info { // same as the padding for non-compact .mx_EventTile.mx_EventTile_info padding-top: 0px; - font-size: 0.867rem; + font-size: $font-13px; .mx_EventTile_line, .mx_EventTile_reply { - line-height: 1.333rem; + line-height: $font-20px; } .mx_EventTile_avatar { top: 4px; @@ -599,7 +599,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } .mx_EventTile .mx_SenderProfile { - font-size: 0.867rem; + font-size: $font-13px; } .mx_EventTile.mx_EventTile_emote { diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 2c44eed1b8..63cf574596 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -34,8 +34,8 @@ limitations under the License. top: -12px; border-radius: 16px; font-weight: bold; - font-size: 0.8rem; - line-height: 0.933rem; + font-size: $font-12px; + line-height: $font-14px; text-align: center; // to be able to get it centered // with text-align in parent diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss index fe5a4b7659..71b05a93fc 100644 --- a/res/css/views/rooms/_MemberDeviceInfo.scss +++ b/res/css/views/rooms/_MemberDeviceInfo.scss @@ -59,7 +59,7 @@ limitations under the License. .mx_MemberDeviceInfo_deviceId { word-break: break-word; - font-size: 0.867rem; + font-size: $font-13px; } .mx_MemberDeviceInfo_deviceInfo { diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index d4c8fbb097..fb082843f1 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -48,7 +48,7 @@ limitations under the License. } .mx_MemberInfo h2 { - font-size: 1.2rem; + font-size: $font-18px; font-weight: 600; margin: 16px 0 16px 15px; } @@ -94,12 +94,12 @@ limitations under the License. text-transform: uppercase; color: $input-darker-fg-color; font-weight: bold; - font-size: 0.8rem; + font-size: $font-12px; margin: 4px 0; } .mx_MemberInfo_profileField { - font-size: 1rem; + font-size: $font-15px; position: relative; } @@ -109,10 +109,10 @@ limitations under the License. .mx_MemberInfo_field { cursor: pointer; - font-size: 1rem; + font-size: $font-15px; color: $primary-fg-color; margin-left: 8px; - line-height: 1.533rem; + line-height: $font-23px; } .mx_MemberInfo_createRoom { @@ -128,7 +128,7 @@ limitations under the License. } .mx_MemberInfo label { - font-size: 0.867rem; + font-size: $font-13px; } .mx_MemberInfo label .mx_MemberInfo_label_text { @@ -144,7 +144,7 @@ limitations under the License. } .mx_MemberInfo_statusMessage { - font-size: 0.733rem; + font-size: $font-11px; opacity: 0.5; overflow: hidden; white-space: nowrap; diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 0f676645a9..99dc2338d4 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -30,7 +30,7 @@ limitations under the License. text-transform: uppercase; color: $h3-color; font-weight: 600; - font-size: 0.867rem; + font-size: $font-13px; padding-left: 3px; padding-right: 12px; margin-top: 8px; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 3777acf423..7b223be3a4 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -105,7 +105,7 @@ limitations under the License. min-height: 60px; justify-content: flex-start; align-items: flex-start; - font-size: 0.933rem; + font-size: $font-14px; margin-right: 6px; } @@ -161,7 +161,7 @@ limitations under the License. box-shadow: none; color: $primary-fg-color; background-color: $primary-bg-color; - font-size: 0.933rem; + font-size: $font-14px; max-height: 120px; overflow: auto; /* needed for FF */ @@ -242,7 +242,7 @@ limitations under the License. flex-direction: row; align-items: center; - font-size: 0.667rem; + font-size: $font-10px; color: $greyed-fg-color; } diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss index 0558cd48cf..27ee7b9795 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.scss +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -97,13 +97,13 @@ limitations under the License. .mx_MessageComposerFormatBar_buttonTooltip { white-space: nowrap; - font-size: 0.867rem; + font-size: $font-13px; font-weight: 600; min-width: 54px; text-align: center; .mx_MessageComposerFormatBar_tooltipShortcut { - font-size: 0.600rem; + font-size: $font-9px; opacity: 0.7; } } diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss index 6d044a69b5..5be83c77d7 100644 --- a/res/css/views/rooms/_PresenceLabel.scss +++ b/res/css/views/rooms/_PresenceLabel.scss @@ -15,6 +15,6 @@ limitations under the License. */ .mx_PresenceLabel { - font-size: 0.733rem; + font-size: $font-11px; opacity: 0.5; } diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss index 1ae8f73e88..2e8145c2c9 100644 --- a/res/css/views/rooms/_RoomDropTarget.scss +++ b/res/css/views/rooms/_RoomDropTarget.scss @@ -28,7 +28,7 @@ limitations under the License. } .mx_RoomDropTarget { - font-size: 0.867rem; + font-size: $font-13px; padding-top: 5px; padding-bottom: 5px; border: 1px dashed $accent-color; @@ -41,7 +41,7 @@ limitations under the License. .mx_RoomDropTarget_label { position: relative; margin-top: 3px; - line-height: 1.400rem; + line-height: $font-21px; z-index: 1; text-align: center; } diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 1737014248..969106c9ea 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -77,9 +77,9 @@ limitations under the License. } .mx_RoomHeader_simpleHeader { - line-height: 3.467rem; + line-height: $font-52px; color: $roomheader-color; - font-size: 1.2rem; + font-size: $font-18px; font-weight: 600; overflow: hidden; margin-left: 63px; @@ -102,7 +102,7 @@ limitations under the License. overflow: hidden; color: $roomheader-color; font-weight: 600; - font-size: 1.2rem; + font-size: $font-18px; margin: 0 7px; border-bottom: 1px solid transparent; display: flex; @@ -161,7 +161,7 @@ limitations under the License. flex: 1; color: $roomtopic-color; font-weight: 400; - font-size: 0.867rem; + font-size: $font-13px; margin: 0 7px; margin-top: 4px; // to align baseline of topic with room name overflow: hidden; diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index b9cb2dc8e4..50a9e7ee1f 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -47,13 +47,13 @@ limitations under the License. } .mx_RoomList_emptySubListTip { - font-size: 0.867rem; + font-size: $font-13px; padding: 5px; border: 1px dashed $accent-color; color: $primary-fg-color; background-color: $droptarget-bg-color; border-radius: 4px; - line-height: 1.067rem; + line-height: $font-16px; } .mx_RoomList_emptySubListTip .mx_RoleButton { diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index 8e61524fda..8708f13ada 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -23,7 +23,7 @@ limitations under the License. -webkit-align-items: center; h3 { - font-size: 1.2rem; + font-size: $font-18px; font-weight: 600; &.mx_RoomPreviewBar_spinnerTitle { @@ -48,8 +48,8 @@ limitations under the License. } .mx_RoomPreviewBar_footer { - font-size: 0.8rem; - line-height: 1.333rem; + font-size: $font-12px; + line-height: $font-20px; .mx_Spinner { vertical-align: middle; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 57d42f6be2..7be2a4e3d4 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -64,7 +64,7 @@ limitations under the License. .mx_RoomTile_subtext { display: inline-block; - font-size: 0.733rem; + font-size: $font-11px; padding: 0 0 0 7px; margin: 0; overflow: hidden; @@ -112,7 +112,7 @@ limitations under the License. } .mx_RoomTile_name { - font-size: 0.933rem; + font-size: $font-14px; padding: 0 4px; color: $roomtile-name-color; white-space: nowrap; @@ -126,7 +126,7 @@ limitations under the License. padding: 0 0.4em; color: $roomtile-badge-fg-color; font-weight: 600; - font-size: 0.8rem; + font-size: $font-12px; } .collapsed { diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss index 5b80585cef..fecc8d78d8 100644 --- a/res/css/views/rooms/_SearchBar.scss +++ b/res/css/views/rooms/_SearchBar.scss @@ -22,7 +22,7 @@ limitations under the License. .mx_SearchBar_input { // border: 1px solid $input-border-color; - // font-size: 1rem; + // font-size: $font-15px; flex: 1 1 0; margin-left: 22px; } @@ -45,7 +45,7 @@ limitations under the License. border: 0; margin: 0 0 0 22px; padding: 5px; - font-size: 1rem; + font-size: $font-15px; cursor: pointer; color: $primary-fg-color; border-bottom: 2px solid $accent-color; diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss index 7233d373a3..0b646666e7 100644 --- a/res/css/views/rooms/_SendMessageComposer.scss +++ b/res/css/views/rooms/_SendMessageComposer.scss @@ -18,7 +18,7 @@ limitations under the License. flex: 1; display: flex; flex-direction: column; - font-size: 0.933rem; + font-size: $font-14px; justify-content: center; margin-right: 6px; // don't grow wider than available space diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss index a1e6f3a3bf..8b135152d6 100644 --- a/res/css/views/rooms/_WhoIsTypingTile.scss +++ b/res/css/views/rooms/_WhoIsTypingTile.scss @@ -49,7 +49,7 @@ limitations under the License. border-radius: 40px; width: 24px; height: 24px; - line-height: 1.600rem; + line-height: $font-24px; font-size: 0.8em; vertical-align: top; text-align: center; @@ -57,7 +57,7 @@ limitations under the License. .mx_WhoIsTypingTile_label { flex: 1; - font-size: 0.933rem; + font-size: $font-14px; font-weight: 600; color: $eventtile-meta-color; } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 03bd3221cd..1fbfb35927 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -19,7 +19,7 @@ limitations under the License. } .mx_SettingsTab_heading { - font-size: 1.333rem; + font-size: $font-20px; font-weight: 600; color: $primary-fg-color; } @@ -29,7 +29,7 @@ limitations under the License. } .mx_SettingsTab_subheading { - font-size: 1.067rem; + font-size: $font-16px; display: block; font-family: $font-family; font-weight: 600; @@ -40,7 +40,7 @@ limitations under the License. .mx_SettingsTab_subsectionText { color: $settings-subsection-fg-color; - font-size: 0.933rem; + font-size: $font-14px; display: block; margin: 10px 100px 10px 0; // Align with the rest of the view } @@ -61,7 +61,7 @@ limitations under the License. .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label { vertical-align: middle; display: inline-block; - font-size: 0.933rem; + font-size: $font-14px; color: $primary-fg-color; max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch box-sizing: border-box; diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss index 1f9ea7a33d..1d0e3ea8c5 100644 --- a/res/css/views/terms/_InlineTermsAgreement.scss +++ b/res/css/views/terms/_InlineTermsAgreement.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_InlineTermsAgreement_cbContainer { margin-bottom: 10px; - font-size: 0.933rem; + font-size: $font-14px; a { color: $accent-color; diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss index fd83bf7ad4..6e26943640 100644 --- a/res/css/views/verification/_VerificationShowSas.scss +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -48,14 +48,14 @@ limitations under the License. } .mx_VerificationShowSas_emojiSas_emoji { - font-size: 2.133rem; + font-size: $font-32px; } .mx_VerificationShowSas_emojiSas_label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - font-size: 0.8rem; + font-size: $font-12px; } .mx_VerificationShowSas_emojiSas_break { diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 06c9f7bed6..4650f30c1d 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -21,5 +21,5 @@ limitations under the License. text-align: center; padding: 6px; font-weight: bold; - font-size: 0.867rem; + font-size: $font-13px; } diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss index 3c8ed46639..ed33de470d 100644 --- a/res/css/views/voip/_IncomingCallbox.scss +++ b/res/css/views/voip/_IncomingCallbox.scss @@ -54,7 +54,7 @@ limitations under the License. vertical-align: middle; width: 80px; height: 36px; - line-height: 2.400rem; + line-height: $font-36px; border-radius: 36px; color: $accent-fg-color; margin: auto; diff --git a/res/themes/dark-custom/css/dark-custom.scss b/res/themes/dark-custom/css/dark-custom.scss index aff647ce26..03ceef45c6 100644 --- a/res/themes/dark-custom/css/dark-custom.scss +++ b/res/themes/dark-custom/css/dark-custom.scss @@ -1,3 +1,4 @@ +@import "../../../../res/css/_font-sizes.scss"; @import "../../light/css/_paths.scss"; @import "../../light/css/_fonts.scss"; @import "../../light/css/_light.scss"; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 1f11fd5620..5d6ba033c8 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -185,7 +185,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color; border: 0px; border-radius: 4px; font-family: $font-family; - font-size: 0.933rem; + font-size: $font-14px; color: $button-fg-color; background-color: $button-bg-color; width: auto; diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss index e7ae7c8cf8..d81db4595f 100644 --- a/res/themes/dark/css/dark.scss +++ b/res/themes/dark/css/dark.scss @@ -1,3 +1,4 @@ +@import "../../../../res/css/_font-sizes.scss"; @import "../../light/css/_paths.scss"; @import "../../light/css/_fonts.scss"; @import "../../light/css/_light.scss"; diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss index 278ca5f0b1..4f80647eba 100644 --- a/res/themes/light-custom/css/light-custom.scss +++ b/res/themes/light-custom/css/light-custom.scss @@ -1,3 +1,4 @@ +@import "../../../../res/css/_font-sizes.scss"; @import "../../light/css/_paths.scss"; @import "../../light/css/_fonts.scss"; @import "../../light/css/_light.scss"; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 2a993a7934..f5f3013354 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -310,7 +310,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color; border: 0px; border-radius: 4px; font-family: $font-family; - font-size: 0.933rem; + font-size: $font-14px; color: $button-fg-color; background-color: $button-bg-color; width: auto; @@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color; @define-mixin mx_DialogButton_small { @mixin mx_DialogButton; - font-size: 1rem; + font-size: $font-15px; padding: 0px 1.5em 0px 1.5em; } diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss index 6acb2d9d94..4f48557648 100644 --- a/res/themes/light/css/light.scss +++ b/res/themes/light/css/light.scss @@ -1,3 +1,4 @@ +@import "../../../../res/css/_font-sizes.scss"; @import "_paths.scss"; @import "_fonts.scss"; @import "_light.scss"; From e2685b1cf0c1300af3fe794eb76379f610f8adb3 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 31 Mar 2020 15:29:40 +0100 Subject: [PATCH 18/93] Licensing info --- res/css/_font-sizes.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss index 6baf11e9d6..be6d43d3a8 100644 --- a/res/css/_font-sizes.scss +++ b/res/css/_font-sizes.scss @@ -1,3 +1,19 @@ +/* +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. +*/ + $font-8px: 0.533rem; $font-9px: 0.600rem; $font-10px: 0.667rem; From 4a9bc5e5bf46fe93e5f050aac9c10256c22bd7f7 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 31 Mar 2020 08:29:42 -0600 Subject: [PATCH 19/93] Update src/components/views/auth/InteractiveAuthEntryComponents.js Co-Authored-By: David Baker --- src/components/views/auth/InteractiveAuthEntryComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index a59b1354b6..14a8791cda 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -639,7 +639,7 @@ export class SSOAuthEntry extends React.Component { onStartAuthClick = () => { // Note: We don't use PlatformPeg's startSsoAuth functions because we almost - // certainly will need to open the thing in a new tab to avoid loosing application + // certainly will need to open the thing in a new tab to avoid losing application // context. window.open(this.state.ssoUrl, '_blank'); From 64c11c35650fe37a6cbf7edb115f11383a91ef89 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 31 Mar 2020 09:26:17 -0600 Subject: [PATCH 20/93] Move ssoUrl to a class property --- .../auth/InteractiveAuthEntryComponents.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index 14a8791cda..4e2f444844 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -619,16 +619,19 @@ export class SSOAuthEntry extends React.Component { static PHASE_PREAUTH = 1; // button to start SSO static PHASE_POSTAUTH = 2; // button to confirm SSO completed + _ssoUrl: string; + constructor(props) { super(props); + // We actually send the user through fallback auth so we don't have to + // deal with a redirect back to us, losing application context. + this._ssoUrl = props.matrixClient.getFallbackAuthUrl( + this.props.loginType, + this.props.authSessionId, + ); + this.state = { - // We actually send the user through fallback auth so we don't have to - // deal with a redirect back to us, losing application context. - ssoUrl: props.matrixClient.getFallbackAuthUrl( - this.props.loginType, - this.props.authSessionId, - ), phase: SSOAuthEntry.PHASE_PREAUTH, }; } @@ -642,7 +645,7 @@ export class SSOAuthEntry extends React.Component { // certainly will need to open the thing in a new tab to avoid losing application // context. - window.open(this.state.ssoUrl, '_blank'); + window.open(this._ssoUrl, '_blank'); this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH}); this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH); }; From c86d75693bbd34513b8b431961a15272bbfe9c12 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 31 Mar 2020 14:05:56 -0600 Subject: [PATCH 21/93] Fix a number of minor code quality issues Most of these are complaints from my IDE. Discovered by going through nearly every file looking for React warnings. --- .../views/dialogs/EncryptedEventDialog.js | 2 +- .../views/dialogs/eventindex/ManageEventIndexDialog.js | 10 +++------- src/components/structures/GroupView.js | 1 - src/components/structures/auth/SoftLogout.js | 2 +- src/components/views/dialogs/RoomSettingsDialog.js | 2 +- src/components/views/elements/AppTile.js | 2 +- src/components/views/elements/LanguageDropdown.js | 4 ++-- src/components/views/elements/Pill.js | 2 +- src/components/views/rooms/AppsDrawer.js | 2 +- src/components/views/rooms/RoomRecoveryReminder.js | 1 - test/components/views/rooms/RoomSettings-test.js | 2 +- 11 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/async-components/views/dialogs/EncryptedEventDialog.js b/src/async-components/views/dialogs/EncryptedEventDialog.js index b602cf60fe..3e5c74335f 100644 --- a/src/async-components/views/dialogs/EncryptedEventDialog.js +++ b/src/async-components/views/dialogs/EncryptedEventDialog.js @@ -79,7 +79,7 @@ export default createReactClass({ }, onDeviceVerificationChanged: function(userId, device) { - if (userId == this.props.event.getSender()) { + if (userId === this.props.event.getSender()) { this.refreshDevice().then((dev) => { this.setState({ device: dev }); }); diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js index 3d7249b5a1..4ac9bf52a3 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js @@ -30,7 +30,7 @@ import EventIndexPeg from "../../../../indexing/EventIndexPeg"; export default class ManageEventIndexDialog extends React.Component { static propTypes = { onFinished: PropTypes.func.isRequired, - } + }; constructor(props) { super(props); @@ -126,16 +126,12 @@ export default class ManageEventIndexDialog extends React.Component { import("./DisableEventIndexDialog"), null, null, /* priority = */ false, /* static = */ true, ); - } - - _onDone = () => { - this.props.onFinished(true); - } + }; _onCrawlerSleepTimeChange = (e) => { this.setState({crawlerSleepTime: e.target.value}); SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value); - } + }; render() { let crawlerState; diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 524694fe95..af205f7e1b 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -433,7 +433,6 @@ export default createReactClass({ this._matrixClient = MatrixClientPeg.get(); this._matrixClient.on("Group.myMembership", this._onGroupMyMembership); - this._changeAvatarComponent = null; this._initGroupStore(this.props.groupId, true); this._dispatcherRef = dis.register(this._onAction); diff --git a/src/components/structures/auth/SoftLogout.js b/src/components/structures/auth/SoftLogout.js index 287f7e5605..08ab7e8a61 100644 --- a/src/components/structures/auth/SoftLogout.js +++ b/src/components/structures/auth/SoftLogout.js @@ -54,7 +54,7 @@ export default class SoftLogout extends React.Component { this.state = { loginView: LOGIN_VIEW.LOADING, - keyBackupNeeded: true, // assume we do while we figure it out (see componentWillMount) + keyBackupNeeded: true, // assume we do while we figure it out (see componentDidMount) busy: false, password: "", diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index 76faf60eef..5d369862b8 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -41,7 +41,7 @@ export default class RoomSettingsDialog extends React.Component { } componentWillUnmount() { - dis.unregister(this._dispatcherRef); + if (this._dispatcherRef) dis.unregister(this._dispatcherRef); } _onAction = (payload) => { diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 0a8bf7443b..d74d8fa485 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.js @@ -161,7 +161,7 @@ export default class AppTile extends React.Component { componentWillUnmount() { // Widget action listeners - dis.unregister(this.dispatcherRef); + if (this.dispatcherRef) dis.unregister(this.dispatcherRef); // if it's not remaining on screen, get rid of the PersistedElement container if (!ActiveWidgetStore.getWidgetPersistence(this.props.id)) { diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.js index cb4e2e4da6..d2546644a0 100644 --- a/src/components/views/elements/LanguageDropdown.js +++ b/src/components/views/elements/LanguageDropdown.js @@ -24,8 +24,8 @@ import SettingsStore from "../../../settings/SettingsStore"; import { _t } from "../../../languageHandler"; function languageMatchesSearchQuery(query, language) { - if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true; - if (language.value.toUpperCase() == query.toUpperCase()) return true; + if (language.label.toUpperCase().includes(query.toUpperCase())) return true; + if (language.value.toUpperCase() === query.toUpperCase()) return true; return false; } diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js index 5f143a06a6..627c51967a 100644 --- a/src/components/views/elements/Pill.js +++ b/src/components/views/elements/Pill.js @@ -158,7 +158,7 @@ const Pill = createReactClass({ componentWillMount() { this._unmounted = false; this._matrixClient = MatrixClientPeg.get(); - this.componentWillReceiveProps(this.props); + this.componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves. }, componentWillUnmount() { diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index f81a5630a4..56c7476060 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -71,7 +71,7 @@ export default createReactClass({ MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents); } WidgetEchoStore.removeListener('update', this._updateApps); - dis.unregister(this.dispatcherRef); + if (this.dispatcherRef) dis.unregister(this.dispatcherRef); }, componentWillReceiveProps(newProps) { diff --git a/src/components/views/rooms/RoomRecoveryReminder.js b/src/components/views/rooms/RoomRecoveryReminder.js index 50521cdd37..4fe1e0bc54 100644 --- a/src/components/views/rooms/RoomRecoveryReminder.js +++ b/src/components/views/rooms/RoomRecoveryReminder.js @@ -61,7 +61,6 @@ export default class RoomRecoveryReminder extends React.PureComponent { loading: false, error: e, }); - return; } } diff --git a/test/components/views/rooms/RoomSettings-test.js b/test/components/views/rooms/RoomSettings-test.js index 870d7f0aab..5e21f729d0 100644 --- a/test/components/views/rooms/RoomSettings-test.js +++ b/test/components/views/rooms/RoomSettings-test.js @@ -134,7 +134,7 @@ describe.skip('RoomSettings', () => { }); }); - // XXX: Can't test this because we `getRoomDirectoryVisibility` in `componentWillMount` + // XXX: Can't test this because we `getRoomDirectoryVisibility` in `componentDidMount` xit('should set room directory publicity when set to true', (done) => { const isRoomPublished = true; roomSettings.setState({ From 3f99332f4b985fbd23a437e2ac06e23d8d96d5d7 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 31 Mar 2020 14:14:17 -0600 Subject: [PATCH 22/93] Use componentDidMount in place of componentWillMount where possible This fixes a common React warning we see. Most of these components should be using constructors instead, however componentDidMount is just as good (and doesn't require converting most of these). Conversion to classes will be done in a later stage of React warning fixes. For https://github.com/vector-im/riot-web/issues/12877 --- src/AsyncWrapper.js | 2 +- .../views/dialogs/EncryptedEventDialog.js | 2 +- .../views/dialogs/eventindex/ManageEventIndexDialog.js | 2 +- src/components/structures/CustomRoomTagPanel.js | 2 +- src/components/structures/EmbeddedPage.js | 2 +- src/components/structures/GroupView.js | 2 +- src/components/structures/LeftPanel.js | 2 +- src/components/structures/MatrixChat.js | 4 +--- src/components/structures/MyGroups.js | 2 +- src/components/structures/RightPanel.js | 2 +- src/components/structures/RoomDirectory.js | 4 +--- src/components/structures/RoomStatusBar.js | 2 +- src/components/structures/TagPanel.js | 2 +- src/components/structures/UserView.js | 2 +- src/components/structures/auth/ForgotPassword.js | 2 +- src/components/structures/auth/Login.js | 2 +- src/components/structures/auth/PostRegistration.js | 2 +- src/components/structures/auth/Registration.js | 2 +- src/components/views/auth/CountryDropdown.js | 2 +- .../views/auth/InteractiveAuthEntryComponents.js | 2 +- src/components/views/avatars/MemberStatusMessageAvatar.js | 2 +- src/components/views/context_menus/MessageContextMenu.js | 2 +- src/components/views/context_menus/RoomTileContextMenu.js | 2 +- .../views/context_menus/StatusMessageContextMenu.js | 2 +- src/components/views/dialogs/ConfirmUserActionDialog.js | 2 +- src/components/views/dialogs/RoomSettingsDialog.js | 2 +- src/components/views/dialogs/RoomUpgradeDialog.js | 2 +- src/components/views/dialogs/SetPasswordDialog.js | 4 ++-- src/components/views/dialogs/ShareDialog.js | 2 +- src/components/views/dialogs/UnknownDeviceDialog.js | 2 +- src/components/views/elements/AppTile.js | 4 +--- src/components/views/elements/DeviceVerifyButtons.js | 2 +- src/components/views/elements/EditableTextContainer.js | 2 +- src/components/views/elements/LanguageDropdown.js | 2 +- src/components/views/elements/PersistentApp.js | 2 +- src/components/views/elements/Pill.js | 2 +- src/components/views/elements/PowerSelector.js | 2 +- src/components/views/elements/ReplyThread.js | 2 +- src/components/views/elements/TintableSvg.js | 6 ++---- src/components/views/groups/GroupMemberInfo.js | 2 +- src/components/views/groups/GroupMemberList.js | 2 +- src/components/views/groups/GroupPublicityToggle.js | 2 +- src/components/views/groups/GroupRoomInfo.js | 2 +- src/components/views/groups/GroupRoomList.js | 2 +- src/components/views/groups/GroupTile.js | 2 +- src/components/views/groups/GroupUserSettings.js | 2 +- src/components/views/messages/MImageBody.js | 8 +++----- src/components/views/messages/SenderProfile.js | 2 +- src/components/views/right_panel/HeaderButtons.js | 2 +- src/components/views/rooms/AppsDrawer.js | 5 +---- src/components/views/rooms/EditMessageComposer.js | 2 +- src/components/views/rooms/ForwardMessage.js | 4 +--- src/components/views/rooms/MemberInfo.js | 4 +--- src/components/views/rooms/MemberList.js | 2 +- src/components/views/rooms/RoomBreadcrumbs.js | 2 +- src/components/views/rooms/RoomNameEditor.js | 2 +- src/components/views/rooms/RoomPreviewBar.js | 2 +- src/components/views/rooms/RoomRecoveryReminder.js | 2 +- src/components/views/rooms/RoomTopicEditor.js | 2 +- src/components/views/rooms/RoomUpgradeWarningBar.js | 2 +- src/components/views/rooms/ThirdPartyMemberInfo.js | 2 +- src/components/views/rooms/WhoIsTypingTile.js | 2 +- src/components/views/settings/ChangeAvatar.js | 2 +- src/components/views/settings/ChangePassword.js | 2 +- src/components/views/settings/EventIndexPanel.js | 2 +- src/components/views/settings/KeyBackupPanel.js | 2 +- src/components/views/settings/Notifications.js | 2 +- .../views/settings/tabs/user/HelpUserSettingsTab.js | 2 +- .../settings/tabs/user/PreferencesUserSettingsTab.js | 2 +- src/components/views/voip/CallPreview.js | 2 +- 70 files changed, 74 insertions(+), 91 deletions(-) diff --git a/src/AsyncWrapper.js b/src/AsyncWrapper.js index b7b81688e1..05054cf63a 100644 --- a/src/AsyncWrapper.js +++ b/src/AsyncWrapper.js @@ -38,7 +38,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; // XXX: temporary logging to try to diagnose // https://github.com/vector-im/riot-web/issues/3148 diff --git a/src/async-components/views/dialogs/EncryptedEventDialog.js b/src/async-components/views/dialogs/EncryptedEventDialog.js index b602cf60fe..1aed623010 100644 --- a/src/async-components/views/dialogs/EncryptedEventDialog.js +++ b/src/async-components/views/dialogs/EncryptedEventDialog.js @@ -37,7 +37,7 @@ export default createReactClass({ return { device: null }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; const client = MatrixClientPeg.get(); diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js index 3d7249b5a1..ef4f2672d4 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js @@ -82,7 +82,7 @@ export default class ManageEventIndexDialog extends React.Component { } } - async componentWillMount(): void { + async componentDidMount(): void { let eventIndexSize = 0; let crawlingRoomsCount = 0; let roomCount = 0; diff --git a/src/components/structures/CustomRoomTagPanel.js b/src/components/structures/CustomRoomTagPanel.js index e8ff6e814e..6e392ea505 100644 --- a/src/components/structures/CustomRoomTagPanel.js +++ b/src/components/structures/CustomRoomTagPanel.js @@ -30,7 +30,7 @@ class CustomRoomTagPanel extends React.Component { }; } - componentWillMount() { + componentDidMount() { this._tagStoreToken = CustomRoomTagStore.addListener(() => { this.setState({tags: CustomRoomTagStore.getSortedTags()}); }); diff --git a/src/components/structures/EmbeddedPage.js b/src/components/structures/EmbeddedPage.js index a0a95ac6f1..0aababf030 100644 --- a/src/components/structures/EmbeddedPage.js +++ b/src/components/structures/EmbeddedPage.js @@ -58,7 +58,7 @@ export default class EmbeddedPage extends React.PureComponent { return sanitizeHtml(_t(s)); } - componentWillMount() { + componentDidMount() { this._unmounted = false; if (!this.props.url) { diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 524694fe95..843f1401c4 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -428,7 +428,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; this._matrixClient = MatrixClientPeg.get(); this._matrixClient.on("Group.myMembership", this._onGroupMyMembership); diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index f5e0bca67e..bbeaeb10e0 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -44,7 +44,7 @@ const LeftPanel = createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this.focusedElement = null; this._breadcrumbsWatcherRef = SettingsStore.watchSetting( diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 258972d18d..b0d08b7673 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -221,7 +221,7 @@ export default createReactClass({ return {serverConfig: props}; }, - componentWillMount: function() { + componentDidMount: function() { SdkConfig.put(this.props.config); // Used by _viewRoom before getting state from sync @@ -261,9 +261,7 @@ export default createReactClass({ this._accountPassword = null; this._accountPasswordTimer = null; - }, - componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); this._themeWatcher = new ThemeWatcher(); this._themeWatcher.start(); diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js index f1209b7b9e..f179cab6ad 100644 --- a/src/components/structures/MyGroups.js +++ b/src/components/structures/MyGroups.js @@ -38,7 +38,7 @@ export default createReactClass({ contextType: MatrixClientContext, }, - componentWillMount: function() { + componentDidMount: function() { this._fetch(); }, diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 8d25116827..5e556419cc 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -108,7 +108,7 @@ export default class RightPanel extends React.Component { } } - componentWillMount() { + componentDidMount() { this.dispatcherRef = dis.register(this.onAction); const cli = this.context; cli.on("RoomState.members", this.onRoomStateMember); diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 664aaaf21f..eabf097950 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -56,7 +56,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; this.nextBatch = null; this.filterTimeout = null; @@ -89,9 +89,7 @@ export default createReactClass({ ), }); }); - }, - componentDidMount: function() { this.refreshRoomList(); }, diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 13b73ec02b..639f38a119 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -96,7 +96,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { MatrixClientPeg.get().on("sync", this.onSyncStateChange); MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated); diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js index f1a39d6fcf..6642cce098 100644 --- a/src/components/structures/TagPanel.js +++ b/src/components/structures/TagPanel.js @@ -44,7 +44,7 @@ const TagPanel = createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this.unmounted = false; this.context.on("Group.myMembership", this._onGroupMyMembership); this.context.on("sync", this._onClientSync); diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.js index 94159a1da4..c4fba137cc 100644 --- a/src/components/structures/UserView.js +++ b/src/components/structures/UserView.js @@ -35,7 +35,7 @@ export default class UserView extends React.Component { this.state = {}; } - componentWillMount() { + componentDidMount() { if (this.props.userId) { this._loadProfileInfo(); } diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js index c849edf260..dc3f4a0a2b 100644 --- a/src/components/structures/auth/ForgotPassword.js +++ b/src/components/structures/auth/ForgotPassword.js @@ -69,7 +69,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this.reset = null; this._checkServerLiveliness(this.props.serverConfig); }, diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js index bfabc34a62..817472552a 100644 --- a/src/components/structures/auth/Login.js +++ b/src/components/structures/auth/Login.js @@ -113,7 +113,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; // map from login step type to a function which will render a control diff --git a/src/components/structures/auth/PostRegistration.js b/src/components/structures/auth/PostRegistration.js index 8eef8dce11..687ab9a195 100644 --- a/src/components/structures/auth/PostRegistration.js +++ b/src/components/structures/auth/PostRegistration.js @@ -37,7 +37,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { // There is some assymetry between ChangeDisplayName and ChangeAvatar, // as ChangeDisplayName will auto-get the name but ChangeAvatar expects // the URL to be passed to you (because it's also used for room avatars). diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js index 7c6a3ea56f..45d775059c 100644 --- a/src/components/structures/auth/Registration.js +++ b/src/components/structures/auth/Registration.js @@ -120,7 +120,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; this._replaceClient(); }, diff --git a/src/components/views/auth/CountryDropdown.js b/src/components/views/auth/CountryDropdown.js index 63dc9d1ada..14a974668b 100644 --- a/src/components/views/auth/CountryDropdown.js +++ b/src/components/views/auth/CountryDropdown.js @@ -60,7 +60,7 @@ export default class CountryDropdown extends React.Component { }; } - componentWillMount() { + componentDidMount() { if (!this.props.value) { // If no value is given, we start with the default // country selected, but our parent component diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index e731b4cc01..04f7dc109b 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -429,7 +429,7 @@ export const MsisdnAuthEntry = createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._submitUrl = null; this._sid = null; this._msisdn = null; diff --git a/src/components/views/avatars/MemberStatusMessageAvatar.js b/src/components/views/avatars/MemberStatusMessageAvatar.js index 54f11e8e91..eef3f86d9a 100644 --- a/src/components/views/avatars/MemberStatusMessageAvatar.js +++ b/src/components/views/avatars/MemberStatusMessageAvatar.js @@ -49,7 +49,7 @@ export default class MemberStatusMessageAvatar extends React.Component { this._button = createRef(); } - componentWillMount() { + componentDidMount() { if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) { throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user"); } diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 4fc6dd58cc..452489aa65 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -61,7 +61,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions); this._checkPermissions(); }, diff --git a/src/components/views/context_menus/RoomTileContextMenu.js b/src/components/views/context_menus/RoomTileContextMenu.js index 2d8dec29c7..d281656bbe 100644 --- a/src/components/views/context_menus/RoomTileContextMenu.js +++ b/src/components/views/context_menus/RoomTileContextMenu.js @@ -82,7 +82,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; }, diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.js index d5cba45956..5e6f06dd5d 100644 --- a/src/components/views/context_menus/StatusMessageContextMenu.js +++ b/src/components/views/context_menus/StatusMessageContextMenu.js @@ -35,7 +35,7 @@ export default class StatusMessageContextMenu extends React.Component { }; } - componentWillMount() { + componentDidMount() { const { user } = this.props; if (!user) { return; diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.js b/src/components/views/dialogs/ConfirmUserActionDialog.js index 14910fbf6d..d7b86d43d5 100644 --- a/src/components/views/dialogs/ConfirmUserActionDialog.js +++ b/src/components/views/dialogs/ConfirmUserActionDialog.js @@ -55,7 +55,7 @@ export default createReactClass({ askReason: false, }), - componentWillMount: function() { + componentDidMount: function() { this._reasonField = null; }, diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index 76faf60eef..96523d1e94 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -36,7 +36,7 @@ export default class RoomSettingsDialog extends React.Component { onFinished: PropTypes.func.isRequired, }; - componentWillMount() { + componentDidMount() { this._dispatcherRef = dis.register(this._onAction); } diff --git a/src/components/views/dialogs/RoomUpgradeDialog.js b/src/components/views/dialogs/RoomUpgradeDialog.js index dc734718d5..c45d82303b 100644 --- a/src/components/views/dialogs/RoomUpgradeDialog.js +++ b/src/components/views/dialogs/RoomUpgradeDialog.js @@ -30,7 +30,7 @@ export default createReactClass({ onFinished: PropTypes.func.isRequired, }, - componentWillMount: async function() { + componentDidMount: async function() { const recommended = await this.props.room.getRecommendedVersion(); this._targetVersion = recommended.version; this.setState({busy: false}); diff --git a/src/components/views/dialogs/SetPasswordDialog.js b/src/components/views/dialogs/SetPasswordDialog.js index c48690bb48..fcc6e67656 100644 --- a/src/components/views/dialogs/SetPasswordDialog.js +++ b/src/components/views/dialogs/SetPasswordDialog.js @@ -75,8 +75,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { - console.info('SetPasswordDialog component will mount'); + componentDidMount: function() { + console.info('SetPasswordDialog component did mount'); }, _onPasswordChanged: function(res) { diff --git a/src/components/views/dialogs/ShareDialog.js b/src/components/views/dialogs/ShareDialog.js index b42a88ceac..cf4735f608 100644 --- a/src/components/views/dialogs/ShareDialog.js +++ b/src/components/views/dialogs/ShareDialog.js @@ -121,7 +121,7 @@ export default class ShareDialog extends React.Component { }); } - componentWillMount() { + componentDidMount() { if (this.props.target instanceof Room) { const permalinkCreator = new RoomPermalinkCreator(this.props.target); permalinkCreator.load(); diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js index 69ebb72a6f..4cad13b047 100644 --- a/src/components/views/dialogs/UnknownDeviceDialog.js +++ b/src/components/views/dialogs/UnknownDeviceDialog.js @@ -87,7 +87,7 @@ export default createReactClass({ onSend: PropTypes.func.isRequired, }, - componentWillMount: function() { + componentDidMount: function() { MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged); }, diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 0a8bf7443b..539eba489c 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.js @@ -147,14 +147,12 @@ export default class AppTile extends React.Component { return false; } - componentWillMount() { + componentDidMount() { // Only fetch IM token on mount if we're showing and have permission to load if (this.props.show && this.state.hasPermissionToLoad) { this.setScalarToken(); } - } - componentDidMount() { // Widget action listeners this.dispatcherRef = dis.register(this._onAction); } diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js index b4d78bb9bc..7328d50328 100644 --- a/src/components/views/elements/DeviceVerifyButtons.js +++ b/src/components/views/elements/DeviceVerifyButtons.js @@ -38,7 +38,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { const cli = MatrixClientPeg.get(); cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged); }, diff --git a/src/components/views/elements/EditableTextContainer.js b/src/components/views/elements/EditableTextContainer.js index 57e1b3d2cd..bbc5560557 100644 --- a/src/components/views/elements/EditableTextContainer.js +++ b/src/components/views/elements/EditableTextContainer.js @@ -42,7 +42,7 @@ export default class EditableTextContainer extends React.Component { this._onValueChanged = this._onValueChanged.bind(this); } - componentWillMount() { + componentDidMount() { if (this.props.getInitialValue === undefined) { // use whatever was given in the initialValue property. return; diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.js index cb4e2e4da6..465176778c 100644 --- a/src/components/views/elements/LanguageDropdown.js +++ b/src/components/views/elements/LanguageDropdown.js @@ -40,7 +40,7 @@ export default class LanguageDropdown extends React.Component { }; } - componentWillMount() { + componentDidMount() { languageHandler.getAllLanguagesFromJson().then((langs) => { langs.sort(function(a, b) { if (a.label < b.label) return -1; diff --git a/src/components/views/elements/PersistentApp.js b/src/components/views/elements/PersistentApp.js index a807ed3b93..ee7bc46e74 100644 --- a/src/components/views/elements/PersistentApp.js +++ b/src/components/views/elements/PersistentApp.js @@ -33,7 +33,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate); ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate); }, diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js index 5f143a06a6..8eda4b30b5 100644 --- a/src/components/views/elements/Pill.js +++ b/src/components/views/elements/Pill.js @@ -155,7 +155,7 @@ const Pill = createReactClass({ this.setState({resourceId, pillType, member, group, room}); }, - componentWillMount() { + componentDidMount() { this._unmounted = false; this._matrixClient = MatrixClientPeg.get(); this.componentWillReceiveProps(this.props); diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js index eff14979a9..8d17c2be57 100644 --- a/src/components/views/elements/PowerSelector.js +++ b/src/components/views/elements/PowerSelector.js @@ -62,7 +62,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._initStateFromProps(this.props); }, diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 0e1f230e57..eae2d13f8a 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -184,7 +184,7 @@ export default class ReplyThread extends React.Component { ref={ref} permalinkCreator={permalinkCreator} />; } - componentWillMount() { + componentDidMount() { this.unmounted = false; this.room = this.context.getRoom(this.props.parentEv.getRoomId()); this.room.on("Room.redaction", this.onRoomRedaction); diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js index 3e0e41f411..66625c7b87 100644 --- a/src/components/views/elements/TintableSvg.js +++ b/src/components/views/elements/TintableSvg.js @@ -36,11 +36,9 @@ const TintableSvg = createReactClass({ idSequence: 0, }, - componentWillMount: function() { - this.fixups = []; - }, - componentDidMount: function() { + this.fixups = []; + this.id = TintableSvg.idSequence++; TintableSvg.mounts[this.id] = this; }, diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js index f70c769ad7..95517ef548 100644 --- a/src/components/views/groups/GroupMemberInfo.js +++ b/src/components/views/groups/GroupMemberInfo.js @@ -49,7 +49,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; this._initGroupStore(this.props.groupId); }, diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 2853e70afa..ca374d1309 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -47,7 +47,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; this._initGroupStore(this.props.groupId); }, diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js index 602f9036d8..81f0f469ef 100644 --- a/src/components/views/groups/GroupPublicityToggle.js +++ b/src/components/views/groups/GroupPublicityToggle.js @@ -36,7 +36,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._initGroupStore(this.props.groupId); }, diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js index 91d84be4d1..789396e719 100644 --- a/src/components/views/groups/GroupRoomInfo.js +++ b/src/components/views/groups/GroupRoomInfo.js @@ -47,7 +47,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._initGroupStore(this.props.groupId); }, diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js index dee304e1f6..5c3e1587db 100644 --- a/src/components/views/groups/GroupRoomList.js +++ b/src/components/views/groups/GroupRoomList.js @@ -39,7 +39,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._unmounted = false; this._initGroupStore(this.props.groupId); }, diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js index 12e2427e69..b845a83c2a 100644 --- a/src/components/views/groups/GroupTile.js +++ b/src/components/views/groups/GroupTile.js @@ -55,7 +55,7 @@ const GroupTile = createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { FlairStore.getGroupProfileCached(this.context, this.props.groupId).then((profile) => { this.setState({profile}); }).catch((err) => { diff --git a/src/components/views/groups/GroupUserSettings.js b/src/components/views/groups/GroupUserSettings.js index a65d23bed7..8f57eccd05 100644 --- a/src/components/views/groups/GroupUserSettings.js +++ b/src/components/views/groups/GroupUserSettings.js @@ -34,7 +34,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this.context.getJoinedGroups().then((result) => { this.setState({groups: result.groups || [], error: null}); }, (err) => { diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 64f2611caf..ad238a728e 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -67,11 +67,6 @@ export default class MImageBody extends React.Component { this._image = createRef(); } - componentWillMount() { - this.unmounted = false; - this.context.on('sync', this.onClientSync); - } - // FIXME: factor this out and aplpy it to MVideoBody and MAudioBody too! onClientSync(syncState, prevState) { if (this.unmounted) return; @@ -258,6 +253,9 @@ export default class MImageBody extends React.Component { } componentDidMount() { + this.unmounted = false; + this.context.on('sync', this.onClientSync); + const content = this.props.mxEvent.getContent(); if (content.file !== undefined && this.state.decryptedUrl === null) { let thumbnailPromise = Promise.resolve(null); diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js index f7da1029e1..bed93b68c3 100644 --- a/src/components/views/messages/SenderProfile.js +++ b/src/components/views/messages/SenderProfile.js @@ -42,7 +42,7 @@ export default createReactClass({ }; }, - componentWillMount() { + componentDidMount() { this.unmounted = false; this._updateRelatedGroups(); diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index dbcae4529a..03b03218ee 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -40,7 +40,7 @@ export default class HeaderButtons extends React.Component { }; } - componentWillMount() { + componentDidMount() { this._storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this)); this._dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses } diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index f81a5630a4..508b149322 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -55,13 +55,10 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { ScalarMessaging.startListening(); MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents); WidgetEchoStore.on('update', this._updateApps); - }, - - componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); }, diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js index 1d01f68551..d6ea0ec5f0 100644 --- a/src/components/views/rooms/EditMessageComposer.js +++ b/src/components/views/rooms/EditMessageComposer.js @@ -223,7 +223,7 @@ export default class EditMessageComposer extends React.Component { this.props.editState.setEditorState(caret, parts); } - componentWillMount() { + componentDidMount() { this._createEditorModel(); } diff --git a/src/components/views/rooms/ForwardMessage.js b/src/components/views/rooms/ForwardMessage.js index 78466f7cb5..a3c00598a7 100644 --- a/src/components/views/rooms/ForwardMessage.js +++ b/src/components/views/rooms/ForwardMessage.js @@ -30,14 +30,12 @@ export default createReactClass({ onCancelClick: PropTypes.func.isRequired, }, - componentWillMount: function() { + componentDidMount: function() { dis.dispatch({ action: 'panel_disable', middleDisabled: true, }); - }, - componentDidMount: function() { document.addEventListener('keydown', this._onKeyDown); }, diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 7c187bd17a..f83e183b85 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -79,7 +79,7 @@ export default createReactClass({ contextType: MatrixClientContext, }, - componentWillMount: function() { + componentDidMount: function() { this._cancelDeviceList = null; const cli = this.context; @@ -98,9 +98,7 @@ export default createReactClass({ cli.on("accountData", this.onAccountData); this._checkIgnoreState(); - }, - componentDidMount: function() { this._updateStateForNewMember(this.props.member); }, diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index edd2f52496..dfa7e856b4 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -49,7 +49,7 @@ export default createReactClass({ } }, - componentWillMount: function() { + componentDidMount: function() { this._mounted = true; const cli = MatrixClientPeg.get(); if (cli.hasLazyLoadMembersEnabled()) { diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js index f9408d3259..ad8a5cfef9 100644 --- a/src/components/views/rooms/RoomBreadcrumbs.js +++ b/src/components/views/rooms/RoomBreadcrumbs.js @@ -49,7 +49,7 @@ export default class RoomBreadcrumbs extends React.Component { this._scroller = createRef(); } - componentWillMount() { + componentDidMount() { this._dispatcherRef = dis.register(this.onAction); const storedRooms = SettingsStore.getValue("breadcrumb_rooms"); diff --git a/src/components/views/rooms/RoomNameEditor.js b/src/components/views/rooms/RoomNameEditor.js index b65d89ee6f..ab355b1f9e 100644 --- a/src/components/views/rooms/RoomNameEditor.js +++ b/src/components/views/rooms/RoomNameEditor.js @@ -34,7 +34,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { const room = this.props.room; const name = room.currentState.getStateEvents('m.room.name', ''); const myId = MatrixClientPeg.get().credentials.userId; diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js index 4ff5dd5198..85c41f30ec 100644 --- a/src/components/views/rooms/RoomPreviewBar.js +++ b/src/components/views/rooms/RoomPreviewBar.js @@ -97,7 +97,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._checkInvitedEmail(); }, diff --git a/src/components/views/rooms/RoomRecoveryReminder.js b/src/components/views/rooms/RoomRecoveryReminder.js index 50521cdd37..3678193af2 100644 --- a/src/components/views/rooms/RoomRecoveryReminder.js +++ b/src/components/views/rooms/RoomRecoveryReminder.js @@ -44,7 +44,7 @@ export default class RoomRecoveryReminder extends React.PureComponent { }; } - componentWillMount() { + componentDidMount() { this._loadBackupStatus(); } diff --git a/src/components/views/rooms/RoomTopicEditor.js b/src/components/views/rooms/RoomTopicEditor.js index 5decce02a9..0adc0ff1d6 100644 --- a/src/components/views/rooms/RoomTopicEditor.js +++ b/src/components/views/rooms/RoomTopicEditor.js @@ -33,7 +33,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { const room = this.props.room; const topic = room.currentState.getStateEvents('m.room.topic', ''); this.setState({ diff --git a/src/components/views/rooms/RoomUpgradeWarningBar.js b/src/components/views/rooms/RoomUpgradeWarningBar.js index 1240900e28..7d5bc89034 100644 --- a/src/components/views/rooms/RoomUpgradeWarningBar.js +++ b/src/components/views/rooms/RoomUpgradeWarningBar.js @@ -31,7 +31,7 @@ export default createReactClass({ recommendation: PropTypes.object.isRequired, }, - componentWillMount: function() { + componentDidMount: function() { const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", ""); this.setState({upgraded: tombstone && tombstone.getContent().replacement_room}); diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.js b/src/components/views/rooms/ThirdPartyMemberInfo.js index f8d9069ca6..3e6ed16aa4 100644 --- a/src/components/views/rooms/ThirdPartyMemberInfo.js +++ b/src/components/views/rooms/ThirdPartyMemberInfo.js @@ -51,7 +51,7 @@ export default class ThirdPartyMemberInfo extends React.Component { }; } - componentWillMount(): void { + componentDidMount(): void { MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents); } diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js index 9683d00e51..b56a75582f 100644 --- a/src/components/views/rooms/WhoIsTypingTile.js +++ b/src/components/views/rooms/WhoIsTypingTile.js @@ -54,7 +54,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping); MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline); }, diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js index 5b6b6ae3de..76644d38bc 100644 --- a/src/components/views/settings/ChangeAvatar.js +++ b/src/components/views/settings/ChangeAvatar.js @@ -55,7 +55,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents); }, diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js index 6607458b40..7c88573e9c 100644 --- a/src/components/views/settings/ChangePassword.js +++ b/src/components/views/settings/ChangePassword.js @@ -78,7 +78,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._sessionStore = sessionStore; this._sessionStoreToken = this._sessionStore.addListener( this._setStateFromSessionStore, diff --git a/src/components/views/settings/EventIndexPanel.js b/src/components/views/settings/EventIndexPanel.js index 203a7ee46e..c9c6a5ec4f 100644 --- a/src/components/views/settings/EventIndexPanel.js +++ b/src/components/views/settings/EventIndexPanel.js @@ -63,7 +63,7 @@ export default class EventIndexPanel extends React.Component { } } - async componentWillMount(): void { + async componentDidMount(): void { this.updateState(); } diff --git a/src/components/views/settings/KeyBackupPanel.js b/src/components/views/settings/KeyBackupPanel.js index 27fdb2cb56..9d60ed1188 100644 --- a/src/components/views/settings/KeyBackupPanel.js +++ b/src/components/views/settings/KeyBackupPanel.js @@ -38,7 +38,7 @@ export default class KeyBackupPanel extends React.PureComponent { }; } - componentWillMount() { + componentDidMount() { this._checkKeyBackupStatus(); MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatus); diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js index 1f4bde6eab..a3173f18bb 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.js @@ -87,7 +87,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._refreshFromServer(); }, diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js b/src/components/views/settings/tabs/user/HelpUserSettingsTab.js index 9a2db8113e..146d841d58 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.js @@ -40,7 +40,7 @@ export default class HelpUserSettingsTab extends React.Component { }; } - componentWillMount(): void { + componentDidMount(): void { PlatformPeg.get().getAppVersion().then((ver) => this.setState({vectorVersion: ver})).catch((e) => { console.error("Error getting vector version: ", e); }); diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js index bdcb25dd51..bdb2a9ffc4 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js @@ -81,7 +81,7 @@ export default class PreferencesUserSettingsTab extends React.Component { }; } - async componentWillMount(): void { + async componentDidMount(): void { const platform = PlatformPeg.get(); const autoLaunchSupported = await platform.supportsAutoLaunch(); diff --git a/src/components/views/voip/CallPreview.js b/src/components/views/voip/CallPreview.js index 57bf35a719..049dd8a3c6 100644 --- a/src/components/views/voip/CallPreview.js +++ b/src/components/views/voip/CallPreview.js @@ -40,7 +40,7 @@ export default createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate); this.dispatcherRef = dis.register(this._onAction); }, From 0a6f54da335b80ec4fb18812b5c93b6ac2380485 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 31 Mar 2020 14:12:52 -0600 Subject: [PATCH 23/93] Label and use UNSAFE_componentWillMount to minimize warnings These TODO comments are expected to be fixed ASAP, but until that happens let's minimize the errors in the console for development. For https://github.com/vector-im/riot-web/issues/12877 These all aren't using componentDidMount because they do something which causes application instability if componentDidMount were used. Much of these calls are expected to move into constructors once they are converted to real classes. --- src/async-components/views/dialogs/ExportE2eKeysDialog.js | 3 ++- src/async-components/views/dialogs/ImportE2eKeysDialog.js | 3 ++- src/components/structures/InteractiveAuth.js | 3 ++- src/components/structures/LoggedInView.js | 3 ++- src/components/structures/RoomView.js | 3 ++- src/components/structures/ScrollPanel.js | 5 ++--- src/components/structures/SearchBox.js | 1 + src/components/structures/TimelinePanel.js | 3 ++- src/components/views/auth/CaptchaForm.js | 3 ++- src/components/views/auth/InteractiveAuthEntryComponents.js | 4 +++- src/components/views/dialogs/AddressPickerDialog.js | 1 + src/components/views/dialogs/BaseDialog.js | 3 ++- src/components/views/dialogs/SetMxIdDialog.js | 1 + src/components/views/dialogs/TextInputDialog.js | 1 + src/components/views/elements/Dropdown.js | 3 ++- src/components/views/elements/EditableText.js | 3 ++- src/components/views/elements/PowerSelector.js | 1 + src/components/views/elements/UserSelector.js | 1 + src/components/views/messages/MFileBody.js | 1 + src/components/views/messages/MessageEvent.js | 1 + src/components/views/messages/TextualBody.js | 1 + src/components/views/rooms/EventTile.js | 3 ++- src/components/views/rooms/LinkPreviewWidget.js | 3 ++- src/components/views/rooms/ReadReceiptMarker.js | 1 + src/components/views/rooms/RoomDetailRow.js | 1 + src/components/views/rooms/RoomHeader.js | 1 + src/components/views/rooms/RoomList.js | 3 ++- src/components/views/rooms/RoomTile.js | 1 + src/components/views/rooms/SearchBar.js | 1 + src/components/views/rooms/SendMessageComposer.js | 3 ++- .../views/settings/tabs/room/AdvancedRoomSettingsTab.js | 3 ++- .../views/settings/tabs/room/NotificationSettingsTab.js | 3 ++- .../views/settings/tabs/room/SecurityRoomSettingsTab.js | 3 ++- .../views/settings/tabs/user/GeneralUserSettingsTab.js | 3 ++- src/components/views/voip/CallView.js | 1 + src/components/views/voip/VideoFeed.js | 1 + src/components/views/voip/VideoView.js | 1 + 37 files changed, 58 insertions(+), 22 deletions(-) diff --git a/src/async-components/views/dialogs/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/ExportE2eKeysDialog.js index 481075d0fa..7ec9da39de 100644 --- a/src/async-components/views/dialogs/ExportE2eKeysDialog.js +++ b/src/async-components/views/dialogs/ExportE2eKeysDialog.js @@ -42,7 +42,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { this._unmounted = false; this._passphrase1 = createRef(); diff --git a/src/async-components/views/dialogs/ImportE2eKeysDialog.js b/src/async-components/views/dialogs/ImportE2eKeysDialog.js index 591c84f5d3..6b9d2c7e45 100644 --- a/src/async-components/views/dialogs/ImportE2eKeysDialog.js +++ b/src/async-components/views/dialogs/ImportE2eKeysDialog.js @@ -54,7 +54,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { this._unmounted = false; this._file = createRef(); diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js index f4adb5751f..b2441f1bf8 100644 --- a/src/components/structures/InteractiveAuth.js +++ b/src/components/structures/InteractiveAuth.js @@ -87,7 +87,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { this._unmounted = false; this._authLogic = new InteractiveAuth({ authData: this.props.authData, diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index e7a6f4c1a9..02ca8df0a7 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -94,7 +94,8 @@ const LoggedInView = createReactClass({ this._loadResizerPreferences(); }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { // stash the MatrixClient in case we log out before we are unmounted this._matrixClient = this.props.matrixClient; diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 2c9e798bd8..4a3666fc38 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -168,7 +168,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { this.dispatcherRef = dis.register(this.onAction); this.context.on("Room", this.onRoom); this.context.on("Room.timeline", this.onRoomTimeline); diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js index c218fee5d6..4f44c1a169 100644 --- a/src/components/structures/ScrollPanel.js +++ b/src/components/structures/ScrollPanel.js @@ -156,9 +156,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { - this._fillRequestWhileRunning = false; - this._isFilling = false; + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { this._pendingFillRequests = {b: null, f: null}; if (this.props.resizeNotifier) { diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index e169e09752..0f3f8a6be9 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -53,6 +53,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._search = createRef(); }, diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 25526c3139..1bea707fd3 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -202,7 +202,8 @@ const TimelinePanel = createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { debuglog("TimelinePanel: mounting"); this.lastRRSentEventId = undefined; diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.js index 1b9dd3a97d..e162603b01 100644 --- a/src/components/views/auth/CaptchaForm.js +++ b/src/components/views/auth/CaptchaForm.js @@ -46,7 +46,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { this._captchaWidgetId = null; this._recaptchaContainer = createRef(); diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js index e731b4cc01..794f270cf3 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.js +++ b/src/components/views/auth/InteractiveAuthEntryComponents.js @@ -238,6 +238,7 @@ export const TermsAuthEntry = createReactClass({ showContinue: PropTypes.bool, }, + // TODO: [REACT-WARNING] Move this to constructor componentWillMount: function() { // example stageParams: // @@ -575,7 +576,8 @@ export const FallbackAuthEntry = createReactClass({ errorText: PropTypes.string, }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { // we have to make the user click a button, as browsers will block // the popup if we open it immediately. this._popupWindow = null; diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js index e309c3a0cf..451ec9cfde 100644 --- a/src/components/views/dialogs/AddressPickerDialog.js +++ b/src/components/views/dialogs/AddressPickerDialog.js @@ -107,6 +107,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._textinput = createRef(); }, diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js index 9238024b60..67d70aabe4 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/src/components/views/dialogs/BaseDialog.js @@ -86,7 +86,8 @@ export default createReactClass({ }; }, - componentWillMount() { + // TODO: [REACT-WARNING] Move this to constructor + UNSAFE_componentWillMount() { this._matrixClient = MatrixClientPeg.get(); }, diff --git a/src/components/views/dialogs/SetMxIdDialog.js b/src/components/views/dialogs/SetMxIdDialog.js index 611ea64e49..f99d065e7e 100644 --- a/src/components/views/dialogs/SetMxIdDialog.js +++ b/src/components/views/dialogs/SetMxIdDialog.js @@ -62,6 +62,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._input_value = createRef(); this._uiAuth = createRef(); diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js index b6b29f4350..d7ca3f144d 100644 --- a/src/components/views/dialogs/TextInputDialog.js +++ b/src/components/views/dialogs/TextInputDialog.js @@ -55,6 +55,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._field = createRef(); }, diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.js index 03ab8c5c68..6c73592dbb 100644 --- a/src/components/views/elements/Dropdown.js +++ b/src/components/views/elements/Dropdown.js @@ -116,7 +116,8 @@ export default class Dropdown extends React.Component { }; } - componentWillMount() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount() { this._button = createRef(); // Listen for all clicks on the document so we can close the // menu when the user clicks somewhere else diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js index fbac63cbba..af05600e3c 100644 --- a/src/components/views/elements/EditableText.js +++ b/src/components/views/elements/EditableText.js @@ -71,7 +71,8 @@ export default createReactClass({ } }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { // we track value as an JS object field rather than in React state // as React doesn't play nice with contentEditable. this.value = ''; diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js index eff14979a9..5d89207024 100644 --- a/src/components/views/elements/PowerSelector.js +++ b/src/components/views/elements/PowerSelector.js @@ -63,6 +63,7 @@ export default createReactClass({ }, componentWillMount: function() { + // TODO: [REACT-WARNING] Move this to class constructor this._initStateFromProps(this.props); }, diff --git a/src/components/views/elements/UserSelector.js b/src/components/views/elements/UserSelector.js index 706c6ed2e5..ffb577e090 100644 --- a/src/components/views/elements/UserSelector.js +++ b/src/components/views/elements/UserSelector.js @@ -35,6 +35,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._user_id_input = createRef(); }, diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js index 125c538f82..2f2521f02d 100644 --- a/src/components/views/messages/MFileBody.js +++ b/src/components/views/messages/MFileBody.js @@ -170,6 +170,7 @@ export default createReactClass({ return MatrixClientPeg.get().mxcUrlToHttp(content.url); }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._iframe = createRef(); this._dummyLink = createRef(); diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index 604cd19c93..beba986104 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -47,6 +47,7 @@ export default createReactClass({ maxImageHeight: PropTypes.number, }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._body = createRef(); }, diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index ac0fc65ff4..c1de376385 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -86,6 +86,7 @@ export default createReactClass({ return successful; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._content = createRef(); }, diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 26c8a54f4e..a381a02d80 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -233,7 +233,8 @@ export default createReactClass({ contextType: MatrixClientContext, }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { // don't do RR animations until we are mounted this._suppressReadReceiptAnimation = true; this._verifyEvent(this.props.mxEvent); diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js index 4169a763b7..1fe70dc61c 100644 --- a/src/components/views/rooms/LinkPreviewWidget.js +++ b/src/components/views/rooms/LinkPreviewWidget.js @@ -43,7 +43,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount: function() { this.unmounted = false; MatrixClientPeg.get().getUrlPreview(this.props.link, this.props.mxEvent.getTs()).then((res)=>{ if (this.unmounted) { diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index 7704291631..dcb8fd4310 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -87,6 +87,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._avatar = createRef(); }, diff --git a/src/components/views/rooms/RoomDetailRow.js b/src/components/views/rooms/RoomDetailRow.js index 2210406c18..a88fae9e42 100644 --- a/src/components/views/rooms/RoomDetailRow.js +++ b/src/components/views/rooms/RoomDetailRow.js @@ -54,6 +54,7 @@ export default createReactClass({ } }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._topic = createRef(); }, diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 61abfe86cf..71f774248f 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -58,6 +58,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._topic = createRef(); }, diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 87299281ff..6d89f17e87 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -118,7 +118,8 @@ export default createReactClass({ }; }, - componentWillMount: function() { + // TODO: [REACT-WARNING] Replace component with real class, put this in the constructor. + UNSAFE_componentWillMount: function() { this.mounted = false; const cli = MatrixClientPeg.get(); diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 0c913b32da..f0ed34ce8b 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -224,6 +224,7 @@ export default createReactClass({ }); }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._roomTile = createRef(); }, diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js index 1f9ec87163..1d2e7ed602 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.js @@ -30,6 +30,7 @@ export default createReactClass({ }); }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._search_term = createRef(); }, diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index d87d99dc46..a1caf6ee94 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -331,7 +331,8 @@ export default class SendMessageComposer extends React.Component { this._editorRef.getEditableRootNode().removeEventListener("paste", this._onPaste, true); } - componentWillMount() { + // TODO: [REACT-WARNING] Move this to constructor + UNSAFE_componentWillMount() { const partCreator = new CommandPartCreator(this.props.room, this.context); const parts = this._restoreStoredEditorState(partCreator) || []; this.model = new EditorModel(parts, partCreator); diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js index 6be868dc40..bbc0aa7fae 100644 --- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js @@ -38,7 +38,8 @@ export default class AdvancedRoomSettingsTab extends React.Component { }; } - componentWillMount() { + // TODO: [REACT-WARNING] Move this to constructor + UNSAFE_componentWillMount() { // we handle lack of this object gracefully later, so don't worry about it failing here. const room = MatrixClientPeg.get().getRoom(this.props.roomId); room.getRecommendedVersion().then((v) => { diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.js b/src/components/views/settings/tabs/room/NotificationSettingsTab.js index 9db27651c0..478f6c2118 100644 --- a/src/components/views/settings/tabs/room/NotificationSettingsTab.js +++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.js @@ -37,7 +37,8 @@ export default class NotificationsSettingsTab extends React.Component { }; } - componentWillMount() { + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs + UNSAFE_componentWillMount() { Notifier.getSoundForRoom(this.props.roomId).then((soundData) => { if (!soundData) { return; diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js index 3ee92c31c8..0e77a4d81f 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js @@ -41,7 +41,8 @@ export default class SecurityRoomSettingsTab extends React.Component { }; } - async componentWillMount(): void { + // TODO: [REACT-WARNING] Move this to constructor + async UNSAFE_componentWillMount(): void { MatrixClientPeg.get().on("RoomState.events", this._onStateEvent); const room = MatrixClientPeg.get().getRoom(this.props.roomId); diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index f67c56f3d6..1ab43dcd7a 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -68,7 +68,8 @@ export default class GeneralUserSettingsTab extends React.Component { this.dispatcherRef = dis.register(this._onAction); } - async componentWillMount() { + // TODO: [REACT-WARNING] Move this to constructor + async UNSAFE_componentWillMount() { const cli = MatrixClientPeg.get(); const serverSupportsSeparateAddAndBind = await cli.doesServerSupportSeparateAddAndBind(); diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js index 70d7963bcb..4a5f3923e2 100644 --- a/src/components/views/voip/CallView.js +++ b/src/components/views/voip/CallView.js @@ -57,6 +57,7 @@ export default createReactClass({ }; }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._video = createRef(); }, diff --git a/src/components/views/voip/VideoFeed.js b/src/components/views/voip/VideoFeed.js index 4210c60177..527b071942 100644 --- a/src/components/views/voip/VideoFeed.js +++ b/src/components/views/voip/VideoFeed.js @@ -31,6 +31,7 @@ export default createReactClass({ onResize: PropTypes.func, }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount() { this._vid = createRef(); }, diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js index eabf29813a..51be6db81d 100644 --- a/src/components/views/voip/VideoView.js +++ b/src/components/views/voip/VideoView.js @@ -50,6 +50,7 @@ export default createReactClass({ onResize: PropTypes.func, }, + // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs UNSAFE_componentWillMount: function() { this._local = createRef(); this._remote = createRef(); From 6d0d77f98e6132ff895a291cba313fec0fa73c34 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 31 Mar 2020 14:21:12 -0600 Subject: [PATCH 24/93] Disable the linter on lines it complaints about UNSAFE_componentWillMount --- src/components/views/elements/Dropdown.js | 2 +- src/components/views/rooms/SendMessageComposer.js | 2 +- .../views/settings/tabs/room/AdvancedRoomSettingsTab.js | 2 +- .../views/settings/tabs/room/NotificationSettingsTab.js | 2 +- .../views/settings/tabs/room/SecurityRoomSettingsTab.js | 2 +- .../views/settings/tabs/user/GeneralUserSettingsTab.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.js index 6c73592dbb..ed5928eb08 100644 --- a/src/components/views/elements/Dropdown.js +++ b/src/components/views/elements/Dropdown.js @@ -117,7 +117,7 @@ export default class Dropdown extends React.Component { } // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs - UNSAFE_componentWillMount() { + UNSAFE_componentWillMount() { // eslint-disable-line camelcase this._button = createRef(); // Listen for all clicks on the document so we can close the // menu when the user clicks somewhere else diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index a1caf6ee94..233bb110be 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -332,7 +332,7 @@ export default class SendMessageComposer extends React.Component { } // TODO: [REACT-WARNING] Move this to constructor - UNSAFE_componentWillMount() { + UNSAFE_componentWillMount() { // eslint-disable-line camelcase const partCreator = new CommandPartCreator(this.props.room, this.context); const parts = this._restoreStoredEditorState(partCreator) || []; this.model = new EditorModel(parts, partCreator); diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js index bbc0aa7fae..9ee9c8d130 100644 --- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js @@ -39,7 +39,7 @@ export default class AdvancedRoomSettingsTab extends React.Component { } // TODO: [REACT-WARNING] Move this to constructor - UNSAFE_componentWillMount() { + UNSAFE_componentWillMount() { // eslint-disable-line camelcase // we handle lack of this object gracefully later, so don't worry about it failing here. const room = MatrixClientPeg.get().getRoom(this.props.roomId); room.getRecommendedVersion().then((v) => { diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.js b/src/components/views/settings/tabs/room/NotificationSettingsTab.js index 478f6c2118..96e6b3d354 100644 --- a/src/components/views/settings/tabs/room/NotificationSettingsTab.js +++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.js @@ -38,7 +38,7 @@ export default class NotificationsSettingsTab extends React.Component { } // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs - UNSAFE_componentWillMount() { + UNSAFE_componentWillMount() { // eslint-disable-line camelcase Notifier.getSoundForRoom(this.props.roomId).then((soundData) => { if (!soundData) { return; diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js index 0e77a4d81f..eb2b885a22 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js @@ -42,7 +42,7 @@ export default class SecurityRoomSettingsTab extends React.Component { } // TODO: [REACT-WARNING] Move this to constructor - async UNSAFE_componentWillMount(): void { + async UNSAFE_componentWillMount(): void { // eslint-disable-line camelcase MatrixClientPeg.get().on("RoomState.events", this._onStateEvent); const room = MatrixClientPeg.get().getRoom(this.props.roomId); diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index 1ab43dcd7a..801062bff4 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -69,7 +69,7 @@ export default class GeneralUserSettingsTab extends React.Component { } // TODO: [REACT-WARNING] Move this to constructor - async UNSAFE_componentWillMount() { + async UNSAFE_componentWillMount() { // eslint-disable-line camelcase const cli = MatrixClientPeg.get(); const serverSupportsSeparateAddAndBind = await cli.doesServerSupportSeparateAddAndBind(); From 538147f7fa492e0a21262c6b5d97b7e65da9f4af Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 1 Apr 2020 10:00:33 +0100 Subject: [PATCH 25/93] Better support for widgets overriding their URLs Move the URL processing into AppTile so that the widget can have a URL used for embedding in the page and a separate one for popping out into a browser. --- src/components/views/elements/AppTile.js | 172 ++++++++++++------ .../views/elements/PersistentApp.js | 8 +- src/components/views/rooms/AppsDrawer.js | 6 +- src/components/views/rooms/Stickerpicker.js | 13 +- src/utils/AutoDiscoveryUtils.js | 9 +- src/utils/WidgetUtils.js | 58 ------ 6 files changed, 135 insertions(+), 131 deletions(-) diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 0a8bf7443b..1eb4e5bf90 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.js @@ -2,6 +2,7 @@ Copyright 2017 Vector Creations Ltd Copyright 2018 New Vector Ltd Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +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. @@ -41,12 +42,30 @@ import PersistedElement from "./PersistedElement"; const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:']; const ENABLE_REACT_PERF = false; +/** + * Does template substitution on a URL (or any string). Variables will be + * passed through encodeURIComponent. + * @param {string} uriTemplate The path with template variables e.g. '/foo/$bar'. + * @param {Object} variables The key/value pairs to replace the template + * variables with. E.g. { '$bar': 'baz' }. + * @return {string} The result of replacing all template variables e.g. '/foo/baz'. + */ +function uriFromTemplate(uriTemplate, variables) { + let out = uriTemplate; + for (const [key, val] of Object.entries(variables)) { + out = out.replace( + '$' + key, encodeURIComponent(val), + ); + } + return out; +} + export default class AppTile extends React.Component { constructor(props) { super(props); // The key used for PersistedElement - this._persistKey = 'widget_' + this.props.id; + this._persistKey = 'widget_' + this.props.app.id; this.state = this._getNewState(props); @@ -78,7 +97,7 @@ export default class AppTile extends React.Component { // This is a function to make the impact of calling SettingsStore slightly less const hasPermissionToLoad = () => { const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", newProps.room.roomId); - return !!currentlyAllowedWidgets[newProps.eventId]; + return !!currentlyAllowedWidgets[newProps.app.eventId]; }; const PersistedElement = sdk.getComponent("elements.PersistedElement"); @@ -86,7 +105,7 @@ export default class AppTile extends React.Component { initialising: true, // True while we are mangling the widget URL // True while the iframe content is loading loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey), - widgetUrl: this._addWurlParams(newProps.url), + widgetUrl: this._addWurlParams(newProps.app.url), // Assume that widget has permission to load if we are the user who // added it to the room, or if explicitly granted by the user hasPermissionToLoad: newProps.userId === newProps.creatorUserId || hasPermissionToLoad(), @@ -103,7 +122,7 @@ export default class AppTile extends React.Component { * @return {Boolean} True if capability supported */ _hasCapability(capability) { - return ActiveWidgetStore.widgetHasCapability(this.props.id, capability); + return ActiveWidgetStore.widgetHasCapability(this.props.app.id, capability); } /** @@ -125,7 +144,7 @@ export default class AppTile extends React.Component { const params = qs.parse(u.query); // Append widget ID to query parameters - params.widgetId = this.props.id; + params.widgetId = this.props.app.id; // Append current / parent URL, minus the hash because that will change when // we view a different room (ie. may change for persistent widgets) params.parentUrl = window.location.href.split('#', 2)[0]; @@ -137,11 +156,11 @@ export default class AppTile extends React.Component { isMixedContent() { const parentContentProtocol = window.location.protocol; - const u = url.parse(this.props.url); + const u = url.parse(this.props.app.url); const childContentProtocol = u.protocol; if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') { console.warn("Refusing to load mixed-content app:", - parentContentProtocol, childContentProtocol, window.location, this.props.url); + parentContentProtocol, childContentProtocol, window.location, this.props.app.url); return true; } return false; @@ -164,8 +183,8 @@ export default class AppTile extends React.Component { dis.unregister(this.dispatcherRef); // if it's not remaining on screen, get rid of the PersistedElement container - if (!ActiveWidgetStore.getWidgetPersistence(this.props.id)) { - ActiveWidgetStore.destroyPersistentWidget(this.props.id); + if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) { + ActiveWidgetStore.destroyPersistentWidget(this.props.app.id); const PersistedElement = sdk.getComponent("elements.PersistedElement"); PersistedElement.destroyElement(this._persistKey); } @@ -176,11 +195,11 @@ export default class AppTile extends React.Component { * Component initialisation is only complete when this function has resolved */ setScalarToken() { - if (!WidgetUtils.isScalarUrl(this.props.url)) { + if (!WidgetUtils.isScalarUrl(this.props.app.url)) { console.warn('Non-scalar widget, not setting scalar token!', url); this.setState({ error: null, - widgetUrl: this._addWurlParams(this.props.url), + widgetUrl: this._addWurlParams(this.props.app.url), initialising: false, }); return; @@ -191,7 +210,7 @@ export default class AppTile extends React.Component { console.warn("No integration manager - not setting scalar token", url); this.setState({ error: null, - widgetUrl: this._addWurlParams(this.props.url), + widgetUrl: this._addWurlParams(this.props.app.url), initialising: false, }); return; @@ -204,7 +223,7 @@ export default class AppTile extends React.Component { console.warn('Non-scalar manager, not setting scalar token!', url); this.setState({ error: null, - widgetUrl: this._addWurlParams(this.props.url), + widgetUrl: this._addWurlParams(this.props.app.url), initialising: false, }); return; @@ -217,7 +236,7 @@ export default class AppTile extends React.Component { this._scalarClient.getScalarToken().then((token) => { // Append scalar_token as a query param if not already present this._scalarClient.scalarToken = token; - const u = url.parse(this._addWurlParams(this.props.url)); + const u = url.parse(this._addWurlParams(this.props.app.url)); const params = qs.parse(u.query); if (!params.scalar_token) { params.scalar_token = encodeURIComponent(token); @@ -246,7 +265,7 @@ export default class AppTile extends React.Component { } componentWillReceiveProps(nextProps) { - if (nextProps.url !== this.props.url) { + if (nextProps.app.url !== this.props.app.url) { this._getNewState(nextProps); // Fetch IM token for new URL if we're showing and have permission to load if (this.props.show && this.state.hasPermissionToLoad) { @@ -280,7 +299,7 @@ export default class AppTile extends React.Component { } _onEditClick() { - console.log("Edit widget ID ", this.props.id); + console.log("Edit widget ID ", this.props.app.id); if (this.props.onEditClick) { this.props.onEditClick(); } else { @@ -289,13 +308,13 @@ export default class AppTile extends React.Component { IntegrationManagers.sharedInstance().openAll( this.props.room, 'type_' + this.props.type, - this.props.id, + this.props.app.id, ); } else { IntegrationManagers.sharedInstance().getPrimaryManager().open( this.props.room, 'type_' + this.props.type, - this.props.id, + this.props.app.id, ); } } @@ -303,7 +322,7 @@ export default class AppTile extends React.Component { _onSnapshotClick() { console.warn("Requesting widget snapshot"); - ActiveWidgetStore.getWidgetMessaging(this.props.id).getScreenshot() + ActiveWidgetStore.getWidgetMessaging(this.props.app.id).getScreenshot() .catch((err) => { console.error("Failed to get screenshot", err); }) @@ -351,7 +370,7 @@ export default class AppTile extends React.Component { WidgetUtils.setRoomWidget( this.props.room.roomId, - this.props.id, + this.props.app.id, ).catch((e) => { console.error('Failed to delete widget', e); const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); @@ -369,7 +388,7 @@ export default class AppTile extends React.Component { } _onRevokeClicked() { - console.info("Revoke widget permissions - %s", this.props.id); + console.info("Revoke widget permissions - %s", this.props.app.id); this._revokeWidgetPermission(); } @@ -380,10 +399,10 @@ export default class AppTile extends React.Component { // Destroy the old widget messaging before starting it back up again. Some widgets // have startup routines that run when they are loaded, so we just need to reinitialize // the messaging for them. - ActiveWidgetStore.delWidgetMessaging(this.props.id); + ActiveWidgetStore.delWidgetMessaging(this.props.app.id); this._setupWidgetMessaging(); - ActiveWidgetStore.setRoomId(this.props.id, this.props.room.roomId); + ActiveWidgetStore.setRoomId(this.props.app.id, this.props.room.roomId); this.setState({loading: false}); } @@ -391,10 +410,10 @@ export default class AppTile extends React.Component { // FIXME: There's probably no reason to do this here: it should probably be done entirely // in ActiveWidgetStore. const widgetMessaging = new WidgetMessaging( - this.props.id, this.props.url, this.props.userWidget, this._appFrame.current.contentWindow); - ActiveWidgetStore.setWidgetMessaging(this.props.id, widgetMessaging); + this.props.app.id, this._getRenderedUrl(), this.props.userWidget, this._appFrame.current.contentWindow); + ActiveWidgetStore.setWidgetMessaging(this.props.app.id, widgetMessaging); widgetMessaging.getCapabilities().then((requestedCapabilities) => { - console.log(`Widget ${this.props.id} requested capabilities: ` + requestedCapabilities); + console.log(`Widget ${this.props.app.id} requested capabilities: ` + requestedCapabilities); requestedCapabilities = requestedCapabilities || []; // Allow whitelisted capabilities @@ -406,7 +425,7 @@ export default class AppTile extends React.Component { }, this.props.whitelistCapabilities); if (requestedWhitelistCapabilies.length > 0 ) { - console.warn(`Widget ${this.props.id} allowing requested, whitelisted properties: ` + + console.warn(`Widget ${this.props.app.id} allowing requested, whitelisted properties: ` + requestedWhitelistCapabilies, ); } @@ -414,7 +433,7 @@ export default class AppTile extends React.Component { // TODO -- Add UI to warn about and optionally allow requested capabilities - ActiveWidgetStore.setWidgetCapabilities(this.props.id, requestedWhitelistCapabilies); + ActiveWidgetStore.setWidgetCapabilities(this.props.app.id, requestedWhitelistCapabilies); if (this.props.onCapabilityRequest) { this.props.onCapabilityRequest(requestedCapabilities); @@ -422,16 +441,16 @@ export default class AppTile extends React.Component { // We only tell Jitsi widgets that we're ready because they're realistically the only ones // using this custom extension to the widget API. - if (this.props.type === 'jitsi') { + if (this.props.app.type === 'jitsi') { widgetMessaging.flagReadyToContinue(); } }).catch((err) => { - console.log(`Failed to get capabilities for widget type ${this.props.type}`, this.props.id, err); + console.log(`Failed to get capabilities for widget type ${this.props.app.type}`, this.props.app.id, err); }); } _onAction(payload) { - if (payload.widgetId === this.props.id) { + if (payload.widgetId === this.props.app.id) { switch (payload.action) { case 'm.sticker': if (this._hasCapability('m.sticker')) { @@ -460,9 +479,9 @@ export default class AppTile extends React.Component { _grantWidgetPermission() { const roomId = this.props.room.roomId; - console.info("Granting permission for widget to load: " + this.props.eventId); + console.info("Granting permission for widget to load: " + this.props.app.eventId); const current = SettingsStore.getValue("allowedWidgets", roomId); - current[this.props.eventId] = true; + current[this.props.app.eventId] = true; SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => { this.setState({hasPermissionToLoad: true}); @@ -476,14 +495,14 @@ export default class AppTile extends React.Component { _revokeWidgetPermission() { const roomId = this.props.room.roomId; - console.info("Revoking permission for widget to load: " + this.props.eventId); + console.info("Revoking permission for widget to load: " + this.props.app.eventId); const current = SettingsStore.getValue("allowedWidgets", roomId); - current[this.props.eventId] = false; + current[this.props.app.eventId] = false; SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => { this.setState({hasPermissionToLoad: false}); // Force the widget to be non-persistent (able to be deleted/forgotten) - ActiveWidgetStore.destroyPersistentWidget(this.props.id); + ActiveWidgetStore.destroyPersistentWidget(this.props.app.id); const PersistedElement = sdk.getComponent("elements.PersistedElement"); PersistedElement.destroyElement(this._persistKey); }).catch(err => { @@ -494,8 +513,8 @@ export default class AppTile extends React.Component { formatAppTileName() { let appTileName = "No name"; - if (this.props.name && this.props.name.trim()) { - appTileName = this.props.name.trim(); + if (this.props.app.name && this.props.app.name.trim()) { + appTileName = this.props.app.name.trim(); } return appTileName; } @@ -519,6 +538,60 @@ export default class AppTile extends React.Component { } } + /** + * Replace the widget template variables in a url with their values + * + * @returns {string} url with temlate variables replaced + */ + _templatedUrl(u) { + const myUserId = MatrixClientPeg.get().credentials.userId; + const myUser = MatrixClientPeg.get().getUser(myUserId); + const vars = Object.assign({ + domain: "jitsi.riot.im", // v1 widgets have this hardcoded + }, this.props.app.data, { + 'matrix_user_id': myUserId, + 'matrix_room_id': this.props.room.roomId, + 'matrix_display_name': myUser ? myUser.displayName : myUserId, + 'matrix_avatar_url': myUser ? MatrixClientPeg.get().mxcUrlToHttp(myUser.avatarUrl) : '', + + // TODO: Namespace themes through some standard + 'theme': SettingsStore.getValue("theme"), + }); + + if (vars.conferenceId === undefined) { + // we'll need to parse the conference ID out of the URL for v1 Jitsi widgets + const parsedUrl = new URL(this.props.app.url); + vars.conferenceId = parsedUrl.searchParams.get("confId"); + } + + return uriFromTemplate(u, vars); + } + + /** + * Get the URL used in the iframe + * In cases where we supply our own UI for a widget, this is an internal + * URL different to the one used if the widget is popped out to a separate + * tab / browser + * + * @returns {string} url + */ + _getRenderedUrl() { + let url; + + if (this.props.app.type === 'jitsi') { + console.log("Replacing Jitsi widget URL with local wrapper"); + url = WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: true}); + url = this._addWurlParams(url); + } else { + url = this._getSafeUrl(); + } + return this._templatedUrl(url); + } + + _getPopoutUrl() { + return this._templatedUrl(this._getSafeUrl()); + } + _getSafeUrl() { const parsedWidgetUrl = url.parse(this.state.widgetUrl, true); if (ENABLE_REACT_PERF) { @@ -526,13 +599,7 @@ export default class AppTile extends React.Component { parsedWidgetUrl.query.react_perf = true; } let safeWidgetUrl = ''; - if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol) || ( - // Check if the widget URL is a Jitsi widget in Electron - parsedWidgetUrl.protocol === 'vector:' - && parsedWidgetUrl.host === 'vector' - && parsedWidgetUrl.pathname === '/webapp/jitsi.html' - && this.props.type === 'jitsi' - )) { + if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol)) { safeWidgetUrl = url.format(parsedWidgetUrl); } return safeWidgetUrl; @@ -562,9 +629,9 @@ export default class AppTile extends React.Component { _onPopoutWidgetClick() { // Using Object.assign workaround as the following opens in a new window instead of a new tab. - // window.open(this._getSafeUrl(), '_blank', 'noopener=yes'); + // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes'); Object.assign(document.createElement('a'), - { target: '_blank', href: this._getSafeUrl(), rel: 'noreferrer noopener'}).click(); + { target: '_blank', href: this._getPopoutUrl(), rel: 'noreferrer noopener'}).click(); } _onReloadWidgetClick() { @@ -641,7 +708,7 @@ export default class AppTile extends React.Component {