Add icons for private message actions. Fixes #582
This commit is contained in:
Dessalines
parent
cfdf33b9d5
commit
08986241b6
4 changed files with 73 additions and 22 deletions
1
ui/src/components/inbox.tsx
vendored
1
ui/src/components/inbox.tsx
vendored
|
|
@ -369,6 +369,7 @@ export class Inbox extends Component<any, InboxState> {
|
||||||
this.sendUnreadCount();
|
this.sendUnreadCount();
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
this.setState(this.state);
|
this.setState(this.state);
|
||||||
|
setupTippy();
|
||||||
} else if (res.op == UserOperation.MarkAllAsRead) {
|
} else if (res.op == UserOperation.MarkAllAsRead) {
|
||||||
this.state.replies = [];
|
this.state.replies = [];
|
||||||
this.state.mentions = [];
|
this.state.mentions = [];
|
||||||
|
|
|
||||||
20
ui/src/components/private-message-form.tsx
vendored
20
ui/src/components/private-message-form.tsx
vendored
|
|
@ -27,6 +27,7 @@ import {
|
||||||
toast,
|
toast,
|
||||||
randomStr,
|
randomStr,
|
||||||
setupTribute,
|
setupTribute,
|
||||||
|
setupTippy,
|
||||||
} from '../utils';
|
} from '../utils';
|
||||||
import Tribute from 'tributejs/src/Tribute.js';
|
import Tribute from 'tributejs/src/Tribute.js';
|
||||||
import autosize from 'autosize';
|
import autosize from 'autosize';
|
||||||
|
|
@ -108,6 +109,7 @@ export class PrivateMessageForm extends Component<
|
||||||
this.setState(this.state);
|
this.setState(this.state);
|
||||||
autosize.update(textarea);
|
autosize.update(textarea);
|
||||||
});
|
});
|
||||||
|
setupTippy();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
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">
|
<li class="list-inline-item">
|
||||||
<span
|
<span
|
||||||
onClick={linkEvent(this, this.handleShowDisclaimer)}
|
onClick={linkEvent(this, this.handleShowDisclaimer)}
|
||||||
class="pointer"
|
class="pointer"
|
||||||
|
data-tippy-content={i18n.t('disclaimer')}
|
||||||
>
|
>
|
||||||
{i18n.t('disclaimer')}
|
<svg class={`icon icon-inline`}>
|
||||||
|
<use xlinkHref="#icon-alert-triangle"></use>
|
||||||
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="list-inline-item">
|
<li class="list-inline-item">
|
||||||
<a href={markdownHelpUrl} target="_blank" class="text-muted">
|
<a
|
||||||
{i18n.t('formatting_help')}
|
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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
71
ui/src/components/private-message.tsx
vendored
71
ui/src/components/private-message.tsx
vendored
|
|
@ -63,7 +63,7 @@ export class PrivateMessage extends Component<
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<Link
|
<Link
|
||||||
className="text-info"
|
className="text-body font-weight-bold"
|
||||||
to={
|
to={
|
||||||
this.mine
|
this.mine
|
||||||
? `/u/${message.recipient_name}`
|
? `/u/${message.recipient_name}`
|
||||||
|
|
@ -100,7 +100,15 @@ export class PrivateMessage extends Component<
|
||||||
className="pointer text-monospace"
|
className="pointer text-monospace"
|
||||||
onClick={linkEvent(this, this.handleMessageCollapse)}
|
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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -121,58 +129,85 @@ export class PrivateMessage extends Component<
|
||||||
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
|
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 && (
|
{!this.mine && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item-action">
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
onClick={linkEvent(this, this.handleMarkRead)}
|
onClick={linkEvent(this, this.handleMarkRead)}
|
||||||
|
data-tippy-content={
|
||||||
|
message.read
|
||||||
|
? i18n.t('mark_as_unread')
|
||||||
|
: i18n.t('mark_as_read')
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{message.read
|
<svg
|
||||||
? i18n.t('mark_as_unread')
|
class={`icon icon-inline ${message.read &&
|
||||||
: i18n.t('mark_as_read')}
|
'text-success'}`}
|
||||||
|
>
|
||||||
|
<use xlinkHref="#icon-check"></use>
|
||||||
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item-action">
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
onClick={linkEvent(this, this.handleReplyClick)}
|
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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{this.mine && (
|
{this.mine && (
|
||||||
<>
|
<>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item-action">
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
onClick={linkEvent(this, this.handleEditClick)}
|
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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item-action">
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
onClick={linkEvent(this, this.handleDeleteClick)}
|
onClick={linkEvent(this, this.handleDeleteClick)}
|
||||||
|
data-tippy-content={
|
||||||
|
!message.deleted
|
||||||
|
? i18n.t('delete')
|
||||||
|
: i18n.t('restore')
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{!message.deleted
|
<svg
|
||||||
? i18n.t('delete')
|
class={`icon icon-inline ${message.deleted &&
|
||||||
: i18n.t('restore')}
|
'text-danger'}`}
|
||||||
|
>
|
||||||
|
<use xlinkHref="#icon-trash"></use>
|
||||||
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<li className="list-inline-item">•</li>
|
<li className="list-inline-item-action">
|
||||||
<li className="list-inline-item">
|
|
||||||
<span
|
<span
|
||||||
className="pointer"
|
className="pointer"
|
||||||
onClick={linkEvent(this, this.handleViewSource)}
|
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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
3
ui/src/components/symbols.tsx
vendored
3
ui/src/components/symbols.tsx
vendored
|
|
@ -15,6 +15,9 @@ export class Symbols extends Component<any, any> {
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<defs>
|
<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">
|
<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>
|
<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>
|
</symbol>
|
||||||
|
|
|
||||||
Reference in a new issue