import { MomentTime } from './moment-time';
import { PrivateMessageForm } from './private-message-form';
import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
interface PrivateMessageState {
showReply: boolean;
render() {
let message = this.props.privateMessage;
return (
- <div class="mb-2">
+ <div class="border-top border-light">
<div>
<ul class="list-inline mb-0 text-muted small">
+ {/* TODO refactor this */}
<li className="list-inline-item">
{this.mine ? i18n.t('to') : i18n.t('from')}
</li>
<li className="list-inline-item">
<Link
- className="text-info"
+ className="text-body font-weight-bold"
to={
this.mine
? `/u/${message.recipient_name}`
className="pointer text-monospace"
onClick={linkEvent(this, this.handleMessageCollapse)}
>
- {this.state.collapsed ? '[+]' : '[-]'}
+ {this.state.collapsed ? (
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-plus-square"></use>
+ </svg>
+ ) : (
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-minus-square"></use>
+ </svg>
+ )}
</div>
</li>
</ul>
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
/>
)}
- <ul class="list-inline mb-1 text-muted small font-weight-bold">
+ <ul class="list-inline mb-0 text-muted font-weight-bold">
{!this.mine && (
<>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-sm btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)}
+ data-tippy-content={
+ message.read
+ ? i18n.t('mark_as_unread')
+ : i18n.t('mark_as_read')
+ }
>
- {message.read
- ? i18n.t('mark_as_unread')
- : i18n.t('mark_as_read')}
- </span>
+ <svg
+ class={`icon icon-inline ${
+ message.read && 'text-success'
+ }`}
+ >
+ <use xlinkHref="#icon-check"></use>
+ </svg>
+ </button>
</li>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-sm btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
+ data-tippy-content={i18n.t('reply')}
>
- <T i18nKey="reply">#</T>
- </span>
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-reply1"></use>
+ </svg>
+ </button>
</li>
</>
)}
{this.mine && (
<>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-sm btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
+ data-tippy-content={i18n.t('edit')}
>
- <T i18nKey="edit">#</T>
- </span>
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-edit"></use>
+ </svg>
+ </button>
</li>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-sm btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)}
+ data-tippy-content={
+ !message.deleted
+ ? i18n.t('delete')
+ : i18n.t('restore')
+ }
>
- {!message.deleted
- ? i18n.t('delete')
- : i18n.t('restore')}
- </span>
+ <svg
+ class={`icon icon-inline ${
+ message.deleted && 'text-danger'
+ }`}
+ >
+ <use xlinkHref="#icon-trash"></use>
+ </svg>
+ </button>
</li>
</>
)}
- <li className="list-inline-item">•</li>
<li className="list-inline-item">
- <span
- className="pointer"
+ <button
+ class="btn btn-link btn-sm btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
+ data-tippy-content={i18n.t('view_source')}
>
- <T i18nKey="view_source">#</T>
- </span>
+ <svg
+ class={`icon icon-inline ${
+ this.state.viewSource && 'text-success'
+ }`}
+ >
+ <use xlinkHref="#icon-file-text"></use>
+ </svg>
+ </button>
</li>
</ul>
</div>