/
Simple Text Inline Edit Specification

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Simple Text Inline Edit Specification

Owned by Allison Bloodworth
Last updated: Apr 06, 2009Version comment

Storycards

All the Inline Edit Storycards are available on the Simple Text Inline Edit Storycards page.

The current storycards are:

Functional Requirements

  • Edit simple text in context (inline)
  • Undo edit
  • Redo undo (undo the undo)
  • If empty, display a message to let user know information can be entered

Wireframes & Final Storyboards

'Simple Text Inline Edit' Component

Simple Text Inline Edit Storyboard


Visual Representation of Interesting Moments

Interesting Moments

Simple Text

Dropdown

Radio Buttons

Date

Link

Mouseover (Discoverability)

Entire field is highlighted

Editable field outline displays

Pointer = hand

Entire field is highlighted

Editable field outline displays

Pointer = hand

 

Entire Field is highlighted

Dropdown outline displays

Pointer = hand

Editable object = None

Edit control = None 
* Edit control (e.g. link, button, icon) initiates edit

Hover >2 seconds (Clarity)

Entire field is highlighted

Editable field outline displays 

Pointer = hand

Hover message =  "Click item to edit"

Entire field is highlighted

Dropdown outline displays 

Pointer = hand

Hover message =  "Click item to edit"

 

Entire field is highlighted

Editable field outline displays

Pointer = hand

Hover message = "Click item to edit"

Editable object = None (controlled by integrating app since link takes some action)

Pointer = hand

Edit control hover message = "Click to edit [fluid:name of field that will be made editable]"

Edit Initiated

Cursor displays at end of text

Pointer = i-bar if over field

No cursor display

Pointer = arrow if over field

 

Cursor displays at end of text

Pointer = i-bar if over field, hand if over calendar

Calendar widget displays

Cursor displays at end of text

Pointer = i-bar if over editable field

Edit overlay displays

NOTE:  Red text indicates this state should be configurable by integrator

Configurable Behaviors / Settings

  • Field size
  • Hover text
  • Cursor location in editable field on initiation (ex. default is at end of text, some may want the existing to text to be selected)
  • Whether or not there is a yellow highlight of field on mouseover
  • Whether or not "Click to edit" is displayed in empty field
  • Allowing single or multiple line input
    • If single line input only allowed: upon paste of text with carriage returns, whether a) carriage returns are changed into spaces or b) all the text after the first carriage return is removed (cut)