Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Pinned message cosmetic improvements #1933

Merged
merged 4 commits into from
Jun 8, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions res/css/views/rooms/_PinnedEventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,26 +25,29 @@ limitations under the License.
background-color: $event-selected-color;
}

.mx_PinnedEventTile .mx_PinnedEventTile_sender {
.mx_PinnedEventTile .mx_PinnedEventTile_sender,
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
color: #868686;
font-size: 0.8em;
vertical-align: top;
display: block;
display: inline-block;
padding-bottom: 3px;
}

.mx_PinnedEventTile .mx_EventTile_content {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
padding-left: 15px;
display: none;
}

.mx_PinnedEventTile .mx_BaseAvatar {
.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
float: left;
margin-right: 10px;
}

.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
display: inline-block;
}

.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
display: block;
}
Expand All @@ -63,5 +66,12 @@ limitations under the License.

.mx_PinnedEventTile_gotoButton {
display: inline-block;
font-size: 0.8em;
font-size: 0.7em; // Smaller text to avoid conflicting with the layout
}

.mx_PinnedEventTile_message {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
}
8 changes: 6 additions & 2 deletions src/components/views/messages/MImageBody.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ export default class extends React.Component {

/* called when the image has loaded */
onWidgetLoad: PropTypes.func.isRequired,

/* the maximum image height to use */
maxImageHeight: PropTypes.number,
}

static contextTypes = {
Expand Down Expand Up @@ -249,8 +252,9 @@ export default class extends React.Component {

const content = this.props.mxEvent.getContent();
const timelineWidth = this.refs.body.offsetWidth;
const maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
// the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
const maxHeight = this.props.maxImageHeight || 600; // let images take up as much width as they can so long
// as the height doesn't exceed 600px. The alternative here would be 600*timelineWidth/800; to scale them down
// to fit inside a 4:3 bounding box

// FIXME: this will break on clientside generated thumbnails (as per e2e rooms)
// which may well be much smaller than the 800x600 bounding box.
Expand Down
6 changes: 5 additions & 1 deletion src/components/views/messages/MessageEvent.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,11 @@ module.exports = React.createClass({
/* callback called when dynamic content in events are loaded */
onWidgetLoad: PropTypes.func,

/* the shsape of the tile, used */
/* the shape of the tile, used */
tileShape: PropTypes.string,

/* the maximum image height to use, if the event is an image */
maxImageHeight: PropTypes.number,
},

getEventTileOps: function() {
Expand Down Expand Up @@ -78,6 +81,7 @@ module.exports = React.createClass({
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
maxImageHeight={this.props.maxImageHeight}
onWidgetLoad={this.props.onWidgetLoad} />;
},
});
14 changes: 12 additions & 2 deletions src/components/views/rooms/PinnedEventTile.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton";
import MessageEvent from "../messages/MessageEvent";
import MemberAvatar from "../avatars/MemberAvatar";
import { _t } from '../../../languageHandler';
import {formatFullDate} from '../../../DateUtils';

module.exports = React.createClass({
displayName: 'PinnedEventTile',
Expand Down Expand Up @@ -80,11 +81,20 @@ module.exports = React.createClass({
{ unpinButton }
</div>

<MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
<span className="mx_PinnedEventTile_senderAvatar">
<MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
</span>
<span className="mx_PinnedEventTile_sender">
{ sender.name }
</span>
<MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" />
<span className="mx_PinnedEventTile_timestamp">
{ formatFullDate(new Date(this.props.mxEvent.getTs())) }
</span>
<div className="mx_PinnedEventTile_message">
<MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150}
onWidgetLoad={() => {}} // we need to give this, apparently
/>
</div>
</div>
);
},
Expand Down