Skip to content

Commit d95d019

Browse files
JorikSchellekensJorikSchellekens
authored
Merge pull request matrix-org#4424 from JorikSchellekens/joriks/font-scaling-slider
Font scaling settings and slider
2 parents b96c1ad + 50a4440 commit d95d019

File tree

28 files changed

+764
-202
lines changed

28 files changed

+764
-202
lines changed

‎res/css/_components.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
@import "./views/elements/_RichText.scss";
116116
@import "./views/elements/_RoleButton.scss";
117117
@import "./views/elements/_RoomAliasField.scss";
118+
@import "./views/elements/_Slider.scss";
118119
@import "./views/elements/_Spinner.scss";
119120
@import "./views/elements/_SyntaxHighlight.scss";
120121
@import "./views/elements/_TextWithTooltip.scss";
@@ -206,6 +207,7 @@
206207
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
207208
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
208209
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
210+
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
209211
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
210212
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
211213
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";

‎res/css/structures/_TagPanel.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ limitations under the License.
6969
height: 100%;
7070
}
7171
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
72-
height: $font-40px;
72+
height: 40px;
7373
padding: 10px 0 9px 0;
7474
}
7575

@@ -116,7 +116,7 @@ limitations under the License.
116116
position: absolute;
117117
left: -15px;
118118
border-radius: 0 3px 3px 0;
119-
top: -8px; // (16px / 2)
119+
top: -8px; // (16px from height / 2)
120120
}
121121

122122
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {

‎res/css/structures/_TopLeftMenuButton.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ limitations under the License.
4343
margin: 0 7px;
4444
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
4545
mask-repeat: no-repeat;
46-
width: 10px;
46+
width: $font-22px;
4747
height: 6px;
4848
background-color: $roomsublist-label-fg-color;
4949
}

‎res/css/views/dialogs/_UserSettingsDialog.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ limitations under the License.
2121
mask-image: url('$(res)/img/feather-customised/settings.svg');
2222
}
2323

24+
.mx_UserSettingsDialog_appearanceIcon::before {
25+
mask-image: url('$(res)/img/feather-customised/brush.svg');
26+
}
27+
2428
.mx_UserSettingsDialog_voiceIcon::before {
2529
mask-image: url('$(res)/img/feather-customised/phone.svg');
2630
}

‎res/css/views/elements/_Slider.scss‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*
2+
Copyright 2020 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_Slider {
18+
position: relative;
19+
margin: 0px;
20+
flex-grow: 1;
21+
}
22+
23+
.mx_Slider_dotContainer {
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: space-between;
27+
}
28+
29+
.mx_Slider_bar {
30+
display: flex;
31+
box-sizing: border-box;
32+
position: absolute;
33+
height: 1em;
34+
width: 100%;
35+
padding: 0 0.5em; // half the width of a dot.
36+
align-items: center;
37+
}
38+
39+
.mx_Slider_bar > hr {
40+
width: 100%;
41+
height: 0.4em;
42+
background-color: $slider-background-color;
43+
border: 0;
44+
}
45+
46+
.mx_Slider_selection {
47+
display: flex;
48+
align-items: center;
49+
width: calc(100% - 1em); // 2 * half the width of a dot
50+
height: 1em;
51+
position: absolute;
52+
pointer-events: none;
53+
}
54+
55+
.mx_Slider_selectionDot {
56+
position: absolute;
57+
width: 1.1em;
58+
height: 1.1em;
59+
background-color: $slider-selection-color;
60+
border-radius: 50%;
61+
box-shadow: 0 0 6px lightgrey;
62+
z-index: 10;
63+
}
64+
65+
.mx_Slider_selection > hr {
66+
margin: 0;
67+
border: 0.2em solid $slider-selection-color;
68+
}
69+
70+
.mx_Slider_dot {
71+
height: 1em;
72+
width: 1em;
73+
border-radius: 50%;
74+
background-color: $slider-background-color;
75+
z-index: 0;
76+
}
77+
78+
.mx_Slider_dotActive {
79+
background-color: $slider-selection-color;
80+
}
81+
82+
.mx_Slider_dotValue {
83+
display: flex;
84+
flex-direction: column;
85+
align-items: center;
86+
color: $slider-background-color;
87+
}
88+
89+
// The following is a hack to center the labels without adding
90+
// any width to the slider's dots.
91+
.mx_Slider_labelContainer {
92+
width: 1em;
93+
}
94+
95+
.mx_Slider_label {
96+
position: relative;
97+
width: fit-content;
98+
left: -50%;
99+
}

‎res/css/views/rooms/_RoomTile.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ limitations under the License.
2020
flex-direction: row;
2121
align-items: center;
2222
cursor: pointer;
23-
height: $font-34px;
23+
height: 32px;
2424
margin: 0;
2525
padding: 0 8px 0 10px;
2626
position: relative;
@@ -81,6 +81,7 @@ limitations under the License.
8181

8282
.mx_RoomTile_avatar_container {
8383
position: relative;
84+
display: flex;
8485
}
8586

8687
.mx_RoomTile_avatar {

‎res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
Copyright 2020 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_AppearanceUserSettingsTab_fontSlider,
18+
.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
19+
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
20+
@mixin mx_Settings_fullWidthField;
21+
}
22+
23+
.mx_AppearanceUserSettingsTab_fontSlider {
24+
display: flex;
25+
flex-direction: row;
26+
align-items: center;
27+
padding: 15px;
28+
background: $font-slider-bg-color;
29+
border-radius: 10px;
30+
font-size: 10px;
31+
margin-top: 24px;
32+
margin-bottom: 24px;
33+
}
34+
35+
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
36+
font-size: 15px;
37+
padding-right: 20px;
38+
padding-left: 5px;
39+
}
40+
41+
.mx_AppearanceUserSettingsTab_fontSlider_largeText {
42+
font-size: 18px;
43+
padding-left: 20px;
44+
padding-right: 5px;
45+
}

‎res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
18-
.mx_GeneralUserSettingsTab_themeSection .mx_Field {
17+
.mx_GeneralUserSettingsTab_changePassword .mx_Field {
1918
@mixin mx_Settings_fullWidthField;
2019
}
2120

‎res/img/feather-customised/brush.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎res/themes/dark/css/_dark.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,9 @@ $breadcrumb-placeholder-bg-color: #272c35;
180180

181181
$user-tile-hover-bg-color: $header-panel-bg-color;
182182

183+
// FontSlider colors
184+
$font-slider-bg-color: $room-highlight-color;
185+
183186
// ***** Mixins! *****
184187

185188
@define-mixin mx_DialogButton {

0 commit comments

Comments
 (0)