Notes2 Design NoteWindow

From Apache OpenOffice Wiki
Jump to: navigation, search

< Back to the Notes2 main page


The text for the Notes will be (mainly) displayed and edited in the Notes Windows. The following text gives an overview on the structure of the Notes Window.





Proposed Designs

Proposal "Note Window"

General Structure of the Notes Window
The graphic shows the general structure of the Notes Window.

It includes:

  • the area for the notes user data (text)
  • the two lines for notes property data (e.g. name of the author, time and data of note's creation)
  • the option button for a drop-down menu
  • (optional) area for showing scrollbars

Some notes on the option button: One of the goals of the new notes functionality is to provide direct access for the user. Generally, we can not be sure if the user is aware of the availability of a context menu (Usability tests show that many people do not know how to access the context menu. Besides that, for the progressing Mac Port it is desirable to provide direct access to the functions without forcing the user to use the modifier keys.). In contrast to our competitors, we do not plan to provide a direct "delete" or "hide" button inside the note. Any functionality will be available in the drop-down menu. This makes it possible to provide (later!) access to more advanced functionality like rating the priority of the note or to digitally sign it.

The notes window is designed in such a way, that it can be extended by a title bar for e.g. use in other components of

A more detailed specification is available on request.

Proposal "Note Window Scrollbar"

This proposal extends the proposal "Note Window".

In some cases, the space available in the side pane will not be sufficient to show all the Notes User Data. Then, on possibility is to restrict the size of the Note Windows and use scrollbars to keep the Notes User Data accessible.

The Notes Window is scaled in the same way like the Document Content, therefore there is a need to scale the scrollbars too. The "original" scrollbars of the graphical environment (e.g. Microsoft Windows) will lead to the following disadvantages:

  • Users are not used to scrollbars of the operating system that can be adjusted continuously.
  • Scrollbars of the operation system are not designed to work at low scale (neither function nor look of scaled scrollbars).
  • They may look alien. At the moment, it is proposed to use the notes windows' background color to represent the author of the note. So, gray or light blue scrollbars are not aesthetically pleasing.

Consequently, we propose an own implementation for the notes. But what are scollbars used for?

  • There is some information that cannot be shown completely (existence of the scrollbar).
  • Provide the functionality to scroll up or down (arrow buttons).
  • Feedback on the position of the shown fragment (bar, active/inactive arrow buttons).
  • Additional features (less related to the function itself): feedback on mouse over, feedback on mouse click, mouse wheel support, ...

Design Proposal for the Scrollbars
The graphic shows the proposed scrollbar design with two alternatives for at low scales.

The mockup shows:

  • The same scrollbar at different scale factors in normal view (for users which are not visually impaired) and a proposal in high contrast (for e.g. visually impaired users).
    • 100%, 75%: Scrollbars with arrow buttons and bar
    • 50%: Simplified scrollbar with arrow buttons
    • 25%, 10%: A placeholder which does not not have any functionality.
  • It may be possible that the implementation of "placeholders" or "buttons only" are not accepted. An alternative is shown at the bottom of the graphic which shows a step sequence to show the functionality:
    • Step 1: A button is shown with on inactive arrow (top position).
    • Step 2: Click on the button.
    • Step 3: A full-featured scrollbar is shown, similar to the one of 100% zoom level. It additionally contains a shadow to indicate that this is a "temporary" control for that notes window.
    • Step 4: After finish the scrolling the button of Step 1 is shown again. In this example, the user has scrolled a bit down.
  • It is proposed to show this alternative "scrollbar-button" if there is few space to use scrollbars that enable direct manipulation. In general, priority is given to the normal scrollbars (e.g. shown in 100% and 75% scale).

Please note: The option button below the scrollbar is intended to exemplary show the size and the distance between the controls inside a real note window.

Mockup of Notes Window
The mockup shows a notes window at 100% zoom level.

Selected Design



Due to the high implementation effort, the proposed "Note Window Scrollbar" design may eventually not be provided in the first release of the implementation (we have to ensure that e.g. accessibility is guaranteed). Instead, the original scrollbar design of the graphical environment is used.

Code Changes


Outstanding Issues


Personal tools