Message preview for font slider

This commit is contained in:
Jorik Schellekens 2020-06-16 15:41:10 +01:00
parent 94f52c4ee2
commit 17dbb1ac8b
5 changed files with 150 additions and 4 deletions

View file

@ -15,11 +15,15 @@ limitations under the License.
*/
.mx_AppearanceUserSettingsTab_fontSlider,
.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
.mx_AppearanceUserSettingsTab_fontSlider_preview,
.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 +36,13 @@ 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_AppearanceUserSettingsTab_fontSlider_smallText {
font-size: 15px;
padding-right: 20px;

View file

@ -0,0 +1,126 @@
/*
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 { MatrixClientPeg } from '../../../MatrixClientPeg';
import React from 'react';
import * as Avatar from '../../../Avatar';
import classnames from 'classnames';
import { MatrixEvent } from 'matrix-js-sdk/src/models/Event';
import * as sdk from "../../../index";
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 MessagePreview 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 = await 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,
});
}
public render() {
const EventTile = sdk.getComponent("views.rooms.EventTile");
// Fake it till we make it
const event = new MatrixEvent(JSON.parse(`{
"type": "m.room.message",
"sender": "${this.state.userId}",
"content": {
"m.new_content": {
"msgtype": "m.text",
"body": "${this.props.message}",
"displayname": "${this.state.displayname}",
"avatar_url": "${this.state.avatar_url}"
},
"msgtype": "m.text",
"body": "${this.props.message}",
"displayname": "${this.state.displayname}",
"avatar_url": "${this.state.avatar_url}"
},
"unsigned": {
"age": 97
},
"event_id": "$9999999999999999999999999999999999999999999",
"room_id": "!999999999999999999:matrix.org"
}`))
// Fake it more
event.sender = {
name: this.state.displayname,
userId: this.state.userId,
getAvatarUrl: (..._) => {
return this.state.avatar_url;
},
}
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>
}
}

View file

@ -280,8 +280,15 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
private renderFontSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
const MessagePreview = sdk.getComponent("views.elements.MessagePreview");
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<MessagePreview
className="mx_AppearanceUserSettingsTab_fontSlider_preview"
message="Hey you. You're the best"
/>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
<Slider
@ -293,12 +300,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")}

View file

@ -437,7 +437,7 @@
"Use IRC layout": "Use IRC layout",
"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",

View file

@ -177,7 +177,7 @@ export const SETTINGS = {
controller: new FontSizeController(),
},
"useCustomFontSize": {
displayName: _td("Custom font size"),
displayName: _td("Use custom size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: false,
},