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.
|
