diff --git a/app/javascript/flavours/glitch/components/display_name.tsx b/app/javascript/flavours/glitch/components/display_name.tsx index e6fcbb12e..724a166fa 100644 --- a/app/javascript/flavours/glitch/components/display_name.tsx +++ b/app/javascript/flavours/glitch/components/display_name.tsx @@ -1,3 +1,4 @@ +import PropTypes from "prop-types"; import React from "react"; import classNames from "classnames"; @@ -18,6 +19,11 @@ interface Props { } export class DisplayName extends React.PureComponent { + static propTypes = { + onChange: PropTypes.func.isRequired, + nameLayout: ImmutablePropTypes.map.isRequired, + }; + handleMouseEnter: React.ReactEventHandler = ({ currentTarget, }) => { @@ -55,7 +61,7 @@ export class DisplayName extends React.PureComponent { }; render() { - const { others, localDomain, inline } = this.props; + const { others, localDomain, inline, nameLayout } = this.props; let displayName: React.ReactNode, suffix: React.ReactNode, @@ -122,6 +128,7 @@ export class DisplayName extends React.PureComponent { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} > + {nameLayout} {displayName} {inline ? " " : null} {suffix} diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 452403d3b..d62cf5fb0 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -826,6 +826,7 @@ class Status extends ImmutablePureComponent { friend={account} collapsed={isCollapsed} parseClick={parseClick} + settings={settings} /> ) : null} - + ); diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx index 128a4d539..1ea400564 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx @@ -33,6 +33,10 @@ const messages = defineMessages({ unlisted: { id: "privacy.unlisted.short", defaultMessage: "Unlisted" }, private: { id: "privacy.private.short", defaultMessage: "Followers only" }, direct: { id: "privacy.direct.short", defaultMessage: "Mentioned people only" }, + namelayout_display: { id: "namelayout.display", defaultMessage: "Display name" }, + namelayout_handle: { id: "namelayout.handle", defaultMessage: "Handle" }, + namelayout_both_y: { id: "namelayout.both.vertical", defaultMessage: "Both (Vertical)" }, + namelayout_both_x: { id: "namelayout.both.horizontal", defaultMessage: "Both (Horizontal)" }, }); class LocalSettingsPage extends PureComponent { @@ -198,6 +202,22 @@ class LocalSettingsPage extends PureComponent { +
+

+ + +
), ({ intl, onChange, settings }) => ( diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index 41d8dc955..cb35e8b59 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -53,6 +53,7 @@ const initialState = ImmutableMap({ pop_in_player : true, pop_in_position : "right", }), + name_layout : "both_y", notifications : ImmutableMap({ favicon_badge : false, tab_badge : true,