|
Key
This line was removed.
This word was removed. This word was added.
This line was added.
|
Changes (28)
View Page History{toc}
Based on the spec from Dominic and Maria
h2. Data basket as tab
h1. Intro
Based on [Data Basket Spec - Old] from Dominic and Maria
Based on [Data Basket Spec - Old] from Dominic and Maria
* 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 have 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.
* 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 displayed for types of data where it is possible to do this
* Any tool can be added or data type (will need icons)
* Editing can be done in a pop up as can showing details of the entries.
* This means we only have 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.
* 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 displayed for types of data where it is possible to do this
* Any tool can be added or data type (will need icons)
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)
- 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)
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
- 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_databasket_tab.jpg|border=1!
h1. Mockups
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
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_databasket.jpg!
h2. Viewing details
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]
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]
This shows what happens when you click on the yellow bar shown in the above visual. Detail panel is displayed. This has editing options for the relevant fields.
!RS_popup.jpg!
!RS_databasket_view_details.jpg|border=1!
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}
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}
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
Shows bookmark details
* We only have a single pop up (for detail and edit) rather than a double pop up for edit
!RS_details.jpg!
h2. Editing details or Adding new item
h2. Edit Bookmark
!RS_edit.jpg!
!RS_edit.jpg!
Same design can be used for either !RS_databasket_edit_add.jpg|border=1!
h2. Add Text Snippet
Very similar to Edit
!RS_text.jpg!
Very similar to Edit
!RS_text.jpg!
h2. Databasket as a pop up (eg for use when inserting item in to comment)
h2. Add Web Link
Advanced interactivity when URL is added:
- fetch page, get <title> tag and Web Preview (if we find such a server)
Advanced interactivity when URL is added:
- fetch page, get <title> tag and Web Preview (if we find such a server)
* 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. !RS_databasket_view_details.jpg|border=1!
* Rollover same as first visual.
* Clicking on an itme selects it as the item to insert. !RS_databasket_view_details.jpg|border=1!
!RS_addlink.jpg!
Please let me know what you think of these mockups.
h2. Icons
!RS_dataicons.jpg!
!RS_dataicons.jpg!