diff options
author | Phil Hughes <me@iamphill.com> | 2016-07-15 09:52:20 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-07-15 09:52:20 +0100 |
commit | a338765bc2bd704cc056ed245a1b118347e66012 (patch) | |
tree | db87137d94cc1594d6e730bf12cc660f46571a7c | |
parent | 82f99bbbe24f8f422e419125635d79e6257723aa (diff) | |
download | gitlab-ce-issuable-inline-edit.tar.gz |
Updated inline edit formissuable-inline-edit
-rw-r--r-- | app/assets/javascripts/issuable_edit.js.coffee | 88 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/detail_page.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 54 | ||||
-rw-r--r-- | app/views/projects/issues/show.html.haml | 33 | ||||
-rw-r--r-- | app/views/projects/merge_requests/show/_mr_box.html.haml | 28 | ||||
-rw-r--r-- | app/views/shared/issuable/_inline_edit.html.haml | 50 | ||||
-rw-r--r-- | spec/features/issues/inline_edit_spec.rb | 45 |
7 files changed, 98 insertions, 204 deletions
diff --git a/app/assets/javascripts/issuable_edit.js.coffee b/app/assets/javascripts/issuable_edit.js.coffee index 746c7cdca98..3792d202b06 100644 --- a/app/assets/javascripts/issuable_edit.js.coffee +++ b/app/assets/javascripts/issuable_edit.js.coffee @@ -4,89 +4,39 @@ class @IssuableEdit @removeEventListeners() @initEventListeners() - new GLForm(@elements.form) + new GLForm(@$form) getElements: -> - @elements = - form: $('.js-issuable-inline-form') - title: - element: $('.js-issuable-title') - field: $('.js-issuable-title-field') - fieldset: $('.js-issuable-edit-title') - loading: $('.js-issuable-title-loading') - description: - element: $('.js-issuable-description') - field: $('.js-task-list-field') - fieldset: $('.js-issuable-description-field') - loading: $('.js-issuable-title-loading') + @$form = $('.js-issuable-inline-form') + @$details = $('.js-issuable-details') + @$title = $('.js-issuable-title') + @$description = $('.js-issuable-description') + @$taskList = $('.detail-page-description .js-task-list-container') removeEventListeners: -> - $(document).off 'ajax:success', '.js-issuable-inline-form' - $(document).off 'click', '.js-issuable-edit-cancel' + $(document).off 'ajax:success', '.js-issuable-inline-form', @afterSave - $(document).off 'click', '.js-issuable-title' - $(document).off 'click', '.js-issuable-title-save' - - $(document).off 'click', '.js-issuable-description' - $(document).off 'click', '.js-issuable-description-save' + $(document).off 'click', '.js-inline-edit', @toggleForm + $(document).off 'click', '.js-issuable-edit-cancel', @toggleForm initEventListeners: -> $(document).on 'ajax:success', '.js-issuable-inline-form', @afterSave - $(document).on 'click', '.js-issuable-edit-cancel', @hideFields - - # Title field - $(document).on 'click', '.js-issuable-title', @showTitleEdit - $(document).on 'click', '.js-issuable-title-save', @saveTitle - - # Description field - $(document).on 'click', '.js-issuable-description', @showDescriptionEdit - $(document).on 'click', '.js-issuable-description-save', @saveDescription - - hideFields: (e) => - @hideTitleEdit(e) - @hideDescriptionEdit(e) - - showTitleEdit: => - @hideDescriptionEdit() - @elements.title.element.addClass 'hidden' - @elements.title.fieldset.removeClass 'hidden' - @elements.title.field.focus() - hideTitleEdit: (e) -> - @elements.title.fieldset.addClass 'hidden' - @elements.title.element.removeClass 'hidden' + $(document).on 'click', '.js-inline-edit', @toggleForm + $(document).on 'click', '.js-issuable-edit-cancel', @toggleForm - saveTitle: (e) => - @hideTitleEdit() - @elements.title.loading.removeClass 'hidden' - - saveDescription: (e) => - @hideDescriptionEdit(e) - @elements.description.element.addClass 'is-loading' - - showDescriptionEdit: (e) => - if $(e.target).is(':not(input,a)') - @hideTitleEdit(e) - @elements.description.element.addClass 'hidden' - @elements.description.fieldset.removeClass 'hidden' - @elements.description.field.focus() - - hideDescriptionEdit: -> - @elements.description.fieldset.addClass 'hidden' - @elements.description.element.removeClass 'hidden' + toggleForm: => + @$details.toggleClass('hidden') + @$form.toggleClass('hidden') afterSave: (e, data) => - $('.js-issuable-inline-form [type="submit"]').enable() - - @hideTitleEdit() - @hideDescriptionEdit(e) + $('[type="submit"]', @$form).enable() - @elements.title.loading.addClass 'hidden' - @elements.description.element.removeClass 'is-loading' + @toggleForm() # Update the HTML # We need HTML returned so that the markdown can be correctly created on server side - @elements.title.element.html data.title - @elements.description.element.html data.description + @$title.html data.title + @$description.html data.description - $('.detail-page-description .js-task-list-container').taskList('enable') + @$taskList.taskList('enable') diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index c3b3892f842..1b389d83525 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -33,10 +33,6 @@ margin-bottom: 0; } } - - .is-loading { - opacity: .5; - } } .wiki { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 9c656da7926..70be63b9202 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -268,7 +268,7 @@ .issuable-header-btn { background: $gray-normal; border: 1px solid $border-gray-normal; - + &:hover { background: $gray-dark; border: 1px solid $border-gray-dark; @@ -395,47 +395,27 @@ line-height: 18px; } -.issuable-title-edit { - position: relative; - padding-right: 127px; -} - -.issuable-title-edit-buttons { - position: absolute; - right: 0; - top: 0; -} - -.issuable-title-edit { - .form-control { - font-size: inherit; +.issuable-inline-label { + @media (min-width: $screen-md-min) { + text-align: right; } } -.inline-edit-box { - position: relative; +.issuable-inline-edit { + margin-top: 5px; - &:hover { - &::after { - content: ''; - position: absolute; - right: 0; - bottom: -2px; - left: 0; - border-top: 2px dashed $focus-border-color; - } + .btn { + padding-top: 3px; + padding-bottom: 3px; + color: $gray-darkest; + border-right: 1px solid $gray-darkest; + border-radius: 0; } -} -.inline-edit-description-box { - &:hover { - &::before { - content: ''; - position: absolute; - right: 0; - top: -2px; - left: 0; - border-top: 2px dashed $focus-border-color; - } + .edited-text { + display: inline-block; + margin-left: 5px; + line-height: 27px; + vertical-align: bottom; } } diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 829bda01199..faead152b0f 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -48,22 +48,27 @@ .issue-details.issuable-details + .detail-page-description.content-block.js-issuable-details + %h2.title.js-issuable-title + = markdown escape_once(@issue.title), pipeline: :single_line, author: @issue.author + .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' } + .wiki.js-issuable-description + = preserve do + = markdown(@issue.description, cache_key: [@issue, "description"], author: @issue.author) + %textarea.hidden.js-task-list-field + = @issue.description + %div{ class: ('issuable-inline-edit' if can?(current_user, :update_issue, @issue)) } + - if can?(current_user, :update_issue, @issue) + %button.btn.btn-transparent.has-tooltip.js-inline-edit{ type: "button", title: "Edit title and description", data: { placement: "bottom", container: "body" } } + = icon("pencil") + %span.sr-only + Edit title and description + = edited_time_ago_with_tooltip(@issue, placement: 'bottom') + #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } } + #related-branches{ data: { url: related_branches_namespace_project_issue_url(@project.namespace, @project, @issue) } } + - if can?(current_user, :update_issue, @issue) = render 'shared/issuable/inline_edit', issuable: @issue - - else - .detail-page-description.content-block - %h2.title - = markdown escape_once(@issue.title), pipeline: :single_line, author: @issue.author - - if @issue.description.present? - .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' } - .wiki - = preserve do - = markdown(@issue.description, cache_key: [@issue, "description"], author: @issue.author) - %textarea.hidden.js-task-list-field - = @issue.description - = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago') - #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } } - #related-branches{ data: { url: related_branches_namespace_project_issue_url(@project.namespace, @project, @issue) } } .content-block.content-block-small = render 'new_branch' diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml index 32dc6e59bc6..0a33cde65fc 100644 --- a/app/views/projects/merge_requests/show/_mr_box.html.haml +++ b/app/views/projects/merge_requests/show/_mr_box.html.haml @@ -1,14 +1,18 @@ +.detail-page-description.content-block.js-issuable-details + %h2.title.js-issuable-title + = markdown escape_once(@merge_request.title), pipeline: :single_line, author: @merge_request.author + .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''} + .wiki.js-issuable-description + = preserve do + = markdown(@merge_request.description, cache_key: [@merge_request, "description"], author: @merge_request.author) + %textarea.hidden.js-task-list-field + = @merge_request.description + %div{ class: ('issuable-inline-edit' if can?(current_user, :update_merge_request, @merge_request)) } + - if can?(current_user, :update_merge_request, @merge_request) + %button.btn.btn-transparent.has-tooltip.js-inline-edit{ type: "button", title: "Edit title and description", data: { placement: "bottom", container: "body" } } + = icon("pencil") + %span.sr-only + Edit title and description + = edited_time_ago_with_tooltip(@merge_request, placement: 'bottom') - if can?(current_user, :update_merge_request, @merge_request) = render 'shared/issuable/inline_edit', issuable: @merge_request -- else - .detail-page-description.content-block - %h2.title - = markdown escape_once(@merge_request.title), pipeline: :single_line, author: @merge_request.author - - if @merge_request.description.present? - .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''} - .wiki - = preserve do - = markdown(@merge_request.description, cache_key: [@merge_request, "description"], author: @merge_request.author) - %textarea.hidden.js-task-list-field - = @merge_request.description - = edited_time_ago_with_tooltip(@merge_request, placement: 'bottom') diff --git a/app/views/shared/issuable/_inline_edit.html.haml b/app/views/shared/issuable/_inline_edit.html.haml index 5c3bf11be31..736224a6a8d 100644 --- a/app/views/shared/issuable/_inline_edit.html.haml +++ b/app/views/shared/issuable/_inline_edit.html.haml @@ -1,33 +1,21 @@ -= form_for issuable, remote: true, html: { class: 'detail-page-description content-block common-note-form js-quick-submit js-issuable-inline-form', data: { type: "json" } } do |f| += form_for issuable, remote: true, html: { class: 'detail-page-description content-block common-note-form hidden js-quick-submit js-issuable-inline-form', data: { type: "json" } } do |f| = hidden_field_tag :inline, true - %h2.title - %span.inline-edit-box.js-issuable-title= markdown escape_once(issuable.title), pipeline: :single_line, author: issuable.author - = icon('spinner spin', class: 'js-issuable-title-loading hidden') - .issuable-title-edit.js-issuable-edit-title.hidden - = f.text_field :title, class: 'form-control js-issuable-title-field' - .issuable-title-edit-buttons - %button.btn.btn-success.js-issuable-title-save{ type: "submit" } - Save - %button.btn.btn-default.js-issuable-edit-cancel{ type: "button" } + .row.form-group + .col-md-2.issuable-inline-label + = f.label :title, "Title", class: "label-light" + .col-md-10 + = f.text_field :title, maxlength: 255, autofocus: true, autocomplete: "off", class: "form-control", required: true + .row + .col-md-2.issuable-inline-label + = f.label :description, "Description", class: "label-light" + .col-md-10 + = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do + = render 'projects/zen', f: f, attr: :description, + classes: 'note-textarea js-task-list-field', + placeholder: "Write a comment or drag your files here..." + = render 'projects/notes/hints' + .prepend-top-10.append-bottom-10 + %button.btn.btn-success.js-issuable-description-save{ type: "submit" } + Save changes + %button.btn.btn-default.pull-right.js-issuable-edit-cancel{ type: "button" } Cancel - - if issuable.description.present? - .description{ class: 'js-task-list-container' } - .wiki.inline-edit-box.inline-edit-description-box.js-issuable-description - = preserve do - = markdown(issuable.description, cache_key: [issuable, "description"], author: issuable.author) - .js-issuable-description-field.hidden - = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do - = render 'projects/zen', f: f, attr: :description, - classes: 'note-textarea js-task-list-field', - placeholder: "Write a comment or drag your files here..." - = render 'projects/notes/hints' - .prepend-top-10.append-bottom-10 - %button.btn.btn-success.js-issuable-description-save{ type: "submit" } - Save - %button.btn.btn-default.pull-right.js-issuable-edit-cancel{ type: "button" } - Cancel - = edited_time_ago_with_tooltip(issuable, placement: 'bottom', html_class: 'issue_edited_ago') - - - if issuable.is_a? Issue - #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, issuable) } } - #related-branches{ data: { url: related_branches_namespace_project_issue_url(@project.namespace, @project, issuable) } } diff --git a/spec/features/issues/inline_edit_spec.rb b/spec/features/issues/inline_edit_spec.rb index 75f4680bf6b..a206f5fa646 100644 --- a/spec/features/issues/inline_edit_spec.rb +++ b/spec/features/issues/inline_edit_spec.rb @@ -12,40 +12,15 @@ describe 'Issue inline editing', feature: true, js: true do visit namespace_project_issue_path(project.namespace, project, issue) end - it 'allows user to update title' do - find('.js-issuable-title').click - expect(page).to have_selector('.js-issuable-edit-title') - fill_in 'issue_title', with: 'test' - click_button 'Save' + it 'allows user to update title and description' do + find('.js-inline-edit').click - page.within '.issuable-details' do - expect(page).to have_content 'test' - end - end - - it 'hides title field' do - find('.js-issuable-title').click - expect(page).to have_selector('.js-issuable-edit-title') - click_button 'Cancel' - expect(page).to have_selector('.js-issuable-edit-title', visible: false) - end - - it 'allows user to update description' do - find('.js-issuable-description').click - expect(page).to have_selector('.js-issuable-description-field') - fill_in 'issue_description', with: 'test' - click_button 'Save' + fill_in 'issue_title', with: 'title test' + fill_in 'issue_description', with: 'description test' - page.within '.issuable-details' do - expect(page).to have_content 'test' - end - end - - it 'hides description field' do - find('.js-issuable-description').click - expect(page).to have_selector('.js-issuable-description-field') - click_button 'Cancel' - expect(page).to have_selector('.js-issuable-description-field', visible: false) + click_button 'Save changes' + expect(page).to have_content 'title test' + expect(page).to have_content 'description test' end end @@ -56,11 +31,7 @@ describe 'Issue inline editing', feature: true, js: true do end it 'does not allow editing of title' do - expect(page).not_to have_selector('.js-issuable-title', visible: false) - end - - it 'does not allow editing of description' do - expect(page).not_to have_selector('.js-issuable-description', visible: false) + expect(page).not_to have_selector('.js-inline-edit', visible: false) end end end |