imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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. limitations under the License.
*/ */
.mx_AppearanceUserSettingsTab_fontSlider,
.mx_AppearanceUserSettingsTab_themeSection .mx_Field, .mx_AppearanceUserSettingsTab_themeSection .mx_Field,
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field { .mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
@mixin mx_Settings_fullWidthField; @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 Slider from "../../../elements/Slider";
import AccessibleButton from "../../../elements/AccessibleButton"; import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher"; import dis from "../../../../../dispatcher";
import _range from "lodash/range";
export default class StyleUserSettingsTab extends React.Component { export default class StyleUserSettingsTab extends React.Component {
constructor() { constructor() {
@ -225,12 +226,17 @@ export default class StyleUserSettingsTab extends React.Component {
_renderFontSection() { _renderFontSection() {
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling"> return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span> <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
<Slider <Slider
values={[12, 14, 16, 18, 20]} values={_range(SettingsStore.getValue("font_size_min"), SettingsStore.getValue("font_size_max"), 2)}
value={this.state.fontSize} value={this.state.fontSize}
onSelectionChange={this._onFontSizeChanged} onSelectionChange={this._onFontSizeChanged}
displayFunc={value => {}} displayFunc={value => {}}
disabled={false}
/> />
<div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
</div>
<Field <Field
type="text" type="text"
label={_t("Font size")} label={_t("Font size")}