Create irc layout

This commit is contained in:
Jorik Schellekens 2020-04-29 15:07:41 +01:00
parent c1e740a596
commit 10c8d253c8
3 changed files with 148 additions and 7 deletions

View file

@ -0,0 +1,124 @@
/*
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.
*/
$name-width: 50px;
$icon-width: 14px;
$timestamp-width: 45px;
$right-padding: 5px;
.mx_IRCLayout {
line-height: $font-22px !important;
.mx_EventTile {
display: flex;
flex-direction: row;
align-items: flex-start;
> * {
margin-right: $right-padding;
}
> .mx_EventTile_msgOption {
order: 4;
flex-shrink: 0;
}
> .mx_SenderProfile {
order: 2;
flex-shrink: 0;
width: $name-width;
text-overflow: ellipsis;
text-align: right;
display: flex;
align-items: center;
}
> .mx_EventTile_line {
order: 3;
flex-grow: 1;
}
> .mx_EventTile_avatar {
order: 1;
position: relative;
top: 0;
left: 0;
flex-shrink: 0;
height: 22px;
display: flex;
align-items: center;
> .mx_BaseAvatar {
height: 1rem;
width: 1rem;
}
}
.mx_MessageTimestamp {
font-size: $font-10px;
width: $timestamp-width;
text-align: right;
}
.mx_EventTile_line, .mx_EventTile_reply {
padding: 0;
}
.mx_EventTile_e2eIcon {
position: relative;
right: unset;
left: unset;
top: -2px;
padding: 0;
}
.mx_EventTile_line > * {
display: inline-block;
}
}
.mx_EventListSummary {
> .mx_EventTile_line {
padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
}
}
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: calc($name-width + 10px + $icon-width);
top: 0;
}
.mx_EventTile_line {
left: calc($name-width + 10px + $icon-width);
}
.mx_TextualEvent {
line-height: $font-22px;
}
}
.mx_EventTile_continuation:not(.mx_EventTile_info) {
.mx_EventTile_avatar {
visibility: hidden;
}
.mx_SenderProfile {
visibility: hidden;
}
}
}

View file

@ -607,6 +607,7 @@ export default class MessagePanel extends React.Component {
isSelectedEvent={highlight} isSelectedEvent={highlight}
getRelationsForEvent={this.props.getRelationsForEvent} getRelationsForEvent={this.props.getRelationsForEvent}
showReactions={this.props.showReactions} showReactions={this.props.showReactions}
useIRCLayout={this.state.useIRCLayout}
/> />
</TileErrorBoundary> </TileErrorBoundary>
</li>, </li>,

View file

@ -206,6 +206,9 @@ export default createReactClass({
// whether to show reactions for this event // whether to show reactions for this event
showReactions: PropTypes.bool, showReactions: PropTypes.bool,
// whether to use the irc layout
useIRCLayout: PropTypes.bool,
}, },
getDefaultProps: function() { getDefaultProps: function() {
@ -653,6 +656,8 @@ export default createReactClass({
const classes = classNames({ const classes = classNames({
mx_EventTile_bubbleContainer: isBubbleMessage, mx_EventTile_bubbleContainer: isBubbleMessage,
mx_EventTile: true, mx_EventTile: true,
mx_EventTile_irc: this.props.useIRCLayout,
mx_EventTile_group: !this.props.useIRCLayout,
mx_EventTile_isEditing: isEditing, mx_EventTile_isEditing: isEditing,
mx_EventTile_info: isInfoMessage, mx_EventTile_info: isInfoMessage,
mx_EventTile_12hr: this.props.isTwelveHour, mx_EventTile_12hr: this.props.isTwelveHour,
@ -696,6 +701,9 @@ export default createReactClass({
// joins/parts/etc // joins/parts/etc
avatarSize = 14; avatarSize = 14;
needsSenderProfile = false; needsSenderProfile = false;
} else if (this.props.useIRCLayout) {
avatarSize = 14;
needsSenderProfile = true;
} else if (this.props.continuation && this.props.tileShape !== "file_grid") { } else if (this.props.continuation && this.props.tileShape !== "file_grid") {
// no avatar or sender profile for continuation messages // no avatar or sender profile for continuation messages
avatarSize = 0; avatarSize = 0;
@ -879,21 +887,29 @@ export default createReactClass({
this.props.permalinkCreator, this.props.permalinkCreator,
this._replyThread, this._replyThread,
); );
const linkedTimestamp = <a
href={permalink}
onClick={this.onPermalinkClicked}
aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
>
{ timestamp }
</a>;
const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return ( return (
<div className={classes} tabIndex={-1}> <div className={classes} tabIndex={-1}>
{ ircTimestamp }
<div className="mx_EventTile_msgOption"> <div className="mx_EventTile_msgOption">
{ readAvatars } { readAvatars }
</div> </div>
{ sender } { sender }
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">
<a { groupTimestamp }
href={permalink}
onClick={this.onPermalinkClicked}
aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
>
{ timestamp }
</a>
{ !isBubbleMessage && this._renderE2EPadlock() } { !isBubbleMessage && this._renderE2EPadlock() }
{ thread } { thread }
<EventTileType ref={this._tile} <EventTileType ref={this._tile}