diff options
author | Felipe Artur <fcardozo@gitlab.com> | 2018-06-21 15:22:40 +0300 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2018-06-21 15:22:40 +0300 |
commit | 3e66795ef1ff1228906239763910b051d8afcc37 (patch) | |
tree | df6424d9ec008f5d1da455f8465681b371c4a11e /app/assets/javascripts/vue_shared/components/notes | |
parent | 14e35ac9b19d358d84e0cfd167f74036937285b6 (diff) |
Changes tab VUE refactoring
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/notes')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue | 13 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/notes/system_note.vue | 141 |
2 files changed, 103 insertions, 51 deletions
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue index 80e3db52cb0..2eb6c20b2c0 100644 --- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue @@ -14,11 +14,12 @@ </template> <script> - import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; - export default { - components: { - skeletonLoadingContainer, - }, - }; +export default { + name: 'SkeletonNote', + components: { + skeletonLoadingContainer, + }, +}; </script> diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index aac10f84087..2122d0a508e 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -1,51 +1,75 @@ <script> - /** - * Common component to render a system note, icon and user information. - * - * This component needs to be used with a vuex store. - * That vuex store needs to have a `targetNoteHash` getter - * - * @example - * <system-note - * :note="{ - * id: String, - * author: Object, - * createdAt: String, - * note_html: String, - * system_note_icon_name: String - * }" - * /> - */ - import { mapGetters } from 'vuex'; - import noteHeader from '~/notes/components/note_header.vue'; - import { spriteIcon } from '../../../lib/utils/common_utils'; +/** + * Common component to render a system note, icon and user information. + * + * This component needs to be used with a vuex store. + * That vuex store needs to have a `targetNoteHash` getter + * + * @example + * <system-note + * :note="{ + * id: String, + * author: Object, + * createdAt: String, + * note_html: String, + * system_note_icon_name: String + * }" + * /> + */ +import $ from 'jquery'; +import { mapGetters } from 'vuex'; +import noteHeader from '~/notes/components/note_header.vue'; +import Icon from '~/vue_shared/components/icon.vue'; +import { spriteIcon } from '../../../lib/utils/common_utils'; - export default { - name: 'SystemNote', - components: { - noteHeader, +const MAX_VISIBLE_COMMIT_LIST_COUNT = 3; + +export default { + name: 'SystemNote', + components: { + Icon, + noteHeader, + }, + props: { + note: { + type: Object, + required: true, + }, + }, + data() { + return { + expanded: false, + }; + }, + computed: { + ...mapGetters(['targetNoteHash']), + noteAnchorId() { + return `note_${this.note.id}`; + }, + isTargetNote() { + return this.targetNoteHash === this.noteAnchorId; }, - props: { - note: { - type: Object, - required: true, - }, + iconHtml() { + return spriteIcon(this.note.system_note_icon_name); }, - computed: { - ...mapGetters([ - 'targetNoteHash', - ]), - noteAnchorId() { - return `note_${this.note.id}`; - }, - isTargetNote() { - return this.targetNoteHash === this.noteAnchorId; - }, - iconHtml() { - return spriteIcon(this.note.system_note_icon_name); - }, + toggleIcon() { + return this.expanded ? 'chevron-up' : 'chevron-down'; }, - }; + // following 2 methods taken from code in `collapseLongCommitList` of notes.js: + actionTextHtml() { + return $(this.note.note_html) + .unwrap() + .html(); + }, + hasMoreCommits() { + return ( + $(this.note.note_html) + .filter('ul') + .children().length > MAX_VISIBLE_COMMIT_LIST_COUNT + ); + }, + }, +}; </script> <template> @@ -64,8 +88,35 @@ :author="note.author" :created-at="note.created_at" :note-id="note.id" - :action-text-html="note.note_html" - /> + > + <span v-html="actionTextHtml"></span> + </note-header> + </div> + <div class="note-body"> + <div + :class="{ + 'system-note-commit-list': hasMoreCommits, + 'hide-shade': expanded + }" + class="note-text" + v-html="note.note_html" + ></div> + <div + v-if="hasMoreCommits" + class="flex-list" + > + <div + class="system-note-commit-list-toggler flex-row" + @click="expanded = !expanded" + > + <Icon + :name="toggleIcon" + :size="8" + class="append-right-5" + /> + <span>Toggle commit list</span> + </div> + </div> </div> </div> </div> |