diff options
| -rw-r--r-- | app/assets/javascripts/notes/components/comment_form.vue | 49 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/note_form.scss | 5 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | yarn.lock | 4 |
4 files changed, 58 insertions, 1 deletions
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index b85c1a6ad72..aa8fbc4fba8 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -1,4 +1,5 @@ <script> + import sentiment from 'sentiment'; import { mapActions, mapGetters } from 'vuex'; import _ from 'underscore'; import Autosize from 'autosize'; @@ -17,6 +18,8 @@ import discussionLockedWidget from './discussion_locked_widget.vue'; import issuableStateMixin from '../mixins/issuable_state'; + import { glEmojiTag } from '../../emoji'; + export default { name: 'CommentForm', components: { @@ -42,6 +45,7 @@ noteType: constants.COMMENT, isSubmitting: false, isSubmitButtonDisabled: true, + totalSentiment: null, }; }, computed: { @@ -115,6 +119,31 @@ endpoint() { return this.getNoteableData.create_note_path; }, + getSentimentEmoji() { + if (this.totalSentiment === -5) { + return glEmojiTag('triumph'); + } else if (this.totalSentiment === -4) { + return glEmojiTag('angry'); + } else if (this.totalSentiment === -3) { + return glEmojiTag('frowning2'); + } else if (this.totalSentiment === -2) { + return glEmojiTag('slightly_frowning_face'); + } else if (this.totalSentiment === -1) { + return glEmojiTag('confused'); + } else if (this.totalSentiment === 0) { + return glEmojiTag('neutral_face'); + } else if (this.totalSentiment === 1) { + return glEmojiTag('slightly_smiling_face'); + } else if (this.totalSentiment === 2) { + return glEmojiTag('smiley'); + } else if (this.totalSentiment === 3) { + return glEmojiTag('smile'); + } else if (this.totalSentiment >= 4) { + return glEmojiTag('grin'); + } + + return; + }, }, watch: { note(newNote) { @@ -290,6 +319,16 @@ Please check your network connection and try again.`; Autosize.update(this.$refs.textarea); }); }, + checkSentiment() { + const text = this.$refs.textarea.value; + if (text) { + const { score, positive, negative } = sentiment(text); + const impactfulWordCount = (positive.length + negative.length) || 1; + this.totalSentiment = Math.round(score / impactfulWordCount); + } else { + this.totalSentiment = null; + } + }, }, }; </script> @@ -350,7 +389,9 @@ js-gfm-input js-autosize markdown-area js-vue-textarea" placeholder="Write a comment or drag your files here..." @keydown.up="editCurrentUserLastNote()" @keydown.meta.enter="handleSave()" - @keydown.ctrl.enter="handleSave()"> + @keydown.ctrl.enter="handleSave()" + @keyup="checkSentiment()" + > </textarea> </markdown-field> <div class="note-form-actions"> @@ -361,7 +402,13 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" @click.prevent="handleSave()" :disabled="isSubmitButtonDisabled" class="btn btn-create comment-btn js-comment-button js-comment-submit-button" + :class="{ 'has-emoji': totalSentiment !== null }" type="submit"> + <span + v-if="totalSentiment !== null" + v-html="getSentimentEmoji" + > + </span> {{ __(commentButtonTitle) }} </button> <button diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 4a528bc2bb1..9de059ad3f8 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -386,6 +386,11 @@ .comment-type-dropdown { .comment-btn { width: auto; + + &.has-emoji { + padding-top: 1px; + padding-bottom: 1px; + } } .dropdown-toggle { diff --git a/package.json b/package.json index cbad55b4c85..1d1a38edc00 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "react-dev-utils": "^5.0.0", "sanitize-html": "^1.16.1", "select2": "3.5.2-browserify", + "sentiment": "^4.2.0", "sql.js": "^0.4.0", "style-loader": "^0.20.2", "svg4everybody": "2.1.9", diff --git a/yarn.lock b/yarn.lock index ab0ad265d81..f7778c879bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7494,6 +7494,10 @@ send@0.16.1: range-parser "~1.2.0" statuses "~1.3.1" +sentiment@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/sentiment/-/sentiment-4.2.0.tgz#02e3e59972d754e81d427f7a3a8c25b43ed8d4f0" + serialize-javascript@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005" |