Simple Text Inline Edit Storycards

Implemented

IE Story 1 (FLUID-775): Allow user to edit a simple, single piece of text without leaving their context

Details:

• When the user hovers over the text with the mouse, the text will be highlighted
• Put a (reasonably-sized) min-width on empty fields so that the yellow background shows up on rollover
• The user can Tab to the text and the highlight will also appear
• Hover message appears after hovering for <2 seconds.
• When the user clicks on the text, an edit field appears. Cursor is placed at end of current text.
• Double click selects word, triple click selects entire text
• The user can type and press enter to automatically save the text.

Simple Text Inline Edit Storyboard
Mockups and examples of interaction in context

Testing Details: Interaction & UI match storyboard

IE Story 2 (Fluid-780): Provide user with undo capabilities

Details:

• Once an edit is complete, provide user with "undo edit" link (perhaps replaced with icon later)
• The link is persistent until the user goes to another page
• The link undoes the previous edit
• Should be placed close the edited field

Simple Text Inline Edit Storyboard
Mockups and examples of interaction in context

IE Story 3: Provide user with "redo edit" capabilities

Details:

• Once a user has initiated "undo edit" give them a "redo edit" link
• Redo should only change the field back to the value it had been prior to the last undo, and after activation become an Undo icon again.

(Note: This storycard appears to have been completed without an associated JIRA task.)

In Design (to be scheduled for development)

IE Story 6: Placeholder for error handling (e.x. name exists, etc.) - NEEDS TO BE FLESHED OUT & SCHEDULED

• Name already exists
• Empty field not allowed