compared with
Current by Vladimir Alexiev
on Aug 22, 2012 17:19.

Key
This line was removed.
This word was removed. This word was added.
This line was added.

Changes (15)

View Page History
{excerpt}Positioning the Annotations pane so as much annotations about the selected data field are visible as possible{excerpt}
{jira:RS-518}
{jira:RS-854}
{toc}

h1. Discussion

h1. Problem
Dominic made a movie to illustrate the problem:
{html}
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="1680" HEIGHT="1070" CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
<PARAM NAME=movie VALUE="/download/attachments/26189416/test.swf">
<PARAM NAME=play VALUE=true>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=quality VALUE=low>
<EMBED SRC="/download/attachments/26189416/test.swf" WIDTH=1680 HEIGHT=1070 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
{html}

h2. Need
Currently the !worddavecda5f48e5f048be32836554f7877502.png|height=29,width=30! icon works as follows;
# If the icon is clicked and there are no annotations then it launches an annotation dialogue box
This situation should not occur. You should click the add annotation button to create an annotation.
# If annotation already exisit then it displays the annotations.
# If you click the !worddavecda5f48e5f048be32836554f7877502.png|height=29,width=30! button next to an item that has an annotation then the screen jumps to the top of the page where the annotation page is displayed. You then cannot see the data field if it is further down the screen. In other words the annotation pane is diviorced from the data fields.
# If you do the same thing but there are no annotations then the dialogue appears on the same screen but then jumps to the top once the annotation is saved.
This should not happen (also note 1 above)

h1. Desired Behavior
Dominic: the functionality that associates a data field with its annotations was part of the discussions around these pages in confluence.
- [UI Redesign (Sofia)#Data annotation with notes|UI Redesign (Sofia)#Data annotation with notes]. Vlado: I don't see it there
- [UI redesign of Nuxeo#Dominics annotations of the UI]. Vlado: I see note "if to click on an annotation that the related field in the record will come into focus" and "Page scrolls to the record or annotations"
The annotations should roll with the selected field otherwise you will not be able to see the annotations associated with the field you selected and when you scroll up you can’t see the field you selected. This is fairly fundamental to the data annotation tool.

Dominic: The annotations should roll with the selected field otherwise you will not be able to see the annotations associated with the field you selected and when you scroll up you can’t see the field you selected. This is fairly fundamental to the data annotation tool.
h2. On Select Data Field
The annotation pane should be displayed juxtaposed with the selected data field.
!worddav5056e17257b5dc2653270577d42cec65.png|height=338,width=601!
!worddav25909ef4546639a9c5c851d3985b95a5.png|height=262,width=601!

h2. Considerations
The annotation pane should appear at the top of the screen but below the menus if they are on screen.
When a data field is selected further down the screen window so that the menus disappear, selecting a data field should make the annotation pane appear at the top of the screen so that the data field and the associated annotations are on the same screen - as below.
!worddav2a0f5502ee50f43652ebe932751b5703.png|height=320,width=288! !worddave147c57862135904d6f733e3134ec1ca.png|height=243,width=278!

If the selected field has no annotations then if the user selects "add annotation" then the dialogue box appears on the same screen and when saved the annotation pane appears at the top of the screen not at the top of the window (under the menus) which are not visible.

h2. Scrolling Up
When the screen is scrolled upwards the annotations pane should scroll to the top of the screen and then stick and stay at the top of the screen even if the data field selected disappears from sight.

h2. Joiner
The UI design has a visible link between the field and the annotation pane.
This displays when the data field and the associated annotations are on the same screen but disappears when the data field is gone from view.

h2. Go To Data Field
Suggestion: The annotation pane has an arrow which points downwards when the data field is further down the window. Or has a button saying "go to data field". See [http://www.jqueryrain.com/2012/04/best-jquery-scroll-to-top-tutorial-plugin-with-example-demo/]
This means that the user can get back quickly to the selected data field.
!worddave29ef8f369d22cca6bc431308cd7dd74.png|height=52,width=48!

h2. Scrolling Down
When scrolling down the user will need to see the bottom of the annotation pane so that all the annotations can be viewed even when the annotation pane is larger than the window. When the user reaches the bottom of the annotation pane there are two options.
- Option 1 – The annotation pane is not sticky and the user must scroll back up themselves. A visual indicator is connected between the annotation pane and the data field to indicate that the user is back to the original position.
- Option 2- The downward scroll works the same as upwards except that the user scrolls downward until s/he reachers the botton of the annotation pane at which point the annotation is sticky and the bottom of the pane always sits at the bottom of the screen. When the user scrolls up the annotation pane scrolls up until the top of the annotation pane is at the top of the screen at which point it becomes sticky.

h2. Summary
# Annotation pane sticky at top for scrolling up and at bottom for scrolling down.
# Normal scroll until the top or bottom are reached.
# Indicator which allows the user to get to selected data field quickly (up and down indicators).
# Connection between data field and annotation pane when both on screen.

h1. Considerations

Svetoslav: the selected field gets a CSS class *data-wrap* that causes the gray background around it

- case8: smaller, smaller, up

Summary:
- I think it's better if the behavior does not depend on state (i.e. whether we're mo

h1. Requirements

(Note: the "joiner" is currently missing)

Problem: this doesn't handle 3, 4, 5 from the previous section.

h2. Forbid Collapse of Selected Data Field


Developer: first describe here how you'd do this, and provide estimate

h1.


h1. Extra Information from Dominic


h1. [^Annotation behavoir.docx]


h1.