Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve visibility of font size chooser #6988

Merged
merged 6 commits into from
Oct 20, 2021
Merged

Improve visibility of font size chooser #6988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
75826b8
Improve visibility of font size chooser
andybalaam Oct 18, 2021
11aa035
Move slider dot sizes into variables
andybalaam Oct 20, 2021
a3a461e
Use a standard font size instead of percentage in Slider
andybalaam Oct 20, 2021
0bbc8c3
Use shorthand for padding in FontScalingPanel
andybalaam Oct 20, 2021
5d5ebe7
Change Slider text pos to px to be consistent when font changes
andybalaam Oct 20, 2021
a8f28e2
Cleaner dot size for Slider selection
andybalaam Oct 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.4em;

:root {
font-size: 10px;

Expand Down
17 changes: 13 additions & 4 deletions res/css/views/elements/_Slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,22 +54,31 @@ limitations under the License.

.mx_Slider_selectionDot {
position: absolute;
width: 1.1em;
height: 1.1em;
width: $slider-selection-dot-size;
height: $slider-selection-dot-size;
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: $font-14px;
position: relative;
text-align: center;
top: 30px;
width: 100%;
}

.mx_Slider_selection > hr {
margin: 0;
border: 0.2em solid $slider-selection-color;
}

.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;
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/settings/_FontScalingPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ limitations under the License.
display: flex;
flex-direction: row;
align-items: center;
padding: 15px;
padding: 15px 15px 35px;
background: rgba($appearance-tab-border-color, 0.2);
border-radius: 10px;
font-size: 10px;
Expand Down
4 changes: 3 additions & 1 deletion src/components/views/elements/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,9 @@ export default class Slider extends React.Component<IProps> {
if (!this.props.disabled) {
const offset = this.offset(this.props.values, this.props.value);
selection = <div className="mx_Slider_selection">
<div className="mx_Slider_selectionDot" style={{ left: "calc(-0.55em + " + offset + "%)" }} />
<div className="mx_Slider_selectionDot" style={{ left: "calc(-1.195em + " + offset + "%)" }}>
<div className="mx_Slider_selectionText">{ this.props.value }</div>
</div>
<hr style={{ width: offset + "%" }} />
</div>;
}
Expand Down
10 changes: 8 additions & 2 deletions test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)",
}
}
/>
>
<div
className="mx_Slider_selectionText"
>
15
</div>
</div>
<hr
style={
Object {
Expand Down