Design/Whiteboards/Comments Ruler Control

Summary
Given the current implementation of Comments (formerly known as Notes) in Writer, the user is forced to use the application menu to toggle the visibility of the Notes (e.g. Notes Windows, Notes Anchors). This whiteboard collects proposals how to make it easier to toggle the visibility of Comments whilst integrating well with the Comments Side Pane.

Definition of Terms

 * Comments: The Comment refers to all elements and data which belong to the Comments Functionality (e.g. Comment Anchor, Comment Window, Comment Property Data, Comment Connector Line). Simplified, the Comment contains all user visible elements.
 * Note: There has been a name change from "Notes" to "Comments" in one of the last versions of OpenOffice.org, so some descriptions might still refer to "Notes".
 * Comments Ruler Control: An UI element that is located in the Writer ruler area and that lets users switch the visibility of the Comments Side Pane incl. Comments).

Other definitions can be found at OpenOffice.org Notes2, Definition of Terms

Discussion

 * Initial reason to start this whiteboard was a private ping by developers referring to the work on OpenOffice.org Notes2
 * Thread start on libreoffice-design (New Whiteboard Proposal "Comments Ruler Control", 2012-06-08, 9:10 pm)

Personas
(none; sufficient data unavailable)

Mockups
Note: Because these are just mockups (made up of re-arranging pieces of graphics), there might be functional inaccuracies visible (e.g. zoom level, position of the document).

General

 * The new control is located next to the upper ruler (right side, a currently unused area). The position and size is derived from the Comments Side Pane position and size. (Current Comments Side Pane: dependent on the current document page size and orientation)
 * If the user clicks on the active mouse area of the Notes Ruler Control, then the control switches between two states.
 * Expanded: The Comments are shown. This state is equal to "View -- Comments" being activated.
 * Collapsed: The Comments are not shown. This state is equal to "View -- Comments" being deactivated.

Advantages:
 * Visibility of Comments can be directly manipulated.
 * The caption "Comments" automatically explains the Comments Side Pane located below. (Some people do only know that there is some unwanted gray background).
 * Moving the control outside the Comments Side Pane, the position of the UI element is stable and the full size within the Comments Side Pane is available for Comments (incl. scroll buttons).

Disadvantages/Challenges:
 * The visibility of the control is dependent on the visibility of the upper ruler. (This is okay, because the rulers are currently activated by default.)
 * The visibility of the control is dependent on the position and size of the current page area shown below. (The document may be zoomed, so that the control is outside the currently shown area).
 * The user may need to learn how to use this new UI element. (At least the design is based on the controls of docked windows, but has been adapted to fit the space requirements.)

Structure
State "Collapsed": The Comments Ruler Control consists of ...
 * the Comments Ruler Control area, containing ...
 * the graphic symbol "Triangle, to right"
 * the Caption "Comments"

State "Expanded": The Comments Ruler Control consists of ...
 * the Comments Ruler Control area, containing ...
 * the Caption "Comments" \[en-US\]
 * the graphic symbol "Triangle, to left" (right aligned within the Comments Ruler Control area)

The "Comments Control Ruler area" represents the active mouse area.

Behavior
General:
 * The Comments Ruler Control is only visible if there is at least one comment in the current document (Note: This behavior is consistent with the disabled (a.k.a. grayed out) status of the View - Comments menu entry).
 * If the user hovers the active mouse area of the Notes Ruler Control, then it is visually highlighted.
 * Highlighting: Like the Show/Hide button of docked windows like e.g. the Navigator).
 * Delay: The mouseover needs to be triggered after a short delay to avoid flickering when moving the mouse to the toolbars / menu. Proposal: 0.1s delay, then 0.2s fade to final highlighting.
 * If the user hovers the active mouse area of the Notes Ruler Control for a certain amount of time, then an explanatory tooltip is shown (tooltip: behaves like other tooltips, e.g. using the same delay). The text is dependent on the current state of the Notes Ruler Control (please see below).
 * If the user hovers the active mouse area for a certain amount of time, then an explanatory tooltip is shown.
 * Behaves like other tooltips, e.g. using the same delay
 * Tooltip text depends on the current state of the Comments Ruler Control.
 * Case "Collapsed": "Show Comments Pane" \[en-US\]
 * Case "Expanded": "Hide Comments Pane" \[en-US\]
 * Space between the right side of the ruler and the scrollbar might be insufficient to fully visualize the Comments Ruler Control. Cases:
 * Space sufficient: Fully show the Comments Ruler Control
 * Few space available (less than the width of the Comments Side Pane, but more than tbd px): Visualize the control, but slightly fade it out on the ride side before the scrollbar begins (5px fade out, plus 1px spacing).
 * No space available (less than tbd px available): do not visualize the Comments Ruler Control at all

