matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-14 19:02:33 +03:00
Code Activity

Styling for the font slider

Browse Source
This commit is contained in:
Jorik Schellekens
2020-04-22 17:31:49 +01:00
parent f5d6590751
commit fe175bb9a8
2 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View File

@@ -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;
}

8
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
View File

@@ -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 <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
<Slider
values={[12, 14, 16, 18, 20]}
values={_range(SettingsStore.getValue("font_size_min"), SettingsStore.getValue("font_size_max"), 2)}
value={this.state.fontSize}
onSelectionChange={this._onFontSizeChanged}
displayFunc={value => {}}
disabled={false}
/>
<div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
</div>
<Field
type="text"
label={_t("Font size")}