From f10d9e47e7c9e4d4ee20175256af3a2616940877 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 31 Mar 2020 16:02:23 +0100 Subject: [PATCH 001/109] Fix event tiles to smoothly resize with font. --- res/css/views/rooms/_EventTile.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 0dc60226b80..a6cff9cfb0c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -114,10 +114,9 @@ limitations under the License. clear: both; position: relative; padding-left: 65px; /* left gutter */ - padding-top: 4px; - padding-bottom: 2px; + padding-top: 3px; + padding-bottom: 3px; border-radius: 4px; - min-height: 24px; line-height: $font-22px; } From 1ff0f3445a52806888d82a2f25d95a120b9114cb Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Fri, 3 Apr 2020 17:53:49 +0100 Subject: [PATCH 002/109] Fix pills. This was a hard pill to swallow --- res/css/views/elements/_RichText.scss | 35 +++++++++---------- res/css/views/rooms/_Autocomplete.scss | 9 ++--- .../views/rooms/_BasicMessageComposer.scss | 13 +++---- src/components/views/avatars/BaseAvatar.js | 22 ++++++++---- 4 files changed, 43 insertions(+), 36 deletions(-) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index e01b1f89388..cb0c2eacc18 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -6,11 +6,14 @@ .mx_RoomPill, .mx_GroupPill, .mx_AtRoomPill { - border-radius: 16px; - display: inline-block; - height: 20px; + display: inline-flex; + align-items: center; + vertical-align: middle; + border-radius: $font-16px; + height: $font-16px; line-height: $font-20px; - padding-left: 5px; + padding-left: 0; + padding-right: 0.5em; } a.mx_Pill { @@ -19,6 +22,11 @@ a.mx_Pill { overflow: hidden; vertical-align: text-bottom; max-width: calc(100% - 1ch); + height: $font-24px; +} + +.mx_Pill { + padding: 0.3rem; } /* More specific to override `.markdown-body a` text-decoration */ @@ -31,8 +39,7 @@ a.mx_Pill { .mx_UserPill { color: $primary-fg-color; background-color: $other-user-pill-bg-color; - padding-right: 5px; -} + } .mx_UserPill_selected { background-color: $accent-color !important; @@ -45,7 +52,6 @@ a.mx_Pill { .mx_MessageComposer_input .mx_AtRoomPill { color: $accent-fg-color; background-color: $mention-user-pill-bg-color; - padding-right: 5px; } /* More specific to override `.markdown-body a` color */ @@ -55,15 +61,6 @@ a.mx_Pill { .mx_GroupPill { color: $accent-fg-color; background-color: $rte-room-pill-color; - padding-right: 5px; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_content .markdown-body a.mx_GroupPill, -.mx_GroupPill { - color: $accent-fg-color; - background-color: $rte-group-pill-color; - padding-right: 5px; } .mx_EventTile_body .mx_UserPill, @@ -77,8 +74,10 @@ a.mx_Pill { .mx_GroupPill .mx_BaseAvatar, .mx_AtRoomPill .mx_BaseAvatar { position: relative; - left: -3px; - top: 2px; + display: inline-flex; + align-items: center; + border-radius: 10rem; + margin-right: 0.24rem; } .mx_Markdown_BOLD { diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index e5316f5a46a..a4aebdb7083 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -31,9 +31,10 @@ } .mx_Autocomplete_Completion_pill { - border-radius: 17px; - height: 34px; - padding: 0px 5px; + box-sizing: border-box; + border-radius: 2rem; + height: $font-34px; + padding: 0.4rem; display: flex; user-select: none; cursor: pointer; @@ -42,7 +43,7 @@ } .mx_Autocomplete_Completion_pill > * { - margin: 0 3px; + margin-right: 0.3rem; } /* styling for common completion elements */ diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index e9013eb7b70..e126e523a6e 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -46,22 +46,19 @@ limitations under the License. &.mx_BasicMessageComposer_input_shouldShowPillAvatar { span.mx_UserPill, span.mx_RoomPill { - padding-left: 21px; position: relative; // avatar psuedo element &::before { - position: absolute; - left: 2px; - top: 2px; content: var(--avatar-letter); - width: 16px; - height: 16px; + width: $font-16px; + height: $font-16px; + margin-right: 0.24rem; background: var(--avatar-background), $avatar-bg-color; color: $avatar-initial-color; background-repeat: no-repeat; - background-size: 16px; - border-radius: 8px; + background-size: $font-16px; + border-radius: $font-16px; text-align: center; font-weight: normal; line-height: $font-16px; diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index 3e3a2e6bd9f..d9336a81e70 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/src/components/views/avatars/BaseAvatar.js @@ -164,9 +164,9 @@ export default createReactClass({ const initialLetter = AvatarLogic.getInitialLetter(name); const textNode = ( @@ -174,7 +174,11 @@ export default createReactClass({ const imgNode = ( + aria-hidden="true" + style={{ + width: width/15 + "rem", + height: height/15 + "rem" + }} /> ); if (onClick != null) { return ( @@ -202,7 +206,10 @@ export default createReactClass({ src={imageUrl} onClick={onClick} onError={this.onError} - width={width} height={height} + style={{ + width: width/15 + "rem", + height: height/15 + "rem" + }} title={title} alt="" inputRef={inputRef} {...otherProps} /> @@ -213,7 +220,10 @@ export default createReactClass({ className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl} onError={this.onError} - width={width} height={height} + style={{ + width: width/15 + "rem", + height: height/15 + "rem" + }} title={title} alt="" ref={inputRef} {...otherProps} /> From 27b1ce841f4397a0bf6c362c7bc718efdd4571dc Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 6 Apr 2020 16:23:16 +0100 Subject: [PATCH 003/109] Scale room tile heights. --- res/css/views/rooms/_RoomTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index de018bf1787..5bc7d5624d4 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -20,7 +20,7 @@ limitations under the License. flex-direction: row; align-items: center; cursor: pointer; - height: 34px; + height: $font-34px; margin: 0; padding: 0 8px 0 10px; position: relative; From f54ca219cf01a8c88f74abfb76b0f0cad7fae10c Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 6 Apr 2020 16:23:52 +0100 Subject: [PATCH 004/109] Scale read receipt images --- res/css/views/rooms/_EventTile.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a6cff9cfb0c..77bfa858622 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -310,6 +310,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_readAvatars .mx_BaseAvatar { position: absolute; display: inline-block; + height: $font-14px; + width: $font-14px; } .mx_EventTile_readAvatarRemainder { From d12ed333c1040d0bcd6fb4b00b7a40baeac433f4 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 6 Apr 2020 16:48:35 +0100 Subject: [PATCH 005/109] Fix avatar alignment for room state events --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 77bfa858622..1c781eec20e 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -45,7 +45,7 @@ limitations under the License. } .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { - top: 8px; + top: $font-8px; left: 65px; } From 05d11fea6900b18c7d4063668188bfdf1c648772 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 6 Apr 2020 16:49:44 +0100 Subject: [PATCH 006/109] Use a function to convert to rem. --- src/components/views/avatars/BaseAvatar.js | 19 ++++++++++--------- src/utils/rem.js | 20 ++++++++++++++++++++ 2 files changed, 30 insertions(+), 9 deletions(-) create mode 100644 src/utils/rem.js diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index d9336a81e70..a17124b9add 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/src/components/views/avatars/BaseAvatar.js @@ -24,6 +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"; export default createReactClass({ displayName: 'BaseAvatar', @@ -164,9 +165,9 @@ export default createReactClass({ const initialLetter = AvatarLogic.getInitialLetter(name); const textNode = ( @@ -176,8 +177,8 @@ export default createReactClass({ alt="" title={title} onError={this.onError} aria-hidden="true" style={{ - width: width/15 + "rem", - height: height/15 + "rem" + width: toRem(width), + height: toRem(height) }} /> ); if (onClick != null) { @@ -207,8 +208,8 @@ export default createReactClass({ onClick={onClick} onError={this.onError} style={{ - width: width/15 + "rem", - height: height/15 + "rem" + width: toRem(width), + height: toRem(height) }} title={title} alt="" inputRef={inputRef} @@ -221,8 +222,8 @@ export default createReactClass({ src={imageUrl} onError={this.onError} style={{ - width: width/15 + "rem", - height: height/15 + "rem" + width: toRem(width), + height: toRem(height) }} title={title} alt="" ref={inputRef} diff --git a/src/utils/rem.js b/src/utils/rem.js new file mode 100644 index 00000000000..0ba430950c5 --- /dev/null +++ b/src/utils/rem.js @@ -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. +*/ + +// converts a pixel value to rem. +export default function(pixel_val) { + return pixel_val / 15 + "rem" +} From c6bc0c79147b51c737709a202a90ebb3033e5eed Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 6 Apr 2020 16:51:07 +0100 Subject: [PATCH 007/109] Fix read receipt horizontal spacing at scale --- src/components/views/rooms/ReadReceiptMarker.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index be0ca1f8d6a..85d443d55a0 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -23,6 +23,7 @@ import { _t } from '../../../languageHandler'; import {formatDate} from '../../../DateUtils'; import Velociraptor from "../../../Velociraptor"; import * as sdk from "../../../index"; +import toRem from "../../../utils/rem"; let bounce = false; try { @@ -148,7 +149,7 @@ export default createReactClass({ // start at the old height and in the old h pos startStyles.push({ top: startTopOffset+"px", - left: oldInfo.left+"px" }); + left: toRem(oldInfo.left) }); const reorderTransitionOpts = { duration: 100, @@ -181,7 +182,7 @@ export default createReactClass({ } const style = { - left: this.props.leftOffset+'px', + left: toRem(this.props.leftOffset), top: '0px', visibility: this.props.hidden ? 'hidden' : 'visible', }; From f29717ee62aceb982afd573fc0f473efad8c4488 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 6 Apr 2020 17:47:12 +0100 Subject: [PATCH 008/109] Fix room header vertical alignment --- res/css/views/rooms/_RoomHeader.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 969106c9ea9..80f6c40f396 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -173,8 +173,6 @@ limitations under the License. .mx_RoomHeader_avatar { flex: 0; - width: 28px; - height: 28px; margin: 0 7px; position: relative; } From 38919518da7bef490df539b08c2d72e4f23c5c22 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 6 Apr 2020 20:52:36 +0100 Subject: [PATCH 009/109] Resize room list scroll section. This fix isn't perfect. Currently the scroll view is slightly smaller than the list of rooms. I think it has something to do with the how the heigh is calculate in js, considering it has some assumptions about the height of each bar and the padding. However room items are the only things which change with respect to the root value. Therefore the item list is actually taller than the computed pixel value of the list converted to rems. I'll look into it. --- src/components/structures/RoomSubList.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 2ae2d71100b..1e3e15b4ec0 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -32,6 +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"; // turn this on for drop & drag console debugging galore const debug = false; @@ -383,7 +384,7 @@ export default class RoomSubList extends React.PureComponent { setHeight = (height) => { if (this._subList.current) { - this._subList.current.style.height = `${height}px`; + this._subList.current.style.height = toRem(height); } this._updateLazyRenderHeight(height); }; From cc601e1595e5bd4e571e74066e3b5cc1d3a8013f Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 14:21:21 +0100 Subject: [PATCH 010/109] Resize toggle switches with font --- res/css/views/elements/_ToggleSwitch.scss | 34 +++++++++++------------ 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 1f4445b88ce..9a07e01978c 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -16,12 +16,19 @@ limitations under the License. .mx_ToggleSwitch { transition: background-color 0.20s ease-out 0.1s; - width: 48px; - height: 24px; - border-radius: 14px; + + width: $font-48px; + height: $font-20px; + border-radius: 1.5rem; + padding: 2px; + background-color: $togglesw-off-color; - position: relative; opacity: 0.5; + + display: flex; + flex-direction: row; + flex: 0 0 auto; + align-items: center; } .mx_ToggleSwitch_enabled { @@ -35,19 +42,12 @@ limitations under the License. .mx_ToggleSwitch_ball { transition: left 0.15s ease-out 0.1s; - margin: 2px; - width: 20px; - height: 20px; - border-radius: 20px; + width: $font-20px; + height: $font-20px; + border-radius: $font-20px; background-color: $togglesw-ball-color; - position: absolute; - top: 0; } -.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball { - left: 23px; // 48px switch - 20px ball - 5px padding = 23px -} - -.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball { - left: 2px; -} +.mx_ToggleSwitch_on { + flex-direction: row-reverse; +} \ No newline at end of file From 0182128189e433cd775f78a44f90ed0d523a961a Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 15:07:34 +0100 Subject: [PATCH 011/109] Fix settings when scaling up --- res/css/views/elements/_ToggleSwitch.scss | 2 +- res/css/views/settings/tabs/_SettingsTab.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 9a07e01978c..073bf5c00b1 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_ToggleSwitch { transition: background-color 0.20s ease-out 0.1s; - width: $font-48px; + width: $font-44px; height: $font-20px; border-radius: 1.5rem; padding: 2px; diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 1fbfb359276..e3a61e6825e 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -63,7 +63,7 @@ limitations under the License. display: inline-block; font-size: $font-14px; color: $primary-fg-color; - max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch + max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch box-sizing: border-box; padding-right: 10px; } From 5caec2a289a2f2b1bfc75cfeae1b05a9d3479b34 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 15:23:19 +0100 Subject: [PATCH 012/109] lint --- res/css/views/elements/_RichText.scss | 2 +- res/css/views/elements/_ToggleSwitch.scss | 4 ++-- src/utils/rem.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index cb0c2eacc18..21d01fdd513 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -39,7 +39,7 @@ a.mx_Pill { .mx_UserPill { color: $primary-fg-color; background-color: $other-user-pill-bg-color; - } +} .mx_UserPill_selected { background-color: $accent-color !important; diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 073bf5c00b1..7c65fbc90da 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -21,7 +21,7 @@ limitations under the License. height: $font-20px; border-radius: 1.5rem; padding: 2px; - + background-color: $togglesw-off-color; opacity: 0.5; @@ -50,4 +50,4 @@ limitations under the License. .mx_ToggleSwitch_on { flex-direction: row-reverse; -} \ No newline at end of file +} diff --git a/src/utils/rem.js b/src/utils/rem.js index 0ba430950c5..1f18c9de052 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(pixel_val) { - return pixel_val / 15 + "rem" +export default function(pixelVal) { + return pixelVal / 15 + "rem"; } From a58721047e6345ccd1b722c648314da7fbacac07 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 15:41:41 +0100 Subject: [PATCH 013/109] Room memebers avatars scale --- res/css/views/rooms/_EntityTile.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 966d2c4e70b..8db71f297c0 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -69,8 +69,6 @@ limitations under the License. padding-right: 12px; padding-top: 4px; padding-bottom: 4px; - width: 36px; - height: 36px; position: relative; } From e49c041df79cb8169b39c76de21c087c5e21caec Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 16:08:59 +0100 Subject: [PATCH 014/109] Commuity seleciton bar vertical alignment scale fix --- res/css/structures/_TagPanel.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 0065ffa5022..f5c4c4c6989 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -110,13 +110,13 @@ limitations under the License. .mx_TagPanel .mx_TagTile.mx_TagTile_selected::before { content: ''; - height: 56px; + height: calc(100% + 16px); background-color: $accent-color; width: 5px; position: absolute; left: -15px; border-radius: 0 3px 3px 0; - top: -8px; // (56 - 40)/2 + top: -8px; // (16px / 2) } .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { From 121b53f99a5f1d17decdd296ff4b960ffc026c3a Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 16:27:26 +0100 Subject: [PATCH 015/109] FIx lanugage selection alignment at scale. --- res/css/views/elements/_Dropdown.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 32a68d52526..dd8511cc425 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -67,6 +67,8 @@ limitations under the License. text-overflow: ellipsis; white-space: nowrap; flex: 1; + display: inline-flex; + align-items: center; } .mx_Dropdown_option div { From 3966e45b8fccf884850e68469a9443795b0e830e Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 17:13:09 +0100 Subject: [PATCH 016/109] Fix test --- test/components/views/messages/TextualBody-test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js index 4ad46586aed..78019952540 100644 --- a/test/components/views/messages/TextualBody-test.js +++ b/test/components/views/messages/TextualBody-test.js @@ -206,7 +206,8 @@ describe("", () => { 'Hey ' + '' + 'Member' + + 'style=\"width: 1.0666666666666667rem; height: 1.0666666666666667rem;\" ' + + 'title="@member:domain.bla" alt="" aria-hidden="true">Member' + ''); }); }); From 2d2b39892a2ad349514754f42725e86f33b58a54 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 17:23:07 +0100 Subject: [PATCH 017/109] lint test --- test/components/views/messages/TextualBody-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js index 78019952540..59671327ce0 100644 --- a/test/components/views/messages/TextualBody-test.js +++ b/test/components/views/messages/TextualBody-test.js @@ -206,7 +206,7 @@ describe("", () => { 'Hey ' + '' + 'Member' + ''); }); From c2a29087460969fd7368d84ff5112fb5b3b25d06 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Apr 2020 17:41:18 +0100 Subject: [PATCH 018/109] Fix community line height --- 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 f5c4c4c6989..4a78c8df925 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -69,7 +69,7 @@ limitations under the License. height: 100%; } .mx_TagPanel .mx_TagPanel_tagTileContainer > div { - height: 40px; + height: $font-40px; padding: 10px 0 9px 0; } From c921859067b25b4c86d33ec93f3d06d6a0889ef0 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 14 Apr 2020 16:35:38 +0100 Subject: [PATCH 019/109] Use rem instead of em. --- res/css/views/elements/_RichText.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 21d01fdd513..d46d07e82b9 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -13,7 +13,7 @@ height: $font-16px; line-height: $font-20px; padding-left: 0; - padding-right: 0.5em; + padding-right: 0.5rem; } a.mx_Pill { From 07853f48bb882a55ec2fdab9255bf2a8366d4efd Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 14 Apr 2020 16:45:21 +0100 Subject: [PATCH 020/109] Use font-variable instead of rem --- res/css/_font-sizes.scss | 7 +++++++ res/css/views/elements/_RichText.scss | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss index ad9e2e71039..b37b2eb3c2b 100644 --- a/res/css/_font-sizes.scss +++ b/res/css/_font-sizes.scss @@ -14,6 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ +$font-1px: 0.067rem; +$font-2px: 0.133rem; +$font-3px: 0.200rem; +$font-4px: 0.267rem; +$font-5px: 0.333rem; +$font-6px: 0.400rem; +$font-7px: 0.467rem; $font-8px: 0.533rem; $font-9px: 0.600rem; $font-10px: 0.667rem; diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index d46d07e82b9..5b5759b7945 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -26,7 +26,7 @@ a.mx_Pill { } .mx_Pill { - padding: 0.3rem; + padding: $font-5px; } /* More specific to override `.markdown-body a` text-decoration */ From 18efbcccebece7ebd4cf17d5e6e9073261b3cb2a Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 14 Apr 2020 17:07:59 +0100 Subject: [PATCH 021/109] Undo superfluous delete --- res/css/views/elements/_RichText.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 5b5759b7945..b933b1b8289 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -29,6 +29,13 @@ a.mx_Pill { padding: $font-5px; } +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_content .markdown-body a.mx_GroupPill, +.mx_GroupPill { + color: $accent-fg-color; + background-color: $rte-group-pill-color; +} + /* More specific to override `.markdown-body a` text-decoration */ .mx_EventTile_content .markdown-body a.mx_Pill { text-decoration: none; From fc04266b4239fe7f1135e81bf8d4a38b771d095d Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 14 Apr 2020 17:32:24 +0100 Subject: [PATCH 022/109] Skinnier pills are easier to swallow --- res/css/views/elements/_RichText.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index b933b1b8289..1fa04595f95 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -10,10 +10,9 @@ align-items: center; vertical-align: middle; border-radius: $font-16px; - height: $font-16px; - line-height: $font-20px; + line-height: $font-15px; padding-left: 0; - padding-right: 0.5rem; + padding-right: $font-5px; } a.mx_Pill { @@ -22,11 +21,10 @@ a.mx_Pill { overflow: hidden; vertical-align: text-bottom; max-width: calc(100% - 1ch); - height: $font-24px; } .mx_Pill { - padding: $font-5px; + padding: $font-1px; } /* More specific to override `.markdown-body a` color */ From 7a0caafb77fadeabba717a78ae5ddd09e8fdaf33 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 16 Apr 2020 19:15:34 +0100 Subject: [PATCH 023/109] FIx unread count --- res/css/structures/_RoomSubList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 2e0c94263e3..2c53258b089 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -74,7 +74,7 @@ limitations under the License. .mx_RoomSubList_badge > div { flex: 0 0 auto; - border-radius: 8px; + border-radius: $font-16px; font-weight: 600; font-size: $font-12px; padding: 0 5px; From 83609f0ab2bb1b75d0e0282eba5baee014e6f569 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 16 Apr 2020 20:12:53 +0100 Subject: [PATCH 024/109] Scale user photo upload with font size --- res/css/_font-sizes.scss | 1 + res/css/views/settings/_AvatarSetting.scss | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss index b37b2eb3c2b..5cd19ce620b 100644 --- a/res/css/_font-sizes.scss +++ b/res/css/_font-sizes.scss @@ -67,4 +67,5 @@ $font-49px: 3.267rem; $font-50px: 3.333rem; $font-51px: 3.400rem; $font-52px: 3.467rem; +$font-88px: 5.887rem; $font-400px: 26.667rem; diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss index 35dba90f858..9fa10907b4a 100644 --- a/res/css/views/settings/_AvatarSetting.scss +++ b/res/css/views/settings/_AvatarSetting.scss @@ -15,13 +15,13 @@ limitations under the License. */ .mx_AvatarSetting_avatar { - width: 88px; - height: 88px; + width: $font-88px; + height: $font-88px; margin-left: 13px; position: relative; & > * { - width: 88px; + width: $font-88px; box-sizing: border-box; } @@ -63,7 +63,7 @@ limitations under the License. & > img, .mx_AvatarSetting_avatarPlaceholder { display: block; - height: 88px; + height: $font-88px; border-radius: 4px; } From 42ec21f5bb306c51ae21e4e2b3995bc757139db8 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 16 Apr 2020 20:13:13 +0100 Subject: [PATCH 025/109] Tweak read receipt remainder text --- src/components/views/rooms/EventTile.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index f67877373e5..af14f6922ce 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -34,6 +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"; const eventTileTypes = { 'm.room.message': 'messages.MessageEvent', @@ -473,7 +474,7 @@ export default createReactClass({ if (remainder > 0) { remText = { remainder }+ + style={{ right: "calc(" + torem(-left) + " + " + receiptOffset + "px)" }}>{ remainder }+ ; } } From e10a511997ca6667bfb96b74938735c8c81447d5 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 21 Apr 2020 15:49:19 +0100 Subject: [PATCH 026/109] Extra right padding in user pills --- res/css/views/elements/_RichText.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 1fa04595f95..b45b567db7b 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -25,6 +25,7 @@ a.mx_Pill { .mx_Pill { padding: $font-1px; + padding-right: $font-6px; } /* More specific to override `.markdown-body a` color */ From 61f2e19d95b8f7ef7589de0461d1877b9e607a11 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 14 Apr 2020 16:18:57 +0100 Subject: [PATCH 027/109] Basic font settings. Include a default value getter in the store in order to make the default value easy to work with. --- src/settings/Settings.js | 7 ++++ src/settings/SettingsStore.js | 14 ++++++++ .../controllers/FontSizeController.js | 33 +++++++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 src/settings/controllers/FontSizeController.js diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 928b1985faf..3b316e39d0d 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -29,6 +29,7 @@ import ThemeController from './controllers/ThemeController'; import PushToMatrixClientController from './controllers/PushToMatrixClientController'; import ReloadOnChangeController from "./controllers/ReloadOnChangeController"; import {RIGHT_PANEL_PHASES} from "../stores/RightPanelStorePhases"; +import FontSizeController from './controllers/FontSizeController'; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config']; @@ -94,6 +95,12 @@ export const SETTINGS = { // // not use this for new settings. // invertedSettingName: "my-negative-setting", // }, + "font_size": { + displayName: _td("Font size"), + supportedLevels: LEVELS_ACCOUNT_SETTINGS, + default: 16, + controller: new FontSizeController(), + }, "feature_pinning": { isFeature: true, displayName: _td("Message Pinning"), diff --git a/src/settings/SettingsStore.js b/src/settings/SettingsStore.js index 0122916bc35..70ea5ac57c2 100644 --- a/src/settings/SettingsStore.js +++ b/src/settings/SettingsStore.js @@ -370,6 +370,20 @@ export default class SettingsStore { return SettingsStore._getFinalValue(setting, level, roomId, null, null); } + /** + * 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 + */ + static getDefaultValue(settingName, roomId = null, excludeDefault = false) { + // Verify that the setting is actually a setting + if (!SETTINGS[settingName]) { + throw new Error("Setting '" + settingName + "' does not appear to be a setting."); + } + + return SETTINGS[settingName].default; + } + static _getFinalValue(setting, level, roomId, calculatedValue, calculatedAtLevel) { let resultingValue = calculatedValue; diff --git a/src/settings/controllers/FontSizeController.js b/src/settings/controllers/FontSizeController.js new file mode 100644 index 00000000000..4ab2f331f1b --- /dev/null +++ b/src/settings/controllers/FontSizeController.js @@ -0,0 +1,33 @@ +/* +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 SettingController from "./SettingController"; +import dis from "../../dispatcher"; + +export default class FontSizeController extends SettingController { + + constructor() { + super() + } + + onChange(level, roomId, newValue) { + // Dispatch font size change so that everything open responds to the change. + dis.dispatch({ + action: "update-font-size", + size: newValue, + }); + } +} From 269621ad2436f2181d44a10829cad1447249d8fd Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 14 Apr 2020 16:19:50 +0100 Subject: [PATCH 028/109] Move theme settings to a new tab --- .../tabs/user/GeneralUserSettingsTab.js | 172 ------------- .../tabs/user/StyleUserSettingsTab.js | 233 ++++++++++++++++++ src/theme.js | 2 +- 3 files changed, 234 insertions(+), 173 deletions(-) create mode 100644 src/components/views/settings/tabs/user/StyleUserSettingsTab.js diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index 801062bff49..4e57203ca2c 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -19,7 +19,6 @@ limitations under the License. import React from 'react'; import {_t} from "../../../../../languageHandler"; import ProfileSettings from "../../ProfileSettings"; -import Field from "../../../elements/Field"; import * as languageHandler from "../../../../../languageHandler"; import {SettingLevel} from "../../../../../settings/SettingsStore"; import SettingsStore from "../../../../../settings/SettingsStore"; @@ -27,7 +26,6 @@ import LanguageDropdown from "../../../elements/LanguageDropdown"; import AccessibleButton from "../../../elements/AccessibleButton"; import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog"; import PropTypes from "prop-types"; -import {enumerateThemes, ThemeWatcher} from "../../../../../theme"; import PlatformPeg from "../../../../../PlatformPeg"; import {MatrixClientPeg} from "../../../../../MatrixClientPeg"; import * as sdk from "../../../../.."; @@ -60,9 +58,6 @@ export default class GeneralUserSettingsTab extends React.Component { }, emails: [], msisdns: [], - ...this._calculateThemeState(), - customThemeUrl: "", - customThemeMessage: {isError: false, text: ""}, }; this.dispatcherRef = dis.register(this._onAction); @@ -91,39 +86,6 @@ export default class GeneralUserSettingsTab extends React.Component { dis.unregister(this.dispatcherRef); } - _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"), - }; - } - _onAction = (payload) => { if (payload.action === 'id_server_changed') { this.setState({haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl())}); @@ -214,33 +176,6 @@ export default class GeneralUserSettingsTab extends React.Component { PlatformPeg.get().reload(); }; - _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'}); - }; - _onPasswordChangeError = (err) => { // TODO: Figure out a design that doesn't involve replacing the current dialog let errMsg = err.error || ""; @@ -277,41 +212,6 @@ export default class GeneralUserSettingsTab extends React.Component { }); }; - _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}); - }; - _renderProfileSection() { return (
@@ -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 = ( -
-
- - {_t("Add theme")} - {messageElement} - -
- ); - } - - 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 ; - })} - - {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 00000000000..5c68f214d4c --- /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 = ( +
+
+ + {_t("Add theme")} + {messageElement} + +
+ ); + } + + 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 ; + })} + + {customThemeForm} + +
+ ); + } + + _renderFontSection() { + return
+ {_t("Font size")} + this._onFontSizeChanged(ev.target.value)} + /> +
+ } + +} diff --git a/src/theme.js b/src/theme.js index 442a89e25fd..3309acdd014 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 029/109] 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 3eac055054c..f10da54729f 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 030/109] 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 b135d5f5f64..ee6f7e13ec8 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 031/109] 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 1293ccc7e96..1845e0011d3 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 00000000000..c242fcc743a --- /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 032/109] 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 5c68f214d4c..ab9107eac00 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 f10da54729f..bf2eaa4652f 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 3b316e39d0d..23b73f740b9 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 033/109] 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 62d230e752e..45aecd032f3 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 00000000000..dd9646bd5a4 --- /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 ab9107eac00..e7b7385f5ad 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 034/109] 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 0ba2b609e89..9d6629e7036 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 00000000000..94902f6fd9d --- /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 f5f30133540..b457a8bccbb 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 00000000000..e2e36c2c9fe --- /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
+
+
+
+
+
+
+
+
+
+ {dots} +
+
+
+ } + + 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 035/109] 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 e7b7385f5ad..d77822ceb75 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 036/109] 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 03442ca5103..687a238c8e7 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 037/109] 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 e2e36c2c9fe..0ae0092443a 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 038/109] 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 0ae0092443a..68173345ff9 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
-
-
+
+
{dots}
-
+
; } 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 d77822ceb75..9cca0a2ce98 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 c242fcc743a..8dbdb291028 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 4ab2f331f1b..8e855e31ec7 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 039/109] 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 94902f6fd9d..fc83bd91bce 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 dd9646bd5a4..f2a98ac4267 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 040/109] 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 ee6f7e13ec8..91ab203753f 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 9cca0a2ce98..d09f4b3e6a9 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 bf2eaa4652f..56798ff9320 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 041/109] 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 23b73f740b9..dd0103aa785 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 042/109] 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 56798ff9320..cff2b8cda4c 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 043/109] 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 4a78c8df925..536c88be632 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 044/109] 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 68173345ff9..aa4bfe42f5a 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 045/109] 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 aa4bfe42f5a..9048e7b37b2 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 046/109] 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 fc83bd91bce..2112ac9a884 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 9048e7b37b2..7985fa206a4 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
-
+
-
-
+
+
-
+
{dots}
@@ -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 047/109] 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 9d6629e7036..ab602be49ed 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 2112ac9a884..51f1688f6ba 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 b457a8bccbb..e06ba33594b 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 7985fa206a4..2070f3f1674 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 d09f4b3e6a9..9e9f1346135 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 048/109] 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 9e9f1346135..7843ccbe105 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 049/109] 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 7843ccbe105..8d1fd348d36 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 050/109] 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 8d1fd348d36..42c8e6d8544 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 051/109] 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 dd0103aa785..a044027baf1 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 052/109] 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 3309acdd014..aee55b5abb6 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 053/109] 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 f2a98ac4267..8c80a35e40f 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 42c8e6d8544..738a5f91789 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 054/109] 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 ab602be49ed..77a9b9f8cf7 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 055/109] 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 2070f3f1674..f6ab1210562 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 056/109] 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 cff2b8cda4c..a3051cbb918 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 057/109] 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 f6ab1210562..13f06a4759c 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 058/109] 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 738a5f91789..5bb6dcc0e0f 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 059/109] 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 13f06a4759c..9f9e1fdef8c 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 060/109] 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 8dbdb291028..d6b5b020f7a 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 061/109] 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 d6b5b020f7a..30c69b7428b 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 062/109] 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 9f9e1fdef8c..7862373c1c9 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 063/109] 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 51f1688f6ba..7e9acefa063 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 7862373c1c9..e341eea317d 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
-
+
+
{this.props.label}
+
; } } From ee33fc1c20e93ee35120cd70d4c0caf156154cd0 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 22 Apr 2020 11:37:02 +0100 Subject: [PATCH 064/109] 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 5bb6dcc0e0f..046184da697 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 065/109] 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 e341eea317d..ad859bfe826 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 066/109] 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 7e9acefa063..2132381591f 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 067/109] 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 2132381591f..83f100ff926 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 068/109] 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 1845e0011d3..602d85f048a 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 30c69b7428b..2e37921ee64 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 a044027baf1..b144b07e84a 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 069/109] 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 8c80a35e40f..e4285e248cb 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 046184da697..e1bbaab2cc6 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 070/109] 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 ad859bfe826..a9fc41c8cc4 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); + + // 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) - // Clamp value between min and max - value = Math.min(Math.max(value, min), max); + 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 e1bbaab2cc6..949b3bed315 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 071/109] 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 83f100ff926..f6982865dbe 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 e4285e248cb..28a25105087 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 a9fc41c8cc4..6ec044da412 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 072/109] 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 28a25105087..16a14edf854 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 073/109] 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 16a14edf854..4141fb2fb1a 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 5d6ba033c89..cb6e7ccdaa4 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 e06ba33594b..b576b577780 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 074/109] 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 4141fb2fb1a..e82ae3c5757 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 075/109] 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 949b3bed315..ceb3241b8b5 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 a3051cbb918..2c3239900dd 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 b144b07e84a..e0e34179f30 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 076/109] 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 4d831d7858f..7adcc58c4ec 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 00000000000..d7f2738629a --- /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 91ab203753f..bf06b8749f0 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 077/109] 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 ceb3241b8b5..41446059996 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 2c3239900dd..fa3d5e3f411 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 078/109] 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 41446059996..5c285d12e68 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 079/109] 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 b576b577780..ed7eae48f7a 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 080/109] 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 6ec044da412..559bdd9ce2b 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 bfba5e6cfe8e2be24a135af072a6c0b2a41dbfbb Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 27 Apr 2020 16:57:38 +0100 Subject: [PATCH 081/109] 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 a17124b9add..cbe083f3a2d 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 a8407c9508a38b93465ab030e4d99ab8c86212ce Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 28 Apr 2020 14:00:15 +0100 Subject: [PATCH 082/109] 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 559bdd9ce2b..3dfd0c686e3 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 083/109] 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 5c285d12e68..ed7d9ef495d 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 084/109] 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 45aecd032f3..5cc220bd331 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 085/109] 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 3dfd0c686e3..722401801c4 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 086/109] 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 722401801c4..6712ddd7fd9 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 087/109] 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 ed7d9ef495d..6c94a82c953 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 ; From 93f24f12dcf839f35231e8ca9083f670c3f626d7 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 28 Apr 2020 14:26:08 +0100 Subject: [PATCH 088/109] 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 602d85f048a..fec37472bee 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 089/109] 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 70ea5ac57c2..b6856a5a6af 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 090/109] 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 1e3e15b4ec0..b1e0bb9f9b8 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 cbe083f3a2d..e94a83f70b6 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 af14f6922ce..0881fb3b672 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 85d443d55a0..20d39a7f84d 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 1f18c9de052..6278a91aa2f 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 091/109] 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 6278a91aa2f..3729b4d5969 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 092/109] 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 5cc220bd331..0af7e30d977 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 093/109] 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 6712ddd7fd9..adb2a6063b7 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 094/109] 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 bff1b8f4152..58226595f78 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 095/109] 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 b6856a5a6af..688925de40d 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 096/109] 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 6c94a82c953..d089b4f6e01 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 097/109] 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 d089b4f6e01..6fd44b691d0 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 098/109] 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 f6982865dbe..09afb58b12b 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 ed7eae48f7a..78fe2a74c53 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 2e37921ee64..561edc46625 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 adb2a6063b7..e181f0d9e36 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 6fd44b691d0..ac98664be0f 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, 13 May 2020 15:24:08 +0100 Subject: [PATCH 099/109] 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 687a238c8e7..03442ca5103 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 09afb58b12b..06c3c4c98b7 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 100/109] 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 0cee29233f5..21e406aa23d 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 101/109] 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 ac98664be0f..1ccc744dc75 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 {
Aa
{}} diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 34610c0cafe..afe8d2ceccc 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -174,12 +174,12 @@ export const SETTINGS = { "fontSizeMin": { displayName: _td("Min font size"), supportedLevels: LEVELS_ACCOUNT_SETTINGS, - default: 14, + default: 13, }, "fontSizeMax": { displayName: _td("Max font size"), supportedLevels: LEVELS_ACCOUNT_SETTINGS, - default: 24, + default: 20, }, "useCustomFontSize": { displayName: _td("Custom font size"), From fc6e5227aced6f801bc1f1ffa3c7cfc86d84ef6d Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 13 May 2020 22:08:29 +0100 Subject: [PATCH 102/109] FIx roomsublist heights. - also fiddles the font size numbers --- res/css/structures/_TagPanel.scss | 2 +- res/css/views/rooms/_RoomTile.scss | 3 ++- src/components/structures/RoomSubList.js | 4 ++-- src/components/views/avatars/BaseAvatar.js | 20 +++++++++---------- src/components/views/rooms/EventTile.js | 2 +- .../views/rooms/ReadReceiptMarker.js | 2 +- .../tabs/user/AppearanceUserSettingsTab.js | 2 +- src/utils/{rem.js => units.ts} | 9 ++++++++- 8 files changed, 26 insertions(+), 18 deletions(-) rename src/utils/{rem.js => units.ts} (77%) diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 536c88be632..1f8443e3951 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -69,7 +69,7 @@ limitations under the License. height: 100%; } .mx_TagPanel .mx_TagPanel_tagTileContainer > div { - height: $font-40px; + height: 40px; padding: 10px 0 9px 0; } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 5bc7d5624d4..759dce5afa4 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -20,7 +20,7 @@ limitations under the License. flex-direction: row; align-items: center; cursor: pointer; - height: $font-34px; + height: 32px; margin: 0; padding: 0 8px 0 10px; position: relative; @@ -81,6 +81,7 @@ limitations under the License. .mx_RoomTile_avatar_container { position: relative; + display: flex; } .mx_RoomTile_avatar { diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index c8f9ba1713a..245b5f9beaf 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 {toPx} from "../../utils/units"; // turn this on for drop & drag console debugging galore const debug = false; @@ -420,7 +420,7 @@ export default class RoomSubList extends React.PureComponent { setHeight = (height) => { if (this._subList.current) { - this._subList.current.style.height = toRem(height); + this._subList.current.style.height = toPx(height); } this._updateLazyRenderHeight(height); }; diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index a9bee9cda08..704e6438c87 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 {toPx} from "../../../utils/units"; export default createReactClass({ displayName: 'BaseAvatar', @@ -166,9 +166,9 @@ export default createReactClass({ const textNode = (