diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-16 15:02:23 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-16 15:02:23 +0100 |
commit | f1b0b4a40ffecf3900c9ca4b69e54d5c8f47bd17 (patch) | |
tree | cfbe673ec5ea82bccfc06a0cfcd7b6a82b557bb0 /app/assets/javascripts/issue_show | |
parent | 47e875ea1f737f8c9af32871c17085386cfb517b (diff) | |
parent | 4fcff0bfa2f0d8b0a9f60e93bee807334557918f (diff) | |
download | gitlab-ce-f1b0b4a40ffecf3900c9ca4b69e54d5c8f47bd17.tar.gz |
Merge branch 'issue-edit-inline' into issue-edit-inline-description-template
Diffstat (limited to 'app/assets/javascripts/issue_show')
-rw-r--r-- | app/assets/javascripts/issue_show/components/app.vue | 13 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/components/description.vue | 7 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/components/fields/description.vue | 47 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/components/fields/description_template.vue (renamed from app/assets/javascripts/issue_show/components/fields/template.vue) | 0 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/components/fields/title.vue | 53 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/components/form.vue | 42 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/index.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/stores/index.js | 1 |
8 files changed, 120 insertions, 49 deletions
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue index e76464b2d21..25b6b207d51 100644 --- a/app/assets/javascripts/issue_show/components/app.vue +++ b/app/assets/javascripts/issue_show/components/app.vue @@ -46,6 +46,14 @@ export default { required: false, default: () => [], }, + markdownPreviewUrl: { + type: String, + required: true, + }, + markdownDocs: { + type: String, + required: true, + }, }, data() { const store = new Store({ @@ -75,6 +83,7 @@ export default { this.showForm = true; this.store.formState = { title: this.state.titleText, + description: this.state.descriptionText, }; }, closeForm() { @@ -150,7 +159,9 @@ export default { v-if="canUpdate && showForm" :form-state="formState" :can-destroy="canDestroy" - :issuable-templates="issuableTemplates" /> + :issuable-templates="issuableTemplates" + :markdown-docs="markdownDocs" + :markdown-preview-url="markdownPreviewUrl" /> <div v-else> <title-component :issuable-ref="issuableRef" diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue index 4ad3eb7dfd7..3281ec6b172 100644 --- a/app/assets/javascripts/issue_show/components/description.vue +++ b/app/assets/javascripts/issue_show/components/description.vue @@ -18,11 +18,13 @@ }, updatedAt: { type: String, - required: true, + required: false, + default: '', }, taskStatus: { type: String, - required: true, + required: false, + default: '', }, }, data() { @@ -83,6 +85,7 @@ <template> <div + v-if="descriptionHtml" class="description" :class="{ 'js-task-list-container': canUpdate diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue new file mode 100644 index 00000000000..b4c31811a0b --- /dev/null +++ b/app/assets/javascripts/issue_show/components/fields/description.vue @@ -0,0 +1,47 @@ +<script> + /* global Flash */ + import markdownField from '../../../vue_shared/components/markdown/field.vue'; + + export default { + props: { + formState: { + type: Object, + required: true, + }, + markdownPreviewUrl: { + type: String, + required: true, + }, + markdownDocs: { + type: String, + required: true, + }, + }, + components: { + markdownField, + }, + }; +</script> + +<template> + <div class="common-note-form"> + <label + class="sr-only" + for="issue-description"> + Description + </label> + <markdown-field + :markdown-preview-url="markdownPreviewUrl" + :markdown-docs="markdownDocs"> + <textarea + id="issue-description" + class="note-textarea js-gfm-input js-autosize markdown-area" + data-supports-slash-commands="false" + aria-label="Description" + v-model="formState.description" + ref="textatea" + slot="textarea"> + </textarea> + </markdown-field> + </div> +</template> diff --git a/app/assets/javascripts/issue_show/components/fields/template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue index 074d0df3803..074d0df3803 100644 --- a/app/assets/javascripts/issue_show/components/fields/template.vue +++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue index aea30bc76b1..01ae6fd3dd2 100644 --- a/app/assets/javascripts/issue_show/components/fields/title.vue +++ b/app/assets/javascripts/issue_show/components/fields/title.vue @@ -1,54 +1,27 @@ <script> - import descriptionTemplate from './template.vue'; - export default { props: { formState: { type: Object, required: true, }, - issuableTemplates: { - type: Array, - required: false, - default: () => [], - }, - }, - components: { - descriptionTemplate, - }, - computed: { - hasIssuableTemplates() { - return this.issuableTemplates.length !== 0; - }, }, }; </script> <template> - <fieldset class="row"> - <div - class="col-sm-4 col-lg-3" - v-if="hasIssuableTemplates"> - <description-template - :issuable-templates="issuableTemplates" /> - </div> - <div - :class="{ - 'col-sm-8 col-lg-9': hasIssuableTemplates, - 'col-xs-12': !hasIssuableTemplates, - }"> - <label - class="sr-only" - for="issue-title"> - Title - </label> - <input - id="issue-title" - class="form-control" - type="text" - placeholder="Issue title" - aria-label="Issue title" - v-model="formState.title" /> - </div> + <fieldset> + <label + class="sr-only" + for="issue-title"> + Title + </label> + <input + id="issue-title" + class="form-control" + type="text" + placeholder="Issue title" + aria-label="Issue title" + v-model="formState.title" /> </fieldset> </template> diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue index f7461c8d05b..5c1e0568819 100644 --- a/app/assets/javascripts/issue_show/components/form.vue +++ b/app/assets/javascripts/issue_show/components/form.vue @@ -1,6 +1,8 @@ <script> import titleField from './fields/title.vue'; + import descriptionField from './fields/description.vue'; import editActions from './edit_actions.vue'; + import descriptionTemplate from './fields/description_template.vue'; export default { props: { @@ -17,24 +19,52 @@ required: false, default: () => [], }, + markdownPreviewUrl: { + type: String, + required: true, + }, + markdownDocs: { + type: String, + required: true, + }, }, components: { titleField, + descriptionField, + descriptionTemplate, editActions, }, - issuableTemplates: { - type: Array, - required: true, - default: () => [], + computed: { + hasIssuableTemplates() { + return this.issuableTemplates.length !== 0; + }, }, }; </script> <template> <form> - <title-field + <div class="row"> + <div + class="col-sm-4 col-lg-3" + v-if="hasIssuableTemplates"> + <description-template + :issuable-templates="issuableTemplates" /> + </div> + <div + :class="{ + 'col-sm-8 col-lg-9': hasIssuableTemplates, + 'col-xs-12': !hasIssuableTemplates, + }"> + <title-field + :form-state="formState" + :issuable-templates="issuableTemplates" /> + </div> + </div> + <description-field :form-state="formState" - :issuable-templates="issuableTemplates" /> + :markdown-preview-url="markdownPreviewUrl" + :markdown-docs="markdownDocs" /> <edit-actions :can-destroy="canDestroy" /> </form> diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js index 8c1e1d5879e..f6d31d7144b 100644 --- a/app/assets/javascripts/issue_show/index.js +++ b/app/assets/javascripts/issue_show/index.js @@ -27,6 +27,8 @@ document.addEventListener('DOMContentLoaded', () => { canDestroy, endpoint, issuableRef, + markdownPreviewUrl, + markdownDocs, } = issuableElement.dataset; return { @@ -38,6 +40,8 @@ document.addEventListener('DOMContentLoaded', () => { initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '', initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '', issuableTemplates: initialData.templates, + markdownPreviewUrl, + markdownDocs, }; }, render(createElement) { @@ -51,6 +55,8 @@ document.addEventListener('DOMContentLoaded', () => { initialDescriptionHtml: this.initialDescriptionHtml, initialDescriptionText: this.initialDescriptionText, issuableTemplates: this.issuableTemplates, + markdownPreviewUrl: this.markdownPreviewUrl, + markdownDocs: this.markdownDocs, }, }); }, diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js index 0ab52c307a0..3232875000d 100644 --- a/app/assets/javascripts/issue_show/stores/index.js +++ b/app/assets/javascripts/issue_show/stores/index.js @@ -14,6 +14,7 @@ export default class Store { }; this.formState = { title: '', + description: '', }; } |