From ed9e4d82c9d476ba7146379428357db35813b9d4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 26 May 2018 18:16:05 -0600 Subject: [PATCH 1/4] Reduce the text size on the 'Jump to pinned message' button Fixes https://github.com/vector-im/riot-web/issues/6329 Signed-off-by: Travis Ralston --- res/css/views/rooms/_PinnedEventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index ca790ef8f03..8354df05376 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -63,5 +63,5 @@ 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 } From 62f4cfe734cc7a0f63bceb601a5c9f7d68677ba2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 26 May 2018 18:21:24 -0600 Subject: [PATCH 2/4] Don't affect avatars in pinned message contents This uses more direct classes to avoid affecting pills. Fixes https://github.com/vector-im/riot-web/issues/5438 Signed-off-by: Travis Ralston --- res/css/views/rooms/_PinnedEventTile.scss | 2 +- src/components/views/rooms/PinnedEventTile.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index 8354df05376..be6acdf524a 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -40,7 +40,7 @@ limitations under the License. left: 0; } -.mx_PinnedEventTile .mx_BaseAvatar { +.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar { float: left; margin-right: 10px; } diff --git a/src/components/views/rooms/PinnedEventTile.js b/src/components/views/rooms/PinnedEventTile.js index b63fdde0a87..91d656d60b4 100644 --- a/src/components/views/rooms/PinnedEventTile.js +++ b/src/components/views/rooms/PinnedEventTile.js @@ -80,7 +80,9 @@ module.exports = React.createClass({ { unpinButton } - + + + { sender.name } From 033c41a2a81cf4436309024898abd6e796aaec12 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 26 May 2018 18:40:48 -0600 Subject: [PATCH 3/4] Align pinned message contents and reduce image size Fixes https://github.com/vector-im/riot-web/issues/5421 Signed-off-by: Travis Ralston --- res/css/views/rooms/_PinnedEventTile.scss | 14 +++++++------- src/components/views/messages/MImageBody.js | 8 ++++++-- src/components/views/messages/MessageEvent.js | 6 +++++- src/components/views/rooms/PinnedEventTile.js | 6 +++++- 4 files changed, 23 insertions(+), 11 deletions(-) diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index be6acdf524a..fa76f4c6798 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -33,13 +33,6 @@ limitations under the License. padding-bottom: 3px; } -.mx_PinnedEventTile .mx_EventTile_content { - margin-left: 50px; - position: relative; - top: 0; - left: 0; -} - .mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar { float: left; margin-right: 10px; @@ -65,3 +58,10 @@ limitations under the License. display: inline-block; font-size: 0.7em; // Smaller text to avoid conflicting with the layout } + +.mx_PinnedEventTile_message { + margin-left: 50px; + position: relative; + top: 0; + left: 0; +} \ No newline at end of file diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 8045d431046..4dfd89ec0aa 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -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 = { @@ -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. diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index 7358e297c72..38f55c9d705 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -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() { @@ -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} />; }, }); diff --git a/src/components/views/rooms/PinnedEventTile.js b/src/components/views/rooms/PinnedEventTile.js index 91d656d60b4..478454a3d89 100644 --- a/src/components/views/rooms/PinnedEventTile.js +++ b/src/components/views/rooms/PinnedEventTile.js @@ -86,7 +86,11 @@ module.exports = React.createClass({ { sender.name } - +
+ {}} // we need to give this, apparently + /> +
); }, From 53396ff38dcac527605d327f5b4123c4a8884727 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 26 May 2018 19:42:09 -0600 Subject: [PATCH 4/4] Show timestamp of pinned messages on hover Addresses part of https://github.com/vector-im/riot-web/issues/5405 Signed-off-by: Travis Ralston --- res/css/views/rooms/_PinnedEventTile.scss | 14 ++++++++++++-- src/components/views/rooms/PinnedEventTile.js | 4 ++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index fa76f4c6798..f7417272b69 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -25,19 +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_PinnedEventTile_timestamp { + padding-left: 15px; + display: none; +} + .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; } diff --git a/src/components/views/rooms/PinnedEventTile.js b/src/components/views/rooms/PinnedEventTile.js index 478454a3d89..d0572e489a9 100644 --- a/src/components/views/rooms/PinnedEventTile.js +++ b/src/components/views/rooms/PinnedEventTile.js @@ -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', @@ -86,6 +87,9 @@ module.exports = React.createClass({ { sender.name } + + { formatFullDate(new Date(this.props.mxEvent.getTs())) } +
{}} // we need to give this, apparently