compared with
Current by jana.parvanova
on Oct 10, 2012 14:12.

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

Changes (34)

View Page History
{toc}
Based on the spec from Dominic and Maria

h1. Version 2 07.08.2012
h1. Intro
Based on [Data Basket Spec - Old] from Dominic and Maria

Amended design based on yesterdays discussion
HTML mockups:
- https://bureau.codebasehq.com/projects/research-space/repositories/researchspacetemplates (commit/66, 8/11/2012, Tom Elsner)
- https://svn.ontotext.com/svn/researchspace/trunk/researchspacetemplates-head/export (8/15/2012, copied by Vlado)

h2. Edit details
Versions:
- ver1: 20.07.2012: Hollie
- ver2: 07.08.2012: Hollie
- ver3: 17.08.2010: Vlado: put tooltips, some red notations, edited the descriptive text

!RS_edit.jpg|border=1!
h1. Mockups

h2. Add text snippet
h2. Databasket in Tab
Basket in a permanent tab allows maximum space
* Highlight the row under the mouse in yellow (rollover).
Click on the row does [#View Bookmark]
* Each item type has an icon, and the type name is shown in tooltip.
Some match the tools, others are new (Text Snippet, Web Link)
* Image Preview is only displayed for types of data where it is possible to do this
* The URL is shortened; the full URL is shown in tooltip.
URL is clickable to show the item in original location (tool)
* Filter is similar to Annotation filtering (available in Tab and in Popup)
* Sort is a dropdown and sorts immediately (available in Tab and in Popup)
* Action menu on each item: View (same as clicking the row), Edit, Delete
* (Not for now) Tags panel can be sorted by popularity (shown) or A---Z

!RS_text.jpg|border=1!
!RS_databasket.jpg!

h2. Databasket in tab
h2. Data Basket as Popup
For use when inserting item into RTF editor (eg in a comment)
* An additional display method needed for the system
* Clicking on an item inserts it in the RTF
* No actions (cannot edi
* All the rest is the same as [#Databasket in Tab]

!RS_databasket.jpg|border=1!
!RS_popup.jpg!

h2. Details
h2. Filter Dialog
This shows the filtering controls. It's made with SALT, a text-to-UI macro that has its limitations, so the look is not faithful.
The look should be similar to [image annotation Filter|UI Redesign (Sofia)#Filter], eg the two buttons should be on the right.
{plantuml:type=salt}
{+
{/ <b>Filter | Sort }
Type | . | Added by
^--All--^ | . | " "
Date
" "| to | " "
[Cancel] | . | [Filter]
}
{plantuml}

!RS_details.jpg|border=1!
h2. View Bookmark
Shows bookmark details
* We only have a single pop up (for detail and edit) rather than a double pop up for edit

h2. Add weblink
!RS_details.jpg!

!RS_addlink.jpg|border=1!
h2. Edit Bookmark
!RS_edit.jpg!

h1. Version 1
h2. Add Text Snippet
Very similar to Edit
!RS_text.jpg!

h2. Data basket as tab&nbsp;
h2. Add Web Link
Advanced interactivity when URL is added:
- fetch page, get <title> tag and Web Preview (if we find such a server)

* Basket in a permanent tab allows maxim space and sorting functionality to be used on the basket.
* Editing can be done in a pop up as can showing details of the entries.
* This means we only&nbsp;have&nbsp;a single pop up (for detail or edit) rather than a double pop up when viewing the full basket.
* The yellow band shows what the rollover state for the item is.&nbsp;
* Each type of data has an icon, some match the tools as these are types you can add, others are new eg web page.
* The URL is clickable to show the item in original location.
* Tags panel can be sorted by popularity (shown) or A---Z
* Filtering / sorting as per previous mock ups
* Search is added in similar fashion
* Action menu on each item eg delete etc.
* Images are only&nbsp;displayed&nbsp;for types of data where it is possible to do this
* Any tool can be added or data type (will need icons)
!RS_addlink.jpg!

h2. Icons
!RS_dataicons.jpg!
!RS_databasket_tab.jpg|border=1!



h2. Viewing details

This shows what happens when you click on the yellow bar shown in the above visual. Detail&nbsp;panel&nbsp;is displayed. This has editing options for the relevant fields.

!RS_databasket_view_details.jpg|border=1!



h2. Editing details or Adding new item

Same design can be used for either !RS_databasket_edit_add.jpg|border=1!

h2. Databasket as a pop up (eg for use when inserting item in to comment)

* Shown as an additional display method needed for the system.
* Rollover same as first visual.
* Clicking on an itme selects it as the item to insert.&nbsp; !RS_databasket_popup.jpg|border=1!


Please let me know what you think of these mockups.