Notes2 Design NotePreview

From Apache OpenOffice Wiki
Jump to: navigation, search

< Back to the Notes2 main page


The user interaction with the Notes functionality will contain a Notes Preview which provides - as the name suggests - a preview of the Note content. This preview will behave similar to the common tooltipps but will solve some design issues with general tooltipps.


Under some circumstances a Note Window is not shown in the current Writer document viewport but the Note Anchor is. The user may require direct access to the Notes User Data and the Note Window itself.

Examples for non-visible Notes Windows:

  • The document contains many notes which cause some Note Windows to move to the end of the page. The Notes Windows are not visible at that time.
  • The user manually closed some Notes Windows, but the Notes Anchors are still visible to indicate the markup positions. (This refers to future functionality that may be implemented.)


The following design proposals do only consider non-overlaying anchors. If anchors can overlay each other, then this design has to be adapted.

Proposed Designs

Proposal "Notes Preview similar to Notes Window"

If a Note Window is not shown in the current Writer viewport but the Note Anchor is, then the (first part of) the Note data is shown in a small preview window.

In general, the Note Preview behaves like the current tooltipps (e.g. time until shown).

Detailed design:

  • The Note Preview will be shown if the mouse pointer stays a certain time above the Note Anchor (certain time: e.g. 400 ms).
  • The visual design of the Note Preview is similar to the Note Window, but can only be viewed (not edited).
  • The Notes Preview will be shown in the original size and is not dependent on the zoom factor of the Writer document (original size: 100% document zoom factor).
  • The position of the Notes Preview does respect the language settings of the user interface (LTR, RTL text writing direction) and the available space.
  • The position of the Notes Preview will be in contact with one edge of the Note Anchor (please refer to example in the mockup graphics).
  • If the Note User Data text is very long, then only the first part of the Note User Data will be shown (first part: e.g. 4 lines of text).
    • If space restrictions would lead to the ellipses in the middle of e.g. words, this shouldn't be avoided because this is a good indication for the user.
    • The ellipsed text will be replaced by three dots "..." which are drawn in the (dark) "accent color".
  • The Note Preview will contain a button "Edit Note".
    • Clicking on that button will move the focus inside the corresponding Note Window while the normal state of the Notes are restored (e.g. Note Preview disappears).
    • The button "Edit Note" should respect the colors of the current Note (detailed specification on demand).
    • Further information: The caption "Edit Note" has been chosen because it should made clear how to open AND edit the note. Alternatives like "Open Note" or "Go To" do not really make sense here, only if the document is read only. This may be discussed later on.
    • Further information: If the implementation effort for the colored "Edit Note"-button is high, then the colors of the graphical operating system may be used instead.
  • If the mouse cursor is moved away from the Note Anchor, then the Note Preview is kept open while the mouse pointer may be moved to the "Edit Note" button (please refer to the example in the mockup graphics.). (Normally, leaving the Note Anchor with the mouse pointer would close the Note Preview and the user could not access the "Edit Note" button.)
  • If the Note Preview is shown, then the Note Connector Line is dependent on the position of the mouse cursor...
    • ...if the mouse cursor does not hover the "Edit Note" button, then the Note Connector Line is slightly faded out because it is not neccessary. The current focus should be on the Note Preview (faded out: e.g. drawn in color "background light".
    • ...if the user hovers the "Edit Note" button, then the Note Connector Line is drawn according to the specification "mouse pointer hovers the corresponding Note Anchor".

Mockup graphics:

Notes2 DesignProposal NotesPreview.png
The mockup shows a Note Preview with the mouse pointer hovering the Note Anchor.
Notes2 DesignProposal NotesPreview MouseOverRegion.png
The mockup shows the area which is used to keep the Note Preview window active (e.g. when trying to move the mouse pointer from the Notes Anchor to the Button "Edit Note").

Proposal "Tooltipp Style (current Writer behavior)"

The current behavior of previewing Notes is the already mentioned tooltipp. Although it is already there, it lacks important features like text formatting, restrict the size (it always shows the full text of the Notes without respecting the screen height, ...). Additionally, the main reason is, that the term "tooltipp" refers to a tool which is not correct in such a case ;-)

Due to the fact that there is no information on improving the tooltipp behavior, it will not be used for the Notes functionality. So it's just here (wiki) because it's there (Writer).

Proposal "Notes Preview as part of Direct Manipulation Snippets"

Some months ago, the some ideas have been collected at Direct Manipulation Snippets to improve the general behavior of Writer with respect to Hyperlinks, Notes and so on. The previous proposal "Notes Preview similar to Notes Window" is based on that approach but should be implementable with the given ressources.

If anybody wants to work on the Snippets ... please go on ;-)

Selected Design




Code Changes


Outstanding Issues


Personal tools