Merge pull request #4770 from matrix-org/joriks/font-scaling-message-preview
Add message preview for font slider
This commit is contained in:
Jorik Schellekens
GitHub
commit
086177d808
8 changed files with 294 additions and 18 deletions
|
|
@ -121,8 +121,8 @@ $irc-line-height: $font-18px;
|
|||
}
|
||||
}
|
||||
|
||||
.mx_EvenTile_line .mx_MessageActionBar,
|
||||
.mx_EvenTile_line .mx_ReplyThread_wrapper {
|
||||
.mx_EventTile_line .mx_MessageActionBar,
|
||||
.mx_EventTile_line .mx_ReplyThread_wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,11 +15,16 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider,
|
||||
.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
|
||||
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_preview,
|
||||
.mx_AppearanceUserSettingsTab_Layout,
|
||||
.mx_AppearanceUserSettingsTab .mx_Field {
|
||||
@mixin mx_Settings_fullWidthField;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontScaling {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -32,6 +37,21 @@ limitations under the License.
|
|||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_preview {
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
border-radius: 10px;
|
||||
padding: 0 16px 9px 16px;
|
||||
pointer-events: none;
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mx_IRCLayout {
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
|
||||
font-size: 15px;
|
||||
padding-right: 20px;
|
||||
|
|
@ -124,3 +144,58 @@ limitations under the License.
|
|||
.mx_SettingsTab_customFontSizeField {
|
||||
margin-left: calc($font-16px + 10px);
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
color: $primary-fg-color;
|
||||
|
||||
.mx_AppearanceUserSettingsTab_spacer {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
> .mx_AppearanceUserSettingsTab_Layout_RadioButton {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 300px;
|
||||
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
border-radius: 10px;
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_RadioButton {
|
||||
flex-grow: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_EventTile_content {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton {
|
||||
border-top: 1px solid $input-darker-bg-color;
|
||||
|
||||
> input + div {
|
||||
border-color: rgba($muted-fg-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
background-color: rgba($accent-color, 0.08);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ export default createReactClass({
|
|||
canReact: false,
|
||||
canReply: false,
|
||||
|
||||
useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
|
||||
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
|
||||
|
||||
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
|
||||
};
|
||||
|
|
@ -199,7 +199,7 @@ export default createReactClass({
|
|||
this._roomView = createRef();
|
||||
this._searchResultsPanel = createRef();
|
||||
|
||||
this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
|
||||
this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
|
||||
},
|
||||
|
||||
_onReadReceiptsChange: function() {
|
||||
|
|
@ -546,7 +546,7 @@ export default createReactClass({
|
|||
|
||||
onLayoutChange: function() {
|
||||
this.setState({
|
||||
useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
|
||||
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
129
src/components/views/elements/EventTilePreview.tsx
Normal file
129
src/components/views/elements/EventTilePreview.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
/*
|
||||
Copyright 2020 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 classnames from 'classnames';
|
||||
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
|
||||
|
||||
import * as Avatar from '../../../Avatar';
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import EventTile from '../rooms/EventTile';
|
||||
|
||||
interface IProps {
|
||||
/**
|
||||
* The text to be displayed in the message preview
|
||||
*/
|
||||
message: string;
|
||||
|
||||
/**
|
||||
* Whether to use the irc layout or not
|
||||
*/
|
||||
useIRCLayout: boolean;
|
||||
|
||||
/**
|
||||
* classnames to apply to the wrapper of the preview
|
||||
*/
|
||||
className: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
userId: string;
|
||||
displayname: string;
|
||||
avatar_url: string;
|
||||
}
|
||||
|
||||
const AVATAR_SIZE = 32;
|
||||
|
||||
export default class EventTilePreview extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
userId: "@erim:fink.fink",
|
||||
displayname: "Erimayas Fink",
|
||||
avatar_url: null,
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
// Fetch current user data
|
||||
const client = MatrixClientPeg.get();
|
||||
const userId = client.getUserId();
|
||||
const profileInfo = await client.getProfileInfo(userId);
|
||||
const avatar_url = Avatar.avatarUrlForUser(
|
||||
{avatarUrl: profileInfo.avatar_url},
|
||||
AVATAR_SIZE, AVATAR_SIZE, "crop");
|
||||
|
||||
this.setState({
|
||||
userId,
|
||||
displayname: profileInfo.displayname,
|
||||
avatar_url,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
private fakeEvent({userId, displayname, avatar_url}: IState) {
|
||||
// Fake it till we make it
|
||||
const event = new MatrixEvent(JSON.parse(`{
|
||||
"type": "m.room.message",
|
||||
"sender": "${userId}",
|
||||
"content": {
|
||||
"m.new_content": {
|
||||
"msgtype": "m.text",
|
||||
"body": "${this.props.message}",
|
||||
"displayname": "${displayname}",
|
||||
"avatar_url": "${avatar_url}"
|
||||
},
|
||||
"msgtype": "m.text",
|
||||
"body": "${this.props.message}",
|
||||
"displayname": "${displayname}",
|
||||
"avatar_url": "${avatar_url}"
|
||||
},
|
||||
"unsigned": {
|
||||
"age": 97
|
||||
},
|
||||
"event_id": "$9999999999999999999999999999999999999999999",
|
||||
"room_id": "!999999999999999999:matrix.org"
|
||||
}`));
|
||||
|
||||
// Fake it more
|
||||
event.sender = {
|
||||
name: displayname,
|
||||
userId: userId,
|
||||
getAvatarUrl: (..._) => {
|
||||
return avatar_url;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
||||
public render() {
|
||||
const event = this.fakeEvent(this.state);
|
||||
|
||||
let className = classnames(
|
||||
this.props.className,
|
||||
{
|
||||
"mx_IRCLayout": this.props.useIRCLayout,
|
||||
"mx_GroupLayout": !this.props.useIRCLayout,
|
||||
}
|
||||
);
|
||||
|
||||
return <div className={className}>
|
||||
<EventTile mxEvent={event} useIRCLayout={this.props.useIRCLayout} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,6 +36,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
|
|||
{
|
||||
"mx_RadioButton_disabled": disabled,
|
||||
"mx_RadioButton_enabled": !disabled,
|
||||
"mx_RadioButton_checked": this.props.checked,
|
||||
});
|
||||
return <label className={_className}>
|
||||
<input type='radio' disabled={disabled} {...otherProps} />
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import {_t} from "../../../../../languageHandler";
|
||||
import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
|
||||
import * as sdk from "../../../../../index";
|
||||
import { enumerateThemes } from "../../../../../theme";
|
||||
import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
|
||||
import Field from "../../../elements/Field";
|
||||
|
|
@ -30,6 +29,10 @@ import { FontWatcher } from "../../../../../settings/watchers/FontWatcher";
|
|||
import { RecheckThemePayload } from '../../../../../dispatcher/payloads/RecheckThemePayload';
|
||||
import { Action } from '../../../../../dispatcher/actions';
|
||||
import { IValidationResult, IFieldState } from '../../../elements/Validation';
|
||||
import StyledRadioButton from '../../../elements/StyledRadioButton';
|
||||
import StyledCheckbox from '../../../elements/StyledCheckbox';
|
||||
import SettingsFlag from '../../../elements/SettingsFlag';
|
||||
import EventTilePreview from '../../../elements/EventTilePreview';
|
||||
|
||||
interface IProps {
|
||||
}
|
||||
|
|
@ -52,9 +55,12 @@ interface IState extends IThemeState {
|
|||
customThemeUrl: string;
|
||||
customThemeMessage: CustomThemeMessage;
|
||||
useCustomFontSize: boolean;
|
||||
useIRCLayout: boolean;
|
||||
}
|
||||
|
||||
|
||||
export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
|
||||
private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");
|
||||
|
||||
private themeTimer: NodeJS.Timeout;
|
||||
|
||||
|
|
@ -67,6 +73,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
customThemeUrl: "",
|
||||
customThemeMessage: {isError: false, text: ""},
|
||||
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
|
||||
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -197,11 +204,17 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
this.setState({customThemeUrl: e.target.value});
|
||||
};
|
||||
|
||||
private renderThemeSection() {
|
||||
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
|
||||
const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
|
||||
const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
|
||||
private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
const val = e.target.value === "true";
|
||||
|
||||
this.setState({
|
||||
useIRCLayout: val,
|
||||
});
|
||||
|
||||
SettingsStore.setValue("useIRCLayout", null, SettingLevel.DEVICE, val);
|
||||
};
|
||||
|
||||
private renderThemeSection() {
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
let systemThemeSection: JSX.Element;
|
||||
if (themeWatcher.isSystemThemeSupported()) {
|
||||
|
|
@ -263,7 +276,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
return <StyledRadioButton
|
||||
key={theme.id}
|
||||
value={theme.id}
|
||||
name={"theme"}
|
||||
name="theme"
|
||||
disabled={this.state.useSystemTheme}
|
||||
checked={!this.state.useSystemTheme && theme.id === this.state.theme}
|
||||
className={"mx_ThemeSelector_" + theme.id}
|
||||
|
|
@ -279,9 +292,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
}
|
||||
|
||||
private renderFontSection() {
|
||||
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
|
||||
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}
|
||||
useIRCLayout={this.state.useIRCLayout}
|
||||
/>
|
||||
<div className="mx_AppearanceUserSettingsTab_fontSlider">
|
||||
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
|
||||
<Slider
|
||||
|
|
@ -293,12 +311,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
/>
|
||||
<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")}
|
||||
|
|
@ -314,6 +334,46 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
</div>;
|
||||
}
|
||||
|
||||
private renderLayoutSection = () => {
|
||||
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
|
||||
<span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
|
||||
|
||||
<div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons" >
|
||||
<div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
|
||||
<EventTilePreview
|
||||
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
|
||||
message={this.MESSAGE_PREVIEW_TEXT}
|
||||
useIRCLayout={true}
|
||||
/>
|
||||
<StyledRadioButton
|
||||
name="layout"
|
||||
value="true"
|
||||
checked={this.state.useIRCLayout}
|
||||
onChange={this.onLayoutChange}
|
||||
>
|
||||
{_t("Compact")}
|
||||
</StyledRadioButton>
|
||||
</div>
|
||||
<div className="mx_AppearanceUserSettingsTab_spacer" />
|
||||
<div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
|
||||
<EventTilePreview
|
||||
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
|
||||
message={this.MESSAGE_PREVIEW_TEXT}
|
||||
useIRCLayout={false}
|
||||
/>
|
||||
<StyledRadioButton
|
||||
name="layout"
|
||||
value="false"
|
||||
checked={!this.state.useIRCLayout}
|
||||
onChange={this.onLayoutChange}
|
||||
>
|
||||
{_t("Modern")}
|
||||
</StyledRadioButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
|
||||
|
|
@ -323,6 +383,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
</div>
|
||||
{this.renderThemeSection()}
|
||||
{SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
|
||||
{SettingsStore.isFeatureEnabled("feature_irc_ui") ? this.renderLayoutSection() : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -435,10 +435,10 @@
|
|||
"Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
|
||||
"Use the improved room list (will refresh to apply changes)": "Use the improved room list (will refresh to apply changes)",
|
||||
"Support adding custom themes": "Support adding custom themes",
|
||||
"Use IRC layout": "Use IRC layout",
|
||||
"Enable IRC layout option in the appearance tab": "Enable IRC layout option in the appearance tab",
|
||||
"Show info about bridges in room settings": "Show info about bridges in room settings",
|
||||
"Font size": "Font size",
|
||||
"Custom font size": "Custom font size",
|
||||
"Use custom size": "Use custom size",
|
||||
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
|
||||
"Use compact timeline layout": "Use compact timeline layout",
|
||||
"Show a placeholder for removed messages": "Show a placeholder for removed messages",
|
||||
|
|
@ -483,6 +483,7 @@
|
|||
"How fast should messages be downloaded.": "How fast should messages be downloaded.",
|
||||
"Manually verify all remote sessions": "Manually verify all remote sessions",
|
||||
"IRC display name width": "IRC display name width",
|
||||
"Use IRC layout": "Use IRC layout",
|
||||
"Collecting app version information": "Collecting app version information",
|
||||
"Collecting logs": "Collecting logs",
|
||||
"Uploading report": "Uploading report",
|
||||
|
|
@ -770,6 +771,7 @@
|
|||
"Downloading update...": "Downloading update...",
|
||||
"New version available. <a>Update now.</a>": "New version available. <a>Update now.</a>",
|
||||
"Check for update": "Check for update",
|
||||
"Hey you. You're the best!": "Hey you. You're the best!",
|
||||
"Size must be a number": "Size must be a number",
|
||||
"Custom font size can only be between %(min)s pt and %(max)s pt": "Custom font size can only be between %(min)s pt and %(max)s pt",
|
||||
"Use between %(min)s pt and %(max)s pt": "Use between %(min)s pt and %(max)s pt",
|
||||
|
|
@ -779,6 +781,9 @@
|
|||
"Custom theme URL": "Custom theme URL",
|
||||
"Add theme": "Add theme",
|
||||
"Theme": "Theme",
|
||||
"Message layout": "Message layout",
|
||||
"Compact": "Compact",
|
||||
"Modern": "Modern",
|
||||
"Customise your appearance": "Customise your appearance",
|
||||
"Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.",
|
||||
"Flair": "Flair",
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ export const SETTINGS = {
|
|||
},
|
||||
"feature_irc_ui": {
|
||||
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
|
||||
displayName: _td('Use IRC layout'),
|
||||
displayName: _td('Enable IRC layout option in the appearance tab'),
|
||||
default: false,
|
||||
isFeature: true,
|
||||
},
|
||||
|
|
@ -178,7 +178,7 @@ export const SETTINGS = {
|
|||
controller: new FontSizeController(),
|
||||
},
|
||||
"useCustomFontSize": {
|
||||
displayName: _td("Custom font size"),
|
||||
displayName: _td("Use custom size"),
|
||||
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
|
||||
default: false,
|
||||
},
|
||||
|
|
@ -545,4 +545,9 @@ export const SETTINGS = {
|
|||
displayName: _td("IRC display name width"),
|
||||
default: 80,
|
||||
},
|
||||
"useIRCLayout": {
|
||||
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
|
||||
displayName: _td("Use IRC layout"),
|
||||
default: false,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue