From 75826b8d63d86a9c78ccec511e03395020eb7e7f Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Mon, 18 Oct 2021 15:56:50 +0100 Subject: [PATCH 1/6] Improve visibility of font size chooser --- res/css/views/elements/_Slider.scss | 13 +++++++++++-- res/css/views/settings/_FontScalingPanel.scss | 5 ++++- src/components/views/elements/Slider.tsx | 4 +++- .../__snapshots__/FontScalingPanel-test.tsx.snap | 10 ++++++++-- 4 files changed, 26 insertions(+), 6 deletions(-) diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss index 58ba2813b4d..967c7884646 100644 --- a/res/css/views/elements/_Slider.scss +++ b/res/css/views/elements/_Slider.scss @@ -54,14 +54,23 @@ limitations under the License. .mx_Slider_selectionDot { position: absolute; - width: 1.1em; - height: 1.1em; + width: 2.39em; + height: 2.39em; background-color: $slider-selection-color; border-radius: 50%; box-shadow: 0 0 6px lightgrey; z-index: 10; } +.mx_Slider_selectionText { + color: $muted-fg-color; + font-size: 145%; + position: relative; + text-align: center; + top: 2.0em; + width: 100%; +} + .mx_Slider_selection > hr { margin: 0; border: 0.2em solid $slider-selection-color; diff --git a/res/css/views/settings/_FontScalingPanel.scss b/res/css/views/settings/_FontScalingPanel.scss index bac1f92a4f5..b8003045ff3 100644 --- a/res/css/views/settings/_FontScalingPanel.scss +++ b/res/css/views/settings/_FontScalingPanel.scss @@ -34,7 +34,10 @@ limitations under the License. display: flex; flex-direction: row; align-items: center; - padding: 15px; + padding-bottom: 35px; + padding-left: 15px; + padding-right: 15px; + padding-top: 15px; background: rgba($appearance-tab-border-color, 0.2); border-radius: 10px; font-size: 10px; diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index df5776648e2..a201659e3c0 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -86,7 +86,9 @@ export default class Slider extends React.Component { if (!this.props.disabled) { const offset = this.offset(this.props.values, this.props.value); selection =
-
+
+
{ this.props.value }
+
; } diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap index 2174b4f2893..86163ab762f 100644 --- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap @@ -83,10 +83,16 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = ` className="mx_Slider_selectionDot" style={ Object { - "left": "calc(-0.55em + 50%)", + "left": "calc(-1.195em + 50%)", } } - /> + > +
+ 15 +
+
Date: Wed, 20 Oct 2021 11:38:24 +0100 Subject: [PATCH 2/6] Move slider dot sizes into variables --- res/css/_common.scss | 3 +++ res/css/views/elements/_Slider.scss | 8 ++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index d7f8355d81a..daaf6eae7a6 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -27,6 +27,9 @@ $EventTile_e2e_state_indicator_width: 4px; $MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width); +$slider-dot-size: 1em; +$slider-selection-dot-size: 2.39em; + :root { font-size: 10px; diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss index 967c7884646..dd287168b1a 100644 --- a/res/css/views/elements/_Slider.scss +++ b/res/css/views/elements/_Slider.scss @@ -54,8 +54,8 @@ limitations under the License. .mx_Slider_selectionDot { position: absolute; - width: 2.39em; - height: 2.39em; + width: $slider-selection-dot-size; + height: $slider-selection-dot-size; background-color: $slider-selection-color; border-radius: 50%; box-shadow: 0 0 6px lightgrey; @@ -77,8 +77,8 @@ limitations under the License. } .mx_Slider_dot { - height: 1em; - width: 1em; + height: $slider-dot-size; + width: $slider-dot-size; border-radius: 50%; background-color: $slider-background-color; z-index: 0; From a3a461e9e69ebf28257fbff1b813e1ee6f348e4e Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Wed, 20 Oct 2021 11:38:51 +0100 Subject: [PATCH 3/6] Use a standard font size instead of percentage in Slider --- 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 dd287168b1a..fa1f2c3e632 100644 --- a/res/css/views/elements/_Slider.scss +++ b/res/css/views/elements/_Slider.scss @@ -64,7 +64,7 @@ limitations under the License. .mx_Slider_selectionText { color: $muted-fg-color; - font-size: 145%; + font-size: $font-14px; position: relative; text-align: center; top: 2.0em; From 0bbc8c396c86960c3cf0050da745cef7c0dd4325 Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Wed, 20 Oct 2021 11:39:36 +0100 Subject: [PATCH 4/6] Use shorthand for padding in FontScalingPanel --- res/css/views/settings/_FontScalingPanel.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/res/css/views/settings/_FontScalingPanel.scss b/res/css/views/settings/_FontScalingPanel.scss index b8003045ff3..ff2e9053208 100644 --- a/res/css/views/settings/_FontScalingPanel.scss +++ b/res/css/views/settings/_FontScalingPanel.scss @@ -34,10 +34,7 @@ limitations under the License. display: flex; flex-direction: row; align-items: center; - padding-bottom: 35px; - padding-left: 15px; - padding-right: 15px; - padding-top: 15px; + padding: 15px 15px 35px; background: rgba($appearance-tab-border-color, 0.2); border-radius: 10px; font-size: 10px; From 5d5ebe7d745b4ea49f0c022d397a3ff4ca2a7611 Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Wed, 20 Oct 2021 12:08:36 +0100 Subject: [PATCH 5/6] Change Slider text pos to px to be consistent when font changes --- 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 fa1f2c3e632..730da021bd0 100644 --- a/res/css/views/elements/_Slider.scss +++ b/res/css/views/elements/_Slider.scss @@ -67,7 +67,7 @@ limitations under the License. font-size: $font-14px; position: relative; text-align: center; - top: 2.0em; + top: 30px; width: 100%; } From a8f28e26aa09b34ba6b2d88b95be5a876570b750 Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Wed, 20 Oct 2021 12:17:35 +0100 Subject: [PATCH 6/6] Cleaner dot size for Slider selection --- res/css/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index daaf6eae7a6..2242658ae8c 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -28,7 +28,7 @@ $MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width); $slider-dot-size: 1em; -$slider-selection-dot-size: 2.39em; +$slider-selection-dot-size: 2.4em; :root { font-size: 10px;