diff options
author | Dessalines <tyhou13@gmx.com> | 2020-04-12 12:47:48 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-04-12 12:47:48 -0400 |
commit | d6d040f5da2317af19b3df426556914d1b2a14fe (patch) | |
tree | 2a728cae456eef538b7e6c1df4a515ce6396e95e /ui/src/components | |
parent | ed264aba3c12243352f68c2de6a5f21f23778bd0 (diff) |
Add Emoji squashed commit.
Diffstat (limited to 'ui/src/components')
-rw-r--r-- | ui/src/components/comment-form.tsx | 28 | ||||
-rw-r--r-- | ui/src/components/post-form.tsx | 32 | ||||
-rw-r--r-- | ui/src/components/symbols.tsx | 3 |
3 files changed, 61 insertions, 2 deletions
diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index ae3e7cfc..6898ebc7 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -17,10 +17,12 @@ import { toast, setupTribute, wsJsonToRes, + emojiPicker, } from '../utils'; import { WebSocketService, UserService } from '../services'; import autosize from 'autosize'; import Tribute from 'tributejs/src/Tribute.js'; +import emojiShortName from 'emoji-short-name'; import { i18n } from '../i18next'; interface CommentFormProps { @@ -69,6 +71,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { super(props, context); this.tribute = setupTribute(); + this.setupEmojiPicker(); + this.state = this.emptyState; if (this.props.node) { @@ -209,6 +213,15 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { <use xlinkHref="#icon-spinner"></use> </svg> )} + <span + onClick={linkEvent(this, this.handleEmojiPickerClick)} + class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold" + data-tippy-content={i18n.t('emoji_picker')} + > + <svg class="icon icon-inline"> + <use xlinkHref="#icon-smile"></use> + </svg> + </span> </div> </div> </form> @@ -216,6 +229,17 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { ); } + setupEmojiPicker() { + emojiPicker.on('emoji', emoji => { + if (this.state.commentForm.content == null) { + this.state.commentForm.content = ''; + } + let shortName = `:${emojiShortName[emoji]}:`; + this.state.commentForm.content += shortName; + this.setState(this.state); + }); + } + handleFinished() { this.state.previewMode = false; this.state.loading = false; @@ -242,6 +266,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { i.setState(i.state); } + handleEmojiPickerClick(_i: CommentForm, event: any) { + emojiPicker.togglePicker(event.target); + } + handleCommentContentChange(i: CommentForm, event: any) { i.state.commentForm.content = event.target.value; i.setState(i.state); diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 47920b9b..a65ead46 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -34,9 +34,11 @@ import { randomStr, setupTribute, setupTippy, + emojiPicker, } from '../utils'; import autosize from 'autosize'; import Tribute from 'tributejs/src/Tribute.js'; +import emojiShortName from 'emoji-short-name'; import Selectr from 'mobius1-selectr'; import { i18n } from '../i18next'; @@ -92,6 +94,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> { this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this); this.tribute = setupTribute(); + this.setupEmojiPicker(); + this.state = this.emptyState; if (this.props.post) { @@ -191,7 +195,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { <label htmlFor="file-upload" className={`${UserService.Instance.user && - 'pointer'} d-inline-block float-right text-muted h6 font-weight-bold`} + 'pointer'} d-inline-block float-right text-muted font-weight-bold`} data-tippy-content={i18n.t('upload_image')} > <svg class="icon icon-inline"> @@ -294,13 +298,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> { <a href={markdownHelpUrl} target="_blank" - class="d-inline-block float-right text-muted h6 font-weight-bold" + class="d-inline-block float-right text-muted font-weight-bold" title={i18n.t('formatting_help')} > <svg class="icon icon-inline"> <use xlinkHref="#icon-help-circle"></use> </svg> </a> + <span + onClick={linkEvent(this, this.handleEmojiPickerClick)} + class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold" + data-tippy-content={i18n.t('emoji_picker')} + > + <svg class="icon icon-inline"> + <use xlinkHref="#icon-smile"></use> + </svg> + </span> </div> </div> {!this.props.post && ( @@ -369,6 +382,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> { ); } + setupEmojiPicker() { + emojiPicker.on('emoji', emoji => { + if (this.state.postForm.body == null) { + this.state.postForm.body = ''; + } + let shortName = `:${emojiShortName[emoji]}:`; + this.state.postForm.body += shortName; + this.setState(this.state); + }); + } + handlePostSubmit(i: PostForm, event: any) { event.preventDefault(); if (i.props.post) { @@ -512,6 +536,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> { }); } + handleEmojiPickerClick(_i: PostForm, event: any) { + emojiPicker.togglePicker(event.target); + } + parseMessage(msg: WebSocketJsonResponse) { let res = wsJsonToRes(msg); if (msg.error) { diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx index dae734a8..4925257b 100644 --- a/ui/src/components/symbols.tsx +++ b/ui/src/components/symbols.tsx @@ -15,6 +15,9 @@ export class Symbols extends Component<any, any> { xmlnsXlink="http://www.w3.org/1999/xlink" > <defs> + <symbol id="icon-smile" 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.364zM7.2 14.6c0 0 0.131 0.173 0.331 0.383 0.145 0.153 0.338 0.341 0.577 0.54 0.337 0.281 0.772 0.59 1.297 0.853 0.705 0.352 1.579 0.624 2.595 0.624s1.89-0.272 2.595-0.624c0.525-0.263 0.96-0.572 1.297-0.853 0.239-0.199 0.432-0.387 0.577-0.54 0.2-0.21 0.331-0.383 0.331-0.383 0.331-0.442 0.242-1.069-0.2-1.4s-1.069-0.242-1.4 0.2c-0.041 0.050-0.181 0.206-0.181 0.206-0.1 0.105-0.237 0.239-0.408 0.382-0.243 0.203-0.549 0.419-0.91 0.6-0.48 0.239-1.050 0.412-1.701 0.412s-1.221-0.173-1.701-0.413c-0.36-0.18-0.667-0.397-0.91-0.6-0.171-0.143-0.308-0.277-0.408-0.382-0.14-0.155-0.181-0.205-0.181-0.205-0.331-0.442-0.958-0.531-1.4-0.2s-0.531 0.958-0.2 1.4zM9 10c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1zM15 10c0.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-book-open" viewBox="0 0 24 24"> <path d="M21 4v13h-6c-0.728 0-1.412 0.195-2 0.535v-10.535c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879zM11 17.535c-0.588-0.34-1.272-0.535-2-0.535h-6v-13h5c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121zM22 2h-6c-1.38 0-2.632 0.561-3.536 1.464-0.167 0.167-0.322 0.346-0.464 0.536-0.142-0.19-0.297-0.369-0.464-0.536-0.904-0.903-2.156-1.464-3.536-1.464h-6c-0.552 0-1 0.448-1 1v15c0 0.552 0.448 1 1 1h7c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414c0 0.552 0.448 1 1 1s1-0.448 1-1c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h7c0.552 0 1-0.448 1-1v-15c0-0.552-0.448-1-1-1z"></path> </symbol> |