From 771ae5e18f23b7b7954950b43fa7e5e52b70b0e8 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 7 May 2020 13:55:23 +0100 Subject: [PATCH] Fix encryption badge layouts and replies. Begin removing dependence on slider. Move settings to labs. Username disambiguation. --- res/css/views/rooms/_IRCLayout.scss | 34 +++++++++++++++---- src/components/structures/MessagePanel.js | 16 +++++++-- src/components/views/elements/ReplyThread.js | 10 ++++-- .../views/messages/SenderProfile.js | 3 ++ src/components/views/rooms/EventTile.js | 6 +++- src/i18n/strings/en_EN.json | 1 + src/settings/Settings.js | 17 +++++++--- 7 files changed, 69 insertions(+), 18 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 968d8ebdea..e4536aec20 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -14,14 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -$name-width: 50px; +$name-width: 70px; $icon-width: 14px; $timestamp-width: 45px; $right-padding: 5px; .mx_IRCLayout { - line-height: $font-22px !important; + line-height: $font-20px !important; .mx_EventTile { display: flex; @@ -46,11 +46,13 @@ $right-padding: 5px; text-align: right; display: flex; align-items: center; + overflow: visible; } > .mx_EventTile_line { order: 3; flex-grow: 1; + margin-bottom: -6px; } > .mx_EventTile_avatar { @@ -90,10 +92,13 @@ $right-padding: 5px; padding: 0; } - .mx_EventTile_line .mx_EventTile_content, - .mx_EventTile_line .mx_EventTile_e2eIcon, - .mx_EventTile_line .mx_ReplyThread_wrapper_empty { - display: inline-block; + .mx_EventTile_line { + .mx_EventTile_e2eIcon, + .mx_TextualEvent, + .mx_MTextBody, + .mx_ReplyThread_wrapper_empty { + display: inline-block; + } } .mx_EvenTile_line .mx_MessageActionBar, @@ -104,6 +109,10 @@ $right-padding: 5px; .mx_EventTile_reply { order: 3; } + + .mx_EditMessageComposer_buttons { + position: relative; + } } .mx_EventListSummary { @@ -144,4 +153,17 @@ $right-padding: 5px; padding-left: 0; border-left: 0; } + + .mx_SenderProfile_hover { + background-color: $primary-bg-color; + overflow: hidden; + width: $name-width; + transition: width 2s; + } + + .mx_SenderProfile_hover:hover { + overflow: visible; + width: auto; + z-index: 10; + } } diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index 80e5d17bf3..66ed5ee81f 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -117,7 +117,8 @@ export default class MessagePanel extends React.Component { // display 'ghost' read markers that are animating away ghostReadMarkers: [], showTypingNotifications: SettingsStore.getValue("showTypingNotifications"), - useIRCLayout: SettingsStore.getValue("useIRCLayout"), + useIRCLayout: SettingsStore.getValue("feature_irc_ui"), + displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"), }; // opaque readreceipt info for each userId; used by ReadReceiptMarker @@ -171,7 +172,8 @@ export default class MessagePanel extends React.Component { this._showTypingNotificationsWatcherRef = SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange); - this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange); + this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange); + this._displayAvatarsWatcherRef = SettingsStore.watchSetting("feature_no_timeline_avatars", null, this.onDisplayAvatarsChange); } componentDidMount() { @@ -182,6 +184,7 @@ export default class MessagePanel extends React.Component { this._isMounted = false; SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef); SettingsStore.unwatchSetting(this._layoutWatcherRef); + SettingsStore.unwatchSetting(this._displayAvatarsWatcherRef); } componentDidUpdate(prevProps, prevState) { @@ -202,7 +205,13 @@ export default class MessagePanel extends React.Component { onLayoutChange = () => { this.setState({ - useIRCLayout: SettingsStore.getValue("useIRCLayout"), + useIRCLayout: SettingsStore.getValue("feature_irc_ui"), + }); + } + + onDisplayAvatarsChange = () => { + this.setState({ + displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"), }); } @@ -608,6 +617,7 @@ export default class MessagePanel extends React.Component { getRelationsForEvent={this.props.getRelationsForEvent} showReactions={this.props.showReactions} useIRCLayout={this.state.useIRCLayout} + displayAvatars={this.state.displayAvatars} /> , diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index de242f5632..d1d46e709a 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -39,6 +39,8 @@ export default class ReplyThread extends React.Component { permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired, // Specifies which layout to use. useIRCLayout: PropTypes.bool, + // Specifies whether to display avatars. + displayAvatars: PropTypes.bool, }; static contextType = MatrixClientContext; @@ -178,12 +180,12 @@ export default class ReplyThread extends React.Component { }; } - static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) { + static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout, displayAvatars) { if (!ReplyThread.getParentEventId(parentEv)) { return
; } return ; + ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} displayAvatars={displayAvatars} />; } componentDidMount() { @@ -334,7 +336,9 @@ export default class ReplyThread extends React.Component { permalinkCreator={this.props.permalinkCreator} isRedacted={ev.isRedacted()} isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} - useIRCLayout={this.props.useIRCLayout} /> + useIRCLayout={this.props.useIRCLayout} + displayAvatars={this.props.displayAvatars} + /> ; }); diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js index bed93b68c3..d95c9d685a 100644 --- a/src/components/views/messages/SenderProfile.js +++ b/src/components/views/messages/SenderProfile.js @@ -131,7 +131,10 @@ export default createReactClass({ return (
+
+ { content } { content } +
); }, diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 837c8929b9..b2daa5667f 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -209,6 +209,9 @@ export default createReactClass({ // whether to use the irc layout useIRCLayout: PropTypes.bool, + + // whether to display avatars + displayAvatars: PropTypes.bool, }, getDefaultProps: function() { @@ -713,7 +716,7 @@ export default createReactClass({ needsSenderProfile = true; } - if (this.props.mxEvent.sender && avatarSize) { + if (this.props.mxEvent.sender && avatarSize && this.props.displayAvatars) { avatar = (