Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Remove custom font size input
Browse files Browse the repository at this point in the history
  • Loading branch information
@florianduros
florianduros committed Feb 14, 2024
1 parent ab5b7d0 commit a043a21
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 72 deletions.
55 changes: 0 additions & 55 deletions src/components/views/settings/FontScalingPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

// import React, { ChangeEvent } from "react";
import React from "react";

import EventTilePreview from "../elements/EventTilePreview";
// import Field from "../elements/Field";
// 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/enums/Layout";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { SettingLevel } from "../../../settings/SettingLevel";
import { _t } from "../../../languageHandler";
// import { clamp } from "../../../utils/numbers";
import SettingsSubsection from "./shared/SettingsSubsection";

interface IProps {}
Expand Down Expand Up @@ -96,27 +91,6 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
await SettingsStore.setValue("baseFontSizeV3", null, SettingLevel.DEVICE, delta);
};

// private onValidateFontSize = async ({ value }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
// const parsedSize = parseFloat(value!);
// const min = FontWatcher.MIN_SIZE;
// const max = FontWatcher.MAX_SIZE;
//
// if (isNaN(parsedSize)) {
// return { valid: false, feedback: _t("settings|appearance|font_size_nan") };
// }
//
// if (!(min <= parsedSize && parsedSize <= max)) {
// return {
// valid: false,
// feedback: _t("settings|appearance|font_size_limit", { min, max }),
// };
// }
//
// SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, parseInt(value!, 10));
//
// return { valid: true, feedback: _t("settings|appearance|font_size_valid", { min, max }) };
// };

public render(): React.ReactNode {
return (
<SettingsSubsection
Expand Down Expand Up @@ -146,35 +120,6 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
/>
<div className="mx_FontScalingPanel_fontSlider_largeText">Aa</div>
</div>

{/*<SettingsFlag*/}
{/* name="useCustomFontSize"*/}
{/* level={SettingLevel.ACCOUNT}*/}
{/* onChange={(checked) => {*/}
{/* this.setState({ useCustomFontSize: checked });*/}
{/* if (!checked) {*/}
{/* const size = parseInt(this.state.fontSize, 10);*/}
{/* const clamped = clamp(size, FontWatcher.MIN_SIZE, FontWatcher.MAX_SIZE);*/}
{/* if (clamped !== size) {*/}
{/* this.onFontSizeChanged(clamped);*/}
{/* }*/}
{/* }*/}
{/* }}*/}
{/* useCheckbox={true}*/}
{/*/>*/}

{/*<Field*/}
{/* type="number"*/}
{/* label={_t("settings|appearance|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_AppearanceUserSettingsTab_checkboxControlledField"*/}
{/*/>*/}
</SettingsSubsection>
);
}
Expand Down
18 changes: 1 addition & 17 deletions test/components/views/settings/FontScalingPanel-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,15 @@ limitations under the License.
*/

import React from "react";
import { fireEvent, render, waitFor } from "@testing-library/react";
import { render } from "@testing-library/react";

import * as TestUtils from "../../../test-utils";
import FontScalingPanel from "../../../../src/components/views/settings/FontScalingPanel";
import SettingsStore from "../../../../src/settings/SettingsStore";

