mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 04:48:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve visibility of font size chooser (#6988)

Browse source 
* Improve visibility of font size chooser

* Move slider dot sizes into variables

* Use a standard font size instead of percentage in Slider

* Use shorthand for padding in FontScalingPanel

* Change Slider text pos to px to be consistent when font changes

* Cleaner dot size for Slider selection
This commit is contained in:
Andy Balaam 2021-10-20 13:41:27 +01:00 committed by GitHub
parent 8b6d5d59c7
commit 96bd052ecf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
res/css/_common.scss
View file

@ -27,6 +27,9 @@ $EventTile_e2e_state_indicator_width: 4px;
$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */ $MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width); $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
$slider-dot-size: 1em;
$slider-selection-dot-size: 2.4em;
:root { :root {
font-size: 10px; font-size: 10px;

17
res/css/views/elements/_Slider.scss
View file

@ -54,22 +54,31 @@ limitations under the License.
.mx_Slider_selectionDot { .mx_Slider_selectionDot {
position: absolute; position: absolute;
width: 1.1em; width: $slider-selection-dot-size;
height: 1.1em; height: $slider-selection-dot-size;
background-color: $slider-selection-color; background-color: $slider-selection-color;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 6px lightgrey; box-shadow: 0 0 6px lightgrey;
z-index: 10; 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 { .mx_Slider_selection > hr {
margin: 0; margin: 0;
border: 0.2em solid $slider-selection-color; border: 0.2em solid $slider-selection-color;
} }
.mx_Slider_dot { .mx_Slider_dot {
height: 1em; height: $slider-dot-size;
width: 1em; width: $slider-dot-size;
border-radius: 50%; border-radius: 50%;
background-color: $slider-background-color; background-color: $slider-background-color;
z-index: 0; z-index: 0;

2
res/css/views/settings/_FontScalingPanel.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 15px; padding: 15px 15px 35px;
background: rgba($appearance-tab-border-color, 0.2); background: rgba($appearance-tab-border-color, 0.2);
border-radius: 10px; border-radius: 10px;
font-size: 10px; font-size: 10px;

4
src/components/views/elements/Slider.tsx
View file

@ -86,7 +86,9 @@ export default class Slider extends React.Component<IProps> {
if (!this.props.disabled) { if (!this.props.disabled) {
const offset = this.offset(this.props.values, this.props.value); const offset = this.offset(this.props.values, this.props.value);
selection = <div className="mx_Slider_selection"> 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 + "%" }} /> <hr style={{ width: offset + "%" }} />
</div>; </div>;
} }

10
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
View file

@ -83,10 +83,16 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
className="mx_Slider_selectionDot" className="mx_Slider_selectionDot"
style={ style={
Object { Object {
"left": "calc(-0.55em + 50%)", "left": "calc(-1.195em + 50%)",
} }
} }
/> >
<div
className="mx_Slider_selectionText"
>
15
</div>
</div>
<hr <hr
style={ style={
Object { Object {