Merge pull request #7443 from opf/feature/remove-visual-difference-between-edit-and-display-fields

Restyle edit fields

[ci skip]

app/assets/stylesheets/content/_attributes_key_value.sass

@@ -30,7 +30,6 @@
   display: flex
   flex-wrap: wrap
   font-size: 0.875rem
-  line-height: 1.6
 
   .attributes-key-value--key
     @extend .form--label

app/assets/stylesheets/content/_work_packages.sass

@@ -40,6 +40,7 @@
 
 // Specific field styles
 @import work_packages/inplace_editing/display_fields
+@import work_packages/inplace_editing/edit_fields
 @import work_packages/inplace_editing/legacy_inplace_styles
 @import work_packages/inplace_editing/textareas
 

app/assets/stylesheets/content/work_packages/_table_hierarchy.sass

@@ -61,13 +61,6 @@
 .wp-table--cell-td.subject
   padding-left: 8px
 
-.wp-table--cell-td.subject.-with-hierarchy
-  // Disable padding on the element itself 
-  padding-left: 0
-
-  .wp-table--cell-span
-    padding-left: 0
-
 // Highlight additional hierarchy table rows
 // that are not part of the normal result list
 body

app/assets/stylesheets/content/work_packages/inplace_editing/_edit_fields.sass

@@ -0,0 +1,53 @@
+.wp-edit-field
+  &.-error,
+  .wp-table--cell-td.-error &
+    .wp-table--cell-span,
+    .wp-inline-edit--field
+      background: $nm-color-error-background
+      border-color: $nm-color-error-border
+
+      &:hover
+        border-color: lighten($nm-color-error-border, 10%)
+
+  form
+    width: 100%
+
+  // Style actual edit inputs
+  // Checkboxes need to be excluded because the width
+  // causes an ugly increase of the box
+  input:not([type='checkbox'])
+    // Full width to inline-edit inputs
+    width: 100%
+    // Same height as the row - padding
+    height: 24px
+    line-height: 24px
+    padding: 2px
+    font-size: 14px
+    color: $body-font-color
+    border-radius: 2px
+    border-color: darkblue
+
+  .inplace-edit--read-value
+    &:before
+      vertical-align: middle
+    .wp-table--cell-span
+      vertical-align: middle
+
+  &.inplace-edit .custom-option:not(.-multiple-lines)
+    display: inline
+
+  .inline-label
+    .form-label,
+    .icon-context:before
+      padding-right: 0
+
+
+// Style no-label fields (long text, description, ..) with padding
+.wp-edit-field--container.-no-label:not(.-active)
+  .wp-table--cell-span
+    display: block
+    padding: 5px
+    padding-right: 0
+
+.wp-edit-field.description.-no-label
+  margin-left: -0.375rem

app/assets/stylesheets/content/work_packages/inplace_editing/_legacy_inplace_styles.sass

@@ -94,46 +94,6 @@ a.inplace-editing--trigger-link,
     text-decoration: none
 
 
-.wp-edit-field
-  &.-error,
-  .wp-table--cell-td.-error &
-    .wp-table--cell-span,
-    .wp-inline-edit--field
-      background: $nm-color-error-background
-      border-color: $nm-color-error-border
-
-      &:hover
-        border-color: lighten($nm-color-error-border, 10%)
-
-  form
-    width: 100%
-
-  // Style actual edit inputs
-  // Checkboxes need to be excluded because the width
-  // causes an ugly increase of the box
-  select, input:not([type='checkbox'])
-    // Full width to inline-edit inputs
-    width: 100%
-    // Same height as the row - padding
-    height: 24px
-    padding-top: 0
-    padding-bottom: 0
-    line-height: normal
-    font-size: 14px
-
-  .inplace-edit--read-value
-    &:before
-      vertical-align: middle
-    .wp-table--cell-span
-      vertical-align: middle
-
-  &.inplace-edit .custom-option:not(.-multiple-lines)
-    display: inline
-
-  .inline-label
-    .form-label,
-    .icon-context:before
-      padding-right: 0
 
 // Editable fields cursor
 .-editable .wp-table--cell-span,
@@ -159,16 +119,6 @@ a.inplace-editing--trigger-link,
     &.-multiline
       white-space: inherit
 
-// Style no-label fields (long text, description, ..) with padding
-.wp-edit-field--container.-no-label:not(.-active)
-  .wp-table--cell-span
-    display: block
-    padding: 5px
-    padding-right: 0
-
-.wp-edit-field.description.-no-label
-  margin-left: -0.375rem
-
 // Do not hover trigger-link when element is read-only
 .-read-only
   .inplace-editing--trigger-link:hover .inplace-editing--container

frontend/src/app/components/work-packages/work-package-comment/work-package-comment-field-handler.ts

@@ -93,6 +93,9 @@ export abstract class WorkPackageCommentFieldHandler extends EditFieldHandler im
     trigger && trigger.focus();
   }
 
+  onFocusOut():void {
+  }
+
   handleUserKeydown(event:JQueryEventObject, onlyCancel?:boolean):void {
   }
 

frontend/src/app/components/wp-edit-form/table-row-edit-context.ts

