Break out font size settings to a separate component
This commit is contained in:
Andy Balaam
parent
d743e3d1d6
commit
4ad32b16ea
7 changed files with 601 additions and 148 deletions
|
|
@ -248,6 +248,7 @@
|
|||
@import "./views/settings/_DevicesPanel.scss";
|
||||
@import "./views/settings/_E2eAdvancedPanel.scss";
|
||||
@import "./views/settings/_EmailAddresses.scss";
|
||||
@import "./views/settings/_FontScalingPanel.scss";
|
||||
@import "./views/settings/_IntegrationManager.scss";
|
||||
@import "./views/settings/_JoinRuleSettings.scss";
|
||||
@import "./views/settings/_LayoutSwitcher.scss";
|
||||
|
|
|
|||
81
res/css/views/settings/_FontScalingPanel.scss
Normal file
81
res/css/views/settings/_FontScalingPanel.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_FontScalingPanel {
|
||||
color: $primary-content;
|
||||
> .mx_SettingsTab_SubHeading {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel .mx_Field {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider,
|
||||
.mx_FontScalingPanel_fontSlider_preview {
|
||||
@mixin mx_Settings_fullWidthField;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: rgba($appearance-tab-border-color, 0.2);
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_preview {
|
||||
border: 1px solid $appearance-tab-border-color;
|
||||
border-radius: 10px;
|
||||
padding: 0 16px 9px 16px;
|
||||
pointer-events: none;
|
||||
display: flow-root;
|
||||
|
||||
.mx_EventTile[data-layout=bubble] {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mx_IRCLayout {
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_smallText {
|
||||
font-size: 15px;
|
||||
padding-right: 20px;
|
||||
padding-left: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_largeText {
|
||||
font-size: 18px;
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_customFontSizeField {
|
||||
margin-left: calc($font-16px + 10px);
|
||||
}
|
||||
|
|
@ -14,65 +14,10 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider,
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_preview {
|
||||
@mixin mx_Settings_fullWidthField;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab .mx_Field {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontScaling {
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: rgba($appearance-tab-border-color, 0.2);
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_preview {
|
||||
border: 1px solid $appearance-tab-border-color;
|
||||
border-radius: 10px;
|
||||
padding: 0 16px 9px 16px;
|
||||
pointer-events: none;
|
||||
display: flow-root;
|
||||
|
||||
.mx_EventTile[data-layout=bubble] {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mx_IRCLayout {
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
|
||||
font-size: 15px;
|
||||
padding-right: 20px;
|
||||
padding-left: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_largeText {
|
||||
font-size: 18px;
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab {
|
||||
> .mx_SettingsTab_SubHeading {
|
||||
margin-bottom: 32px;
|
||||
|
|
@ -151,10 +96,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_SettingsTab_customFontSizeField {
|
||||
margin-left: calc($font-16px + 10px);
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Advanced {
|
||||
color: $primary-content;
|
||||
|
||||
|
|
|
|||
172
src/components/views/settings/FontScalingPanel.tsx
Normal file
172
src/components/views/settings/FontScalingPanel.tsx
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import EventTilePreview from '../elements/EventTilePreview';
|
||||
import Field from '../elements/Field';
|
||||
import React, { ChangeEvent } from 'react';
|
||||
import SettingsFlag from '../elements/SettingsFlag';
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import Slider from "../elements/Slider";
|
||||
import { FontWatcher } from "../../../settings/watchers/FontWatcher";
|
||||
import { IValidationResult, IFieldState } from '../elements/Validation';
|
||||
import { Layout } from "../../../settings/Layout";
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import { SettingLevel } from "../../../settings/SettingLevel";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
interface IProps {
|
||||
}
|
||||
|
||||
export interface CustomThemeMessage {
|
||||
isError: boolean;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
// String displaying the current selected fontSize.
|
||||
// Needs to be string for things like '17.' without
|
||||
// trailing 0s.
|
||||
fontSize: string;
|
||||
useCustomFontSize: boolean;
|
||||
useSystemFont: boolean;
|
||||
systemFont: string;
|
||||
layout: Layout;
|
||||
// User profile data for the message preview
|
||||
userId?: string;
|
||||
displayName: string;
|
||||
avatarUrl: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.tabs.user.FontScalingPanel")
|
||||
export default class FontScalingPanel extends React.Component<IProps, IState> {
|
||||
private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");
|
||||
|
||||
private unmounted = false;
|
||||
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
fontSize: (SettingsStore.getValue("baseFontSize", null) + FontWatcher.SIZE_DIFF).toString(),
|
||||
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
|
||||
useSystemFont: SettingsStore.getValue("useSystemFont"),
|
||||
systemFont: SettingsStore.getValue("systemFont"),
|
||||
layout: SettingsStore.getValue("layout"),
|
||||
userId: null,
|
||||
displayName: null,
|
||||
avatarUrl: null,
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
// Fetch the current user profile for the message preview
|
||||
const client = MatrixClientPeg.get();
|
||||
const userId = client.getUserId();
|
||||
const profileInfo = await client.getProfileInfo(userId);
|
||||
if (this.unmounted) return;
|
||||
|
||||
this.setState({
|
||||
userId,
|
||||
displayName: profileInfo.displayname,
|
||||
avatarUrl: profileInfo.avatar_url,
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unmounted = true;
|
||||
}
|
||||
|
||||
private onFontSizeChanged = (size: number): void => {
|
||||
this.setState({ fontSize: size.toString() });
|
||||
SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, size - FontWatcher.SIZE_DIFF);
|
||||
};
|
||||
|
||||
private onValidateFontSize = async ({ value }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
|
||||
const parsedSize = parseFloat(value);
|
||||
const min = FontWatcher.MIN_SIZE + FontWatcher.SIZE_DIFF;
|
||||
const max = FontWatcher.MAX_SIZE + FontWatcher.SIZE_DIFF;
|
||||
|
||||
if (isNaN(parsedSize)) {
|
||||
return { valid: false, feedback: _t("Size must be a number") };
|
||||
}
|
||||
|
||||
if (!(min <= parsedSize && parsedSize <= max)) {
|
||||
return {
|
||||
valid: false,
|
||||
feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', { min, max }),
|
||||
};
|
||||
}
|
||||
|
||||
SettingsStore.setValue(
|
||||
"baseFontSize",
|
||||
null,
|
||||
SettingLevel.DEVICE,
|
||||
parseInt(value, 10) - FontWatcher.SIZE_DIFF,
|
||||
);
|
||||
|
||||
return { valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', { min, max }) };
|
||||
};
|
||||
|
||||
public render() {
|
||||
return <div className="mx_SettingsTab_section mx_FontScalingPanel">
|
||||
|
||||
<span className="mx_SettingsTab_subheading">{ _t("Font size") }</span>
|
||||
<EventTilePreview
|
||||
className="mx_FontScalingPanel_fontSlider_preview"
|
||||
message={this.MESSAGE_PREVIEW_TEXT}
|
||||
layout={this.state.layout}
|
||||
userId={this.state.userId}
|
||||
displayName={this.state.displayName}
|
||||
avatarUrl={this.state.avatarUrl}
|
||||
/>
|
||||
<div className="mx_FontScalingPanel_fontSlider">
|
||||
<div className="mx_FontScalingPanel_fontSlider_smallText">Aa</div>
|
||||
<Slider
|
||||
values={[13, 14, 15, 16, 18]}
|
||||
value={parseInt(this.state.fontSize, 10)}
|
||||
onSelectionChange={this.onFontSizeChanged}
|
||||
displayFunc={_ => ""}
|
||||
disabled={this.state.useCustomFontSize}
|
||||
/>
|
||||
<div className="mx_FontScalingPanel_fontSlider_largeText">Aa</div>
|
||||
</div>
|
||||
|
||||
<SettingsFlag
|
||||
name="useCustomFontSize"
|
||||
level={SettingLevel.ACCOUNT}
|
||||
onChange={(checked) => this.setState({ useCustomFontSize: checked })}
|
||||
useCheckbox={true}
|
||||
/>
|
||||
|
||||
<Field
|
||||
type="number"
|
||||
label={_t("Font size")}
|
||||
autoComplete="off"
|
||||
placeholder={this.state.fontSize.toString()}
|
||||
value={this.state.fontSize.toString()}
|
||||
id="font_size_field"
|
||||
onValidate={this.onValidateFontSize}
|
||||
onChange={
|
||||
(value: ChangeEvent<HTMLInputElement>) =>
|
||||
this.setState({ fontSize: value.target.value })
|
||||
}
|
||||
disabled={!this.state.useCustomFontSize}
|
||||
className="mx_FontScalingPanel_customFontSizeField"
|
||||
/>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,17 +22,13 @@ import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
|
|||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
import { enumerateThemes } from "../../../../../theme";
|
||||
import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
|
||||
import Slider from "../../../elements/Slider";
|
||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
||||
import dis from "../../../../../dispatcher/dispatcher";
|
||||
import { FontWatcher } from "../../../../../settings/watchers/FontWatcher";
|
||||
import { RecheckThemePayload } from '../../../../../dispatcher/payloads/RecheckThemePayload';
|
||||
import { Action } from '../../../../../dispatcher/actions';
|
||||
import { IValidationResult, IFieldState } from '../../../elements/Validation';
|
||||
import StyledCheckbox from '../../../elements/StyledCheckbox';
|
||||
import SettingsFlag from '../../../elements/SettingsFlag';
|
||||
import Field from '../../../elements/Field';
|
||||
import EventTilePreview from '../../../elements/EventTilePreview';
|
||||
import StyledRadioGroup from "../../../elements/StyledRadioGroup";
|
||||
import { SettingLevel } from "../../../../../settings/SettingLevel";
|
||||
import { UIFeature } from "../../../../../settings/UIFeature";
|
||||
|
|
@ -42,6 +38,7 @@ import { compare } from "../../../../../utils/strings";
|
|||
import LayoutSwitcher from "../../LayoutSwitcher";
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import FontScalingPanel from '../../FontScalingPanel';
|
||||
|
||||
interface IProps {
|
||||
}
|
||||
|
|
@ -57,13 +54,8 @@ export interface CustomThemeMessage {
|
|||
}
|
||||
|
||||
interface IState extends IThemeState {
|
||||
// String displaying the current selected fontSize.
|
||||
// Needs to be string for things like '17.' without
|
||||
// trailing 0s.
|
||||
fontSize: string;
|
||||
customThemeUrl: string;
|
||||
customThemeMessage: CustomThemeMessage;
|
||||
useCustomFontSize: boolean;
|
||||
useSystemFont: boolean;
|
||||
systemFont: string;
|
||||
showAdvanced: boolean;
|
||||
|
|
@ -85,11 +77,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
fontSize: (SettingsStore.getValue("baseFontSize", null) + FontWatcher.SIZE_DIFF).toString(),
|
||||
...this.calculateThemeState(),
|
||||
customThemeUrl: "",
|
||||
customThemeMessage: { isError: false, text: "" },
|
||||
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
|
||||
useSystemFont: SettingsStore.getValue("useSystemFont"),
|
||||
systemFont: SettingsStore.getValue("systemFont"),
|
||||
showAdvanced: false,
|
||||
|
|
@ -177,37 +167,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
|
||||
};
|
||||
|
||||
private onFontSizeChanged = (size: number): void => {
|
||||
this.setState({ fontSize: size.toString() });
|
||||
SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, size - FontWatcher.SIZE_DIFF);
|
||||
};
|
||||
|
||||
private onValidateFontSize = async ({ value }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
|
||||
const parsedSize = parseFloat(value);
|
||||
const min = FontWatcher.MIN_SIZE + FontWatcher.SIZE_DIFF;
|
||||
const max = FontWatcher.MAX_SIZE + FontWatcher.SIZE_DIFF;
|
||||
|
||||
if (isNaN(parsedSize)) {
|
||||
return { valid: false, feedback: _t("Size must be a number") };
|
||||
}
|
||||
|
||||
if (!(min <= parsedSize && parsedSize <= max)) {
|
||||
return {
|
||||
valid: false,
|
||||
feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', { min, max }),
|
||||
};
|
||||
}
|
||||
|
||||
SettingsStore.setValue(
|
||||
"baseFontSize",
|
||||
null,
|
||||
SettingLevel.DEVICE,
|
||||
parseInt(value, 10) - FontWatcher.SIZE_DIFF,
|
||||
);
|
||||
|
||||
return { valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', { min, max }) };
|
||||
};
|
||||
|
||||
private onAddCustomTheme = async (): Promise<void> => {
|
||||
let currentThemes: string[] = SettingsStore.getValue("custom_themes");
|
||||
if (!currentThemes) currentThemes = [];
|
||||
|
|
@ -337,52 +296,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
);
|
||||
}
|
||||
|
||||
private renderFontSection() {
|
||||
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
|
||||
|
||||
<span className="mx_SettingsTab_subheading">{ _t("Font size") }</span>
|
||||
<EventTilePreview
|
||||
className="mx_AppearanceUserSettingsTab_fontSlider_preview"
|
||||
message={this.MESSAGE_PREVIEW_TEXT}
|
||||
layout={this.state.layout}
|
||||
userId={this.state.userId}
|
||||
displayName={this.state.displayName}
|
||||
avatarUrl={this.state.avatarUrl}
|
||||
/>
|
||||
<div className="mx_AppearanceUserSettingsTab_fontSlider">
|
||||
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
|
||||
<Slider
|
||||
values={[13, 14, 15, 16, 18]}
|
||||
value={parseInt(this.state.fontSize, 10)}
|
||||
onSelectionChange={this.onFontSizeChanged}
|
||||
displayFunc={_ => ""}
|
||||
disabled={this.state.useCustomFontSize}
|
||||
/>
|
||||
<div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
|
||||
</div>
|
||||
|
||||
<SettingsFlag
|
||||
name="useCustomFontSize"
|
||||
level={SettingLevel.ACCOUNT}
|
||||
onChange={(checked) => this.setState({ useCustomFontSize: checked })}
|
||||
useCheckbox={true}
|
||||
/>
|
||||
|
||||
<Field
|
||||
type="number"
|
||||
label={_t("Font size")}
|
||||
autoComplete="off"
|
||||
placeholder={this.state.fontSize.toString()}
|
||||
value={this.state.fontSize.toString()}
|
||||
id="font_size_field"
|
||||
onValidate={this.onValidateFontSize}
|
||||
onChange={(value) => this.setState({ fontSize: value.target.value })}
|
||||
disabled={!this.state.useCustomFontSize}
|
||||
className="mx_SettingsTab_customFontSizeField"
|
||||
/>
|
||||
</div>;
|
||||
}
|
||||
|
||||
private renderAdvancedSection() {
|
||||
if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
|
||||
|
||||
|
|
@ -471,7 +384,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
</div>
|
||||
{ this.renderThemeSection() }
|
||||
{ layoutSection }
|
||||
{ this.renderFontSection() }
|
||||
<FontScalingPanel />
|
||||
{ this.renderAdvancedSection() }
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
38
test/components/views/settings/FontScalingPanel-test.tsx
Normal file
38
test/components/views/settings/FontScalingPanel-test.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import '../../../skinned-sdk';
|
||||
import * as TestUtils from "../../../test-utils";
|
||||
import _FontScalingPanel from '../../../../src/components/views/settings/FontScalingPanel';
|
||||
|
||||
const FontScalingPanel = TestUtils.wrapInMatrixClientContext(_FontScalingPanel);
|
||||
|
||||
import * as randomstring from "matrix-js-sdk/src/randomstring";
|
||||
// @ts-expect-error: override random function to make results predictable
|
||||
randomstring.randomString = () => "abdefghi";
|
||||
|
||||
describe('FontScalingPanel', () => {
|
||||
it('renders the font scaling UI', () => {
|
||||
TestUtils.stubClient();
|
||||
const wrapper = mount(
|
||||
<FontScalingPanel />,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FontScalingPanel renders the font scaling UI 1`] = `
|
||||
<Wrapper>
|
||||
<FontScalingPanel>
|
||||
<div
|
||||
className="mx_SettingsTab_section mx_FontScalingPanel"
|
||||
>
|
||||
<span
|
||||
className="mx_SettingsTab_subheading"
|
||||
>
|
||||
Font size
|
||||
</span>
|
||||
<EventTilePreview
|
||||
avatarUrl={null}
|
||||
className="mx_FontScalingPanel_fontSlider_preview"
|
||||
displayName={null}
|
||||
layout="group"
|
||||
message="Hey you. You're the best!"
|
||||
userId={null}
|
||||
>
|
||||
<div
|
||||
className="mx_FontScalingPanel_fontSlider_preview mx_GroupLayout mx_EventTilePreview_loader"
|
||||
>
|
||||
<Spinner
|
||||
h={32}
|
||||
w={32}
|
||||
>
|
||||
<div
|
||||
className="mx_Spinner"
|
||||
>
|
||||
<div
|
||||
aria-label="Loading..."
|
||||
className="mx_Spinner_icon"
|
||||
style={
|
||||
Object {
|
||||
"height": 32,
|
||||
"width": 32,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Spinner>
|
||||
</div>
|
||||
</EventTilePreview>
|
||||
<div
|
||||
className="mx_FontScalingPanel_fontSlider"
|
||||
>
|
||||
<div
|
||||
className="mx_FontScalingPanel_fontSlider_smallText"
|
||||
>
|
||||
Aa
|
||||
</div>
|
||||
<Slider
|
||||
disabled={false}
|
||||
displayFunc={[Function]}
|
||||
onSelectionChange={[Function]}
|
||||
value={15}
|
||||
values={
|
||||
Array [
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
18,
|
||||
]
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="mx_Slider"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="mx_Slider_bar"
|
||||
>
|
||||
<hr
|
||||
onClick={[Function]}
|
||||
/>
|
||||
<div
|
||||
className="mx_Slider_selection"
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_selectionDot"
|
||||
style={
|
||||
Object {
|
||||
"left": "calc(-0.55em + 50%)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<hr
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="mx_Slider_dotContainer"
|
||||
>
|
||||
<Dot
|
||||
active={true}
|
||||
disabled={false}
|
||||
key="13"
|
||||
label=""
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="mx_Slider_dotValue"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_dot mx_Slider_dotActive"
|
||||
/>
|
||||
<div
|
||||
className="mx_Slider_labelContainer"
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_label"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</Dot>
|
||||
<Dot
|
||||
active={true}
|
||||
disabled={false}
|
||||
key="14"
|
||||
label=""
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="mx_Slider_dotValue"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_dot mx_Slider_dotActive"
|
||||
/>
|
||||
<div
|
||||
className="mx_Slider_labelContainer"
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_label"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</Dot>
|
||||
<Dot
|
||||
active={true}
|
||||
disabled={false}
|
||||
key="15"
|
||||
label=""
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="mx_Slider_dotValue"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_dot mx_Slider_dotActive"
|
||||
/>
|
||||
<div
|
||||
className="mx_Slider_labelContainer"
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_label"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</Dot>
|
||||
<Dot
|
||||
active={false}
|
||||
disabled={false}
|
||||
key="16"
|
||||
label=""
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="mx_Slider_dotValue"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_dot"
|
||||
/>
|
||||
<div
|
||||
className="mx_Slider_labelContainer"
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_label"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</Dot>
|
||||
<Dot
|
||||
active={false}
|
||||
disabled={false}
|
||||
key="18"
|
||||
label=""
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="mx_Slider_dotValue"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_dot"
|
||||
/>
|
||||
<div
|
||||
className="mx_Slider_labelContainer"
|
||||
>
|
||||
<div
|
||||
className="mx_Slider_label"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</Dot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
<div
|
||||
className="mx_FontScalingPanel_fontSlider_largeText"
|
||||
>
|
||||
Aa
|
||||
</div>
|
||||
</div>
|
||||
<SettingsFlag
|
||||
level="account"
|
||||
name="useCustomFontSize"
|
||||
onChange={[Function]}
|
||||
useCheckbox={true}
|
||||
>
|
||||
<StyledCheckbox
|
||||
checked={false}
|
||||
className=""
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
>
|
||||
<span
|
||||
className="mx_Checkbox "
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
disabled={false}
|
||||
id="checkbox_abdefghi"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
htmlFor="checkbox_abdefghi"
|
||||
>
|
||||
<div
|
||||
className="mx_Checkbox_background"
|
||||
>
|
||||
<img
|
||||
src="image-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Use custom size
|
||||
</div>
|
||||
</label>
|
||||
</span>
|
||||
</StyledCheckbox>
|
||||
</SettingsFlag>
|
||||
<Field
|
||||
autoComplete="off"
|
||||
className="mx_FontScalingPanel_customFontSizeField"
|
||||
disabled={true}
|
||||
element="input"
|
||||
id="font_size_field"
|
||||
label="Font size"
|
||||
onChange={[Function]}
|
||||
onValidate={[Function]}
|
||||
placeholder="15"
|
||||
type="number"
|
||||
validateOnBlur={true}
|
||||
validateOnChange={true}
|
||||
validateOnFocus={true}
|
||||
value="15"
|
||||
>
|
||||
<div
|
||||
className="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
|
||||
>
|
||||
<input
|
||||
autoComplete="off"
|
||||
disabled={true}
|
||||
id="font_size_field"
|
||||
label="Font size"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder="15"
|
||||
type="number"
|
||||
value="15"
|
||||
/>
|
||||
<label
|
||||
htmlFor="font_size_field"
|
||||
>
|
||||
Font size
|
||||
</label>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
</FontScalingPanel>
|
||||
</Wrapper>
|
||||
`;
|
||||
Loading…
Reference in a new issue