Updated inline edit form

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 '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 'ajax:success', '.js-issuable-inline-form', @afterSave
+    $(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'
-  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'
+    $(document).on 'click', '.js-inline-edit', @toggleForm
+    $(document).on 'click', '.js-issuable-edit-cancel', @toggleForm
+  toggleForm: =>
+    @$details.toggleClass('hidden')
+    @$form.toggleClass('hidden')
   afterSave: (e, data) =>
-    $('.js-issuable-inline-form [type="submit"]').enable()
-
-    @hideTitleEdit()
-    @hideDescriptionEdit(e)
-    @elements.title.loading.addClass 'hidden'
-    @elements.description.element.removeClass 'is-loading'
+    $('[type="submit"]', @$form).enable()
+    @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
-    $('.detail-page-description .js-task-list-container').taskList('enable')
+    @$title.html data.title
+    @$description.html data.description
+    @$taskList.taskList('enable')

app/assets/stylesheets/pages/detail_page.scss

@@ -33,10 +33,6 @@
         margin-bottom: 0;
       }
     }
-
-    .is-loading {
-      opacity: .5;
-    }
   }
   .wiki {

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;
-  &:hover {
-    &::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      bottom: -2px;
-      left: 0;
-      border-top: 2px dashed $focus-border-color;
-    }
+.issuable-inline-edit {
+  margin-top: 5px;
+  .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;
   }
 }

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'

app/views/projects/merge_requests/show/_mr_box.html.haml

+.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')

app/views/shared/issuable/_inline_edit.html.haml

-= 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) } }

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'
-      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'
-      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)
+    it 'allows user to update title and description' do
+      find('.js-inline-edit').click
+      fill_in 'issue_title', with: 'title test'
+      fill_in 'issue_description', with: 'description test'
+      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