Skip to content

G
gitlab-ce
Commit 0f098eb6 authored by Fatih Acet's avatar Fatih Acet
Browse files
Options

IssueNotesRefactor: Create signed out widget.

parent d6dab4db
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 118 deletions
app/assets/javascripts/notes/components/issue_comment_form.vue
View file @ 0f098eb6
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import MarkdownField from '../../vue_shared/components/markdown/field.vue'; import MarkdownField from '../../vue_shared/components/markdown/field.vue';
import IssueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
export default { export default {
props: {}, props: {},
...@@ -23,8 +24,12 @@ export default { ...@@ -23,8 +24,12 @@ export default {
components: { components: {
UserAvatarLink, UserAvatarLink,
MarkdownField, MarkdownField,
IssueNoteSignedOutWidget,
}, },
computed: { computed: {
isLoggedIn() {
return window.gon.current_user_id;
},
commentButtonTitle() { commentButtonTitle() {
return this.noteType === 'comment' ? 'Comment' : 'Start discussion'; return this.noteType === 'comment' ? 'Comment' : 'Start discussion';
}, },
...@@ -109,102 +114,108 @@ export default { ...@@ -109,102 +114,108 @@ export default {
</script> </script>
<template> <template>
<ul class="notes notes-form timeline new-note"> <div>
<li class="timeline-entry"> <issue-note-signed-out-widget v-if="!isLoggedIn" />
<div class="timeline-icon hidden-xs hidden-sm"> <ul
<user-avatar-link v-if="isLoggedIn"
:linkHref="author.path" class="notes notes-form timeline new-note">
:imgSrc="author.avatar_url" <li class="timeline-entry">
:imgAlt="author.name" <div class="timeline-icon hidden-xs hidden-sm">
:imgSize="40" /> <user-avatar-link
</div> v-if="author"
<div class="timeline-content timeline-content-form common-note-form"> :linkHref="author.path"
<markdown-field :imgSrc="author.avatar_url"
:markdown-preview-url="markdownPreviewUrl" :imgAlt="author.name"
:markdown-docs="markdownDocsUrl" :imgSize="40" />
:addSpacingClasses="false"> </div>
<textarea <div class="timeline-content timeline-content-form common-note-form">
id="note-body" <markdown-field
class="note-textarea js-gfm-input js-autosize markdown-area" :markdown-preview-url="markdownPreviewUrl"
data-supports-slash-commands="true" :markdown-docs="markdownDocsUrl"
data-supports-quick-actions="true" :addSpacingClasses="false">
aria-label="Description" <textarea
v-model="note" id="note-body"
ref="textarea" class="note-textarea js-gfm-input js-autosize markdown-area"
slot="textarea" data-supports-slash-commands="true"
placeholder="Write a comment or drag your files here..." data-supports-quick-actions="true"
@keydown.meta.enter="handleSave()"> aria-label="Description"
</textarea> v-model="note"
</markdown-field> ref="textarea"
<div class="note-form-actions clearfix"> slot="textarea"
<div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown"> placeholder="Write a comment or drag your files here..."
<input @keydown.meta.enter="handleSave()">
@click="handleSave()" </textarea>
:disabled="!note.length" </markdown-field>
:value="commentButtonTitle" <div class="note-form-actions clearfix">
class="btn btn-nr btn-create comment-btn js-comment-button js-comment-submit-button" <div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown">
type="submit" /> <input
<button @click="handleSave()"
:disabled="!note.length" :disabled="!note.length"
name="button" :value="commentButtonTitle"
type="button" class="btn btn-nr btn-create comment-btn js-comment-button js-comment-submit-button"
class="btn btn-nr comment-btn note-type-toggle js-note-new-discussion" type="submit" />
data-toggle="dropdown" <button
aria-label="Open comment type dropdown"> :disabled="!note.length"
<i name="button"
aria-hidden="true" type="button"
class="fa fa-caret-down toggle-icon"></i> class="btn btn-nr comment-btn note-type-toggle js-note-new-discussion"
</button> data-toggle="dropdown"
<ul aria-label="Open comment type dropdown">
class="dropdown-menu note-type-dropdown dropdown-open-top"> <i
<li aria-hidden="true"
:class="{ 'item-selected': noteType === 'comment' }" class="fa fa-caret-down toggle-icon"></i>
@click.prevent="setNoteType('comment')"> </button>
<a href="#"> <ul
<i class="dropdown-menu note-type-dropdown dropdown-open-top">
aria-hidden="true" <li
class="fa fa-check"></i> :class="{ 'item-selected': noteType === 'comment' }"
<div class="description"> @click.prevent="setNoteType('comment')">
<strong>Comment</strong> <a href="#">
<p> <i
Add a general comment to this issue. aria-hidden="true"
</p> class="fa fa-check"></i>
</div> <div class="description">
</a> <strong>Comment</strong>
</li> <p>
<li class="divider"></li> Add a general comment to this issue.
<li </p>
:class="{ 'item-selected': noteType === 'discussion' }" </div>
@click.prevent="setNoteType('discussion')"> </a>
<a href="#"> </li>
<i <li class="divider"></li>
aria-hidden="true" <li
class="fa fa-check"></i> :class="{ 'item-selected': noteType === 'discussion' }"
<div class="description"> @click.prevent="setNoteType('discussion')">
<strong>Start discussion</strong> <a href="#">
<p> <i
Discuss a specific suggestion or question. aria-hidden="true"
</p> class="fa fa-check"></i>
</div> <div class="description">
</a> <strong>Start discussion</strong>
</li> <p>
</ul> 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> </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>
</div> </li>
</li> </ul>
</ul> </div>
</template> </template>
app/assets/javascripts/notes/components/issue_discussion.vue
View file @ 0f098eb6
...@@ -5,6 +5,7 @@ import IssueNote from './issue_note.vue'; ...@@ -5,6 +5,7 @@ import IssueNote from './issue_note.vue';
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import IssueNoteHeader from './issue_note_header.vue'; import IssueNoteHeader from './issue_note_header.vue';
import IssueNoteActions from './issue_note_actions.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 IssueNoteEditedText from './issue_note_edited_text.vue';
import IssueNoteForm from './issue_note_form.vue'; import IssueNoteForm from './issue_note_form.vue';
...@@ -17,8 +18,6 @@ export default { ...@@ -17,8 +18,6 @@ export default {
}, },
data() { data() {
return { return {
registerLink: '#',
signInLink: '#',
newNotePath: window.gl.issueData.create_note_path, newNotePath: window.gl.issueData.create_note_path,
isReplying: false, isReplying: false,
}; };
...@@ -40,18 +39,9 @@ export default { ...@@ -40,18 +39,9 @@ export default {
IssueNoteHeader, IssueNoteHeader,
IssueNoteActions, IssueNoteActions,
IssueNoteEditedText, IssueNoteEditedText,
IssueNoteSignedOutWidget,
IssueNoteForm, 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: { methods: {
toggleDiscussion() { toggleDiscussion() {
this.$store.commit('toggleDiscussion', { this.$store.commit('toggleDiscussion', {
...@@ -149,15 +139,7 @@ export default { ...@@ -149,15 +139,7 @@ export default {
:updateHandler="saveReply" :updateHandler="saveReply"
:cancelHandler="cancelReplyForm" :cancelHandler="cancelReplyForm"
ref="noteForm" /> ref="noteForm" />
<div <issue-note-signed-out-widget v-if="!canReply" />
v-if="!canReply"
class="disabled-comment text-center">
Please
<a :href="registerLink">register</a>
or
<a :href="signInLink">sign in</a>
to reply
</div>
</div> </div>
</div> </div>
</div> </div>
......
app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue 0 → 100644
View file @ 0f098eb6
<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>
app/views/projects/issues/_discussion.html.haml
View file @ 0f098eb6
...@@ -3,7 +3,7 @@ ...@@ -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 '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' = 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 #js-notes
- content_for :page_specific_javascripts do - content_for :page_specific_javascripts do
= webpack_bundle_tag 'common_vue' = webpack_bundle_tag 'common_vue'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7