Switch from state "Collapsed" to "Expanded":
 * If the current screen content position / size does not allow to fully show the Comments Side Pane, then re-position / re-size the document view to additionally show the Comments Side Pane.
 * Menu item "View - Comments" is set to "enabled"

Switch from state "Expanded" to "Collapsed":
 * If the zoom mode is set to either "Fit to width and height", "Fit to width" or "Optimal", then re-calculate zoom level without showing the Comments Side Pane.
 * Menu item "View - Comments" is set to "disabled"

Visual Design

 * Colors are derived from the ruler settings
 * Font type and size for the caption is derived from the ruler settings
 * The triangles that indicate the expanded or collapsed states should be consistent with the current ones in LibreOffice.

Special Cases

 * Multi-page view: The behavior of the Comments Ruler Control is derived from the ruler itself. The control is just shown for the current page (current: text cursor is located on this page).
 * Accessibility: The feature is accessible because it realizes exact the same behavior like the menu entry of "View -- Comments" which can be used instead.
 * Right-to-Left text: The given descriptions do consider LTR documents with the Comments Side Pane located at the right side. If it is required to show the Comments Side Pane on the left side of the page (e.g. because of RTL text or "book mode"), then the control is mirrored accordingly.

Other Affected Areas
Although not directly related to the Comments Ruler Control, the feature would benefit from the changes:
 * Scrollbars: The scrollbar position should be adapted to conform to the already revised rulers. (todo: description required)
 * Comments Side Pane: Today there is a "not so nice bug", since the borders of the notes side pane are missing. Plus, the width of the line between document and the pane is 2px (needs to be 1px).

Open Points / Further Ideas
Open Points:
 * Shall the control be usable when there is no comment in the document? -> Current decision: keep the current behavior until we get the "Create Comment Placeholder"
 * Do we need to consider highlighting for a "being clicked" Comments Ruler Control? -> Current decision: no, since other elements omit that feedback as well and there is mouseover highlighting

Comments by users

 * There is still no button in LibreOffice to add comments (currently it's only possible to add via Insert->Comments). Would it be possible to somehow integrate a "+" button in the Comments Ruler Control which adds a new comment? Of course, such a "+" button needs to be also visible when there is no comment, yet.

Note: For the purpose of this test mockup, the add comment icon was taken from http://dryicons.com/icon/coquette-part-3-icons-set/add-comment/

-- Gerald 2012-06-10T09:17:35 (CEST)

To me, the next step would be to finally specify the "Click to add note" placeholder that has a few other benefits. See mockup at OOo Wiki. --ChristophNoack 2012-06-10T12:27:54 (CEST)
 * The placeholder is a nice idea, but I see three issues there: (1) I assume that the grey comment sidebar is not visible when there is no comment in the document. Where is then the placeholder? (2) Where is the placeholder, if I vertically scroll through the document. If it stays on a particular vertical place of the document, then it is difficult to find. If it stays on the same vertical place of the screen, it will look jumpy and weird, because everything else inside the scrollbars moves, but not the placeholder. (3) In a document that already contains many comments, the placeholder is not easy to find. --Gerald

Relevant Art

 * OpenOffice.org Notes2, Notes Ruler Control
 * Improved Rulers, Blog posting, Kendy