Add icons for private message actions. Fixes #582

This commit is contained in:
Dessalines 2020-03-08 00:27:58 -05:00
parent 63051717d7
commit 7bb18bf73c
4 changed files with 73 additions and 22 deletions

View file

@ -369,6 +369,7 @@ export class Inbox extends Component<any, InboxState> {
this.sendUnreadCount();
window.scrollTo(0, 0);
this.setState(this.state);
setupTippy();
} else if (res.op == UserOperation.MarkAllAsRead) {
this.state.replies = [];
this.state.mentions = [];

View file

@ -27,6 +27,7 @@ import {
toast,
randomStr,
setupTribute,
setupTippy,
} from '../utils';
import Tribute from 'tributejs/src/Tribute.js';
import autosize from 'autosize';
@ -108,6 +109,7 @@ export class PrivateMessageForm extends Component<
this.setState(this.state);
autosize.update(textarea);
});
setupTippy();
}
componentWillUnmount() {
@ -170,18 +172,28 @@ export class PrivateMessageForm extends Component<
/>
)}
<ul class="float-right list-inline mb-1 text-muted small font-weight-bold">
<ul class="float-right list-inline mb-1 text-muted font-weight-bold">
<li class="list-inline-item">
<span
onClick={linkEvent(this, this.handleShowDisclaimer)}
class="pointer"
data-tippy-content={i18n.t('disclaimer')}
>
{i18n.t('disclaimer')}
<svg class={`icon icon-inline`}>
<use xlinkHref="#icon-alert-triangle"></use>
</svg>
</span>
</li>
<li class="list-inline-item">
<a href={markdownHelpUrl} target="_blank" class="text-muted">
{i18n.t('formatting_help')}
<a
href={markdownHelpUrl}
target="_blank"
class="text-muted"
title={i18n.t('formatting_help')}
>
<svg class="icon icon-inline">
<use xlinkHref="#icon-help-circle"></use>
</svg>
</a>
</li>
</ul>

View file

@ -63,7 +63,7 @@ export class PrivateMessage extends Component<
</li>
<li className="list-inline-item">
<Link
className="text-info"
className="text-body font-weight-bold"
to={
this.mine
? `/u/${message.recipient_name}`
@ -100,7 +100,15 @@ export class PrivateMessage extends Component<
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>
@ -121,58 +129,85 @@ export class PrivateMessage extends Component<
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
/>
)}
<ul class="list-inline mb-1 text-muted small font-weight-bold">
<ul class="list-inline mb-1 text-muted h5 font-weight-bold">
{!this.mine && (
<>
<li className="list-inline-item">
<li className="list-inline-item-action">
<span
class="pointer"
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')}
<svg
class={`icon icon-inline ${message.read &&
'text-success'}`}
>
<use xlinkHref="#icon-check"></use>
</svg>
</span>
</li>
<li className="list-inline-item">
<li className="list-inline-item-action">
<span
class="pointer"
onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={i18n.t('reply')}
>
{i18n.t('reply')}
<svg class="icon icon-inline">
<use xlinkHref="#icon-reply1"></use>
</svg>
</span>
</li>
</>
)}
{this.mine && (
<>
<li className="list-inline-item">
<li className="list-inline-item-action">
<span
class="pointer"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t('edit')}
>
{i18n.t('edit')}
<svg class="icon icon-inline">
<use xlinkHref="#icon-edit"></use>
</svg>
</span>
</li>
<li className="list-inline-item">
<li className="list-inline-item-action">
<span
class="pointer"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
!message.deleted
? i18n.t('delete')
: i18n.t('restore')
}
>
{!message.deleted
? i18n.t('delete')
: i18n.t('restore')}
<svg
class={`icon icon-inline ${message.deleted &&
'text-danger'}`}
>
<use xlinkHref="#icon-trash"></use>
</svg>
</span>
</li>
</>
)}
<li className="list-inline-item"></li>
<li className="list-inline-item">
<li className="list-inline-item-action">
<span
className="pointer"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t('view_source')}
>
{i18n.t('view_source')}
<svg
class={`icon icon-inline ${this.state.viewSource &&
'text-success'}`}
>
<use xlinkHref="#icon-file-text"></use>
</svg>
</span>
</li>
</ul>

View file

@ -15,6 +15,9 @@ export class Symbols extends Component<any, any> {
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<symbol id="icon-alert-triangle" viewBox="0 0 24 24">
<path d="M11.148 4.374c0.073-0.123 0.185-0.242 0.334-0.332 0.236-0.143 0.506-0.178 0.756-0.116s0.474 0.216 0.614 0.448l8.466 14.133c0.070 0.12 0.119 0.268 0.128 0.434-0.015 0.368-0.119 0.591-0.283 0.759-0.18 0.184-0.427 0.298-0.693 0.301l-16.937-0.001c-0.152-0.001-0.321-0.041-0.481-0.134-0.239-0.138-0.399-0.359-0.466-0.607s-0.038-0.519 0.092-0.745zM9.432 3.346l-8.47 14.14c-0.422 0.731-0.506 1.55-0.308 2.29s0.68 1.408 1.398 1.822c0.464 0.268 0.976 0.4 1.475 0.402h16.943c0.839-0.009 1.587-0.354 2.123-0.902s0.864-1.303 0.855-2.131c-0.006-0.536-0.153-1.044-0.406-1.474l-8.474-14.147c-0.432-0.713-1.11-1.181-1.854-1.363s-1.561-0.081-2.269 0.349c-0.429 0.26-0.775 0.615-1.012 1.014zM11 9v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
</symbol>
<symbol id="icon-zap" viewBox="0 0 24 24">
<path d="M11.585 5.26l-0.577 4.616c0.033 0.716 0.465 1.124 0.992 1.124h6.865l-6.45 7.74 0.577-4.616c-0.033-0.716-0.465-1.124-0.992-1.124h-6.865zM12.232 1.36l-10 12c-0.354 0.424-0.296 1.055 0.128 1.408 0.187 0.157 0.415 0.233 0.64 0.232h7.867l-0.859 6.876c-0.069 0.548 0.32 1.048 0.868 1.116 0.349 0.044 0.678-0.098 0.892-0.352l10-12c0.354-0.424 0.296-1.055-0.128-1.408-0.187-0.157-0.415-0.233-0.64-0.232h-7.867l0.859-6.876c0.069-0.548-0.32-1.048-0.868-1.116-0.349-0.044-0.678 0.098-0.892 0.352z"></path>
</symbol>