Merge branch 'joriks/font-scaling-message-preview' into joriks/appearance-tab-layout-options
Jorik Schellekens
commit
9760f94ff5
|
|
@ -14,14 +14,13 @@ 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";
|
||||
|
||||
import * as Avatar from '../../../Avatar';
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import EventTile from '../rooms/EventTile';
|
||||
|
||||
interface IProps {
|
||||
/**
|
||||
|
|
@ -42,8 +41,8 @@ interface IProps {
|
|||
|
||||
interface IState {
|
||||
userId: string;
|
||||
displayname: string,
|
||||
avatar_url: string,
|
||||
displayname: string;
|
||||
avatar_url: string;
|
||||
}
|
||||
|
||||
const AVATAR_SIZE = 32;
|
||||
|
|
@ -62,7 +61,8 @@ export default class MessagePreview extends React.Component<IProps, IState> {
|
|||
async componentDidMount() {
|
||||
// Fetch current user data
|
||||
const client = MatrixClientPeg.get()
|
||||
const userId = await client.getUserId();
|
||||
const userId = client.getUserId();
|
||||
console.log({userId})
|
||||
const profileInfo = await client.getProfileInfo(userId);
|
||||
const avatar_url = Avatar.avatarUrlForUser(
|
||||
{avatarUrl: profileInfo.avatar_url},
|
||||
|
|
@ -76,24 +76,22 @@ export default class MessagePreview extends React.Component<IProps, IState> {
|
|||
|
||||
}
|
||||
|
||||
public render() {
|
||||
const EventTile = sdk.getComponent("views.rooms.EventTile");
|
||||
|
||||
private fakeEvent({userId, displayname, avatar_url}: IState) {
|
||||
// Fake it till we make it
|
||||
const event = new MatrixEvent(JSON.parse(`{
|
||||
"type": "m.room.message",
|
||||
"sender": "${this.state.userId}",
|
||||
"sender": "${userId}",
|
||||
"content": {
|
||||
"m.new_content": {
|
||||
"msgtype": "m.text",
|
||||
"body": "${this.props.message}",
|
||||
"displayname": "${this.state.displayname}",
|
||||
"avatar_url": "${this.state.avatar_url}"
|
||||
"displayname": "${displayname}",
|
||||
"avatar_url": "${avatar_url}"
|
||||
},
|
||||
"msgtype": "m.text",
|
||||
"body": "${this.props.message}",
|
||||
"displayname": "${this.state.displayname}",
|
||||
"avatar_url": "${this.state.avatar_url}"
|
||||
"displayname": "${displayname}",
|
||||
"avatar_url": "${avatar_url}"
|
||||
},
|
||||
"unsigned": {
|
||||
"age": 97
|
||||
|
|
@ -104,13 +102,19 @@ export default class MessagePreview extends React.Component<IProps, IState> {
|
|||
|
||||
// Fake it more
|
||||
event.sender = {
|
||||
name: this.state.displayname,
|
||||
userId: this.state.userId,
|
||||
name: displayname,
|
||||
userId: userId,
|
||||
getAvatarUrl: (..._) => {
|
||||
return this.state.avatar_url;
|
||||
return avatar_url;
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
public render() {
|
||||
const event = this.fakeEvent(this.state);
|
||||
|
||||
let className = classnames(
|
||||
this.props.className,
|
||||
{
|
||||
|
|
@ -119,7 +123,7 @@ export default class MessagePreview extends React.Component<IProps, IState> {
|
|||
}
|
||||
);
|
||||
|
||||
return <div className={className} >
|
||||
return <div className={className}>
|
||||
<EventTile mxEvent={event} useIRCLayout={this.props.useIRCLayout} />
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 MessagePreview from '../../../elements/MessagePreview';
|
||||
|
||||
interface IProps {
|
||||
}
|
||||
|
|
@ -212,10 +215,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
}
|
||||
|
||||
private renderThemeSection() {
|
||||
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
|
||||
const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
|
||||
const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
|
||||
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
let systemThemeSection: JSX.Element;
|
||||
if (themeWatcher.isSystemThemeSupported()) {
|
||||
|
|
@ -293,9 +292,6 @@ 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>
|
||||
|
|
@ -339,9 +335,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
}
|
||||
|
||||
private renderLayoutSection = () => {
|
||||
const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
|
||||
const MessagePreview = sdk.getComponent("views.elements.MessagePreview");
|
||||
|
||||
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
|
||||
<span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
|
||||
|
||||
|
|
@ -350,7 +343,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
<MessagePreview
|
||||
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
|
||||
message={MESSAGE_PREVIEW_TEXT}
|
||||
useIRCLayout="true"
|
||||
useIRCLayout={true}
|
||||
/>
|
||||
<StyledRadioButton
|
||||
name="layout"
|
||||
|
|
@ -366,7 +359,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
<MessagePreview
|
||||
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
|
||||
message={MESSAGE_PREVIEW_TEXT}
|
||||
useIRCLayout="false"
|
||||
useIRCLayout={false}
|
||||
/>
|
||||
<StyledRadioButton
|
||||
name="layout"
|
||||
|
|
|
|||
Loading…
Reference in New Issue