@@ -76,13 +76,14 @@ export class TableRowEditContext implements WorkPackageEditContext {
       .then((cell) => {
 
         // Forcibly set the width since the edit field may otherwise
-        // be given more width. Thereby preserve a minimum width of 120.
+        // be given more width. Thereby preserve a minimum width of 150.
+        // To avoid flickering content, the padding is removed, too.
         const td = this.findCell(fieldName);
         td.addClass(editModeClassName);
-        var width = td.css('width');
-        width = parseInt(width) > 150 ? width : '150px';
-        td.css('max-width', width);
-        td.css('width', width);
+        var width = parseInt(td.css('width'));
+        width = width > 150 ? width - 10 : 150;
+        td.css('max-width', width + 'px');
+        td.css('width', width + 'px');
 
         return this.wpEditingPortalService.create(
           cell,

frontend/src/app/components/wp-edit-form/work-package-edit-field-handler.ts

@@ -114,6 +114,13 @@ export class WorkPackageEditFieldHandler extends EditFieldHandler {
     }
   }
 
+  public onFocusOut() {
+    // In case of inline create or erroneous forms: do not save on focus loss
+    if (this.workPackage.subject && this.withErrors && this.withErrors!.length === 0) {
+      this.handleUserSubmit();
+    }
+  }
+
   public setErrors(newErrors:string[]) {
     this.errors = newErrors;
     this.element.classList.toggle('-error', this.isErrorenous);

frontend/src/app/modules/fields/edit/edit-field.component.ts

@@ -145,10 +145,6 @@ export class EditFieldComponent extends Field implements OnInit, OnDestroy {
     return this.changeset.workPackage;
   }
 
-  public get groupName() {
-    return this.changeset.form!.schema[this.name].attributeGroup;
-  }
-
   /**
    * Initialize the field after constructor was called.
    */

frontend/src/app/modules/fields/edit/editing-portal/edit-field-handler.ts

@@ -128,4 +128,9 @@ export abstract class EditFieldHandler {
    * Returns whether the field has been changed
    */
   public abstract isChanged():boolean;
+
+  /**
+   * Handle focus loss
+   */
+  public abstract onFocusOut():void;
 }

frontend/src/app/modules/fields/edit/field-types/float-edit-field.component.ts

@@ -38,6 +38,7 @@ import {EditFieldComponent} from "core-app/modules/fields/edit/edit-field.compon
            [disabled]="inFlight"
            [(ngModel)]="value"
            (keydown)="handler.handleUserKeydown($event)"
+           (focusout)="handler.onFocusOut()"
            [attr.lang]="locale"
            [id]="handler.htmlId" />
   `

frontend/src/app/modules/fields/edit/field-types/integer-edit-field.component.ts

@@ -38,6 +38,7 @@ import {EditFieldComponent} from "core-app/modules/fields/edit/edit-field.compon
            [attr.lang]="locale"
            [(ngModel)]="value"
            (keydown)="handler.handleUserKeydown($event)"
+           (focusout)="handler.onFocusOut()"
            [id]="handler.htmlId" />
   `
 })

frontend/src/app/modules/fields/edit/field-types/text-edit-field.component.ts

@@ -39,6 +39,7 @@ import {EditFieldComponent} from "core-app/modules/fields/edit/edit-field.compon
            [disabled]="inFlight"
            [(ngModel)]="value"
            (keydown)="handler.handleUserKeydown($event)"
+           (focusout)="handler.onFocusOut()"
            [id]="handler.htmlId" />
   `
 })

spec/features/work_packages/cancel_editing_spec.rb

@@ -102,21 +102,21 @@ describe 'Cancel editing work package', js: true do
 
     # Edit subject in split page
     split_page = wp_table.open_split_view(work_package)
-    subject = split_page.edit_field :subject
-    subject.activate!
+    version = split_page.edit_field :version
+    version.activate!
 
     # Decline move, expect field still active
     wp_table.open_split_view(work_package2)
     page.driver.browser.switch_to.alert.dismiss
-    subject.expect_active!
+    version.expect_active!
 
     sleep 1
 
     # Now accept to move to the second page
     split_page = wp_table.open_split_view(work_package2)
     page.driver.browser.switch_to.alert.accept
-    subject = split_page.edit_field :subject
-    subject.expect_inactive!
+    version = split_page.edit_field :version
+    version.expect_inactive!
   end
 
   it 'cancels the editing when clicking the button' do

spec/features/work_packages/edit_work_package_spec.rb

@@ -243,15 +243,27 @@ describe 'edit work package', js: true do
                                 type: 'error'
   end
 
-  it 'submits the edit mode when pressing enter' do
-    subject_field = wp_page.edit_field(:subject)
-
+  context 'submitting' do
+    let(:subject_field) { wp_page.edit_field(:subject) }
+    before do
       subject_field.activate!
       subject_field.set_value 'My new subject!'
+    end
+
+    it 'submits the edit mode when pressing enter' do
       subject_field.input_element.send_keys(:return)
 
       wp_page.expect_notification(message: 'Successful update')
       subject_field.expect_inactive!
       subject_field.expect_state_text 'My new subject!'
     end
+
+    it 'submits the edit mode when changing the focus' do
+      page.find("body").click
+
+      wp_page.expect_notification(message: 'Successful update')
+      subject_field.expect_inactive!
+      subject_field.expect_state_text 'My new subject!'
+    end
+  end
 end

spec/support/work_packages/work_package_field.rb

@@ -124,7 +124,10 @@ class WorkPackageField
     if field_type == 'create-autocompleter'
       page.find('.ng-dropdown-panel .ng-option', text: content).click
     else
-      input_element.set(content)
+      # A normal fill_in would cause the focus loss on the input for empty strings.
+      # Thus the form would be submitted.
+      # https://github.com/erikras/redux-form/issues/686
+      input_element.fill_in with: content, fill_options: { clear: :backspace }
     end
   end