@@ -391,77 +291,6 @@ export default class GeneralUserSettingsTab extends React.Component {
);
}
- _renderThemeSection() {
- const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
- const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
-
- const themeWatcher = new ThemeWatcher();
- let systemThemeSection;
- if (themeWatcher.isSystemThemeSupported()) {
- systemThemeSection =
-
-
;
- }
-
- let customThemeForm;
- if (SettingsStore.isFeatureEnabled("feature_custom_themes")) {
- let messageElement = null;
- if (this.state.customThemeMessage.text) {
- if (this.state.customThemeMessage.isError) {
- messageElement =
{this.state.customThemeMessage.text}
;
- } else {
- messageElement =
{this.state.customThemeMessage.text}
;
- }
- }
- customThemeForm = (
-
- );
- }
-
- const themes = Object.entries(enumerateThemes())
- .map(p => ({id: p[0], name: p[1]})); // convert pairs to objects for code readability
- const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
- const customThemes = themes.filter(p => !builtInThemes.includes(p))
- .sort((a, b) => a.name.localeCompare(b.name));
- const orderedThemes = [...builtInThemes, ...customThemes];
- return (
-
- {_t("Theme")}
- {systemThemeSection}
-
- {orderedThemes.map(theme => {
- return {theme.name} ;
- })}
-
- {customThemeForm}
-
-
- );
- }
-
_renderDiscoverySection() {
const SetIdServer = sdk.getComponent("views.settings.SetIdServer");
@@ -547,7 +376,6 @@ export default class GeneralUserSettingsTab extends React.Component {
{this._renderProfileSection()}
{this._renderAccountSection()}
{this._renderLanguageSection()}
- {this._renderThemeSection()}
{discoWarning} {_t("Discovery")}
{this._renderDiscoverySection()}
{this._renderIntegrationManagerSection() /* Has its own title */}
diff --git a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
new file mode 100644
index 0000000000..5c68f214d4
--- /dev/null
+++ b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
@@ -0,0 +1,233 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {_t} from "../../../../../languageHandler";
+import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
+import * as sdk from "../../../../../index";
+import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
+import Field from "../../../elements/Field";
+
+export default class StyleUserSettingsTab extends React.Component {
+ constructor() {
+ super();
+
+ this.state = {
+ fontSize: SettingsStore.getValue("font_size", null),
+ ...this._calculateThemeState(),
+ customThemeUrl: "",
+ customThemeMessage: {isError: false, text: ""},
+ }
+ }
+
+ _calculateThemeState() {
+ // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
+ // show the right values for things.
+
+ const themeChoice = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme");
+ const systemThemeExplicit = SettingsStore.getValueAt(
+ SettingLevel.DEVICE, "use_system_theme", null, false, true);
+ const themeExplicit = SettingsStore.getValueAt(
+ SettingLevel.DEVICE, "theme", null, false, true);
+
+ // If the user has enabled system theme matching, use that.
+ if (systemThemeExplicit) {
+ return {
+ theme: themeChoice,
+ useSystemTheme: true,
+ };
+ }
+
+ // If the user has set a theme explicitly, use that (no system theme matching)
+ if (themeExplicit) {
+ return {
+ theme: themeChoice,
+ useSystemTheme: false,
+ };
+ }
+
+ // Otherwise assume the defaults for the settings
+ return {
+ theme: themeChoice,
+ useSystemTheme: SettingsStore.getValueAt(SettingLevel.DEVICE, "use_system_theme"),
+ };
+ }
+
+ _onThemeChange = (e) => {
+ const newTheme = e.target.value;
+ if (this.state.theme === newTheme) return;
+
+ // doing getValue in the .catch will still return the value we failed to set,
+ // so remember what the value was before we tried to set it so we can revert
+ const oldTheme = SettingsStore.getValue('theme');
+ SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+ dis.dispatch({action: 'recheck_theme'});
+ this.setState({theme: oldTheme});
+ });
+ this.setState({theme: newTheme});
+ // The settings watcher doesn't fire until the echo comes back from the
+ // server, so to make the theme change immediately we need to manually
+ // do the dispatch now
+ // XXX: The local echoed value appears to be unreliable, in particular
+ // when settings custom themes(!) so adding forceTheme to override
+ // the value from settings.
+ dis.dispatch({action: 'recheck_theme', forceTheme: newTheme});
+ };
+
+ _onUseSystemThemeChanged = (checked) => {
+ this.setState({useSystemTheme: checked});
+ SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
+ dis.dispatch({action: 'recheck_theme'});
+ };
+
+ _onFontSizeChanged = (size) => {
+ let parsed_size = isNaN(parseInt(size))?SettingsStore.getDefaultValue("font_size"):parseFloat(size);
+ this.setState({fontSize: parsed_size})
+ SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsed_size)
+ };
+
+ _onAddCustomTheme = async () => {
+ let currentThemes = SettingsStore.getValue("custom_themes");
+ if (!currentThemes) currentThemes = [];
+ currentThemes = currentThemes.map(c => c); // cheap clone
+
+ if (this._themeTimer) {
+ clearTimeout(this._themeTimer);
+ }
+
+ try {
+ const r = await fetch(this.state.customThemeUrl);
+ const themeInfo = await r.json();
+ if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
+ this.setState({customThemeMessage: {text: _t("Invalid theme schema."), isError: true}});
+ return;
+ }
+ currentThemes.push(themeInfo);
+ } catch (e) {
+ console.error(e);
+ this.setState({customThemeMessage: {text: _t("Error downloading theme information."), isError: true}});
+ return; // Don't continue on error
+ }
+
+ await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
+ this.setState({customThemeUrl: "", customThemeMessage: {text: _t("Theme added!"), isError: false}});
+
+ this._themeTimer = setTimeout(() => {
+ this.setState({customThemeMessage: {text: "", isError: false}});
+ }, 3000);
+ };
+
+ _onCustomThemeChange = (e) => {
+ this.setState({customThemeUrl: e.target.value});
+ };
+
+ render() {
+ return (
+
+
{_t("Style")}
+ {this._renderThemeSection()}
+ {this._renderFontSection()}
+
+ );
+ }
+
+ _renderThemeSection() {
+ const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+ const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
+
+ const themeWatcher = new ThemeWatcher();
+ let systemThemeSection;
+ if (themeWatcher.isSystemThemeSupported()) {
+ systemThemeSection =
+
+
;
+ }
+
+ let customThemeForm;
+ if (SettingsStore.isFeatureEnabled("feature_custom_themes")) {
+ let messageElement = null;
+ if (this.state.customThemeMessage.text) {
+ if (this.state.customThemeMessage.isError) {
+ messageElement =
{this.state.customThemeMessage.text}
;
+ } else {
+ messageElement =
{this.state.customThemeMessage.text}
;
+ }
+ }
+ customThemeForm = (
+
+ );
+ }
+
+ const themes = Object.entries(enumerateThemes())
+ .map(p => ({id: p[0], name: p[1]})); // convert pairs to objects for code readability
+ const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
+ const customThemes = themes.filter(p => !builtInThemes.includes(p))
+ .sort((a, b) => a.name.localeCompare(b.name));
+ const orderedThemes = [...builtInThemes, ...customThemes];
+ return (
+
+ {_t("Theme")}
+ {systemThemeSection}
+
+ {orderedThemes.map(theme => {
+ return {theme.name} ;
+ })}
+
+ {customThemeForm}
+
+
+ );
+ }
+
+ _renderFontSection() {
+ return
+ {_t("Font size")}
+ this._onFontSizeChanged(ev.target.value)}
+ />
+
+ }
+
+}
diff --git a/src/theme.js b/src/theme.js
index 442a89e25f..3309acdd01 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -81,7 +81,7 @@ export class ThemeWatcher {
}
getEffectiveTheme() {
- // Dev note: Much of this logic is replicated in the GeneralUserSettingsTab
+ // Dev note: Much of this logic is replicated in the StyleUserSettingsTab
// XXX: checking the isLight flag here makes checking it in the ThemeController
// itself completely redundant since we just override the result here and we're
From bce1fa0c1a5277e87b46470055017f7f8a49d32e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 14 Apr 2020 16:20:08 +0100
Subject: [PATCH 0042/1388] Simple translations
---
src/i18n/strings/en_EN.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3eac055054..f10da54729 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2293,5 +2293,7 @@
"Esc": "Esc",
"Enter": "Enter",
"Space": "Space",
- "End": "End"
+ "End": "End",
+ "Font size": "Font size",
+ "Style": "Style"
}
From c1827925dad16eaac32c784dbbb13d7530dc7dd2 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 14 Apr 2020 16:20:41 +0100
Subject: [PATCH 0043/1388] Use new style tab
---
src/components/views/dialogs/UserSettingsDialog.js | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index b135d5f5f6..ee6f7e13ec 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -22,6 +22,7 @@ import {_t, _td} from "../../../languageHandler";
import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
import SettingsStore from "../../../settings/SettingsStore";
import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
+import StyleUserSettingsTab from "../settings/tabs/user/StyleUserSettingsTab";
import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
@@ -66,6 +67,11 @@ export default class UserSettingsDialog extends React.Component {
"mx_UserSettingsDialog_settingsIcon",
,
));
+ tabs.push(new Tab(
+ _td("Style"),
+ "mx_userSettingsDialog_styleIcon",
+ ,
+ ));
tabs.push(new Tab(
_td("Flair"),
"mx_UserSettingsDialog_flairIcon",
From af4dd2770c4cc3da7ef20617c2bb4fdb3e174a52 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 14 Apr 2020 16:21:04 +0100
Subject: [PATCH 0044/1388] Respond to font size changes
---
src/components/structures/MatrixChat.js | 4 ++
src/fontSize.js | 50 +++++++++++++++++++++++++
2 files changed, 54 insertions(+)
create mode 100644 src/fontSize.js
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 1293ccc7e9..1845e0011d 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -66,6 +66,7 @@ import { storeRoomAliasInCache } from '../../RoomAliasCache';
import { defer } from "../../utils/promise";
import ToastStore from "../../stores/ToastStore";
import * as StorageManager from "../../utils/StorageManager";
+import { FontWatcher } from '../../fontSize';
/** constants for MatrixChat.state.view */
export const VIEWS = {
@@ -265,7 +266,9 @@ export default createReactClass({
this.dispatcherRef = dis.register(this.onAction);
this._themeWatcher = new ThemeWatcher();
+ this._fontWatcher = new FontWatcher(10, 20);
this._themeWatcher.start();
+ this._fontWatcher.start();
this.focusComposer = false;
@@ -353,6 +356,7 @@ export default createReactClass({
Lifecycle.stopMatrixClient();
dis.unregister(this.dispatcherRef);
this._themeWatcher.stop();
+ this._fontWatcher.stop();
window.removeEventListener("focus", this.onFocus);
window.removeEventListener('resize', this.handleResize);
this.state.resizeNotifier.removeListener("middlePanelResized", this._dispatchTimelineResize);
diff --git a/src/fontSize.js b/src/fontSize.js
new file mode 100644
index 0000000000..c242fcc743
--- /dev/null
+++ b/src/fontSize.js
@@ -0,0 +1,50 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import dis from './dispatcher';
+import SettingsStore from './settings/SettingsStore';
+
+export class FontWatcher {
+ constructor(min_size, max_size) {
+ this._min_size = min_size;
+ this._max_size = max_size;
+ this._dispatcherRef = null;
+ }
+
+ start() {
+ this._setRootFontSize(SettingsStore.getValue("font_size"));
+ this._dispatcherRef = dis.register(this._onAction);
+ }
+
+ stop() {
+ dis.unregister(this._dispatcherRef);
+ }
+
+ _onAction = (payload) => {
+ if (payload.action === 'update-font-size') {
+ this._setRootFontSize(payload.size);
+ }
+ };
+
+ _setRootFontSize = size => {
+ let fontSize = this._min_size < size?size:this._min_size;
+ fontSize = fontSize < this._max_size?fontSize:this._max_size;
+ if (fontSize != size) {
+ SettingsStore.setValue("font_size", null, fontSize)
+ }
+ document.querySelector(":root").style.fontSize = fontSize + "px";
+ }
+}
\ No newline at end of file
From 14551b1885bc0d309e284d0293b7ad0f042e9927 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 10:28:07 +0100
Subject: [PATCH 0045/1388] Hide font scaling behind labs
---
.../views/settings/tabs/user/StyleUserSettingsTab.js | 2 +-
src/i18n/strings/en_EN.json | 1 +
src/settings/Settings.js | 6 ++++++
3 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
index 5c68f214d4..ab9107eac0 100644
--- a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
@@ -139,7 +139,7 @@ export default class StyleUserSettingsTab extends React.Component {
{_t("Style")}
{this._renderThemeSection()}
- {this._renderFontSection()}
+ {SettingsStore.getValue("feature_font_scaling") ? this._renderFontSection() : null}
);
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f10da54729..bf2eaa4652 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2295,5 +2295,6 @@
"Space": "Space",
"End": "End",
"Font size": "Font size",
+ "Font scaling": "Font scaling",
"Style": "Style"
}
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 3b316e39d0..23b73f740b 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -95,6 +95,12 @@ export const SETTINGS = {
// // not use this for new settings.
// invertedSettingName: "my-negative-setting",
// },
+ "feature_font_scaling": {
+ isFeature: true,
+ displayName: _td("Font scaling"),
+ supportedLevels: LEVELS_FEATURE,
+ default: false
+ },
"font_size": {
displayName: _td("Font size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
From 0faf7b865f47a4fc28a0339d999f6592c501e045 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 10:31:40 +0100
Subject: [PATCH 0046/1388] Set font option width
---
.../tabs/user/_GeneralUserSettingsTab.scss | 3 ++-
.../tabs/user/_StyleUserSettingsTab.scss | 20 +++++++++++++++++++
.../tabs/user/StyleUserSettingsTab.js | 4 ++--
3 files changed, 24 insertions(+), 3 deletions(-)
create mode 100644 res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
index 62d230e752..45aecd032f 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
@@ -15,7 +15,8 @@ limitations under the License.
*/
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
-.mx_GeneralUserSettingsTab_themeSection .mx_Field {
+.mx_StyleUserSettingsTab_themeSection .mx_Field,
+.mx_StyleUserSettingsTab_fontScaling .mx_Field {
@mixin mx_Settings_fullWidthField;
}
diff --git a/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss b/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
new file mode 100644
index 0000000000..dd9646bd5a
--- /dev/null
+++ b/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
@@ -0,0 +1,20 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_StyleUserSettingsTab_themeSection .mx_Field,
+.mx_StyleUserSettingsTab_fontScaling .mx_Field {
+ @mixin mx_Settings_fullWidthField;
+}
\ No newline at end of file
diff --git a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
index ab9107eac0..e7b7385f5a 100644
--- a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
@@ -199,7 +199,7 @@ export default class StyleUserSettingsTab extends React.Component {
.sort((a, b) => a.name.localeCompare(b.name));
const orderedThemes = [...builtInThemes, ...customThemes];
return (
-
+
{_t("Theme")}
{systemThemeSection}
+ return
{_t("Font size")}
Date: Thu, 16 Apr 2020 10:33:23 +0100
Subject: [PATCH 0047/1388] Make a font slider
---
res/css/_components.scss | 1 +
res/css/structures/_FontSlider.scss | 88 +++++++++++++++++++++++++
res/themes/light/css/_light.scss | 4 ++
src/components/structures/FontSlider.js | 62 +++++++++++++++++
4 files changed, 155 insertions(+)
create mode 100644 res/css/structures/_FontSlider.scss
create mode 100644 src/components/structures/FontSlider.js
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 0ba2b609e8..9d6629e703 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -7,6 +7,7 @@
@import "./structures/_CreateRoom.scss";
@import "./structures/_CustomRoomTagPanel.scss";
@import "./structures/_FilePanel.scss";
+@import "./structures/_FontSlider.scss";
@import "./structures/_GenericErrorPage.scss";
@import "./structures/_GroupView.scss";
@import "./structures/_HeaderButtons.scss";
diff --git a/res/css/structures/_FontSlider.scss b/res/css/structures/_FontSlider.scss
new file mode 100644
index 0000000000..94902f6fd9
--- /dev/null
+++ b/res/css/structures/_FontSlider.scss
@@ -0,0 +1,88 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_fontSlider {
+ position: relative;
+ margin: 0px;
+ @mixin mx_Settings_fullWidthField;
+}
+
+.mx_fontSlider_dotContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.mx_fontSlider_bar {
+ display: flex;
+ box-sizing: border-box;
+ position: absolute;
+ height: 1rem;
+ width: 100%;
+ padding: 0 1.1rem;
+ align-items: center;
+}
+
+.mx_fontSlider_bar > hr {
+ width: 100%;
+ border: 0.2rem solid $fontSlider-background-color;
+}
+
+.mx_fontSlider_selection {
+ display: flex;
+ align-items: center;
+ width: calc(100% - 2.2rem);
+ height: 1rem;
+ position: absolute;
+}
+
+.mx_fontSlider_selectionDot {
+ transition: left 0.25s;
+ position: absolute;
+ width: 1.1rem;
+ height: 1.1rem;
+ background-color: $fontSlider-selection-color;
+ border-radius: 50%;
+ box-shadow: 0 0 6px lightgrey;
+ z-index: 10;
+}
+
+.mx_fontSlider_selection > hr {
+ transition: width 0.25s;
+ margin: 0;
+ border: 0.2rem solid $fontSlider-selection-color;
+}
+
+.mx_fontSlider_dot {
+ transition: background-color 0.2s ease-in;
+ height: 1rem;
+ width: 1rem;
+ border-radius: 50%;
+ background-color: $fontSlider-background-color;
+ margin-bottom: 5px;
+ z-index: 0;
+}
+
+.mx_fontSlider_dotActive {
+ background-color: $fontSlider-selection-color;
+}
+
+.mx_fontSlider_dotValue {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: $fontSlider-background-color;
+}
\ No newline at end of file
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index f5f3013354..b457a8bccb 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -262,6 +262,10 @@ $togglesw-off-color: #c1c9d6;
$togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff;
+// FontSlider
+$fontSlider-selection-color: $accent-color;
+$fontSlider-background-color: #c1c9d6;
+
$progressbar-color: #000;
$room-warning-bg-color: $yellow-background;
diff --git a/src/components/structures/FontSlider.js b/src/components/structures/FontSlider.js
new file mode 100644
index 0000000000..e2e36c2c9f
--- /dev/null
+++ b/src/components/structures/FontSlider.js
@@ -0,0 +1,62 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+export default class Slider extends React.Component {
+ render() {
+ let dots = this.props.values.map(v =>
+ this.props.updateFontSize(v)}
+ key={v}
+ />);
+
+ let offset = this.offset(this.props.values, this.props.value);
+
+ return
+ }
+
+ offset(values, value) {
+ return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
+ }
+}
+
+class Dot extends React.Component {
+ render () {
+ let className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
+
+ return
+
+
+ {this.props.value}
+
+
+ }
+}
\ No newline at end of file
From 8b72756b8d987bb7218867dcf690ead46c0dea14 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 10:33:44 +0100
Subject: [PATCH 0048/1388] Use the font slider
---
.../views/settings/tabs/user/StyleUserSettingsTab.js | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
index e7b7385f5a..d77822ceb7 100644
--- a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
@@ -20,6 +20,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
import * as sdk from "../../../../../index";
import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
import Field from "../../../elements/Field";
+import FontSlider from "../../../../structures/FontSlider";
export default class StyleUserSettingsTab extends React.Component {
constructor() {
@@ -219,11 +220,18 @@ export default class StyleUserSettingsTab extends React.Component {
_renderFontSection() {
return
{_t("Font size")}
+ value + 'px'}
+ />
this._onFontSizeChanged(ev.target.value)}
/>
From 647d99a17a6ff66816caee01f0258138a7a15493 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 10:33:59 +0100
Subject: [PATCH 0049/1388] Smooth font-size change transition
---
res/css/_common.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 03442ca510..687a238c8e 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -19,6 +19,7 @@ limitations under the License.
@import "./_font-sizes.scss";
:root {
+ transition: font-size 0.25s;
font-size: 15px;
}
From 66fd0f707fc290db64ba3a729c96ceedd402258d Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 10:53:23 +0100
Subject: [PATCH 0050/1388] Type enforcement and comments
---
src/components/structures/FontSlider.js | 35 ++++++++++++++++++++++---
1 file changed, 32 insertions(+), 3 deletions(-)
diff --git a/src/components/structures/FontSlider.js b/src/components/structures/FontSlider.js
index e2e36c2c9f..0ae0092443 100644
--- a/src/components/structures/FontSlider.js
+++ b/src/components/structures/FontSlider.js
@@ -15,12 +15,29 @@ limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
export default class Slider extends React.Component {
+
+ static propTypes = {
+ // A callback for the new value onclick
+ updateFontSize: PropTypes.func,
+
+ // The current value of the slider
+ value: PropTypes.number,
+
+ // The range and values of the slider
+ // Currently only supports an ascending, constant interval range
+ values: PropTypes.arrayOf(PropTypes.number),
+
+ // A function for formatting the the values
+ displayFunc: PropTypes.func,
+ };
+
render() {
let dots = this.props.values.map(v =>
this.props.updateFontSize(v)}
key={v}
/>);
@@ -42,20 +59,32 @@ export default class Slider extends React.Component {
}
-
+
offset(values, value) {
return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
}
}
class Dot extends React.Component {
+
+ static propTypes = {
+ // Callback for behaviour onclick
+ onClick: PropTypes.func,
+
+ // Whether the dot should appear active
+ active: PropTypes.bool,
+
+ // The label on the dot
+ label: PropTypes.string,
+ }
+
render () {
let className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
return
- {this.props.value}
+ {this.props.label}
}
From f1130ecba11be12bbc1e1efbf2823106501727e6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 11:56:43 +0100
Subject: [PATCH 0051/1388] Linting. Finally set up my linter properly
---
src/components/structures/FontSlider.js | 28 +++++++++----------
.../tabs/user/StyleUserSettingsTab.js | 16 ++++++-----
src/fontSize.js | 10 +++----
.../controllers/FontSizeController.js | 3 +-
4 files changed, 29 insertions(+), 28 deletions(-)
diff --git a/src/components/structures/FontSlider.js b/src/components/structures/FontSlider.js
index 0ae0092443..68173345ff 100644
--- a/src/components/structures/FontSlider.js
+++ b/src/components/structures/FontSlider.js
@@ -18,8 +18,8 @@ import React from 'react';
import PropTypes from 'prop-types';
export default class Slider extends React.Component {
-
static propTypes = {
+
// A callback for the new value onclick
updateFontSize: PropTypes.func,
@@ -32,41 +32,41 @@ export default class Slider extends React.Component {
// A function for formatting the the values
displayFunc: PropTypes.func,
+
};
render() {
- let dots = this.props.values.map(v =>
-
+ this.props.updateFontSize(v)}
key={v}
/>);
- let offset = this.offset(this.props.values, this.props.value);
+ const offset = this.offset(this.props.values, this.props.value);
return
+ ;
}
offset(values, value) {
- return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
+ return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
}
}
class Dot extends React.Component {
-
static propTypes = {
// Callback for behaviour onclick
onClick: PropTypes.func,
@@ -78,14 +78,14 @@ class Dot extends React.Component {
label: PropTypes.string,
}
- render () {
- let className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
+ render() {
+ const className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
return
{this.props.label}
-
+ ;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
index d77822ceb7..9cca0a2ce9 100644
--- a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
@@ -21,6 +21,8 @@ import * as sdk from "../../../../../index";
import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
import Field from "../../../elements/Field";
import FontSlider from "../../../../structures/FontSlider";
+import AccessibleButton from "../../../elements/AccessibleButton";
+import dis from "../../../../../dispatcher";
export default class StyleUserSettingsTab extends React.Component {
constructor() {
@@ -31,7 +33,8 @@ export default class StyleUserSettingsTab extends React.Component {
...this._calculateThemeState(),
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
- }
+
+ };
}
_calculateThemeState() {
@@ -95,9 +98,9 @@ export default class StyleUserSettingsTab extends React.Component {
};
_onFontSizeChanged = (size) => {
- let parsed_size = isNaN(parseInt(size))?SettingsStore.getDefaultValue("font_size"):parseFloat(size);
- this.setState({fontSize: parsed_size})
- SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsed_size)
+ const parsedSize = isNaN(parseInt(size))?SettingsStore.getDefaultValue("font_size"):parseFloat(size);
+ this.setState({fontSize: parsedSize});
+ SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsedSize);
};
_onAddCustomTheme = async () => {
@@ -221,7 +224,7 @@ export default class StyleUserSettingsTab extends React.Component {
return
{_t("Font size")}
value + 'px'}
@@ -235,7 +238,6 @@ export default class StyleUserSettingsTab extends React.Component {
id="font_size_field"
onChange={(ev) => this._onFontSizeChanged(ev.target.value)}
/>
-
+
;
}
-
}
diff --git a/src/fontSize.js b/src/fontSize.js
index c242fcc743..8dbdb29102 100644
--- a/src/fontSize.js
+++ b/src/fontSize.js
@@ -18,9 +18,9 @@ import dis from './dispatcher';
import SettingsStore from './settings/SettingsStore';
export class FontWatcher {
- constructor(min_size, max_size) {
- this._min_size = min_size;
- this._max_size = max_size;
+ constructor(minSize, maxSize) {
+ this._min_size = minSize;
+ this._max_size = maxSize;
this._dispatcherRef = null;
}
@@ -43,8 +43,8 @@ export class FontWatcher {
let fontSize = this._min_size < size?size:this._min_size;
fontSize = fontSize < this._max_size?fontSize:this._max_size;
if (fontSize != size) {
- SettingsStore.setValue("font_size", null, fontSize)
+ SettingsStore.setValue("font_size", null, fontSize);
}
document.querySelector(":root").style.fontSize = fontSize + "px";
}
-}
\ No newline at end of file
+}
diff --git a/src/settings/controllers/FontSizeController.js b/src/settings/controllers/FontSizeController.js
index 4ab2f331f1..8e855e31ec 100644
--- a/src/settings/controllers/FontSizeController.js
+++ b/src/settings/controllers/FontSizeController.js
@@ -18,9 +18,8 @@ import SettingController from "./SettingController";
import dis from "../../dispatcher";
export default class FontSizeController extends SettingController {
-
constructor() {
- super()
+ super();
}
onChange(level, roomId, newValue) {
From af3858fa98ccc5ff93e2e63b372b095626126390 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 12:09:36 +0100
Subject: [PATCH 0052/1388] Style linting
---
res/css/structures/_FontSlider.scss | 3 ++-
res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss | 2 +-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/res/css/structures/_FontSlider.scss b/res/css/structures/_FontSlider.scss
index 94902f6fd9..fc83bd91bc 100644
--- a/res/css/structures/_FontSlider.scss
+++ b/res/css/structures/_FontSlider.scss
@@ -17,6 +17,7 @@ limitations under the License.
.mx_fontSlider {
position: relative;
margin: 0px;
+
@mixin mx_Settings_fullWidthField;
}
@@ -85,4 +86,4 @@ limitations under the License.
flex-direction: column;
align-items: center;
color: $fontSlider-background-color;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss b/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
index dd9646bd5a..f2a98ac426 100644
--- a/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
@@ -17,4 +17,4 @@ limitations under the License.
.mx_StyleUserSettingsTab_themeSection .mx_Field,
.mx_StyleUserSettingsTab_fontScaling .mx_Field {
@mixin mx_Settings_fullWidthField;
-}
\ No newline at end of file
+}
From 7c9df04d427d419c8df747eaef69e11e988e27a6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 20:26:04 +0100
Subject: [PATCH 0053/1388] Use "Appearance" instead of "Style"
---
src/components/views/dialogs/UserSettingsDialog.js | 6 +++---
...StyleUserSettingsTab.js => AppearanceUserSettingsTab.js} | 2 +-
src/i18n/strings/en_EN.json | 2 +-
3 files changed, 5 insertions(+), 5 deletions(-)
rename src/components/views/settings/tabs/user/{StyleUserSettingsTab.js => AppearanceUserSettingsTab.js} (99%)
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index ee6f7e13ec..91ab203753 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -22,7 +22,7 @@ import {_t, _td} from "../../../languageHandler";
import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
import SettingsStore from "../../../settings/SettingsStore";
import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
-import StyleUserSettingsTab from "../settings/tabs/user/StyleUserSettingsTab";
+import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
@@ -68,9 +68,9 @@ export default class UserSettingsDialog extends React.Component {
,
));
tabs.push(new Tab(
- _td("Style"),
+ _td("Appearance"),
"mx_userSettingsDialog_styleIcon",
- ,
+ ,
));
tabs.push(new Tab(
_td("Flair"),
diff --git a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
similarity index 99%
rename from src/components/views/settings/tabs/user/StyleUserSettingsTab.js
rename to src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 9cca0a2ce9..d09f4b3e6a 100644
--- a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -141,7 +141,7 @@ export default class StyleUserSettingsTab extends React.Component {
render() {
return (
-
{_t("Style")}
+
{_t("Appearance")}
{this._renderThemeSection()}
{SettingsStore.getValue("feature_font_scaling") ? this._renderFontSection() : null}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bf2eaa4652..56798ff932 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2296,5 +2296,5 @@
"End": "End",
"Font size": "Font size",
"Font scaling": "Font scaling",
- "Style": "Style"
+ "Appearance": "Appearance"
}
From b1452b5aa3bdd971aa2fa24c3bbd672ecd5d5255 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 20:47:29 +0100
Subject: [PATCH 0054/1388] Lint lint lint
---
src/settings/Settings.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 23b73f740b..dd0103aa78 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -99,7 +99,7 @@ export const SETTINGS = {
isFeature: true,
displayName: _td("Font scaling"),
supportedLevels: LEVELS_FEATURE,
- default: false
+ default: false,
},
"font_size": {
displayName: _td("Font size"),
From e455473d8fe1fba82c7c00603d746f8930b013e2 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 16 Apr 2020 20:54:11 +0100
Subject: [PATCH 0055/1388] i18n happy
---
src/i18n/strings/en_EN.json | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 56798ff932..cff2b8cda4 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -395,6 +395,8 @@
"Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.",
"Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
"Failed to join room": "Failed to join room",
+ "Font scaling": "Font scaling",
+ "Font size": "Font size",
"Message Pinning": "Message Pinning",
"Custom user status messages": "Custom user status messages",
"Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
@@ -742,22 +744,23 @@
"Use an Integration Manager to manage bots, widgets, and sticker packs.": "Use an Integration Manager to manage bots, widgets, and sticker packs.",
"Manage integrations": "Manage integrations",
"Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.",
+ "Invalid theme schema.": "Invalid theme schema.",
+ "Error downloading theme information.": "Error downloading theme information.",
+ "Theme added!": "Theme added!",
+ "Appearance": "Appearance",
+ "Custom theme URL": "Custom theme URL",
+ "Add theme": "Add theme",
+ "Theme": "Theme",
"Flair": "Flair",
"Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
"Success": "Success",
"Your password was successfully changed. You will not receive push notifications on other sessions until you log back in to them": "Your password was successfully changed. You will not receive push notifications on other sessions until you log back in to them",
- "Invalid theme schema.": "Invalid theme schema.",
- "Error downloading theme information.": "Error downloading theme information.",
- "Theme added!": "Theme added!",
"Profile": "Profile",
"Email addresses": "Email addresses",
"Phone numbers": "Phone numbers",
"Set a new account password...": "Set a new account password...",
"Account": "Account",
"Language and region": "Language and region",
- "Custom theme URL": "Custom theme URL",
- "Add theme": "Add theme",
- "Theme": "Theme",
"Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.",
"Account management": "Account management",
"Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!",
@@ -2293,8 +2296,5 @@
"Esc": "Esc",
"Enter": "Enter",
"Space": "Space",
- "End": "End",
- "Font size": "Font size",
- "Font scaling": "Font scaling",
- "Appearance": "Appearance"
+ "End": "End"
}
From 787e408016e53a3293d1df336e0e2a5fc1ac50c5 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 10:08:40 +0100
Subject: [PATCH 0056/1388] Explain origin of magic number
Co-Authored-By: Travis Ralston
---
res/css/structures/_TagPanel.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 4a78c8df92..536c88be63 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -116,7 +116,7 @@ limitations under the License.
position: absolute;
left: -15px;
border-radius: 0 3px 3px 0;
- top: -8px; // (16px / 2)
+ top: -8px; // (16px from height / 2)
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
From 4d0cac1260af9dd9f4cdd930de47a202f0bee65b Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 10:15:37 +0100
Subject: [PATCH 0057/1388] Render should be last method declared
---
src/components/structures/FontSlider.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/components/structures/FontSlider.js b/src/components/structures/FontSlider.js
index 68173345ff..aa4bfe42f5 100644
--- a/src/components/structures/FontSlider.js
+++ b/src/components/structures/FontSlider.js
@@ -35,6 +35,10 @@ export default class Slider extends React.Component {
};
+ _offset(values, value) {
+ return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
+ }
+
render() {
const dots = this.props.values.map(v =>
);
- const offset = this.offset(this.props.values, this.props.value);
+ const offset = this._offset(this.props.values, this.props.value);
return
@@ -60,10 +64,6 @@ export default class Slider extends React.Component {
;
}
-
- offset(values, value) {
- return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
- }
}
class Dot extends React.Component {
From db1141b162e441ddf324c4e708f7c7c3c55297d9 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 10:46:33 +0100
Subject: [PATCH 0058/1388] Move to typescript
---
.../{FontSlider.js => FontSlider.tsx} | 41 +++++++++++++++----
1 file changed, 34 insertions(+), 7 deletions(-)
rename src/components/structures/{FontSlider.js => FontSlider.tsx} (73%)
diff --git a/src/components/structures/FontSlider.js b/src/components/structures/FontSlider.tsx
similarity index 73%
rename from src/components/structures/FontSlider.js
rename to src/components/structures/FontSlider.tsx
index aa4bfe42f5..9048e7b37b 100644
--- a/src/components/structures/FontSlider.js
+++ b/src/components/structures/FontSlider.tsx
@@ -14,10 +14,26 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
-export default class Slider extends React.Component {
+type SliderProps = {
+ // A callback for the new value onclick
+ updateFontSize: (size: number) => null;
+
+ // The current value of the slider
+ value: number;
+
+ // The range and values of the slider
+ // Currently only supports an ascending, constant interval range
+ values: number[];
+
+ // A function for formatting the the values
+ displayFunc: (value: number) => string;
+
+}
+
+export default class Slider extends React.Component {
static propTypes = {
// A callback for the new value onclick
@@ -35,11 +51,11 @@ export default class Slider extends React.Component {
};
- _offset(values, value) {
+ _offset(values: number[], value: number): number {
return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
}
- render() {
+ render(): React.ReactNode {
const dots = this.props.values.map(v =>
null,
+
+ // Whether the dot should appear active
+ active: boolean,
+
+ // The label on the dot
+ label: string,
+}
+
+class Dot extends React.Component {
static propTypes = {
// Callback for behaviour onclick
onClick: PropTypes.func,
@@ -78,7 +105,7 @@ class Dot extends React.Component {
label: PropTypes.string,
}
- render() {
+ render(): React.ReactNode {
const className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
return
From dd841fcde92f097a0cc056fa8f856d65c938620e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 11:01:52 +0100
Subject: [PATCH 0059/1388] Remove references to font
---
res/css/structures/_FontSlider.scss | 20 ++++++++++----------
src/components/structures/FontSlider.tsx | 22 +++++++++++-----------
2 files changed, 21 insertions(+), 21 deletions(-)
diff --git a/res/css/structures/_FontSlider.scss b/res/css/structures/_FontSlider.scss
index fc83bd91bc..2112ac9a88 100644
--- a/res/css/structures/_FontSlider.scss
+++ b/res/css/structures/_FontSlider.scss
@@ -14,20 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_fontSlider {
+.mx_Slider {
position: relative;
margin: 0px;
@mixin mx_Settings_fullWidthField;
}
-.mx_fontSlider_dotContainer {
+.mx_Slider_dotContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
-.mx_fontSlider_bar {
+.mx_Slider_bar {
display: flex;
box-sizing: border-box;
position: absolute;
@@ -37,12 +37,12 @@ limitations under the License.
align-items: center;
}
-.mx_fontSlider_bar > hr {
+.mx_Slider_bar > hr {
width: 100%;
border: 0.2rem solid $fontSlider-background-color;
}
-.mx_fontSlider_selection {
+.mx_Slider_selection {
display: flex;
align-items: center;
width: calc(100% - 2.2rem);
@@ -50,7 +50,7 @@ limitations under the License.
position: absolute;
}
-.mx_fontSlider_selectionDot {
+.mx_Slider_selectionDot {
transition: left 0.25s;
position: absolute;
width: 1.1rem;
@@ -61,13 +61,13 @@ limitations under the License.
z-index: 10;
}
-.mx_fontSlider_selection > hr {
+.mx_Slider_selection > hr {
transition: width 0.25s;
margin: 0;
border: 0.2rem solid $fontSlider-selection-color;
}
-.mx_fontSlider_dot {
+.mx_Slider_dot {
transition: background-color 0.2s ease-in;
height: 1rem;
width: 1rem;
@@ -77,11 +77,11 @@ limitations under the License.
z-index: 0;
}
-.mx_fontSlider_dotActive {
+.mx_Slider_dotActive {
background-color: $fontSlider-selection-color;
}
-.mx_fontSlider_dotValue {
+.mx_Slider_dotValue {
display: flex;
flex-direction: column;
align-items: center;
diff --git a/src/components/structures/FontSlider.tsx b/src/components/structures/FontSlider.tsx
index 9048e7b37b..7985fa206a 100644
--- a/src/components/structures/FontSlider.tsx
+++ b/src/components/structures/FontSlider.tsx
@@ -18,8 +18,8 @@ import * as React from 'react';
import * as PropTypes from 'prop-types';
type SliderProps = {
- // A callback for the new value onclick
- updateFontSize: (size: number) => null;
+ // A callback for the selected value
+ onSelectionChange: (value: number) => null;
// The current value of the slider
value: number;
@@ -37,7 +37,7 @@ export default class Slider extends React.Component {
static propTypes = {
// A callback for the new value onclick
- updateFontSize: PropTypes.func,
+ onSelectionChange: PropTypes.func,
// The current value of the slider
value: PropTypes.number,
@@ -59,22 +59,22 @@ export default class Slider extends React.Component {
const dots = this.props.values.map(v =>
this.props.updateFontSize(v)}
+ onClick={() => this.props.onSelectionChange(v)}
key={v}
/>);
const offset = this._offset(this.props.values, this.props.value);
- return
+ return
-
+
-
-
@@ -106,9 +106,9 @@ class Dot extends React.Component
{
}
render(): React.ReactNode {
- const className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
+ const className = "mx_Slider_dot" + (this.props.active? " mx_Slider_dotActive": "");
- return
+ return
{this.props.label}
From abd94a65bd4f5a8e60478fc52d3475318b63b562 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 11:29:37 +0100
Subject: [PATCH 0060/1388] Move compoenets/FontSlider to views/Slider
---
res/css/_components.scss | 2 +-
.../structures/{_FontSlider.scss => _Slider.scss} | 12 ++++++------
res/themes/light/css/_light.scss | 6 +++---
.../FontSlider.tsx => views/elements/Slider.tsx} | 2 ++
.../settings/tabs/user/AppearanceUserSettingsTab.js | 4 ++--
5 files changed, 14 insertions(+), 12 deletions(-)
rename res/css/structures/{_FontSlider.scss => _Slider.scss} (84%)
rename src/components/{structures/FontSlider.tsx => views/elements/Slider.tsx} (96%)
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 9d6629e703..ab602be49e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -7,7 +7,7 @@
@import "./structures/_CreateRoom.scss";
@import "./structures/_CustomRoomTagPanel.scss";
@import "./structures/_FilePanel.scss";
-@import "./structures/_FontSlider.scss";
+@import "./structures/_Slider.scss";
@import "./structures/_GenericErrorPage.scss";
@import "./structures/_GroupView.scss";
@import "./structures/_HeaderButtons.scss";
diff --git a/res/css/structures/_FontSlider.scss b/res/css/structures/_Slider.scss
similarity index 84%
rename from res/css/structures/_FontSlider.scss
rename to res/css/structures/_Slider.scss
index 2112ac9a88..51f1688f6b 100644
--- a/res/css/structures/_FontSlider.scss
+++ b/res/css/structures/_Slider.scss
@@ -39,7 +39,7 @@ limitations under the License.
.mx_Slider_bar > hr {
width: 100%;
- border: 0.2rem solid $fontSlider-background-color;
+ border: 0.2rem solid $Slider-background-color;
}
.mx_Slider_selection {
@@ -55,7 +55,7 @@ limitations under the License.
position: absolute;
width: 1.1rem;
height: 1.1rem;
- background-color: $fontSlider-selection-color;
+ background-color: $Slider-selection-color;
border-radius: 50%;
box-shadow: 0 0 6px lightgrey;
z-index: 10;
@@ -64,7 +64,7 @@ limitations under the License.
.mx_Slider_selection > hr {
transition: width 0.25s;
margin: 0;
- border: 0.2rem solid $fontSlider-selection-color;
+ border: 0.2rem solid $Slider-selection-color;
}
.mx_Slider_dot {
@@ -72,18 +72,18 @@ limitations under the License.
height: 1rem;
width: 1rem;
border-radius: 50%;
- background-color: $fontSlider-background-color;
+ background-color: $Slider-background-color;
margin-bottom: 5px;
z-index: 0;
}
.mx_Slider_dotActive {
- background-color: $fontSlider-selection-color;
+ background-color: $Slider-selection-color;
}
.mx_Slider_dotValue {
display: flex;
flex-direction: column;
align-items: center;
- color: $fontSlider-background-color;
+ color: $Slider-background-color;
}
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index b457a8bccb..e06ba33594 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -262,9 +262,9 @@ $togglesw-off-color: #c1c9d6;
$togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff;
-// FontSlider
-$fontSlider-selection-color: $accent-color;
-$fontSlider-background-color: #c1c9d6;
+// Slider
+$Slider-selection-color: $accent-color;
+$Slider-background-color: #c1c9d6;
$progressbar-color: #000;
diff --git a/src/components/structures/FontSlider.tsx b/src/components/views/elements/Slider.tsx
similarity index 96%
rename from src/components/structures/FontSlider.tsx
rename to src/components/views/elements/Slider.tsx
index 7985fa206a..2070f3f167 100644
--- a/src/components/structures/FontSlider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -16,6 +16,7 @@ limitations under the License.
import * as React from 'react';
import * as PropTypes from 'prop-types';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
type SliderProps = {
// A callback for the selected value
@@ -93,6 +94,7 @@ type DotProps = {
label: string,
}
+@replaceableComponent("views.elements.Dot")
class Dot extends React.Component {
static propTypes = {
// Callback for behaviour onclick
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index d09f4b3e6a..9e9f134613 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -20,7 +20,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
import * as sdk from "../../../../../index";
import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
import Field from "../../../elements/Field";
-import FontSlider from "../../../../structures/FontSlider";
+import Slider from "../../../elements/Slider";
import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher";
@@ -223,7 +223,7 @@ export default class StyleUserSettingsTab extends React.Component {
_renderFontSection() {
return
{_t("Font size")}
-
Date: Tue, 21 Apr 2020 11:34:15 +0100
Subject: [PATCH 0061/1388] Retain copyright
Co-Authored-By: Travis Ralston
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 9e9f134613..7843ccbe10 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
+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.
From 82974bd98c01fc673a8fb928f7890c7acd16641b Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 11:37:22 +0100
Subject: [PATCH 0062/1388] Space out ternaries
Co-Authored-By: Travis Ralston
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 7843ccbe10..8d1fd348d3 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -99,7 +99,7 @@ export default class StyleUserSettingsTab extends React.Component {
};
_onFontSizeChanged = (size) => {
- const parsedSize = isNaN(parseInt(size))?SettingsStore.getDefaultValue("font_size"):parseFloat(size);
+ const parsedSize = isNaN(parseInt(size)) ? SettingsStore.getDefaultValue("font_size") : parseFloat(size);
this.setState({fontSize: parsedSize});
SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsedSize);
};
From 4525f71b1ce7925379fd9a67fab7b59f52d055b5 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 11:40:18 +0100
Subject: [PATCH 0063/1388] Missed an import
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 8d1fd348d3..42c8e6d854 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -21,7 +21,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
import * as sdk from "../../../../../index";
import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
import Field from "../../../elements/Field";
-import Slider from "../../../elements/Slider";
+import FontSlider from "../../../../structures/FontSlider";
import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher";
@@ -224,7 +224,7 @@ export default class StyleUserSettingsTab extends React.Component {
_renderFontSection() {
return
{_t("Font size")}
-
Date: Tue, 21 Apr 2020 11:41:41 +0100
Subject: [PATCH 0064/1388] Move setting away from 'feature' settings for
clarity
---
src/settings/Settings.js | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index dd0103aa78..a044027baf 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -101,12 +101,6 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE,
default: false,
},
- "font_size": {
- displayName: _td("Font size"),
- supportedLevels: LEVELS_ACCOUNT_SETTINGS,
- default: 16,
- controller: new FontSizeController(),
- },
"feature_pinning": {
isFeature: true,
displayName: _td("Message Pinning"),
@@ -177,6 +171,12 @@ export const SETTINGS = {
displayName: _td("Show padlocks on invite only rooms"),
default: true,
},
+ "font_size": {
+ displayName: _td("Font size"),
+ supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+ default: 16,
+ controller: new FontSizeController(),
+ },
"MessageComposerInput.suggestEmoji": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Enable Emoji suggestions while typing'),
From 4397658bb32654b3a0427d4c1b761c43109e5825 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 11:56:12 +0100
Subject: [PATCH 0065/1388] Update file name in comments
Co-Authored-By: Travis Ralston
---
src/theme.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/theme.js b/src/theme.js
index 3309acdd01..aee55b5abb 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -81,7 +81,7 @@ export class ThemeWatcher {
}
getEffectiveTheme() {
- // Dev note: Much of this logic is replicated in the StyleUserSettingsTab
+ // Dev note: Much of this logic is replicated in the AppearanceUserSettingsTab
// XXX: checking the isLight flag here makes checking it in the ThemeController
// itself completely redundant since we just override the result here and we're
From 315a272cb4aa1026f42723e7b1877f12e4ecffbc Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 12:03:32 +0100
Subject: [PATCH 0066/1388] File rename
---
...rSettingsTab.scss => _AppearanceUserSettingsTab.scss} | 4 ++--
.../settings/tabs/user/AppearanceUserSettingsTab.js | 9 +++++----
2 files changed, 7 insertions(+), 6 deletions(-)
rename res/css/views/settings/tabs/user/{_StyleUserSettingsTab.scss => _AppearanceUserSettingsTab.scss} (85%)
diff --git a/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
similarity index 85%
rename from res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index f2a98ac426..8c80a35e40 100644
--- a/res/css/views/settings/tabs/user/_StyleUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_StyleUserSettingsTab_themeSection .mx_Field,
-.mx_StyleUserSettingsTab_fontScaling .mx_Field {
+.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
+.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
@mixin mx_Settings_fullWidthField;
}
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 42c8e6d854..738a5f9178 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -2,6 +2,7 @@
Copyright 2019 New Vector Ltd
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.
You may obtain a copy of the License at
@@ -21,7 +22,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
import * as sdk from "../../../../../index";
import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
import Field from "../../../elements/Field";
-import FontSlider from "../../../../structures/FontSlider";
+import Slider from "../../../elements/Slider";
import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher";
@@ -204,7 +205,7 @@ export default class StyleUserSettingsTab extends React.Component {
.sort((a, b) => a.name.localeCompare(b.name));
const orderedThemes = [...builtInThemes, ...customThemes];
return (
-
+
{_t("Theme")}
{systemThemeSection}
+ return
{_t("Font size")}
-
Date: Tue, 21 Apr 2020 12:06:10 +0100
Subject: [PATCH 0067/1388] Move slider themes
---
res/css/_components.scss | 3 ++-
res/css/{structures => views/elements}/_Slider.scss | 0
2 files changed, 2 insertions(+), 1 deletion(-)
rename res/css/{structures => views/elements}/_Slider.scss (100%)
diff --git a/res/css/_components.scss b/res/css/_components.scss
index ab602be49e..77a9b9f8cf 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -7,7 +7,6 @@
@import "./structures/_CreateRoom.scss";
@import "./structures/_CustomRoomTagPanel.scss";
@import "./structures/_FilePanel.scss";
-@import "./structures/_Slider.scss";
@import "./structures/_GenericErrorPage.scss";
@import "./structures/_GroupView.scss";
@import "./structures/_HeaderButtons.scss";
@@ -114,6 +113,7 @@
@import "./views/elements/_RichText.scss";
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_RoomAliasField.scss";
+@import "./views/elements/_Slider.scss";
@import "./views/elements/_Spinner.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TextWithTooltip.scss";
@@ -202,6 +202,7 @@
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
+@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
diff --git a/res/css/structures/_Slider.scss b/res/css/views/elements/_Slider.scss
similarity index 100%
rename from res/css/structures/_Slider.scss
rename to res/css/views/elements/_Slider.scss
From dcea1f32b38c1856f05790a2eddcb014a498a486 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 16:18:25 +0100
Subject: [PATCH 0068/1388] tslint
---
src/components/views/elements/Slider.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 2070f3f167..f6ab121056 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -58,7 +58,7 @@ export default class Slider extends React.Component {
render(): React.ReactNode {
const dots = this.props.values.map(v =>
- this.props.onSelectionChange(v)}
key={v}
@@ -108,7 +108,7 @@ class Dot extends React.Component {
}
render(): React.ReactNode {
- const className = "mx_Slider_dot" + (this.props.active? " mx_Slider_dotActive": "");
+ const className = "mx_Slider_dot" + (this.props.active ? " mx_Slider_dotActive" : "");
return
From 715bcb3c96e343b6c2a83d0ba21c16d2257e5be8 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 21 Apr 2020 16:28:41 +0100
Subject: [PATCH 0069/1388] i18n match file moves
---
src/i18n/strings/en_EN.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index cff2b8cda4..a3051cbb91 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -396,7 +396,6 @@
"Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
"Failed to join room": "Failed to join room",
"Font scaling": "Font scaling",
- "Font size": "Font size",
"Message Pinning": "Message Pinning",
"Custom user status messages": "Custom user status messages",
"Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
@@ -407,6 +406,7 @@
"Enable cross-signing to verify per-user instead of per-session": "Enable cross-signing to verify per-user instead of per-session",
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Show padlocks on invite only rooms": "Show padlocks on invite only rooms",
+ "Font size": "Font size",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages",
From 0d0da6cfdc8d822cdcd8e6c14615aabc41724abf Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 10:19:17 +0100
Subject: [PATCH 0070/1388] Fix types, abandon propTypes
---
src/components/views/elements/Slider.tsx | 45 ++++--------------------
1 file changed, 7 insertions(+), 38 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index f6ab121056..13f06a4759 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -15,12 +15,10 @@ limitations under the License.
*/
import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { replaceableComponent } from '../../../utils/replaceableComponent';
-type SliderProps = {
+type IProps = {
// A callback for the selected value
- onSelectionChange: (value: number) => null;
+ onSelectionChange: (value: number) => void;
// The current value of the slider
value: number;
@@ -34,24 +32,7 @@ type SliderProps = {
}
-export default class Slider extends React.Component {
- static propTypes = {
-
- // A callback for the new value onclick
- onSelectionChange: PropTypes.func,
-
- // The current value of the slider
- value: PropTypes.number,
-
- // The range and values of the slider
- // Currently only supports an ascending, constant interval range
- values: PropTypes.arrayOf(PropTypes.number),
-
- // A function for formatting the the values
- displayFunc: PropTypes.func,
-
- };
-
+export default class Slider extends React.Component {
_offset(values: number[], value: number): number {
return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
}
@@ -83,9 +64,9 @@ export default class Slider extends React.Component {
}
}
-type DotProps = {
- // Callback for behaviour onclick
- onClick: () => null,
+type DotIProps = {
+ // Callback for behavior onclick
+ onClick: () => void,
// Whether the dot should appear active
active: boolean,
@@ -94,19 +75,7 @@ type DotProps = {
label: string,
}
-@replaceableComponent("views.elements.Dot")
-class Dot extends React.Component {
- static propTypes = {
- // Callback for behaviour onclick
- onClick: PropTypes.func,
-
- // Whether the dot should appear active
- active: PropTypes.bool,
-
- // The label on the dot
- label: PropTypes.string,
- }
-
+class Dot extends React.Component {
render(): React.ReactNode {
const className = "mx_Slider_dot" + (this.props.active ? " mx_Slider_dotActive" : "");
From ba362b727c5bdf7b6a76e8fdb3b5cdf1c3afdbc0 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 10:19:37 +0100
Subject: [PATCH 0071/1388] Use onSelectionChange prop
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 738a5f9178..5bb6dcc0e0 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -228,7 +228,7 @@ export default class StyleUserSettingsTab extends React.Component {
value + 'px'}
/>
Date: Wed, 22 Apr 2020 10:24:29 +0100
Subject: [PATCH 0072/1388] Clamp indicated value within value range
---
src/components/views/elements/Slider.tsx | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 13f06a4759..9f9e1fdef8 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -34,6 +34,17 @@ type IProps = {
export default class Slider extends React.Component {
_offset(values: number[], value: number): number {
+ const lowest = values[0];
+ const highest = values[values.length - 1];
+
+ if (value < lowest) {
+ return 0;
+ }
+
+ if (value > highest) {
+ return 100;
+ }
+
return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
}
From 54a65441a54da04f6c4834fe089ac932778d0952 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 10:29:48 +0100
Subject: [PATCH 0073/1388] Lint ternary statement
---
src/fontSize.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/fontSize.js b/src/fontSize.js
index 8dbdb29102..d6b5b020f7 100644
--- a/src/fontSize.js
+++ b/src/fontSize.js
@@ -40,8 +40,8 @@ export class FontWatcher {
};
_setRootFontSize = size => {
- let fontSize = this._min_size < size?size:this._min_size;
- fontSize = fontSize < this._max_size?fontSize:this._max_size;
+ let fontSize = this._min_size < size ? size : this._min_size;
+ fontSize = fontSize < this._max_size ? fontSize : this._max_size;
if (fontSize != size) {
SettingsStore.setValue("font_size", null, fontSize);
}
From 8d5965c33c5af0350da208ac8cfe8706dae049ce Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 10:32:00 +0100
Subject: [PATCH 0074/1388] Fix incorrect call to setValue
---
src/fontSize.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/fontSize.js b/src/fontSize.js
index d6b5b020f7..30c69b7428 100644
--- a/src/fontSize.js
+++ b/src/fontSize.js
@@ -15,7 +15,7 @@ limitations under the License.
*/
import dis from './dispatcher';
-import SettingsStore from './settings/SettingsStore';
+import SettingsStore, {SettingLevel} from './settings/SettingsStore';
export class FontWatcher {
constructor(minSize, maxSize) {
@@ -43,7 +43,7 @@ export class FontWatcher {
let fontSize = this._min_size < size ? size : this._min_size;
fontSize = fontSize < this._max_size ? fontSize : this._max_size;
if (fontSize != size) {
- SettingsStore.setValue("font_size", null, fontSize);
+ SettingsStore.setValue("font_size", null, SettingLevel.Device, fontSize);
}
document.querySelector(":root").style.fontSize = fontSize + "px";
}
From 26ccd6f07dcb598a04643e82412f6f801e8c65e9 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 10:42:31 +0100
Subject: [PATCH 0075/1388] Cleaner clamping of value range
---
src/components/views/elements/Slider.tsx | 15 +++++----------
1 file changed, 5 insertions(+), 10 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 9f9e1fdef8..7862373c1c 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -34,18 +34,13 @@ type IProps = {
export default class Slider extends React.Component {
_offset(values: number[], value: number): number {
- const lowest = values[0];
- const highest = values[values.length - 1];
+ const min = values[0];
+ const max = values[values.length - 1];
- if (value < lowest) {
- return 0;
- }
+ // Clamp value between min and max
+ value = Math.min(Math.max(value, min), max);
- if (value > highest) {
- return 100;
- }
-
- return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
+ return (value - min) / (max - min) * 100;
}
render(): React.ReactNode {
From 5f50facfba28291514b258de1d26b4e691d5692a Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 11:36:23 +0100
Subject: [PATCH 0076/1388] Make slider independant of label size
---
res/css/views/elements/_Slider.scss | 16 ++++++++++++++--
src/components/views/elements/Slider.tsx | 4 +++-
2 files changed, 17 insertions(+), 3 deletions(-)
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 51f1688f6b..7e9acefa06 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -33,7 +33,7 @@ limitations under the License.
position: absolute;
height: 1rem;
width: 100%;
- padding: 0 1.1rem;
+ padding: 0 0.5rem; // half the width of a dot.
align-items: center;
}
@@ -45,7 +45,7 @@ limitations under the License.
.mx_Slider_selection {
display: flex;
align-items: center;
- width: calc(100% - 2.2rem);
+ width: calc(100% - 1rem); // 2 * half the width of a dot
height: 1rem;
position: absolute;
}
@@ -87,3 +87,15 @@ limitations under the License.
align-items: center;
color: $Slider-background-color;
}
+
+// The following is a hack to center the labels without adding
+// any width to the slider's dots.
+.mx_Slider_labelContainer {
+ width: 1rem;
+}
+
+.mx_Slider_label {
+ position: relative;
+ width: fit-content;
+ left: -50%;
+}
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 7862373c1c..e341eea317 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -87,9 +87,11 @@ class Dot extends React.Component {
return
-
+
;
}
}
From ee33fc1c20e93ee35120cd70d4c0caf156154cd0 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 11:37:02 +0100
Subject: [PATCH 0077/1388] Remove labels
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 5bb6dcc0e0..046184da69 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -229,7 +229,7 @@ export default class StyleUserSettingsTab extends React.Component {
values={[12, 14, 16, 18, 20]}
value={this.state.fontSize}
onSelectionChange={this._onFontSizeChanged}
- displayFunc={value => value + 'px'}
+ displayFunc={value => {}}
/>
Date: Wed, 22 Apr 2020 11:53:29 +0100
Subject: [PATCH 0078/1388] Add support to disable slider
---
src/components/views/elements/Slider.tsx | 28 +++++++++++++++++-------
1 file changed, 20 insertions(+), 8 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index e341eea317..ad859bfe82 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -30,6 +30,8 @@ type IProps = {
// A function for formatting the the values
displayFunc: (value: number) => string;
+ // Whether the slider is disabled
+ disabled: boolean;
}
export default class Slider extends React.Component {
@@ -47,8 +49,9 @@ export default class Slider extends React.Component {
const dots = this.props.values.map(v =>
this.props.onSelectionChange(v)}
+ onClick={this.props.disabled ? () => {} : () => this.props.onSelectionChange(v)}
key={v}
+ disabled={this.props.disabled}
/>);
const offset = this._offset(this.props.values, this.props.value);
@@ -57,10 +60,13 @@ export default class Slider extends React.Component {
-
+ { this.props.disabled ?
+ null :
+
+ }
{dots}
@@ -79,18 +85,24 @@ type DotIProps = {
// The label on the dot
label: string,
+
+ // Whether the slider is disabled
+ disabled: boolean;
}
class Dot extends React.Component
{
render(): React.ReactNode {
- const className = "mx_Slider_dot" + (this.props.active ? " mx_Slider_dotActive" : "");
+ let className = "mx_Slider_dot"
+ if (!this.props.disabled && this.props.active) {
+ className += " mx_Slider_dotActive";
+ }
return
- {this.props.label}
-
+ {this.props.label}
+
;
}
From 1486beeaf42903fe75168a16ee3c45e7f516eb39 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 12:02:23 +0100
Subject: [PATCH 0079/1388] Make slider indpendent of settings styling
---
res/css/views/elements/_Slider.scss | 2 --
1 file changed, 2 deletions(-)
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 7e9acefa06..2132381591 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -17,8 +17,6 @@ limitations under the License.
.mx_Slider {
position: relative;
margin: 0px;
-
- @mixin mx_Settings_fullWidthField;
}
.mx_Slider_dotContainer {
From 98799611cf31b5e2036a61ecac60d9b46d4f29b1 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 15:37:46 +0100
Subject: [PATCH 0080/1388] Remove padding for alignment reasons
---
res/css/views/elements/_Slider.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 2132381591..83f100ff92 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -17,6 +17,7 @@ limitations under the License.
.mx_Slider {
position: relative;
margin: 0px;
+ flex-grow: 1;
}
.mx_Slider_dotContainer {
@@ -71,7 +72,6 @@ limitations under the License.
width: 1rem;
border-radius: 50%;
background-color: $Slider-background-color;
- margin-bottom: 5px;
z-index: 0;
}
From f5d65907512971f4592f9be67d7c6ab2917ff0ef Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 16:11:01 +0100
Subject: [PATCH 0081/1388] Have max and min font configured in settings
---
src/components/structures/MatrixChat.js | 2 +-
src/fontSize.js | 11 ++++++-----
src/settings/Settings.js | 10 ++++++++++
3 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 1845e0011d..602d85f048 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -266,7 +266,7 @@ export default createReactClass({
this.dispatcherRef = dis.register(this.onAction);
this._themeWatcher = new ThemeWatcher();
- this._fontWatcher = new FontWatcher(10, 20);
+ this._fontWatcher = new FontWatcher();
this._themeWatcher.start();
this._fontWatcher.start();
diff --git a/src/fontSize.js b/src/fontSize.js
index 30c69b7428..2e37921ee6 100644
--- a/src/fontSize.js
+++ b/src/fontSize.js
@@ -18,9 +18,7 @@ import dis from './dispatcher';
import SettingsStore, {SettingLevel} from './settings/SettingsStore';
export class FontWatcher {
- constructor(minSize, maxSize) {
- this._min_size = minSize;
- this._max_size = maxSize;
+ constructor() {
this._dispatcherRef = null;
}
@@ -40,8 +38,11 @@ export class FontWatcher {
};
_setRootFontSize = size => {
- let fontSize = this._min_size < size ? size : this._min_size;
- fontSize = fontSize < this._max_size ? fontSize : this._max_size;
+ const min = SettingsStore.getValue("font_size_min");
+ const max = SettingsStore.getValue("font_size_max");
+
+ const fontSize = Math.max(Math.min(max, size), min);
+
if (fontSize != size) {
SettingsStore.setValue("font_size", null, SettingLevel.Device, fontSize);
}
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index a044027baf..b144b07e84 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -177,6 +177,16 @@ export const SETTINGS = {
default: 16,
controller: new FontSizeController(),
},
+ "font_size_min": {
+ displayName: _td("Min font size"),
+ supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+ default: 14,
+ },
+ "font_size_max": {
+ displayName: _td("Max font size"),
+ supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+ default: 24,
+ },
"MessageComposerInput.suggestEmoji": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Enable Emoji suggestions while typing'),
From fe175bb9a89d87307805582040e1f3295a2d0475 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 22 Apr 2020 17:31:49 +0100
Subject: [PATCH 0082/1388] Styling for the font slider
---
.../tabs/user/_AppearanceUserSettingsTab.scss | 20 +++++++++++++++++++
.../tabs/user/AppearanceUserSettingsTab.js | 18 +++++++++++------
2 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 8c80a35e40..e4285e248c 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -14,7 +14,27 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+.mx_AppearanceUserSettingsTab_fontSlider,
.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
@mixin mx_Settings_fullWidthField;
}
+
+.mx_AppearanceUserSettingsTab_fontSlider {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 10px;
+ background: #FFFFFF;
+ border-radius: 10px;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_smallText {
+ font-size: 15px;
+ padding-right: 10px;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_largeText {
+ font-size: 18px;
+ padding-left: 10px;
+}
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 046184da69..e1bbaab2cc 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -25,6 +25,7 @@ import Field from "../../../elements/Field";
import Slider from "../../../elements/Slider";
import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher";
+import _range from "lodash/range";
export default class StyleUserSettingsTab extends React.Component {
constructor() {
@@ -225,12 +226,17 @@ export default class StyleUserSettingsTab extends React.Component {
_renderFontSection() {
return
{_t("Font size")}
-
{}}
- />
+
+
Aa
+
{}}
+ disabled={false}
+ />
+ Aa
+
Date: Thu, 23 Apr 2020 10:27:41 +0100
Subject: [PATCH 0083/1388] Linearly interpolate between value intervals.
---
src/components/views/elements/Slider.tsx | 36 ++++++++++++++++---
.../tabs/user/AppearanceUserSettingsTab.js | 2 +-
2 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index ad859bfe82..a9fc41c8cc 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -35,14 +35,40 @@ type IProps = {
}
export default class Slider extends React.Component {
+ // offset is a terrible inverse approximation.
+ // if the values represents some function f(x) = y where x is the
+ // index of the array and y = values[x] then offset(f, y) = x
+ // s.t f(x) = y.
+ // it assumes a monotonic function and interpolates linearly between
+ // y values.
+ // Offset is used for finding the location of a value on a
+ // non linear slider.
_offset(values: number[], value: number): number {
- const min = values[0];
- const max = values[values.length - 1];
+ // the index of the first number greater than value.
+ let closest = values.reduce((prev, curr) => {
+ return (value > curr ? prev + 1 : prev);
+ }, 0);
- // Clamp value between min and max
- value = Math.min(Math.max(value, min), max);
+ // Off the left
+ if (closest == 0) {
+ return 0;
+ }
+
+ // Off the right
+ if (closest == values.length) {
+ return 100;
+ }
+
+ // Now
+ const closestLessValue = values[closest - 1];
+ const closestGreaterValue = values[closest];
+
+ const intervalWidth = 1 / (values.length - 1);
+
+ const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
+
+ return 100 * (closest - 1 + linearInterpolation) * intervalWidth
- return (value - min) / (max - min) * 100;
}
render(): React.ReactNode {
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index e1bbaab2cc..949b3bed31 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -229,7 +229,7 @@ export default class StyleUserSettingsTab extends React.Component {
Aa
{}}
From a16fe09d4275b64939d34f56b1720cb00ef1e93e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 10:58:00 +0100
Subject: [PATCH 0084/1388] Use em to detach slider from root font-size
---
res/css/views/elements/_Slider.scss | 22 +++++++++----------
.../tabs/user/_AppearanceUserSettingsTab.scss | 1 +
src/components/views/elements/Slider.tsx | 2 +-
3 files changed, 13 insertions(+), 12 deletions(-)
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 83f100ff92..f6982865db 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -30,30 +30,30 @@ limitations under the License.
display: flex;
box-sizing: border-box;
position: absolute;
- height: 1rem;
+ height: 1em;
width: 100%;
- padding: 0 0.5rem; // half the width of a dot.
+ padding: 0 0.5em; // half the width of a dot.
align-items: center;
}
.mx_Slider_bar > hr {
width: 100%;
- border: 0.2rem solid $Slider-background-color;
+ border: 0.2em solid $Slider-background-color;
}
.mx_Slider_selection {
display: flex;
align-items: center;
- width: calc(100% - 1rem); // 2 * half the width of a dot
- height: 1rem;
+ width: calc(100% - 1em); // 2 * half the width of a dot
+ height: 1em;
position: absolute;
}
.mx_Slider_selectionDot {
transition: left 0.25s;
position: absolute;
- width: 1.1rem;
- height: 1.1rem;
+ width: 1.1em;
+ height: 1.1em;
background-color: $Slider-selection-color;
border-radius: 50%;
box-shadow: 0 0 6px lightgrey;
@@ -63,13 +63,13 @@ limitations under the License.
.mx_Slider_selection > hr {
transition: width 0.25s;
margin: 0;
- border: 0.2rem solid $Slider-selection-color;
+ border: 0.2em solid $Slider-selection-color;
}
.mx_Slider_dot {
transition: background-color 0.2s ease-in;
- height: 1rem;
- width: 1rem;
+ height: 1em;
+ width: 1em;
border-radius: 50%;
background-color: $Slider-background-color;
z-index: 0;
@@ -89,7 +89,7 @@ limitations under the License.
// The following is a hack to center the labels without adding
// any width to the slider's dots.
.mx_Slider_labelContainer {
- width: 1rem;
+ width: 1em;
}
.mx_Slider_label {
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index e4285e248c..28a2510508 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -27,6 +27,7 @@ limitations under the License.
padding: 10px;
background: #FFFFFF;
border-radius: 10px;
+ font-size: 10px;
}
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index a9fc41c8cc..6ec044da41 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -89,7 +89,7 @@ export default class Slider extends React.Component {
{ this.props.disabled ?
null :
}
From 6375e2526324de37ee170637c494bf08a29c4e59 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 11:22:51 +0100
Subject: [PATCH 0085/1388] Match padding from figma
---
.../settings/tabs/user/_AppearanceUserSettingsTab.scss | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 28a2510508..16a14edf85 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -24,7 +24,7 @@ limitations under the License.
display: flex;
flex-direction: row;
align-items: center;
- padding: 10px;
+ padding: 15px;
background: #FFFFFF;
border-radius: 10px;
font-size: 10px;
@@ -32,10 +32,12 @@ limitations under the License.
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
font-size: 15px;
- padding-right: 10px;
+ padding-right: 20px;
+ padding-left: 5px;
}
.mx_AppearanceUserSettingsTab_fontSlider_largeText {
font-size: 18px;
- padding-left: 10px;
+ padding-left: 20px;
+ padding-right: 5px;
}
From 28dca9e52529b3b8f49ee0e92cf448a4875fa403 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 11:33:28 +0100
Subject: [PATCH 0086/1388] Match figma color scheme
---
.../views/settings/tabs/user/_AppearanceUserSettingsTab.scss | 2 +-
res/themes/dark/css/_dark.scss | 3 +++
res/themes/light/css/_light.scss | 3 +++
3 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 16a14edf85..4141fb2fb1 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -25,7 +25,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
padding: 15px;
- background: #FFFFFF;
+ background: $font-slider-bg-color;
border-radius: 10px;
font-size: 10px;
}
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 5d6ba033c8..cb6e7ccdaa 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -177,6 +177,9 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color;
+// FontSlider colors
+$font-slider-bg-color: $room-highlight-color;
+
// ***** Mixins! *****
@define-mixin mx_DialogButton {
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index e06ba33594..b576b57778 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -306,6 +306,9 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color;
+// FontSlider colors
+$font-slider-bg-color: $input-darker-bg-color;
+
// ***** Mixins! *****
@define-mixin mx_DialogButton {
From a83993f1ff18f8c7be1d0949a8c983bbecf2ee9d Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 11:49:54 +0100
Subject: [PATCH 0087/1388] Match margins in settings
---
.../views/settings/tabs/user/_AppearanceUserSettingsTab.scss | 2 ++
1 file changed, 2 insertions(+)
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 4141fb2fb1..e82ae3c575 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -28,6 +28,8 @@ limitations under the License.
background: $font-slider-bg-color;
border-radius: 10px;
font-size: 10px;
+ margin-top: 24px;
+ margin-bottom: 24px;
}
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
From c86638c667d023abccb1250825e5c17e1070991c Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 12:09:08 +0100
Subject: [PATCH 0088/1388] add toggle between font slider and custom setting
---
.../settings/tabs/user/AppearanceUserSettingsTab.js | 11 +++++++++--
src/i18n/strings/en_EN.json | 3 +++
src/settings/Settings.js | 5 +++++
3 files changed, 17 insertions(+), 2 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 949b3bed31..ceb3241b8b 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -36,7 +36,7 @@ export default class StyleUserSettingsTab extends React.Component {
...this._calculateThemeState(),
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
-
+ useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
};
}
@@ -224,6 +224,7 @@ export default class StyleUserSettingsTab extends React.Component {
}
_renderFontSection() {
+ const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
return
{_t("Font size")}
@@ -233,10 +234,15 @@ export default class StyleUserSettingsTab extends React.Component {
value={this.state.fontSize}
onSelectionChange={this._onFontSizeChanged}
displayFunc={value => {}}
- disabled={false}
+ disabled={this.state.useCustomFontSize}
/>
Aa
+
this.setState({useCustomFontSize: checked})}
+ />
this._onFontSizeChanged(ev.target.value)}
+ disabled={!this.state.useCustomFontSize}
/>
;
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a3051cbb91..2c3239900d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -407,6 +407,9 @@
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Show padlocks on invite only rooms": "Show padlocks on invite only rooms",
"Font size": "Font size",
+ "Min font size": "Min font size",
+ "Max font size": "Max font size",
+ "Custom font size": "Custom font size",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index b144b07e84..e0e34179f3 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -187,6 +187,11 @@ export const SETTINGS = {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: 24,
},
+ "useCustomFontSize": {
+ displayName: _td("Custom font size"),
+ supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+ default: false,
+ },
"MessageComposerInput.suggestEmoji": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Enable Emoji suggestions while typing'),
From 600a812227acafd8a15732cdabed3b6899415735 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 12:20:10 +0100
Subject: [PATCH 0089/1388] Add brush icon for appearance setting tab
---
res/css/views/dialogs/_UserSettingsDialog.scss | 4 ++++
res/img/feather-customised/brush.svg | 5 +++++
src/components/views/dialogs/UserSettingsDialog.js | 2 +-
3 files changed, 10 insertions(+), 1 deletion(-)
create mode 100644 res/img/feather-customised/brush.svg
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss
index 4d831d7858..7adcc58c4e 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.scss
+++ b/res/css/views/dialogs/_UserSettingsDialog.scss
@@ -21,6 +21,10 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
+.mx_UserSettingsDialog_appearanceIcon::before {
+ mask-image: url('$(res)/img/feather-customised/brush.svg');
+}
+
.mx_UserSettingsDialog_voiceIcon::before {
mask-image: url('$(res)/img/feather-customised/phone.svg');
}
diff --git a/res/img/feather-customised/brush.svg b/res/img/feather-customised/brush.svg
new file mode 100644
index 0000000000..d7f2738629
--- /dev/null
+++ b/res/img/feather-customised/brush.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index 91ab203753..bf06b8749f 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -69,7 +69,7 @@ export default class UserSettingsDialog extends React.Component {
));
tabs.push(new Tab(
_td("Appearance"),
- "mx_userSettingsDialog_styleIcon",
+ "mx_UserSettingsDialog_appearanceIcon",
,
));
tabs.push(new Tab(
From e5cb14929602cdc71887b3e95c54f546d9ccdda0 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 13:52:08 +0100
Subject: [PATCH 0090/1388] Handle fontslider input errors correctly
---
.../tabs/user/AppearanceUserSettingsTab.js | 33 ++++++++++++++++---
src/i18n/strings/en_EN.json | 3 ++
2 files changed, 31 insertions(+), 5 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index ceb3241b8b..4144605999 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -101,11 +101,33 @@ export default class StyleUserSettingsTab extends React.Component {
};
_onFontSizeChanged = (size) => {
- const parsedSize = isNaN(parseInt(size)) ? SettingsStore.getDefaultValue("font_size") : parseFloat(size);
- this.setState({fontSize: parsedSize});
- SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsedSize);
+ this.setState({fontSize: size});
+ SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, size);
};
+ _onValidateFontSize = ({value}) => {
+ console.log({value});
+ this.setState({fontSize: value});
+
+ const parsedSize = parseFloat(value);
+ const min = SettingsStore.getValue("font_size_min");
+ const max = SettingsStore.getValue("font_size_max");
+
+ if (isNaN(parsedSize)) {
+ return {valid: false, feedback: _t("Size must be a number")};
+ }
+
+ console.log({min});
+ console.log({max});
+ console.log({parsedSize});
+ if (!(min <= parsedSize && parsedSize <= max)) {
+ return {valid: false, feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', {min, max})};
+ }
+
+ SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, value);
+ return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
+ }
+
_onAddCustomTheme = async () => {
let currentThemes = SettingsStore.getValue("custom_themes");
if (!currentThemes) currentThemes = [];
@@ -247,10 +269,11 @@ export default class StyleUserSettingsTab extends React.Component {
type="text"
label={_t("Font size")}
autoComplete="off"
- placeholder={SettingsStore.getValue("font_size", null).toString()}
+ placeholder={this.state.fontSize}
value={this.state.fontSize}
id="font_size_field"
- onChange={(ev) => this._onFontSizeChanged(ev.target.value)}
+ onValidate={this._onValidateFontSize}
+ onChange={({value}) => this.setState({fontSize: value})}
disabled={!this.state.useCustomFontSize}
/>
;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 2c3239900d..fa3d5e3f41 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -747,6 +747,9 @@
"Use an Integration Manager to manage bots, widgets, and sticker packs.": "Use an Integration Manager to manage bots, widgets, and sticker packs.",
"Manage integrations": "Manage integrations",
"Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.",
+ "Size must be a number": "Size must be a number",
+ "Custom font size can only be between %(min)s pt and %(max)s pt": "Custom font size can only be between %(min)s pt and %(max)s pt",
+ "Use between %(min)s pt and %(max)s pt": "Use between %(min)s pt and %(max)s pt",
"Invalid theme schema.": "Invalid theme schema.",
"Error downloading theme information.": "Error downloading theme information.",
"Theme added!": "Theme added!",
From a087f5ea400fd7a8fc7e6f207fdb15def6e4e2f3 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 13:55:10 +0100
Subject: [PATCH 0091/1388] Lint
---
.../tabs/user/AppearanceUserSettingsTab.js | 14 +++++++++-----
1 file changed, 9 insertions(+), 5 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 4144605999..5c285d12e6 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -117,11 +117,11 @@ export default class StyleUserSettingsTab extends React.Component {
return {valid: false, feedback: _t("Size must be a number")};
}
- console.log({min});
- console.log({max});
- console.log({parsedSize});
if (!(min <= parsedSize && parsedSize <= max)) {
- return {valid: false, feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', {min, max})};
+ return {
+ valid: false,
+ feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', {min, max}),
+ };
}
SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, value);
@@ -252,7 +252,11 @@ export default class StyleUserSettingsTab extends React.Component {
Aa
{}}
From 06f4eca05d51aaff8986406296ccb0844a66dfe4 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 14:15:33 +0100
Subject: [PATCH 0092/1388] Background opacity
---
res/themes/light/css/_light.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index b576b57778..ed7eae48f7 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -307,7 +307,7 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color;
// FontSlider colors
-$font-slider-bg-color: $input-darker-bg-color;
+$font-slider-bg-color: rgba($input-darker-bg-color, 0.2);
// ***** Mixins! *****
From 4b4599c1d81b4200f41158cb8febe2fcb9121c3a Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 23 Apr 2020 14:39:11 +0100
Subject: [PATCH 0093/1388] tslint
---
src/components/views/elements/Slider.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 6ec044da41..559bdd9ce2 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -36,7 +36,7 @@ type IProps = {
export default class Slider extends React.Component {
// offset is a terrible inverse approximation.
- // if the values represents some function f(x) = y where x is the
+ // if the values represents some function f(x) = y where x is the
// index of the array and y = values[x] then offset(f, y) = x
// s.t f(x) = y.
// it assumes a monotonic function and interpolates linearly between
@@ -50,16 +50,16 @@ export default class Slider extends React.Component {
}, 0);
// Off the left
- if (closest == 0) {
+ if (closest === 0) {
return 0;
}
// Off the right
- if (closest == values.length) {
+ if (closest === values.length) {
return 100;
}
- // Now
+ // Now
const closestLessValue = values[closest - 1];
const closestGreaterValue = values[closest];
From 3962c98c9beaeee3f1685e63fe3604ed8a1a68eb Mon Sep 17 00:00:00 2001
From: Pauli Virtanen
Date: Thu, 23 Apr 2020 22:53:02 +0300
Subject: [PATCH 0094/1388] Ensure PersistedElements are refreshed when
AuxPanel scrolls
If the screen is not tall enough, AuxPanel starts scrolling its content.
If it contains PersistedElements, they need to be notified about
scrolling as they only listen on resize events to move their element.
Signed-off-by: Pauli Virtanen
---
src/components/views/rooms/AuxPanel.js | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js
index e102b0dba4..00bdb1c45a 100644
--- a/src/components/views/rooms/AuxPanel.js
+++ b/src/components/views/rooms/AuxPanel.js
@@ -141,6 +141,15 @@ export default createReactClass({
return counters;
},
+ _onScroll: function(rect) {
+ if (this.props.onResize) {
+ this.props.onResize();
+ }
+
+ /* Force refresh of PersistedElements which may be partially hidden */
+ window.dispatchEvent(new Event('resize'));
+ },
+
render: function() {
const CallView = sdk.getComponent("voip.CallView");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
@@ -265,7 +274,7 @@ export default createReactClass({
}
return (
-
+
{ stateViews }
{ appsDrawer }
{ fileDropTarget }
From d690d4bed2cb1562fface956ed0c4e34e4e35c54 Mon Sep 17 00:00:00 2001
From: Pauli Virtanen
Date: Tue, 21 Apr 2020 01:19:39 +0300
Subject: [PATCH 0095/1388] Prevent PersistedElements overflowing scrolled
areas
As the DOM element is not in reality contained inside "the parent",
it may overflow the area if the parent gets partially hidden by
scrolling etc.
To make the effect visually less annoying, emulate this by clipping to
the element wrapper. This is not a full general-purpose fix, but
improves the current situation.
Signed-off-by: Pauli Virtanen
---
res/css/views/rooms/_AppsDrawer.scss | 4 ++
.../views/elements/PersistedElement.js | 58 ++++++++++++++++++-
2 files changed, 60 insertions(+), 2 deletions(-)
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index 1b1bab67bc..e4743f189e 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -96,6 +96,10 @@ $AppsDrawerBodyHeight: 273px;
height: $AppsDrawerBodyHeight;
}
+.mx_AppTile_persistedWrapper > div {
+ height: 100%;
+}
+
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
height: 114px;
}
diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js
index 53f2501f19..18fa2aafef 100644
--- a/src/components/views/elements/PersistedElement.js
+++ b/src/components/views/elements/PersistedElement.js
@@ -156,16 +156,70 @@ export default class PersistedElement extends React.Component {
child.style.display = visible ? 'block' : 'none';
}
+ /*
+ * Clip element bounding rectangle to that of the parent elements.
+ * This is not a full visibility check, but prevents the persisted
+ * element from overflowing parent containers when inside a scrolled
+ * area.
+ */
+ _getClippedBoundingClientRect(element) {
+ let parentElement = element.parentElement;
+ let rect = element.getBoundingClientRect();
+
+ rect = new DOMRect(rect.left, rect.top, rect.width, rect.height);
+
+ while (parentElement) {
+ const parentRect = parentElement.getBoundingClientRect();
+
+ if (parentRect.left > rect.left) {
+ rect.width = rect.width - (parentRect.left - rect.left);
+ rect.x = parentRect.x;
+ }
+
+ if (parentRect.top > rect.top) {
+ rect.height = rect.height - (parentRect.top - rect.top);
+ rect.y = parentRect.y;
+ }
+
+ if (parentRect.right < rect.right) {
+ rect.width = rect.width - (rect.right - parentRect.right);
+ }
+
+ if (parentRect.bottom < rect.bottom) {
+ rect.height = rect.height - (rect.bottom - parentRect.bottom);
+ }
+
+ parentElement = parentElement.parentElement;
+ }
+
+ if (rect.width < 0) rect.width = 0;
+ if (rect.height < 0) rect.height = 0;
+
+ return rect;
+ }
+
updateChildPosition(child, parent) {
if (!child || !parent) return;
const parentRect = parent.getBoundingClientRect();
+ const clipRect = this._getClippedBoundingClientRect(parent);
+
+ Object.assign(child.parentElement.style, {
+ position: 'absolute',
+ top: clipRect.top + 'px',
+ left: clipRect.left + 'px',
+ width: clipRect.width + 'px',
+ height: clipRect.height + 'px',
+ overflow: "hidden",
+ });
+
Object.assign(child.style, {
position: 'absolute',
- top: parentRect.top + 'px',
- left: parentRect.left + 'px',
+ top: (parentRect.top - clipRect.top) + 'px',
+ left: (parentRect.left - clipRect.left) + 'px',
width: parentRect.width + 'px',
height: parentRect.height + 'px',
+ overflow: "hidden",
});
}
From bfba5e6cfe8e2be24a135af072a6c0b2a41dbfbb Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Mon, 27 Apr 2020 16:57:38 +0100
Subject: [PATCH 0096/1388] Fix member info avatar size
---
src/components/views/avatars/BaseAvatar.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index a17124b9ad..cbe083f3a2 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -208,8 +208,8 @@ export default createReactClass({
onClick={onClick}
onError={this.onError}
style={{
- width: toRem(width),
- height: toRem(height)
+ width: {width},
+ height: {height},
}}
title={title} alt=""
inputRef={inputRef}
From 38962560acce8fdb09705eee3590ae5331028eea Mon Sep 17 00:00:00 2001
From: Pauli Virtanen
Date: Tue, 28 Apr 2020 02:18:43 +0300
Subject: [PATCH 0097/1388] Style fixes
Signed-off-by: Pauli Virtanen
---
src/components/views/elements/AppTile.js | 11 ++++++-----
src/widgets/WidgetApi.ts | 5 +++--
2 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index f5664fd613..ef0075e800 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -39,6 +39,7 @@ import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
import PersistedElement from "./PersistedElement";
import {WidgetType} from "../../../widgets/WidgetType";
+import {Capability} from "../../../widgets/WidgetApi";
import {sleep} from "../../../utils/promise";
const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
@@ -344,18 +345,18 @@ export default class AppTile extends React.Component {
* @returns {Promise<*>} Resolves when the widget is terminated, or timeout passed.
*/
_endWidgetActions() {
- let promise;
+ let terminationPromise;
- if (this._hasCapability('im.vector.receive_terminate')) {
+ if (this._hasCapability(Capability.ReceiveTerminate)) {
// Wait for widget to terminate within a timeout
const timeout = 2000;
const messaging = ActiveWidgetStore.getWidgetMessaging(this.props.app.id);
- promise = Promise.race([messaging.terminate(), sleep(timeout)]);
+ terminationPromise = Promise.race([messaging.terminate(), sleep(timeout)]);
} else {
- promise = Promise.resolve();
+ terminationPromise = Promise.resolve();
}
- return promise.finally(() => {
+ return terminationPromise.finally(() => {
// HACK: This is a really dirty way to ensure that Jitsi cleans up
// its hold on the webcam. Without this, the widget holds a media
// stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
diff --git a/src/widgets/WidgetApi.ts b/src/widgets/WidgetApi.ts
index c5420dca38..795c6648ef 100644
--- a/src/widgets/WidgetApi.ts
+++ b/src/widgets/WidgetApi.ts
@@ -111,11 +111,12 @@ export class WidgetApi extends EventEmitter {
} else if (payload.action === KnownWidgetActions.Terminate) {
// Finalization needs to be async, so postpone with a promise
let finalizePromise = Promise.resolve();
- const wait = promise => {
+ const wait = (promise) => {
finalizePromise = finalizePromise.then(value => promise);
- }
+ };
this.emit('terminate', wait);
Promise.resolve(finalizePromise).then(() => {
+ // Acknowledge that we're shut down now
this.replyToRequest(payload, {});
});
} else {
From a8407c9508a38b93465ab030e4d99ab8c86212ce Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:00:15 +0100
Subject: [PATCH 0098/1388] Use purecomponent
Co-Authored-By: Travis Ralston
---
src/components/views/elements/Slider.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 559bdd9ce2..3dfd0c686e 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -116,7 +116,7 @@ type DotIProps = {
disabled: boolean;
}
-class Dot extends React.Component {
+class Dot extends React.PureComponent {
render(): React.ReactNode {
let className = "mx_Slider_dot"
if (!this.props.disabled && this.props.active) {
From c268b98ded295f9679ddf7eddef436a67ab86bb3 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:17:50 +0100
Subject: [PATCH 0099/1388] Use faster lookup method
Co-Authored-By: Travis Ralston
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 5c285d12e6..ed7d9ef495 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -168,7 +168,7 @@ export default class StyleUserSettingsTab extends React.Component {
{_t("Appearance")}
{this._renderThemeSection()}
- {SettingsStore.getValue("feature_font_scaling") ? this._renderFontSection() : null}
+ {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this._renderFontSection() : null}
);
}
From f91613f112d2b33839f32eb5500fd3a95f796b95 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 13:53:16 +0100
Subject: [PATCH 0100/1388] Remove redundent selectors.
Check _AppearanceUserSettingsTab
---
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss | 2 --
1 file changed, 2 deletions(-)
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
index 45aecd032f..5cc220bd33 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
@@ -15,8 +15,6 @@ limitations under the License.
*/
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
-.mx_StyleUserSettingsTab_themeSection .mx_Field,
-.mx_StyleUserSettingsTab_fontScaling .mx_Field {
@mixin mx_Settings_fullWidthField;
}
From 137b94703aad9344b5f4ab38d4b6e7e441396ab9 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 13:59:00 +0100
Subject: [PATCH 0101/1388] Lint types
---
src/components/views/elements/Slider.tsx | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 3dfd0c686e..722401801c 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -16,22 +16,22 @@ limitations under the License.
import * as React from 'react';
-type IProps = {
- // A callback for the selected value
- onSelectionChange: (value: number) => void;
+interface IProps {
+ // A callback for the selected value
+ onSelectionChange: (value: number) => void;
- // The current value of the slider
- value: number;
+ // The current value of the slider
+ value: number;
- // The range and values of the slider
- // Currently only supports an ascending, constant interval range
- values: number[];
+ // The range and values of the slider
+ // Currently only supports an ascending, constant interval range
+ values: number[];
- // A function for formatting the the values
- displayFunc: (value: number) => string;
+ // A function for formatting the the values
+ displayFunc: (value: number) => string;
- // Whether the slider is disabled
- disabled: boolean;
+ // Whether the slider is disabled
+ disabled: boolean;
}
export default class Slider extends React.Component {
From 175b5e70b60f23dc446aba22da4f00d56aa2d624 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:09:54 +0100
Subject: [PATCH 0102/1388] Lint Slider
---
src/components/views/elements/Slider.tsx | 24 +++++++++++++-----------
1 file changed, 13 insertions(+), 11 deletions(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 722401801c..6712ddd7fd 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -43,7 +43,7 @@ export default class Slider extends React.Component {
// y values.
// Offset is used for finding the location of a value on a
// non linear slider.
- _offset(values: number[], value: number): number {
+ private offset(values: number[], value: number): number {
// the index of the first number greater than value.
let closest = values.reduce((prev, curr) => {
return (value > curr ? prev + 1 : prev);
@@ -80,19 +80,21 @@ export default class Slider extends React.Component {
disabled={this.props.disabled}
/>);
- const offset = this._offset(this.props.values, this.props.value);
+ let selection = null;
+
+ if (this.props.disabled) {
+ const offset = this.offset(this.props.values, this.props.value);
+ selection =
+ }
return
- { this.props.disabled ?
- null :
-
- }
+ { selection }
{dots}
@@ -102,7 +104,7 @@ export default class Slider extends React.Component
{
}
}
-type DotIProps = {
+interface IDotProps {
// Callback for behavior onclick
onClick: () => void,
@@ -116,7 +118,7 @@ type DotIProps = {
disabled: boolean;
}
-class Dot extends React.PureComponent {
+class Dot extends React.PureComponent {
render(): React.ReactNode {
let className = "mx_Slider_dot"
if (!this.props.disabled && this.props.active) {
From 57d880ca5e2bde20a030f13d3f2257fe23e654b4 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:24:44 +0100
Subject: [PATCH 0103/1388] Use correct name and indentation
---
.../settings/tabs/user/AppearanceUserSettingsTab.js | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index ed7d9ef495..6c94a82c95 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -27,7 +27,7 @@ import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher";
import _range from "lodash/range";
-export default class StyleUserSettingsTab extends React.Component {
+export default class AppearanceUserSettingsTab extends React.Component {
constructor() {
super();
@@ -231,9 +231,10 @@ export default class StyleUserSettingsTab extends React.Component {
{_t("Theme")}
{systemThemeSection}
-
{orderedThemes.map(theme => {
return {theme.name} ;
From 93f24f12dcf839f35231e8ca9083f670c3f626d7 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:26:08 +0100
Subject: [PATCH 0104/1388] Match filename to class
---
src/{fontSize.js => FontWatcher.js} | 0
src/components/structures/MatrixChat.js | 2 +-
2 files changed, 1 insertion(+), 1 deletion(-)
rename src/{fontSize.js => FontWatcher.js} (100%)
diff --git a/src/fontSize.js b/src/FontWatcher.js
similarity index 100%
rename from src/fontSize.js
rename to src/FontWatcher.js
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 602d85f048..fec37472be 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -66,7 +66,7 @@ import { storeRoomAliasInCache } from '../../RoomAliasCache';
import { defer } from "../../utils/promise";
import ToastStore from "../../stores/ToastStore";
import * as StorageManager from "../../utils/StorageManager";
-import { FontWatcher } from '../../fontSize';
+import { FontWatcher } from '../../FontWatcher';
/** constants for MatrixChat.state.view */
export const VIEWS = {
From 9ca843fdcbc9f6d5d12dddac23a11af686cc702e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:27:18 +0100
Subject: [PATCH 0105/1388] Correct return type in docs
Co-Authored-By: Travis Ralston
---
src/settings/SettingsStore.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/settings/SettingsStore.js b/src/settings/SettingsStore.js
index 70ea5ac57c..b6856a5a6a 100644
--- a/src/settings/SettingsStore.js
+++ b/src/settings/SettingsStore.js
@@ -373,7 +373,7 @@ export default class SettingsStore {
/**
* Gets the default value of a setting.
* @param {string} settingName The name of the setting to read the value of.
- * @return {*} The value, or null if not found
+ * @return {*} The default value
*/
static getDefaultValue(settingName, roomId = null, excludeDefault = false) {
// Verify that the setting is actually a setting
From fe326b9f08534d70c36b0484e727304e8396ba8c Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:30:56 +0100
Subject: [PATCH 0106/1388] Enfore function name capitalisation
---
src/components/structures/RoomSubList.js | 2 +-
src/components/views/avatars/BaseAvatar.js | 2 +-
src/components/views/rooms/EventTile.js | 4 ++--
src/components/views/rooms/ReadReceiptMarker.js | 2 +-
src/utils/rem.js | 2 +-
5 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 1e3e15b4ec..b1e0bb9f9b 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -32,7 +32,7 @@ import RoomTile from "../views/rooms/RoomTile";
import LazyRenderList from "../views/elements/LazyRenderList";
import {_t} from "../../languageHandler";
import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
-import toRem from "../../utils/rem";
+import {toRem} from "../../utils/rem";
// turn this on for drop & drag console debugging galore
const debug = false;
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index cbe083f3a2..e94a83f70b 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -24,7 +24,7 @@ import * as AvatarLogic from '../../../Avatar';
import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from '../elements/AccessibleButton';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import toRem from "../../../utils/rem";
+import {toRem} from "../../../utils/rem";
export default createReactClass({
displayName: 'BaseAvatar',
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index af14f6922c..0881fb3b67 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -34,7 +34,7 @@ import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
import * as ObjectUtils from "../../../ObjectUtils";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {E2E_STATE} from "./E2EIcon";
-import torem from "../../../utils/rem";
+import {toRem} from "../../../utils/rem";
const eventTileTypes = {
'm.room.message': 'messages.MessageEvent',
@@ -474,7 +474,7 @@ export default createReactClass({
if (remainder > 0) {
remText = { remainder }+
+ style={{ right: "calc(" + toRem(-left) + " + " + receiptOffset + "px)" }}>{ remainder }+
;
}
}
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 85d443d55a..20d39a7f84 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -23,7 +23,7 @@ import { _t } from '../../../languageHandler';
import {formatDate} from '../../../DateUtils';
import Velociraptor from "../../../Velociraptor";
import * as sdk from "../../../index";
-import toRem from "../../../utils/rem";
+import {toRem} from "../../../utils/rem";
let bounce = false;
try {
diff --git a/src/utils/rem.js b/src/utils/rem.js
index 1f18c9de05..6278a91aa2 100644
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@@ -15,6 +15,6 @@ limitations under the License.
*/
// converts a pixel value to rem.
-export default function(pixelVal) {
+export function toRem(pixelVal) {
return pixelVal / 15 + "rem";
}
From 1289367a6b63f8e04e53da6ae5a2ae7e5a8e5455 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 14:31:24 +0100
Subject: [PATCH 0107/1388] Fix indentation
---
src/utils/rem.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/rem.js b/src/utils/rem.js
index 6278a91aa2..3729b4d596 100644
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@@ -16,5 +16,5 @@ limitations under the License.
// converts a pixel value to rem.
export function toRem(pixelVal) {
- return pixelVal / 15 + "rem";
+ return pixelVal / 15 + "rem";
}
From eb72245493c1dbe163f85afbf97a26b68078e525 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 15:19:12 +0100
Subject: [PATCH 0108/1388] fix syntax error
---
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
index 5cc220bd33..0af7e30d97 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_GeneralUserSettingsTab_changePassword .mx_Field,
+.mx_GeneralUserSettingsTab_changePassword .mx_Field {
@mixin mx_Settings_fullWidthField;
}
From af8430b98aa5e47116e76ce3547da955ad18b1dd Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 15:48:54 +0100
Subject: [PATCH 0109/1388] Inverted boolean
---
src/components/views/elements/Slider.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index 6712ddd7fd..adb2a6063b 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -82,7 +82,7 @@ export default class Slider extends React.Component {
let selection = null;
- if (this.props.disabled) {
+ if (!this.props.disabled) {
const offset = this.offset(this.props.values, this.props.value);
selection =
From 4e6748416c3d68757588e563d24f516dc17880c6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 15:53:12 +0100
Subject: [PATCH 0110/1388] Fix i18n
---
src/i18n/strings/en_EN.json | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bff1b8f415..58226595f7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -405,7 +405,6 @@
"Support adding custom themes": "Support adding custom themes",
"Enable cross-signing to verify per-user instead of per-session": "Enable cross-signing to verify per-user instead of per-session",
"Show info about bridges in room settings": "Show info about bridges in room settings",
- "Show padlocks on invite only rooms": "Show padlocks on invite only rooms",
"Font size": "Font size",
"Min font size": "Min font size",
"Max font size": "Max font size",
From 132a753deb787bb626b2431b7f0434debc3c1b74 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 28 Apr 2020 15:55:26 +0100
Subject: [PATCH 0111/1388] Lint getDefaultValue
---
src/settings/SettingsStore.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/settings/SettingsStore.js b/src/settings/SettingsStore.js
index b6856a5a6a..688925de40 100644
--- a/src/settings/SettingsStore.js
+++ b/src/settings/SettingsStore.js
@@ -373,9 +373,10 @@ export default class SettingsStore {
/**
* Gets the default value of a setting.
* @param {string} settingName The name of the setting to read the value of.
+ * @param {String} roomId The room ID to read the setting value in, may be null.
* @return {*} The default value
*/
- static getDefaultValue(settingName, roomId = null, excludeDefault = false) {
+ static getDefaultValue(settingName) {
// Verify that the setting is actually a setting
if (!SETTINGS[settingName]) {
throw new Error("Setting '" + settingName + "' does not appear to be a setting.");
From 2acb1663eb67473738511c3b6aa22899c9344cb3 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 29 Apr 2020 01:01:56 +0100
Subject: [PATCH 0112/1388] Appease the prop types
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 6c94a82c95..d089b4f6e0 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -274,8 +274,8 @@ export default class AppearanceUserSettingsTab extends React.Component {
type="text"
label={_t("Font size")}
autoComplete="off"
- placeholder={this.state.fontSize}
- value={this.state.fontSize}
+ placeholder={toString(this.state.fontSize)}
+ value={toString(this.state.fontSize)}
id="font_size_field"
onValidate={this._onValidateFontSize}
onChange={({value}) => this.setState({fontSize: value})}
From f7b3662e0b306d66feefe7ac03211165518565f7 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 29 Apr 2020 10:32:05 +0100
Subject: [PATCH 0113/1388] Fully appease prop types
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index d089b4f6e0..6fd44b691d 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -107,7 +107,6 @@ export default class AppearanceUserSettingsTab extends React.Component {
_onValidateFontSize = ({value}) => {
console.log({value});
- this.setState({fontSize: value});
const parsedSize = parseFloat(value);
const min = SettingsStore.getValue("font_size_min");
@@ -274,11 +273,11 @@ export default class AppearanceUserSettingsTab extends React.Component {
type="text"
label={_t("Font size")}
autoComplete="off"
- placeholder={toString(this.state.fontSize)}
- value={toString(this.state.fontSize)}
+ placeholder={this.state.fontSize.toString()}
+ value={this.state.fontSize.toString()}
id="font_size_field"
onValidate={this._onValidateFontSize}
- onChange={({value}) => this.setState({fontSize: value})}
+ onChange={(value) => this.setState({fontSize: value.target.value})}
disabled={!this.state.useCustomFontSize}
/>
;
From bab7d5f461a6c51d142fe9ff7d5be6cd4cfd9bbb Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 6 May 2020 17:25:54 +0100
Subject: [PATCH 0114/1388] Some lints
---
res/css/views/elements/_Slider.scss | 12 ++++++------
res/themes/light/css/_light.scss | 4 ++--
src/FontWatcher.js | 12 ++++++------
src/components/views/elements/Slider.tsx | 2 +-
.../tabs/user/AppearanceUserSettingsTab.js | 14 +++++++-------
src/settings/Settings.js | 6 +++---
6 files changed, 25 insertions(+), 25 deletions(-)
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index f6982865db..09afb58b12 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -38,7 +38,7 @@ limitations under the License.
.mx_Slider_bar > hr {
width: 100%;
- border: 0.2em solid $Slider-background-color;
+ border: 0.2em solid $slider-background-color;
}
.mx_Slider_selection {
@@ -54,7 +54,7 @@ limitations under the License.
position: absolute;
width: 1.1em;
height: 1.1em;
- background-color: $Slider-selection-color;
+ background-color: $slider-selection-color;
border-radius: 50%;
box-shadow: 0 0 6px lightgrey;
z-index: 10;
@@ -63,7 +63,7 @@ limitations under the License.
.mx_Slider_selection > hr {
transition: width 0.25s;
margin: 0;
- border: 0.2em solid $Slider-selection-color;
+ border: 0.2em solid $slider-selection-color;
}
.mx_Slider_dot {
@@ -71,19 +71,19 @@ limitations under the License.
height: 1em;
width: 1em;
border-radius: 50%;
- background-color: $Slider-background-color;
+ background-color: $slider-background-color;
z-index: 0;
}
.mx_Slider_dotActive {
- background-color: $Slider-selection-color;
+ background-color: $slider-selection-color;
}
.mx_Slider_dotValue {
display: flex;
flex-direction: column;
align-items: center;
- color: $Slider-background-color;
+ color: $slider-background-color;
}
// The following is a hack to center the labels without adding
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index ed7eae48f7..78fe2a74c5 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -263,8 +263,8 @@ $togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff;
// Slider
-$Slider-selection-color: $accent-color;
-$Slider-background-color: #c1c9d6;
+$slider-selection-color: $accent-color;
+$slider-background-color: #c1c9d6;
$progressbar-color: #000;
diff --git a/src/FontWatcher.js b/src/FontWatcher.js
index 2e37921ee6..561edc4662 100644
--- a/src/FontWatcher.js
+++ b/src/FontWatcher.js
@@ -23,7 +23,7 @@ export class FontWatcher {
}
start() {
- this._setRootFontSize(SettingsStore.getValue("font_size"));
+ this._setRootFontSize(SettingsStore.getValue("fontSize"));
this._dispatcherRef = dis.register(this._onAction);
}
@@ -37,15 +37,15 @@ export class FontWatcher {
}
};
- _setRootFontSize = size => {
- const min = SettingsStore.getValue("font_size_min");
- const max = SettingsStore.getValue("font_size_max");
+ _setRootFontSize = (size) => {
+ const min = SettingsStore.getValue("fontSizeMin");
+ const max = SettingsStore.getValue("fontSizeMax");
const fontSize = Math.max(Math.min(max, size), min);
if (fontSize != size) {
- SettingsStore.setValue("font_size", null, SettingLevel.Device, fontSize);
+ SettingsStore.setValue("fontSize", null, SettingLevel.Device, fontSize);
}
document.querySelector(":root").style.fontSize = fontSize + "px";
- }
+ };
}
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index adb2a6063b..e181f0d9e3 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -47,7 +47,7 @@ export default class Slider extends React.Component {
// the index of the first number greater than value.
let closest = values.reduce((prev, curr) => {
return (value > curr ? prev + 1 : prev);
- }, 0);
+ }, 0);
// Off the left
if (closest === 0) {
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 6fd44b691d..ac98664be0 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -32,7 +32,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
super();
this.state = {
- fontSize: SettingsStore.getValue("font_size", null),
+ fontSize: SettingsStore.getValue("fontSize", null),
...this._calculateThemeState(),
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
@@ -102,15 +102,15 @@ export default class AppearanceUserSettingsTab extends React.Component {
_onFontSizeChanged = (size) => {
this.setState({fontSize: size});
- SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, size);
+ SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, size);
};
_onValidateFontSize = ({value}) => {
console.log({value});
const parsedSize = parseFloat(value);
- const min = SettingsStore.getValue("font_size_min");
- const max = SettingsStore.getValue("font_size_max");
+ const min = SettingsStore.getValue("fontSizeMin");
+ const max = SettingsStore.getValue("fontSizeMax");
if (isNaN(parsedSize)) {
return {valid: false, feedback: _t("Size must be a number")};
@@ -123,7 +123,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
};
}
- SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, value);
+ SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, value);
return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
}
@@ -253,8 +253,8 @@ export default class AppearanceUserSettingsTab extends React.Component {
Aa
Date: Wed, 29 Apr 2020 14:57:45 +0100
Subject: [PATCH 0115/1388] add useIRCLayout setting
---
src/i18n/strings/en_EN.json | 1 +
src/settings/Settings.js | 11 +++++++++++
2 files changed, 12 insertions(+)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a24b2bde73..3dcba0f546 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -408,6 +408,7 @@
"Enable cross-signing to verify per-user instead of per-session": "Enable cross-signing to verify per-user instead of per-session",
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
+ "Use IRC layout": "Use IRC layout",
"Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages",
"Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 5c6d843349..c51bf44ee5 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -94,6 +94,12 @@ export const SETTINGS = {
// // not use this for new settings.
// invertedSettingName: "my-negative-setting",
// },
+ "feature_alternate_message_layouts": {
+ isFeature: true,
+ displayName: _td("Alternate message layouts"),
+ supportedLevels: LEVELS_FEATURE,
+ default: false,
+ },
"feature_pinning": {
isFeature: true,
displayName: _td("Message Pinning"),
@@ -164,6 +170,11 @@ export const SETTINGS = {
default: true,
invertedSettingName: 'MessageComposerInput.dontSuggestEmoji',
},
+ "useIRCLayout": {
+ supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+ displayName: _td('Use IRC layout'),
+ default: false,
+ },
"useCompactLayout": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Use compact timeline layout'),
From e0c89f6180331350485ca7331ff9e190a83a3d5f Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 29 Apr 2020 15:06:38 +0100
Subject: [PATCH 0116/1388] Add switch between layout classes
---
src/components/structures/MessagePanel.js | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 6fbfdb504b..0123d43920 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -117,6 +117,7 @@ export default class MessagePanel extends React.Component {
// display 'ghost' read markers that are animating away
ghostReadMarkers: [],
showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+ useIRCLayout: SettingsStore.getValue("useIRCLayout"),
};
// opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -169,6 +170,8 @@ export default class MessagePanel extends React.Component {
this._showTypingNotificationsWatcherRef =
SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
+
+ this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
}
componentDidMount() {
@@ -178,6 +181,7 @@ export default class MessagePanel extends React.Component {
componentWillUnmount() {
this._isMounted = false;
SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
+ SettingsStore.unwatchSetting(this._layoutWatcherRef);
}
componentDidUpdate(prevProps, prevState) {
@@ -196,6 +200,12 @@ export default class MessagePanel extends React.Component {
});
};
+ onLayoutChange = () => {
+ this.setState({
+ useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+ });
+ }
+
/* get the DOM node representing the given event */
getNodeForEventId(eventId) {
if (!this.eventNodes) {
@@ -779,6 +789,8 @@ export default class MessagePanel extends React.Component {
this.props.className,
{
"mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
+ "mx_IRCLayout": this.state.useIRCLayout,
+ "mx_GroupLayout": !this.state.useIRCLayout,
},
);
From c1e740a59603ae178364cac18c8ecdd5443c9df6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 29 Apr 2020 15:07:17 +0100
Subject: [PATCH 0117/1388] Break out group layout settings
---
res/css/views/rooms/_EventTile.scss | 12 -------
res/css/views/rooms/_GroupLayout.scss | 52 +++++++++++++++++++++++++++
2 files changed, 52 insertions(+), 12 deletions(-)
create mode 100644 res/css/views/rooms/_GroupLayout.scss
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 752cf982f6..b9a41c4310 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -68,11 +68,9 @@ limitations under the License.
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
- padding-left: 65px; /* left gutter */
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
- line-height: $font-17px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
@@ -101,12 +99,9 @@ limitations under the License.
.mx_EventTile .mx_MessageTimestamp {
display: block;
- visibility: hidden;
white-space: nowrap;
left: 0px;
- width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
- position: absolute;
user-select: none;
}
@@ -117,10 +112,7 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
padding-left: 65px; /* left gutter */
- padding-top: 3px;
- padding-bottom: 3px;
border-radius: 4px;
- line-height: $font-22px;
}
.mx_RoomView_timeline_rr_enabled,
@@ -151,10 +143,6 @@ limitations under the License.
margin-right: 10px;
}
-.mx_EventTile_info .mx_EventTile_line {
- padding-left: 83px;
-}
-
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px !important;
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
new file mode 100644
index 0000000000..6528d6c6cd
--- /dev/null
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -0,0 +1,52 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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.
+*/
+
+$left-gutter: 65px;
+
+.mx_GroupLayout {
+
+ .mx_EventTile {
+ > .mx_SenderProfile {
+ line-height: $font-17px;
+ padding-left: $left-gutter;
+ }
+
+ > .mx_EventTile_line {
+ padding-left: $left-gutter;
+ }
+
+ > .mx_EventTile_avatar {
+ position: absolute;
+ }
+
+ .mx_MessageTimestamp {
+ visibility: hidden;
+ position: absolute;
+ width: 46px; /* 8 + 30 (avatar) + 8 */
+ }
+
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding-top: 3px;
+ padding-bottom: 3px;
+ line-height: $font-22px;
+ }
+ }
+
+ .mx_EventTile_info .mx_EventTile_line {
+ padding-left: 83px;
+ }
+}
From 10c8d253c86334e11c3a8582db6d63e073bcb79e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 29 Apr 2020 15:07:41 +0100
Subject: [PATCH 0118/1388] Create irc layout
---
res/css/views/rooms/_IRCLayout.scss | 124 ++++++++++++++++++++++
src/components/structures/MessagePanel.js | 1 +
src/components/views/rooms/EventTile.js | 30 ++++--
3 files changed, 148 insertions(+), 7 deletions(-)
create mode 100644 res/css/views/rooms/_IRCLayout.scss
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
new file mode 100644
index 0000000000..6152749573
--- /dev/null
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -0,0 +1,124 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$name-width: 50px;
+$icon-width: 14px;
+$timestamp-width: 45px;
+$right-padding: 5px;
+
+.mx_IRCLayout {
+
+ line-height: $font-22px !important;
+
+ .mx_EventTile {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+
+ > * {
+ margin-right: $right-padding;
+ }
+
+ > .mx_EventTile_msgOption {
+ order: 4;
+ flex-shrink: 0;
+ }
+
+ > .mx_SenderProfile {
+ order: 2;
+ flex-shrink: 0;
+ width: $name-width;
+ text-overflow: ellipsis;
+ text-align: right;
+ display: flex;
+ align-items: center;
+ }
+
+ > .mx_EventTile_line {
+ order: 3;
+ flex-grow: 1;
+ }
+
+ > .mx_EventTile_avatar {
+ order: 1;
+ position: relative;
+ top: 0;
+ left: 0;
+ flex-shrink: 0;
+ height: 22px;
+ display: flex;
+ align-items: center;
+
+ > .mx_BaseAvatar {
+ height: 1rem;
+ width: 1rem;
+ }
+ }
+
+ .mx_MessageTimestamp {
+ font-size: $font-10px;
+ width: $timestamp-width;
+ text-align: right;
+ }
+
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding: 0;
+ }
+
+ .mx_EventTile_e2eIcon {
+ position: relative;
+ right: unset;
+ left: unset;
+ top: -2px;
+ padding: 0;
+ }
+
+ .mx_EventTile_line > * {
+ display: inline-block;
+ }
+ }
+
+ .mx_EventListSummary {
+ > .mx_EventTile_line {
+ padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+ }
+ }
+
+ .mx_EventTile.mx_EventTile_info {
+ .mx_EventTile_avatar {
+ left: calc($name-width + 10px + $icon-width);
+ top: 0;
+ }
+
+ .mx_EventTile_line {
+ left: calc($name-width + 10px + $icon-width);
+ }
+
+ .mx_TextualEvent {
+ line-height: $font-22px;
+ }
+ }
+
+ .mx_EventTile_continuation:not(.mx_EventTile_info) {
+ .mx_EventTile_avatar {
+ visibility: hidden;
+ }
+
+ .mx_SenderProfile {
+ visibility: hidden;
+ }
+ }
+}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 0123d43920..80e5d17bf3 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -607,6 +607,7 @@ export default class MessagePanel extends React.Component {
isSelectedEvent={highlight}
getRelationsForEvent={this.props.getRelationsForEvent}
showReactions={this.props.showReactions}
+ useIRCLayout={this.state.useIRCLayout}
/>
,
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index a64fd82eb5..2da9677a17 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -206,6 +206,9 @@ export default createReactClass({
// whether to show reactions for this event
showReactions: PropTypes.bool,
+
+ // whether to use the irc layout
+ useIRCLayout: PropTypes.bool,
},
getDefaultProps: function() {
@@ -653,6 +656,8 @@ export default createReactClass({
const classes = classNames({
mx_EventTile_bubbleContainer: isBubbleMessage,
mx_EventTile: true,
+ mx_EventTile_irc: this.props.useIRCLayout,
+ mx_EventTile_group: !this.props.useIRCLayout,
mx_EventTile_isEditing: isEditing,
mx_EventTile_info: isInfoMessage,
mx_EventTile_12hr: this.props.isTwelveHour,
@@ -696,6 +701,9 @@ export default createReactClass({
// joins/parts/etc
avatarSize = 14;
needsSenderProfile = false;
+ } else if (this.props.useIRCLayout) {
+ avatarSize = 14;
+ needsSenderProfile = true;
} else if (this.props.continuation && this.props.tileShape !== "file_grid") {
// no avatar or sender profile for continuation messages
avatarSize = 0;
@@ -879,21 +887,29 @@ export default createReactClass({
this.props.permalinkCreator,
this._replyThread,
);
+
+ const linkedTimestamp =
+ { timestamp }
+ ;
+
+ const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
+ const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
+
+
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return (
+ { ircTimestamp }
{ readAvatars }
{ sender }
-
- { timestamp }
-
+ { groupTimestamp }
{ !isBubbleMessage && this._renderE2EPadlock() }
{ thread }
Date: Wed, 29 Apr 2020 15:07:47 +0100
Subject: [PATCH 0119/1388] Include new css files
---
res/css/_components.scss | 2 ++
1 file changed, 2 insertions(+)
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 0ba2b609e8..a66d15af18 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -159,6 +159,8 @@
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_EventTile_group.scss";
+@import "./views/rooms/_EventTile_irc.scss";
@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
From 6c3e3161de314b109810db0987f04877e5f42a10 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 29 Apr 2020 15:29:25 +0100
Subject: [PATCH 0120/1388] Reduce padding
---
res/css/views/rooms/_IRCLayout.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 6152749573..94ff681029 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -27,6 +27,7 @@ $right-padding: 5px;
display: flex;
flex-direction: row;
align-items: flex-start;
+ padding-top: 0;
> * {
margin-right: $right-padding;
From 54d211a847c8f198c2547c0cc9fc6c9715d142e5 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Mon, 4 May 2020 21:40:52 +0100
Subject: [PATCH 0121/1388] Index file name changes
---
res/css/_components.scss | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/res/css/_components.scss b/res/css/_components.scss
index a66d15af18..5466b785c0 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -159,8 +159,8 @@
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
-@import "./views/rooms/_EventTile_group.scss";
-@import "./views/rooms/_EventTile_irc.scss";
+@import "./views/rooms/_GroupLayout.scss";
+@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
From 67249e1e9c17c9886812e1e2e07a71e298d2bb9e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Mon, 4 May 2020 21:53:48 +0100
Subject: [PATCH 0122/1388] Fix hover
---
res/css/views/rooms/_IRCLayout.scss | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 94ff681029..10d8c701c3 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -122,4 +122,12 @@ $right-padding: 5px;
visibility: hidden;
}
}
+
+ // Suppress highlight thing from the normal Layout.
+ .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+ .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+ .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
+ padding-left: 0;
+ border-left: 0;
+ }
}
From 027826c2e1ca45cda9588a8d5cee257581048987 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 5 May 2020 10:54:44 +0100
Subject: [PATCH 0123/1388] Replies have the same layout as messages
---
res/css/views/rooms/_IRCLayout.scss | 13 +++++++--
src/components/views/elements/ReplyThread.js | 9 ++++--
src/components/views/rooms/EventTile.js | 29 ++++++++++----------
3 files changed, 30 insertions(+), 21 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 10d8c701c3..c7cf2c31c2 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -63,9 +63,12 @@ $right-padding: 5px;
display: flex;
align-items: center;
- > .mx_BaseAvatar {
- height: 1rem;
- width: 1rem;
+ // Need to use important to override the js provided height and width values.
+ > .mx_BaseAvatar, .mx_BaseAvatar > * {
+ height: $font-14px !important;
+ width: $font-14px !important;
+ font-size: $font-10px !important;
+ line-height: $font-14px !important;
}
}
@@ -90,6 +93,10 @@ $right-padding: 5px;
.mx_EventTile_line > * {
display: inline-block;
}
+
+ .mx_EventTile_reply {
+ order: 3;
+ }
}
.mx_EventListSummary {
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index eae2d13f8a..a8f9599f35 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -37,6 +37,8 @@ export default class ReplyThread extends React.Component {
// called when the ReplyThread contents has changed, including EventTiles thereof
onHeightChanged: PropTypes.func.isRequired,
permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
+ // Specifies which layout to use.
+ useIRCLayout: PropTypes.bool,
};
static contextType = MatrixClientContext;
@@ -176,12 +178,12 @@ export default class ReplyThread extends React.Component {
};
}
- static makeThread(parentEv, onHeightChanged, permalinkCreator, ref) {
+ static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
if (!ReplyThread.getParentEventId(parentEv)) {
return
;
}
return ;
+ ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} />;
}
componentDidMount() {
@@ -331,7 +333,8 @@ export default class ReplyThread extends React.Component {
onHeightChanged={this.props.onHeightChanged}
permalinkCreator={this.props.permalinkCreator}
isRedacted={ev.isRedacted()}
- isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+ isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+ useIRCLayout={this.props.useIRCLayout} />
;
});
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 2da9677a17..837c8929b9 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -795,6 +795,17 @@ export default createReactClass({
/>;
}
+ const linkedTimestamp =
+ { timestamp }
+ ;
+
+ const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
+ const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
+
switch (this.props.tileShape) {
case 'notif': {
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
@@ -862,12 +873,11 @@ export default createReactClass({
}
return (
+ { ircTimestamp }
{ avatar }
{ sender }
-
- { timestamp }
-
+ { groupTimestamp }
{ !isBubbleMessage && this._renderE2EPadlock() }
{ thread }
- { timestamp }
- ;
-
- const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
- const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
-
-
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return (
From 0af265bf93e703c42492c51b41a23f485f4099fe Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Tue, 5 May 2020 16:24:50 +0100
Subject: [PATCH 0124/1388] Fix replies
---
res/css/views/rooms/_IRCLayout.scss | 9 ++++++++-
src/components/views/elements/ReplyThread.js | 2 +-
2 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index c7cf2c31c2..b45d34013c 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -90,10 +90,17 @@ $right-padding: 5px;
padding: 0;
}
- .mx_EventTile_line > * {
+ .mx_EventTile_line .mx_EventTile_content,
+ .mx_EventTile_line .mx_EventTile_e2eIcon,
+ .mx_eventTile_line > div {
display: inline-block;
}
+ .mx_EvenTile_line .mx_MessageActionBar,
+ .mx_EvenTile_line .mx_ReplyThread_wrapper {
+ display: block;
+ }
+
.mx_EventTile_reply {
order: 3;
}
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index a8f9599f35..52a94110ba 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -338,7 +338,7 @@ export default class ReplyThread extends React.Component {
;
});
- return
+ return
;
From 07c2d0cb0256ff7ab359416222d6411e0100594a Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 6 May 2020 09:24:33 +0100
Subject: [PATCH 0125/1388] Composer reply previews have group layout
---
src/components/views/rooms/MessageComposer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 4749742a7d..663db5e942 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -370,7 +370,7 @@ export default class MessageComposer extends React.Component {
}
return (
-
+
{ controls }
From 5568e6488d18c2ef8da79514f852ac562cdcf049 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 6 May 2020 09:51:01 +0100
Subject: [PATCH 0126/1388] Fix encryption badge layout
---
res/css/views/rooms/_IRCLayout.scss | 2 +-
src/components/views/elements/ReplyThread.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index b45d34013c..968d8ebdea 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -92,7 +92,7 @@ $right-padding: 5px;
.mx_EventTile_line .mx_EventTile_content,
.mx_EventTile_line .mx_EventTile_e2eIcon,
- .mx_eventTile_line > div {
+ .mx_EventTile_line .mx_ReplyThread_wrapper_empty {
display: inline-block;
}
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 52a94110ba..de242f5632 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -180,7 +180,7 @@ export default class ReplyThread extends React.Component {
static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
if (!ReplyThread.getParentEventId(parentEv)) {
- return
;
+ return
;
}
return ;
From 771ae5e18f23b7b7954950b43fa7e5e52b70b0e8 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 7 May 2020 13:55:23 +0100
Subject: [PATCH 0127/1388] Fix encryption badge layouts and replies. Begin
removing dependence on slider. Move settings to labs. Username
disambiguation.
---
res/css/views/rooms/_IRCLayout.scss | 34 +++++++++++++++----
src/components/structures/MessagePanel.js | 16 +++++++--
src/components/views/elements/ReplyThread.js | 10 ++++--
.../views/messages/SenderProfile.js | 3 ++
src/components/views/rooms/EventTile.js | 6 +++-
src/i18n/strings/en_EN.json | 1 +
src/settings/Settings.js | 17 +++++++---
7 files changed, 69 insertions(+), 18 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 968d8ebdea..e4536aec20 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-$name-width: 50px;
+$name-width: 70px;
$icon-width: 14px;
$timestamp-width: 45px;
$right-padding: 5px;
.mx_IRCLayout {
- line-height: $font-22px !important;
+ line-height: $font-20px !important;
.mx_EventTile {
display: flex;
@@ -46,11 +46,13 @@ $right-padding: 5px;
text-align: right;
display: flex;
align-items: center;
+ overflow: visible;
}
> .mx_EventTile_line {
order: 3;
flex-grow: 1;
+ margin-bottom: -6px;
}
> .mx_EventTile_avatar {
@@ -90,10 +92,13 @@ $right-padding: 5px;
padding: 0;
}
- .mx_EventTile_line .mx_EventTile_content,
- .mx_EventTile_line .mx_EventTile_e2eIcon,
- .mx_EventTile_line .mx_ReplyThread_wrapper_empty {
- display: inline-block;
+ .mx_EventTile_line {
+ .mx_EventTile_e2eIcon,
+ .mx_TextualEvent,
+ .mx_MTextBody,
+ .mx_ReplyThread_wrapper_empty {
+ display: inline-block;
+ }
}
.mx_EvenTile_line .mx_MessageActionBar,
@@ -104,6 +109,10 @@ $right-padding: 5px;
.mx_EventTile_reply {
order: 3;
}
+
+ .mx_EditMessageComposer_buttons {
+ position: relative;
+ }
}
.mx_EventListSummary {
@@ -144,4 +153,17 @@ $right-padding: 5px;
padding-left: 0;
border-left: 0;
}
+
+ .mx_SenderProfile_hover {
+ background-color: $primary-bg-color;
+ overflow: hidden;
+ width: $name-width;
+ transition: width 2s;
+ }
+
+ .mx_SenderProfile_hover:hover {
+ overflow: visible;
+ width: auto;
+ z-index: 10;
+ }
}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 80e5d17bf3..66ed5ee81f 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -117,7 +117,8 @@ export default class MessagePanel extends React.Component {
// display 'ghost' read markers that are animating away
ghostReadMarkers: [],
showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
- useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+ useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+ displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
};
// opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -171,7 +172,8 @@ export default class MessagePanel extends React.Component {
this._showTypingNotificationsWatcherRef =
SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
- this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
+ this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
+ this._displayAvatarsWatcherRef = SettingsStore.watchSetting("feature_no_timeline_avatars", null, this.onDisplayAvatarsChange);
}
componentDidMount() {
@@ -182,6 +184,7 @@ export default class MessagePanel extends React.Component {
this._isMounted = false;
SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
SettingsStore.unwatchSetting(this._layoutWatcherRef);
+ SettingsStore.unwatchSetting(this._displayAvatarsWatcherRef);
}
componentDidUpdate(prevProps, prevState) {
@@ -202,7 +205,13 @@ export default class MessagePanel extends React.Component {
onLayoutChange = () => {
this.setState({
- useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+ useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+ });
+ }
+
+ onDisplayAvatarsChange = () => {
+ this.setState({
+ displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
});
}
@@ -608,6 +617,7 @@ export default class MessagePanel extends React.Component {
getRelationsForEvent={this.props.getRelationsForEvent}
showReactions={this.props.showReactions}
useIRCLayout={this.state.useIRCLayout}
+ displayAvatars={this.state.displayAvatars}
/>
,
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index de242f5632..d1d46e709a 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -39,6 +39,8 @@ export default class ReplyThread extends React.Component {
permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
// Specifies which layout to use.
useIRCLayout: PropTypes.bool,
+ // Specifies whether to display avatars.
+ displayAvatars: PropTypes.bool,
};
static contextType = MatrixClientContext;
@@ -178,12 +180,12 @@ export default class ReplyThread extends React.Component {
};
}
- static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
+ static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout, displayAvatars) {
if (!ReplyThread.getParentEventId(parentEv)) {
return
;
}
return ;
+ ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} displayAvatars={displayAvatars} />;
}
componentDidMount() {
@@ -334,7 +336,9 @@ export default class ReplyThread extends React.Component {
permalinkCreator={this.props.permalinkCreator}
isRedacted={ev.isRedacted()}
isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
- useIRCLayout={this.props.useIRCLayout} />
+ useIRCLayout={this.props.useIRCLayout}
+ displayAvatars={this.props.displayAvatars}
+ />
;
});
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index bed93b68c3..d95c9d685a 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -131,7 +131,10 @@ export default createReactClass({
return (
+
+ { content }
{ content }
+
);
},
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 837c8929b9..b2daa5667f 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -209,6 +209,9 @@ export default createReactClass({
// whether to use the irc layout
useIRCLayout: PropTypes.bool,
+
+ // whether to display avatars
+ displayAvatars: PropTypes.bool,
},
getDefaultProps: function() {
@@ -713,7 +716,7 @@ export default createReactClass({
needsSenderProfile = true;
}
- if (this.props.mxEvent.sender && avatarSize) {
+ if (this.props.mxEvent.sender && avatarSize && this.props.displayAvatars) {
avatar = (
Date: Thu, 7 May 2020 14:06:40 +0100
Subject: [PATCH 0128/1388] Remove unused setting
---
src/settings/Settings.js | 6 ------
1 file changed, 6 deletions(-)
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 7942aa67fc..032b0ee906 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -94,12 +94,6 @@ export const SETTINGS = {
// // not use this for new settings.
// invertedSettingName: "my-negative-setting",
// },
- "feature_alternate_message_layouts": {
- isFeature: true,
- displayName: _td("Alternate message layouts"),
- supportedLevels: LEVELS_FEATURE,
- default: false,
- },
"feature_pinning": {
isFeature: true,
displayName: _td("Message Pinning"),
From bc5fc57dd667d89fd774949cb2b940d198518a90 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 7 May 2020 14:22:15 +0100
Subject: [PATCH 0129/1388] Lint
This is why we shouldn't rely on regex
---
src/components/structures/MessagePanel.js | 6 +++++-
src/components/views/elements/ReplyThread.js | 9 +++++++--
src/i18n/strings/en_EN.json | 4 ++--
3 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 66ed5ee81f..f46df0175a 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -173,7 +173,11 @@ export default class MessagePanel extends React.Component {
SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
- this._displayAvatarsWatcherRef = SettingsStore.watchSetting("feature_no_timeline_avatars", null, this.onDisplayAvatarsChange);
+ this._displayAvatarsWatcherRef = SettingsStore.watchSetting(
+ "feature_no_timeline_avatars",
+ null,
+ this.onDisplayAvatarsChange,
+ );
}
componentDidMount() {
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index d1d46e709a..6bfda5dd94 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -184,8 +184,13 @@ export default class ReplyThread extends React.Component {
if (!ReplyThread.getParentEventId(parentEv)) {
return
;
}
- return ;
+ return ;
}
componentDidMount() {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a3cd88f9ae..ca62eb44fa 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -405,11 +405,11 @@
"Multiple integration managers": "Multiple integration managers",
"Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
"Support adding custom themes": "Support adding custom themes",
+ "Use IRC layout": "Use IRC layout",
+ "Display user avatars on messages": "Display user avatars on messages",
"Enable cross-signing to verify per-user instead of per-session": "Enable cross-signing to verify per-user instead of per-session",
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
- "Use IRC layout": "Use IRC layout",
- "Display user avatars on messages": "Display user avatars on messages",
"Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages",
"Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",
From ac95172ed4e6981bc5615fb982176d4a8c17a866 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Thu, 7 May 2020 14:56:45 +0100
Subject: [PATCH 0130/1388] tighter layout
---
res/css/views/rooms/_IRCLayout.scss | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index e4536aec20..fcdeef6590 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -21,7 +21,7 @@ $right-padding: 5px;
.mx_IRCLayout {
- line-height: $font-20px !important;
+ line-height: $font-18px !important;
.mx_EventTile {
display: flex;
@@ -52,7 +52,6 @@ $right-padding: 5px;
> .mx_EventTile_line {
order: 3;
flex-grow: 1;
- margin-bottom: -6px;
}
> .mx_EventTile_avatar {
From 9b7c63a7116c369d3e3e59c3a643067b6666ebca Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Fri, 8 May 2020 20:53:32 +0100
Subject: [PATCH 0131/1388] Duplicated names
---
src/components/views/messages/SenderProfile.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index d95c9d685a..d512b186e9 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -133,7 +133,6 @@ export default createReactClass({
{ content }
- { content }
);
From 82396661cf86d7c41285cded2d22523e84f3bc23 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Fri, 8 May 2020 22:21:26 +0100
Subject: [PATCH 0132/1388] Implement nitpicks
- usernames are elipsed
- icon alignment fixed
- replies are more dense
- reply messages respond to name widths
- fixed between message padding problem (flex ftw)
---
res/css/views/rooms/_IRCLayout.scss | 62 +++++++++++++++++++++++------
1 file changed, 50 insertions(+), 12 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index fcdeef6590..f5d8664884 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -18,12 +18,19 @@ $name-width: 70px;
$icon-width: 14px;
$timestamp-width: 45px;
$right-padding: 5px;
+$irc-line-height: $font-18px;
.mx_IRCLayout {
- line-height: $font-18px !important;
+ line-height: $irc-line-height !important;
.mx_EventTile {
+
+ // timestamps are links which shouldn't be underlined
+ > a {
+ text-decoration: none;
+ }
+
display: flex;
flex-direction: row;
align-items: flex-start;
@@ -49,7 +56,10 @@ $right-padding: 5px;
overflow: visible;
}
- > .mx_EventTile_line {
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding: 0;
+ display: flex;
+ flex-direction: column;
order: 3;
flex-grow: 1;
}
@@ -60,7 +70,7 @@ $right-padding: 5px;
top: 0;
left: 0;
flex-shrink: 0;
- height: 22px;
+ height: $irc-line-height;
display: flex;
align-items: center;
@@ -79,10 +89,6 @@ $right-padding: 5px;
text-align: right;
}
- .mx_EventTile_line, .mx_EventTile_reply {
- padding: 0;
- }
-
.mx_EventTile_e2eIcon {
position: relative;
right: unset;
@@ -98,6 +104,8 @@ $right-padding: 5px;
.mx_ReplyThread_wrapper_empty {
display: inline-block;
}
+
+
}
.mx_EvenTile_line .mx_MessageActionBar,
@@ -114,10 +122,25 @@ $right-padding: 5px;
}
}
+ .mx_EventTile_emote {
+ > .mx_EventTile_avatar {
+ margin-left: calc($name-width + $icon-width + $right-padding);
+ }
+ }
+
+ blockquote {
+ margin: 0;
+ }
+
.mx_EventListSummary {
> .mx_EventTile_line {
padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
}
+
+ .mx_EventListSummary_avatars {
+ padding: 0;
+ margin: 0;
+ }
}
.mx_EventTile.mx_EventTile_info {
@@ -131,16 +154,16 @@ $right-padding: 5px;
}
.mx_TextualEvent {
- line-height: $font-22px;
+ line-height: $irc-line-height;
}
}
.mx_EventTile_continuation:not(.mx_EventTile_info) {
- .mx_EventTile_avatar {
+ > .mx_EventTile_avatar {
visibility: hidden;
}
- .mx_SenderProfile {
+ > .mx_SenderProfile {
visibility: hidden;
}
}
@@ -156,8 +179,15 @@ $right-padding: 5px;
.mx_SenderProfile_hover {
background-color: $primary-bg-color;
overflow: hidden;
- width: $name-width;
- transition: width 2s;
+
+ > span {
+ display: flex;
+
+ > .mx_SenderProfile_name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
}
.mx_SenderProfile_hover:hover {
@@ -165,4 +195,12 @@ $right-padding: 5px;
width: auto;
z-index: 10;
}
+
+ .mx_ReplyThread {
+ margin: 0;
+ .mx_SenderProfile {
+ width: unset;
+ max-width: $name-width;
+ }
+ }
}
From fef4d882c44dcf93b677bac50cc09097df7f7839 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Fri, 8 May 2020 22:35:40 +0100
Subject: [PATCH 0133/1388] lint
---
res/css/views/rooms/_IRCLayout.scss | 2 --
1 file changed, 2 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index f5d8664884..301f712ffb 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -104,8 +104,6 @@ $irc-line-height: $font-18px;
.mx_ReplyThread_wrapper_empty {
display: inline-block;
}
-
-
}
.mx_EvenTile_line .mx_MessageActionBar,
From 5029c3f1434b33fe8b4aae825f5f3e03d4425dc0 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 13 May 2020 02:16:43 +0100
Subject: [PATCH 0134/1388] Implement IRC draggable display name width
---
res/css/views/rooms/_IRCLayout.scss | 23 +++--
src/components/structures/MessagePanel.js | 7 ++
src/components/structures/ScrollPanel.js | 6 ++
src/components/views/elements/Draggable.tsx | 84 ++++++++++++++++++
.../views/elements/ErrorBoundary.js | 2 +-
.../elements/IRCTimelineProfileResizer.tsx | 86 +++++++++++++++++++
src/settings/Settings.js | 7 ++
7 files changed, 207 insertions(+), 8 deletions(-)
create mode 100644 src/components/views/elements/Draggable.tsx
create mode 100644 src/components/views/elements/IRCTimelineProfileResizer.tsx
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 301f712ffb..159cfc0aad 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-$name-width: 70px;
$icon-width: 14px;
$timestamp-width: 45px;
$right-padding: 5px;
$irc-line-height: $font-18px;
.mx_IRCLayout {
+ --name-width: 70px;
line-height: $irc-line-height !important;
@@ -48,7 +48,7 @@ $irc-line-height: $font-18px;
> .mx_SenderProfile {
order: 2;
flex-shrink: 0;
- width: $name-width;
+ width: var(--name-width);
text-overflow: ellipsis;
text-align: right;
display: flex;
@@ -122,7 +122,7 @@ $irc-line-height: $font-18px;
.mx_EventTile_emote {
> .mx_EventTile_avatar {
- margin-left: calc($name-width + $icon-width + $right-padding);
+ margin-left: calc(var(--name-width) + $icon-width + $right-padding);
}
}
@@ -132,7 +132,7 @@ $irc-line-height: $font-18px;
.mx_EventListSummary {
> .mx_EventTile_line {
- padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+ padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
}
.mx_EventListSummary_avatars {
@@ -143,12 +143,12 @@ $irc-line-height: $font-18px;
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
- left: calc($name-width + 10px + $icon-width);
+ left: calc(var(--name-width) + 10px + $icon-width);
top: 0;
}
.mx_EventTile_line {
- left: calc($name-width + 10px + $icon-width);
+ left: calc(var(--name-width) + 10px + $icon-width);
}
.mx_TextualEvent {
@@ -198,7 +198,16 @@ $irc-line-height: $font-18px;
margin: 0;
.mx_SenderProfile {
width: unset;
- max-width: $name-width;
+ max-width: var(--name-width);
}
}
+
+ .mx_ProfileResizer {
+ position: absolute;
+ height: 100%;
+ width: 15px;
+ left: calc(80px + var(--name-width));
+ cursor: col-resize;
+ z-index: 100;
+ }
}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index f46df0175a..1c10efb346 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -29,6 +29,7 @@ import SettingsStore from '../../settings/SettingsStore';
import {_t} from "../../languageHandler";
import {haveTileForEvent} from "../views/rooms/EventTile";
import {textForEvent} from "../../TextForEvent";
+import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -819,6 +820,11 @@ export default class MessagePanel extends React.Component {
);
}
+ let ircResizer = null;
+ if (this.state.useIRCLayout) {
+ ircResizer = ;
+ }
+
return (
{ topSpinner }
{ this._getEventTiles() }
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 4f44c1a169..cb0114b243 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -144,6 +144,11 @@ export default createReactClass({
/* resizeNotifier: ResizeNotifier to know when middle column has changed size
*/
resizeNotifier: PropTypes.object,
+
+ /* fixedChildren: allows for children to be passed which are rendered outside
+ * of the wrapper
+ */
+ fixedChildren: PropTypes.node,
},
getDefaultProps: function() {
@@ -881,6 +886,7 @@ export default createReactClass({
return (
+ { this.props.fixedChildren }
{ this.props.children }
diff --git a/src/components/views/elements/Draggable.tsx b/src/components/views/elements/Draggable.tsx
new file mode 100644
index 0000000000..98f86fd524
--- /dev/null
+++ b/src/components/views/elements/Draggable.tsx
@@ -0,0 +1,84 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+interface IProps {
+ className: string,
+ dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState,
+ onMouseUp: (event: MouseEvent) => void,
+}
+
+interface IState {
+ onMouseMove: (event: MouseEvent) => void,
+ onMouseUp: (event: MouseEvent) => void,
+ location: ILocationState,
+}
+
+export interface ILocationState {
+ currentX: number,
+ currentY: number,
+}
+
+export default class Draggable extends React.Component {
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ onMouseMove: this.onMouseMove.bind(this),
+ onMouseUp: this.onMouseUp.bind(this),
+ location: {
+ currentX: 0,
+ currentY: 0,
+ },
+ };
+ }
+
+ private onMouseDown = (event: MouseEvent): void => {
+ this.setState({
+ location: {
+ currentX: event.clientX,
+ currentY: event.clientY,
+ },
+ });
+
+ document.addEventListener("mousemove", this.state.onMouseMove);
+ document.addEventListener("mouseup", this.state.onMouseUp);
+ console.log("Mouse down")
+ }
+
+ private onMouseUp = (event: MouseEvent): void => {
+ document.removeEventListener("mousemove", this.state.onMouseMove);
+ document.removeEventListener("mouseup", this.state.onMouseUp);
+ this.props.onMouseUp(event);
+ console.log("Mouse up")
+ }
+
+ private onMouseMove(event: MouseEvent): void {
+ console.log("Mouse Move")
+ const newLocation = this.props.dragFunc(this.state.location, event);
+
+ this.setState({
+ location: newLocation,
+ });
+ }
+
+ render() {
+ return
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/views/elements/ErrorBoundary.js b/src/components/views/elements/ErrorBoundary.js
index a043b350ab..1abd11f838 100644
--- a/src/components/views/elements/ErrorBoundary.js
+++ b/src/components/views/elements/ErrorBoundary.js
@@ -73,7 +73,7 @@ export default class ErrorBoundary extends React.PureComponent {
if (this.state.error) {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new";
- return
+ return
{_t("Something went wrong!")}
{_t(
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
new file mode 100644
index 0000000000..80a86b2005
--- /dev/null
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -0,0 +1,86 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import Draggable, {ILocationState} from './Draggable';
+
+interface IProps {
+ // Current room
+ roomId: string,
+ minWidth: number,
+ maxWidth: number,
+};
+
+interface IState {
+ width: number,
+ IRCLayoutRoot: HTMLElement,
+};
+
+export default class IRCTimelineProfileResizer extends React.Component {
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ width: SettingsStore.getValue("ircDisplayNameWidth", this.props.roomId),
+ IRCLayoutRoot: null,
+ }
+ };
+
+ componentDidMount() {
+ this.setState({
+ IRCLayoutRoot: document.querySelector(".mx_IRCLayout") as HTMLElement,
+ }, () => this.updateCSSWidth(this.state.width))
+ }
+
+ private dragFunc = (location: ILocationState, event: React.MouseEvent): ILocationState => {
+ const offset = event.clientX - location.currentX;
+ const newWidth = this.state.width + offset;
+
+ console.log({offset})
+ // If we're trying to go smaller than min width, don't.
+ if (this.state.width <= this.props.minWidth && offset <= 0) {
+ return location;
+ }
+
+ if (this.state.width >= this.props.maxWidth && offset >= 0) {
+ return location;
+ }
+
+ this.setState({
+ width: newWidth,
+ });
+
+ this.updateCSSWidth.bind(this)(newWidth);
+
+ return {
+ currentX: event.clientX,
+ currentY: location.currentY,
+ }
+ }
+
+ private updateCSSWidth(newWidth: number) {
+ this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
+ }
+
+ private onMoueUp(event: MouseEvent) {
+ SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+ }
+
+ render() {
+ return
+ }
+};
\ No newline at end of file
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 032b0ee906..6d741ba3a5 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -531,4 +531,11 @@ export const SETTINGS = {
MatrixClient.prototype.setCryptoTrustCrossSignedDevices, true,
),
},
+ "ircDisplayNameWidth": {
+ // We specifically want to have room-device > device so that users may set a device default
+ // with a per-room override.
+ supportedLevels: ['room-device', 'device'],
+ displayName: _td("IRC display name width"),
+ default: 80,
+ },
};
From 3f04f5163a963b9193199abb340719061ae0e921 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 13 May 2020 14:04:46 +0100
Subject: [PATCH 0135/1388] Implement more nitpicks
- fix avatar inital aligment
- right align names
- set flair height to avatar's
- fix conditions for resizing to be more stable
---
res/css/views/rooms/_IRCLayout.scss | 13 ++++++++++++-
.../views/elements/IRCTimelineProfileResizer.tsx | 4 ++--
2 files changed, 14 insertions(+), 3 deletions(-)
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 159cfc0aad..8d48c72f8a 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -54,6 +54,7 @@ $irc-line-height: $font-18px;
display: flex;
align-items: center;
overflow: visible;
+ justify-content: flex-end;
}
.mx_EventTile_line, .mx_EventTile_reply {
@@ -79,7 +80,7 @@ $irc-line-height: $font-18px;
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
- line-height: $font-14px !important;
+ line-height: $font-15px !important;
}
}
@@ -188,6 +189,10 @@ $irc-line-height: $font-18px;
}
}
+ .mx_SenderProfile:hover {
+ justify-content: flex-start;
+ }
+
.mx_SenderProfile_hover:hover {
overflow: visible;
width: auto;
@@ -210,4 +215,10 @@ $irc-line-height: $font-18px;
cursor: col-resize;
z-index: 100;
}
+
+ // Need to use important to override the js provided height and width values.
+ .mx_Flair > img {
+ height: $font-14px !important;
+ width: $font-14px !important;
+ }
}
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index 80a86b2005..44ceeb9b7b 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -52,11 +52,11 @@ export default class IRCTimelineProfileResizer extends React.Component= this.props.maxWidth && offset >= 0) {
+ if (newWidth > this.props.maxWidth) {
return location;
}
From 312b616d7701e9b9f8460d210bc22a07c1253be9 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 13 May 2020 14:11:16 +0100
Subject: [PATCH 0136/1388] fix i18n
---
src/i18n/strings/en_EN.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ca62eb44fa..37b9c1dfc8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -453,6 +453,7 @@
"Keep recovery passphrase in memory for this session": "Keep recovery passphrase in memory for this session",
"How fast should messages be downloaded.": "How fast should messages be downloaded.",
"Manually verify all remote sessions": "Manually verify all remote sessions",
+ "IRC display name width": "IRC display name width",
"Collecting app version information": "Collecting app version information",
"Collecting logs": "Collecting logs",
"Uploading report": "Uploading report",
From 328bb7bcaf05621443c7a75ab791a9c8eb0ac884 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 13 May 2020 15:24:08 +0100
Subject: [PATCH 0137/1388] Remove all animations
---
res/css/_common.scss | 1 -
res/css/views/elements/_Slider.scss | 3 ---
2 files changed, 4 deletions(-)
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 687a238c8e..03442ca510 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -19,7 +19,6 @@ limitations under the License.
@import "./_font-sizes.scss";
:root {
- transition: font-size 0.25s;
font-size: 15px;
}
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 09afb58b12..06c3c4c98b 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -50,7 +50,6 @@ limitations under the License.
}
.mx_Slider_selectionDot {
- transition: left 0.25s;
position: absolute;
width: 1.1em;
height: 1.1em;
@@ -61,13 +60,11 @@ limitations under the License.
}
.mx_Slider_selection > hr {
- transition: width 0.25s;
margin: 0;
border: 0.2em solid $slider-selection-color;
}
.mx_Slider_dot {
- transition: background-color 0.2s ease-in;
height: 1em;
width: 1em;
border-radius: 50%;
From fea219915f4a666d73259406323b185a9d5067f6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 13 May 2020 15:26:11 +0100
Subject: [PATCH 0138/1388] fix code regeression
---
.../views/settings/tabs/user/GeneralUserSettingsTab.js | 3 ---
1 file changed, 3 deletions(-)
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index 0cee29233f..21e406aa23 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -60,9 +60,6 @@ export default class GeneralUserSettingsTab extends React.Component {
emails: [],
msisdns: [],
loading3pids: true, // whether or not the emails and msisdns have been loaded
- ...this._calculateThemeState(),
- customThemeUrl: "",
- customThemeMessage: {isError: false, text: ""},
};
this.dispatcherRef = dis.register(this._onAction);
From 20ec900405721dce6faf130a20223ff4faa01ff6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens
Date: Wed, 13 May 2020 15:36:53 +0100
Subject: [PATCH 0139/1388] Set font range
---
.../views/settings/tabs/user/AppearanceUserSettingsTab.js | 6 +-----
src/settings/Settings.js | 4 ++--
2 files changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index ac98664be0..1ccc744dc7 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -252,11 +252,7 @@ export default class AppearanceUserSettingsTab extends React.Component {