Child pages
  • Inline Edit Design Idea

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.

Skip to end of metadata
Go to start of metadata

While working on Inline Edit in Section Info I got some ideas on another way to indicate editablity and Undo and Redo that I wanted to capture.

*Note:* The pencil icon came from Facebook, and is just used here to give the idea of the icon. We'd need to make our own.

Here is the basic idea.

Figure 1: Shows the state before editing. The editable text on the page does not have any indicator that it is editable unless the user rolls over it.

Figure 2: User rolls over editable text. The text gets a border and background and also a clear icon floating to the right that clearly indicates that this is editable content. Clicking either the text or the icon will trigger editing.

Figure 3: When editing the text, the edit icon disappears, the box gets a stronger outline and a very faint background.

Figure 4: After editing each edited area is marked with a floating icon, indicating that the edit can be undone. The icon is subtle and needs a little clarification, and so...

Figure 5: When the user, rolls over the editable text, the Undo icon becomes opaque and expands to show the word "Undo".

Figure 6: Clicking the Undo marker will undo the edit. Clicking the text, opens the text up for editing.

Figure 7: Redo works just like Undo.

Figure 8: The rollover state for Redo.

Figure 9: Shows that things get a little decorative if you have many edited fields, but I don't think that it looks too bad.

  • No labels