Adding icon-plus and minus-square.

This commit is contained in:
Dessalines 2020-03-03 19:14:36 -05:00
parent 30165ebd15
commit 107005c474
4 changed files with 26 additions and 8 deletions

View file

@ -242,7 +242,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
className="unselectable pointer text-monospace"
onClick={linkEvent(this, this.handleCommentCollapse)}
>
{this.state.collapsed ? '[+]' : '[-]'}
{this.state.collapsed ? (
<svg class="icon">
<use xlinkHref="#icon-plus-square"></use>
</svg>
) : (
<svg class="icon">
<use xlinkHref="#icon-minus-square"></use>
</svg>
)}
</div>
</li>
</ul>

View file

@ -353,7 +353,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
data-tippy-content={i18n.t('expand_here')}
onClick={linkEvent(this, this.handleImageExpandClick)}
>
[+]
<svg class="icon icon-inline">
<use xlinkHref="#icon-plus-square"></use>
</svg>
</span>
) : (
<span>
@ -361,7 +363,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
class="text-monospace unselectable pointer ml-2 text-muted small"
onClick={linkEvent(this, this.handleImageExpandClick)}
>
[-]
<svg class="icon icon-inline">
<use xlinkHref="#icon-minus-square"></use>
</svg>
</span>
<div>
<span

View file

@ -15,6 +15,12 @@ export class Symbols extends Component<any, any> {
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<symbol id="icon-minus-square" viewBox="0 0 24 24">
<path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
</symbol>
<symbol id="icon-plus-square" viewBox="0 0 24 24">
<path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
</symbol>
<symbol id="icon-help-circle" viewBox="0 0 24 24">
<path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM10.033 9.332c0.183-0.521 0.559-0.918 1.022-1.14s1.007-0.267 1.528-0.083c0.458 0.161 0.819 0.47 1.050 0.859 0.183 0.307 0.284 0.665 0.286 1.037 0 0.155-0.039 0.309-0.117 0.464-0.080 0.16-0.203 0.325-0.368 0.49-0.709 0.709-1.831 1.092-1.831 1.092-0.524 0.175-0.807 0.741-0.632 1.265s0.741 0.807 1.265 0.632c0 0 1.544-0.506 2.613-1.575 0.279-0.279 0.545-0.614 0.743-1.010 0.2-0.4 0.328-0.858 0.328-1.369-0.004-0.731-0.204-1.437-0.567-2.049-0.463-0.778-1.19-1.402-2.105-1.724-1.042-0.366-2.135-0.275-3.057 0.167s-1.678 1.238-2.044 2.28c-0.184 0.521 0.090 1.092 0.611 1.275s1.092-0.091 1.275-0.611zM12 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>

10
ui/src/utils.ts vendored
View file

@ -34,7 +34,7 @@ import {
} from './interfaces';
import { UserService, WebSocketService } from './services';
import Tribute from 'tributejs';
import Tribute from 'tributejs/src/Tribute.js';
import markdown_it from 'markdown-it';
import markdownitEmoji from 'markdown-it-emoji/light';
import markdown_it_container from 'markdown-it-container';
@ -427,7 +427,7 @@ export function toast(text: string, background: string = 'success') {
}).showToast();
}
export function setupTribute(): any {
export function setupTribute(): Tribute {
return new Tribute({
collection: [
// Emojis
@ -445,7 +445,7 @@ export function setupTribute(): any {
}),
allowSpaces: false,
autocompleteMode: true,
// menuItemLimit: mentionDropdownFetchLimit,
menuItemLimit: mentionDropdownFetchLimit,
menuShowMinLength: 3,
},
// Users
@ -459,7 +459,7 @@ export function setupTribute(): any {
},
allowSpaces: false,
autocompleteMode: true,
// menuItemLimit: mentionDropdownFetchLimit,
menuItemLimit: mentionDropdownFetchLimit,
menuShowMinLength: 3,
},
@ -474,7 +474,7 @@ export function setupTribute(): any {
},
allowSpaces: false,
autocompleteMode: true,
// menuItemLimit: mentionDropdownFetchLimit,
menuItemLimit: mentionDropdownFetchLimit,
menuShowMinLength: 3,
},
],