diff options
author | Fatih Acet <acetfatih@gmail.com> | 2017-07-05 00:56:25 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-07-21 22:35:25 +0300 |
commit | 0f098eb60a706fb69f1a822ee409826f663ee82f (patch) | |
tree | 332ca92287c6e572c291d4815936c9219f497e74 /app | |
parent | d6dab4dbcca61684c15f46976f0cfd9443436637 (diff) |
IssueNotesRefactor: Create signed out widget.
Diffstat (limited to 'app')
4 files changed, 137 insertions, 118 deletions
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue index 72d9bc7451a..e4f7a1dbb79 100644 --- a/app/assets/javascripts/notes/components/issue_comment_form.vue +++ b/app/assets/javascripts/notes/components/issue_comment_form.vue @@ -3,6 +3,7 @@ import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import MarkdownField from '../../vue_shared/components/markdown/field.vue'; +import IssueNoteSignedOutWidget from './issue_note_signed_out_widget.vue'; export default { props: {}, @@ -23,8 +24,12 @@ export default { components: { UserAvatarLink, MarkdownField, + IssueNoteSignedOutWidget, }, computed: { + isLoggedIn() { + return window.gon.current_user_id; + }, commentButtonTitle() { return this.noteType === 'comment' ? 'Comment' : 'Start discussion'; }, @@ -109,102 +114,108 @@ export default { </script> <template> - <ul class="notes notes-form timeline new-note"> - <li class="timeline-entry"> - <div class="timeline-icon hidden-xs hidden-sm"> - <user-avatar-link - :linkHref="author.path" - :imgSrc="author.avatar_url" - :imgAlt="author.name" - :imgSize="40" /> - </div> - <div class="timeline-content timeline-content-form common-note-form"> - <markdown-field - :markdown-preview-url="markdownPreviewUrl" - :markdown-docs="markdownDocsUrl" - :addSpacingClasses="false"> - <textarea - id="note-body" - class="note-textarea js-gfm-input js-autosize markdown-area" - data-supports-slash-commands="true" - data-supports-quick-actions="true" - aria-label="Description" - v-model="note" - ref="textarea" - slot="textarea" - placeholder="Write a comment or drag your files here..." - @keydown.meta.enter="handleSave()"> - </textarea> - </markdown-field> - <div class="note-form-actions clearfix"> - <div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown"> - <input - @click="handleSave()" - :disabled="!note.length" - :value="commentButtonTitle" - class="btn btn-nr btn-create comment-btn js-comment-button js-comment-submit-button" - type="submit" /> - <button - :disabled="!note.length" - name="button" - type="button" - class="btn btn-nr comment-btn note-type-toggle js-note-new-discussion" - data-toggle="dropdown" - aria-label="Open comment type dropdown"> - <i - aria-hidden="true" - class="fa fa-caret-down toggle-icon"></i> - </button> - <ul - class="dropdown-menu note-type-dropdown dropdown-open-top"> - <li - :class="{ 'item-selected': noteType === 'comment' }" - @click.prevent="setNoteType('comment')"> - <a href="#"> - <i - aria-hidden="true" - class="fa fa-check"></i> - <div class="description"> - <strong>Comment</strong> - <p> - Add a general comment to this issue. - </p> - </div> - </a> - </li> - <li class="divider"></li> - <li - :class="{ 'item-selected': noteType === 'discussion' }" - @click.prevent="setNoteType('discussion')"> - <a href="#"> - <i - aria-hidden="true" - class="fa fa-check"></i> - <div class="description"> - <strong>Start discussion</strong> - <p> - Discuss a specific suggestion or question. - </p> - </div> - </a> - </li> - </ul> + <div> + <issue-note-signed-out-widget v-if="!isLoggedIn" /> + <ul + v-if="isLoggedIn" + class="notes notes-form timeline new-note"> + <li class="timeline-entry"> + <div class="timeline-icon hidden-xs hidden-sm"> + <user-avatar-link + v-if="author" + :linkHref="author.path" + :imgSrc="author.avatar_url" + :imgAlt="author.name" + :imgSize="40" /> + </div> + <div class="timeline-content timeline-content-form common-note-form"> + <markdown-field + :markdown-preview-url="markdownPreviewUrl" + :markdown-docs="markdownDocsUrl" + :addSpacingClasses="false"> + <textarea + id="note-body" + class="note-textarea js-gfm-input js-autosize markdown-area" + data-supports-slash-commands="true" + data-supports-quick-actions="true" + aria-label="Description" + v-model="note" + ref="textarea" + slot="textarea" + placeholder="Write a comment or drag your files here..." + @keydown.meta.enter="handleSave()"> + </textarea> + </markdown-field> + <div class="note-form-actions clearfix"> + <div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown"> + <input + @click="handleSave()" + :disabled="!note.length" + :value="commentButtonTitle" + class="btn btn-nr btn-create comment-btn js-comment-button js-comment-submit-button" + type="submit" /> + <button + :disabled="!note.length" + name="button" + type="button" + class="btn btn-nr comment-btn note-type-toggle js-note-new-discussion" + data-toggle="dropdown" + aria-label="Open comment type dropdown"> + <i + aria-hidden="true" + class="fa fa-caret-down toggle-icon"></i> + </button> + <ul + class="dropdown-menu note-type-dropdown dropdown-open-top"> + <li + :class="{ 'item-selected': noteType === 'comment' }" + @click.prevent="setNoteType('comment')"> + <a href="#"> + <i + aria-hidden="true" + class="fa fa-check"></i> + <div class="description"> + <strong>Comment</strong> + <p> + Add a general comment to this issue. + </p> + </div> + </a> + </li> + <li class="divider"></li> + <li + :class="{ 'item-selected': noteType === 'discussion' }" + @click.prevent="setNoteType('discussion')"> + <a href="#"> + <i + aria-hidden="true" + class="fa fa-check"></i> + <div class="description"> + <strong>Start discussion</strong> + <p> + Discuss a specific suggestion or question. + </p> + </div> + </a> + </li> + </ul> + </div> + <a + @click="handleSave(true)" + :class="{'btn-reopen': issueState === 'closed', 'btn-close': issueState === 'open'}" + class="btn btn-nr btn-comment"> + {{issueActionButtonTitle}} + </a> + <a + v-if="note.length" + @click="discard" + class="btn btn-cancel js-note-discard" + role="button"> + Discard draft + </a> </div> - <a - @click="handleSave(true)" - :class="{'btn-reopen': issueState === 'closed', 'btn-close': issueState === 'open'}" - class="btn btn-nr btn-comment"> - {{issueActionButtonTitle}} - </a> - <a - v-if="note.length" - @click="discard" - class="btn btn-cancel js-note-discard" - role="button"> - Discard draft - </a> </div> - </div> - </li> - </ul> + </li> + </ul> + </div> </template> diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue index 901462a40db..5cebd624935 100644 --- a/app/assets/javascripts/notes/components/issue_discussion.vue +++ b/app/assets/javascripts/notes/components/issue_discussion.vue @@ -5,6 +5,7 @@ import IssueNote from './issue_note.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import IssueNoteHeader from './issue_note_header.vue'; import IssueNoteActions from './issue_note_actions.vue'; +import IssueNoteSignedOutWidget from './issue_note_signed_out_widget.vue'; import IssueNoteEditedText from './issue_note_edited_text.vue'; import IssueNoteForm from './issue_note_form.vue'; @@ -17,8 +18,6 @@ export default { }, data() { return { - registerLink: '#', - signInLink: '#', newNotePath: window.gl.issueData.create_note_path, isReplying: false, }; @@ -40,18 +39,9 @@ export default { IssueNoteHeader, IssueNoteActions, IssueNoteEditedText, + IssueNoteSignedOutWidget, IssueNoteForm, }, - mounted() { - // We need to grab the register and sign in links from DOM for the time being. - const registerLink = document.querySelector('.js-disabled-comment .js-register-link'); - const signInLink = document.querySelector('.js-disabled-comment .js-sign-in-link'); - - if (registerLink && signInLink) { - this.registerLink = registerLink.getAttribute('href'); - this.signInLink = signInLink.getAttribute('href'); - } - }, methods: { toggleDiscussion() { this.$store.commit('toggleDiscussion', { @@ -149,15 +139,7 @@ export default { :updateHandler="saveReply" :cancelHandler="cancelReplyForm" ref="noteForm" /> - <div - v-if="!canReply" - class="disabled-comment text-center"> - Please - <a :href="registerLink">register</a> - or - <a :href="signInLink">sign in</a> - to reply - </div> + <issue-note-signed-out-widget v-if="!canReply" /> </div> </div> </div> diff --git a/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue b/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue new file mode 100644 index 00000000000..1b819dfcb8b --- /dev/null +++ b/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue @@ -0,0 +1,26 @@ +<script> +export default { + data() { + return { + signInLink: '#', + }; + }, + mounted() { + const wrapper = document.querySelector('.js-notes-wrapper'); + + if (wrapper) { + this.signInLink = wrapper.dataset.newSessionPath; + } + }, +}; +</script> + +<template> + <div class="disabled-comment text-center"> + Please + <a :href="signInLink">register</a> + or + <a :href="signInLink">sign in</a> + to reply + </div> +</template> diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml index ab0534f1fb0..de92e55a5bc 100644 --- a/app/views/projects/issues/_discussion.html.haml +++ b/app/views/projects/issues/_discussion.html.haml @@ -3,7 +3,7 @@ = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, format: 'json'), data: {original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue' = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, format: 'json'), data: {original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue' -%section{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json), new_session_path: new_session_path(:user, redirect_to_referer: 'yes'), notes_path: notes_url, last_fetched_at: Time.now.to_i } } +%section.js-notes-wrapper{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json), new_session_path: new_session_path(:user, redirect_to_referer: 'yes'), notes_path: notes_url, last_fetched_at: Time.now.to_i } } #js-notes - content_for :page_specific_javascripts do = webpack_bundle_tag 'common_vue' |