diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-18 16:15:57 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-18 16:15:57 +0100 |
commit | 5a0cc1b34913b1f2242e474560ae6e9def1ff282 (patch) | |
tree | 3acb7811e333e2446b367ef948241f5f55299dd0 /app | |
parent | 3114147b0e72c35abd48110bc17fe1c8be5ab396 (diff) | |
download | gitlab-ce-5a0cc1b34913b1f2242e474560ae6e9def1ff282.tar.gz |
Initial render of issue title & description
Instead of wait for Vue for data which can cause a flash of no content depending on how quickly the API returns data. This renders the data with HAML & then passes this over to Vue to render
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/issue_show/index.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/issue_title_description.vue | 16 | ||||
-rw-r--r-- | app/views/projects/issues/show.html.haml | 5 |
3 files changed, 21 insertions, 4 deletions
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js index 6dba7b90716..9056f978df9 100644 --- a/app/assets/javascripts/issue_show/index.js +++ b/app/assets/javascripts/issue_show/index.js @@ -4,6 +4,8 @@ import '../vue_shared/vue_resource_interceptor'; (() => { const issueTitleData = document.querySelector('.issue-title-data').dataset; + const initialTitle = document.querySelector('.js-issue-title').innerHTML; + const initialDescription = document.querySelector('.js-issue-description').innerHTML; const { canUpdateTasksClass, endpoint, isEdited } = issueTitleData; const vm = new Vue({ @@ -13,6 +15,8 @@ import '../vue_shared/vue_resource_interceptor'; canUpdateTasksClass, endpoint, isEdited, + initialTitle, + initialDescription, }, }), }); diff --git a/app/assets/javascripts/issue_show/issue_title_description.vue b/app/assets/javascripts/issue_show/issue_title_description.vue index 3f77ba22d23..920fbdfea6b 100644 --- a/app/assets/javascripts/issue_show/issue_title_description.vue +++ b/app/assets/javascripts/issue_show/issue_title_description.vue @@ -20,6 +20,14 @@ export default { default: false, required: false, }, + initialTitle: { + type: String, + required: true, + }, + initialDescription: { + type: String, + required: true, + }, }, data() { const resource = new Service(this.$http, this.endpoint); @@ -39,17 +47,17 @@ export default { poll, apiData: {}, tasks: '0 of 0', - title: null, + title: this.initialTitle, titleText: '', titleFlag: { - pre: true, + pre: false, pulse: false, }, - description: null, + description: this.initialDescription, descriptionText: '', descriptionChange: false, descriptionFlag: { - pre: true, + pre: false, pulse: false, }, titleEl: document.querySelector('title'), diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 0ad615535d7..ce6e0f91999 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -56,6 +56,11 @@ "is-edited": @issue.is_edited?, } } .issue-title-entrypoint + %h2.title.js-issue-title= markdown_field(@issue, :title) + - if @issue.description.present? + .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' } + .wiki.js-issue-description= markdown_field(@issue, :description) + %textarea.hidden.js-task-list-field= @issue.description #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } } // This element is filled in using JavaScript. |