Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show timestamp of pinned messages on hover

Browse Source 
Addresses part of https://github.com/vector-im/riot-web/issues/5405

Signed-off-by: Travis Ralston <travpc@gmail.com>
This commit is contained in:
Travis Ralston 2018-05-26 19:42:09 -06:00
parent 033c41a2a8
commit 53396ff38d
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
res/css/views/rooms/_PinnedEventTile.scss
View File

@ -25,19 +25,29 @@ limitations under the License.
background-color: $event-selected-color; background-color: $event-selected-color;
} }
.mx_PinnedEventTile .mx_PinnedEventTile_sender { .mx_PinnedEventTile .mx_PinnedEventTile_sender,
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
color: #868686; color: #868686;
font-size: 0.8em; font-size: 0.8em;
vertical-align: top; vertical-align: top;
display: block; display: inline-block;
padding-bottom: 3px; padding-bottom: 3px;
} }
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
padding-left: 15px;
display: none;
}
.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar { .mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
display: inline-block;
}
.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions { .mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
display: block; display: block;
} }

4
src/components/views/rooms/PinnedEventTile.js
View File

@ -22,6 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton";
import MessageEvent from "../messages/MessageEvent"; import MessageEvent from "../messages/MessageEvent";
import MemberAvatar from "../avatars/MemberAvatar"; import MemberAvatar from "../avatars/MemberAvatar";
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import {formatFullDate} from '../../../DateUtils';
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'PinnedEventTile', displayName: 'PinnedEventTile',
@ -86,6 +87,9 @@ module.exports = React.createClass({
<span className="mx_PinnedEventTile_sender"> <span className="mx_PinnedEventTile_sender">
{ sender.name } { sender.name }
</span> </span>
<span className="mx_PinnedEventTile_timestamp">
{ formatFullDate(new Date(this.props.mxEvent.getTs())) }
</span>
<div className="mx_PinnedEventTile_message"> <div className="mx_PinnedEventTile_message">
<MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150} <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150}
onWidgetLoad={() => {}} // we need to give this, apparently onWidgetLoad={() => {}} // we need to give this, apparently