describe("FontScalingPanel", () => {
it("renders the font scaling UI", () => {
TestUtils.stubClient();
const { asFragment } = render(<FontScalingPanel />);
expect(asFragment()).toMatchSnapshot();

Check warning on line 27 in test/components/views/settings/FontScalingPanel-test.tsx

View workflow job for this annotation

GitHub Actions / Jest (2)

RETRY 1: FontScalingPanel › renders the font scaling UI 

expect(received).toMatchSnapshot()

Snapshot name: `FontScalingPanel renders the font scaling UI 1`

- Snapshot  - 44
+ Received  +  4

@@ -42,71 +42,31 @@
            class="mx_Slider"
          >
            <input
              aria-label="Font size"
              autocomplete="off"
-             max="21"
-             min="11"
+             max="5"
+             min="-5"
              step="1"
              type="range"
-             value="16"
+             value="0"
            />
            <output
              class="mx_Slider_selection"
              style="left: calc(2px + 50% + 1.2em - 1.2em);"
            >
              <span
                class="mx_Slider_selection_label"
              >
-               16
+               0
              </span>
            </output>
          </div>
          <div
            class="mx_FontScalingPanel_fontSlider_largeText"
          >
            Aa
-         </div>
-       </div>
-       <span
-         class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-       >
-         <input
-           id="checkbox_QgU2PomxwK"
-           type="checkbox"
-         />
-         <label
-           for="checkbox_QgU2PomxwK"
-         >
-           <div
-             class="mx_Checkbox_background"
-           >
-             <div
-               class="mx_Checkbox_checkmark"
-             />
          </div>
-           <div>
-             Use custom size
-           </div>
-         </label>
-       </span>
-       <div
-         class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
-       >
-         <input
-           autocomplete="off"
-           disabled=""
-           id="font_size_field"
-           label="Font size"
-           placeholder="16"
-           type="number"
-           value="16"
-         />
-         <label
-           for="font_size_field"
-         >
-           Font size
-         </label>
        </div>
      </div>
    </div>
  </DocumentFragment>

    at Object.toMatchSnapshot (test/components/views/settings/FontScalingPanel-test.tsx:27:30)

Check warning on line 27 in test/components/views/settings/FontScalingPanel-test.tsx

View workflow job for this annotation

GitHub Actions / Jest (2)

RETRY 2: FontScalingPanel › renders the font scaling UI 

expect(received).toMatchSnapshot()

Snapshot name: `FontScalingPanel renders the font scaling UI 1`

- Snapshot  - 44
+ Received  +  4

@@ -42,71 +42,31 @@
            class="mx_Slider"
          >
            <input
              aria-label="Font size"
              autocomplete="off"
-             max="21"
-             min="11"
+             max="5"
+             min="-5"
              step="1"
              type="range"
-             value="16"
+             value="0"
            />
            <output
              class="mx_Slider_selection"
              style="left: calc(2px + 50% + 1.2em - 1.2em);"
            >
              <span
                class="mx_Slider_selection_label"
              >
-               16
+               0
              </span>
            </output>
          </div>
          <div
            class="mx_FontScalingPanel_fontSlider_largeText"
          >
            Aa
-         </div>
-       </div>
-       <span
-         class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-       >
-         <input
-           id="checkbox_QgU2PomxwK"
-           type="checkbox"
-         />
-         <label
-           for="checkbox_QgU2PomxwK"
-         >
-           <div
-             class="mx_Checkbox_background"
-           >
-             <div
-               class="mx_Checkbox_checkmark"
-             />
          </div>
-           <div>
-             Use custom size
-           </div>
-         </label>
-       </span>
-       <div
-         class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
-       >
-         <input
-           autocomplete="off"
-           disabled=""
-           id="font_size_field"
-           label="Font size"
-           placeholder="16"
-           type="number"
-           value="16"
-         />
-         <label
-           for="font_size_field"
-         >
-           Font size
-         </label>
        </div>
      </div>
    </div>
  </DocumentFragment>

    at Object.toMatchSnapshot (test/components/views/settings/FontScalingPanel-test.tsx:27:30)

Check failure on line 27 in test/components/views/settings/FontScalingPanel-test.tsx

View workflow job for this annotation

GitHub Actions / Jest (2)

FontScalingPanel › renders the font scaling UI 

expect(received).toMatchSnapshot()

Snapshot name: `FontScalingPanel renders the font scaling UI 1`

- Snapshot  - 44
+ Received  +  4

@@ -42,71 +42,31 @@
            class="mx_Slider"
          >
            <input
              aria-label="Font size"
              autocomplete="off"
-             max="21"
-             min="11"
+             max="5"
+             min="-5"
              step="1"
              type="range"
-             value="16"
+             value="0"
            />
            <output
              class="mx_Slider_selection"
              style="left: calc(2px + 50% + 1.2em - 1.2em);"
            >
              <span
                class="mx_Slider_selection_label"
              >
-               16
+               0
              </span>
            </output>
          </div>
          <div
            class="mx_FontScalingPanel_fontSlider_largeText"
          >
            Aa
-         </div>
-       </div>
-       <span
-         class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-       >
-         <input
-           id="checkbox_QgU2PomxwK"
-           type="checkbox"
-         />
-         <label
-           for="checkbox_QgU2PomxwK"
-         >
-           <div
-             class="mx_Checkbox_background"
-           >
-             <div
-               class="mx_Checkbox_checkmark"
-             />
          </div>
-           <div>
-             Use custom size
-           </div>
-         </label>
-       </span>
-       <div
-         class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
-       >
-         <input
-           autocomplete="off"
-           disabled=""
-           id="font_size_field"
-           label="Font size"
-           placeholder="16"
-           type="number"
-           value="16"
-         />
-         <label
-           for="font_size_field"
-         >
-           Font size
-         </label>
        </div>
      </div>
    </div>
  </DocumentFragment>

    at Object.toMatchSnapshot (test/components/views/settings/FontScalingPanel-test.tsx:27:30)
});

it("should clamp custom font size when disabling it", async () => {
jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
TestUtils.stubClient();
const { container, getByText } = render(<FontScalingPanel />);
fireEvent.click(getByText("Use custom size"));
await waitFor(() => {
expect(container.querySelector("input[checked]")).toBeDefined();
});
fireEvent.change(container.querySelector("#font_size_field")!, { target: { value: "25" } });
fireEvent.click(getByText("Use custom size"));
await waitFor(() => {
expect(container.querySelector("#font_size_field")).toHaveValue(21);
});
});
});

1 comment on commit a043a21

@t3chguy
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably still need this. Element Desktop has no "browser" font size selector.

Please sign in to comment.