OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix encryption badge layouts and replies. 

Begin removing dependence on slider.
Move settings to labs.
Username disambiguation.
pull/21833/head
Jorik Schellekens 2020-05-07 13:55:23 +01:00
parent 5568e6488d
commit 771ae5e18f
7 changed files with 69 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
res/css/views/rooms/_IRCLayout.scss
View File

@ -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;
}
}

16
src/components/structures/MessagePanel.js
View File

@ -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}
/>
</TileErrorBoundary>
</li>,

10
src/components/views/elements/ReplyThread.js
View File

@ -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 <div className="mx_ReplyThread_wrapper_empty" />;
}
return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} />;
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}
/>
</blockquote>;
});

3
src/components/views/messages/SenderProfile.js
View File

@ -131,7 +131,10 @@ export default createReactClass({
return (
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
<div className="mx_SenderProfile_hover">
{ content }
{ content }
</div>
</div>
);
},

6
src/components/views/rooms/EventTile.js
View File

@ -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 = (
<div className="mx_EventTile_avatar">
<MemberAvatar member={this.props.mxEvent.sender}
@ -897,6 +900,7 @@ export default createReactClass({
this.props.permalinkCreator,
this._replyThread,
this.props.useIRCLayout,
this.props.displayAvatars,
);
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers

1
src/i18n/strings/en_EN.json
View File

@ -409,6 +409,7 @@
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use IRC layout": "Use IRC layout",
"Display user avatars on messages": "Display user avatars on messages",
"Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages",
"Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",

17
src/settings/Settings.js
View File

@ -143,6 +143,18 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE,
default: false,
},
"feature_irc_ui": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Use IRC layout'),
default: false,
isFeature: true,
},
"feature_no_timeline_avatars": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Display user avatars on messages'),
default: true,
isFeature: true,
},
"mjolnirRooms": {
supportedLevels: ['account'],
default: [],
@ -170,11 +182,6 @@ export const SETTINGS = {
default: true,
invertedSettingName: 'MessageComposerInput.dontSuggestEmoji',
},
"useIRCLayout": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Use IRC layout'),
default: false,
},
"useCompactLayout": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Use compact timeline layout'),