[jbosstools-issues] [JBoss JIRA] (JBIDE-13778) Descriptions for jQuery Widget Palette elements

Daniel Azarov (JIRA) jira-events at lists.jboss.org
Fri Mar 22 14:04:41 EDT 2013 

     [ https://issues.jboss.org/browse/JBIDE-13778?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Daniel Azarov updated JBIDE-13778:
----------------------------------

    Description: 
We need to have palette elements descriptions and we need to show them in tooltips.

1. JS/CSS

Add references to *jQuery*, *jQuery Mobile* JS and CSS to <head>

2. Page

*Page:*
<div data-role="page">
...
</div>

3. Dialog

*Dialog:*
<div data-role="dialog">
...
</div>

4. Popup

*Popup:*
<a href="#popupBasic" data-rel="popup">...&lt;/a>
<div data-role="popup" id="popupBasic">
...
</div>

5. Grid

*Grid:*
<div class="ui-grid-b">
...
</div>

6. Field Container

*Field Container:*
<div data-role="fieldcontain">
...
</div>

7. Panel

*Panel:*
<div data-role="panel">
...
</div>

8. Table

*Table:*
<table data-role="table"></code><br>
...
</table>

9. Collapsible

*Collapsible:*
<div data-role="collapsible">
...
</div>

10. Collapsible Set

*Collapsible Set:*
<div data-role="collapsible-set">
...
</div>

11. Header Bar

*Header Bar:*
<div data-role="header">
...
</div>

12. Footer Bar

*Footer Bar:*
<div data-role="footer">
...
</div>

13. Navbar

*Navbar:*
<div data-role="navbar">
...
</div>

14. Select

*Select menu:*
<label for="select-choice-0" class="select">...</label>
<select name="select-choice-0">
...
</select>

15. Listview

*Listview:*
<ul data-role="listview">
...
</ul>

16. Button

*Button:*
<a href="..." data-role="button">...</a>

17. Buttons

*Grouped buttons:*
<div data-role="controlgroup">
...
</div>

18. Link

*Link:*
<a href="...">...</a>

19. Toggle

*Flip toggle switch:*
<div data-role="fieldcontain">
  <label for="flip-1">...</label>
  <select name="flip-1" id="flip-1" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select>
</div>

20. Radio

*Radio button:*
<fieldset data-role="controlgroup">
  <legend></legend>
  <input name="radio-choice-1" id="radio-choice-1a" value="A" type="radio"/>
  <label for="radio-choice-1a">...</label>
</fieldset>

21. Checkbox

*Checkbox:*
<label>
  <input type="checkbox" name="checkbox-1"/>
  ...
</label>

22. Checkboxes

*Grouped checkboxes:*
<fieldset data-role="controlgroup">
  <legend></legend>
  <input name="checkbox-1a" id="checkbox-1a" type="checkbox"/>
  <label for="checkbox-1a">...</label>
</fieldset>

23. Slider

*Slider/Range slider:*
<label for="range-1">...&lt;/label>
<input name="range-1" data-highlight="true" type="range"/>

24. Text Input

*Text Input:*
<div data-role="fieldcontain">
  <label for="text-1">...</label>
  <input name="text-1" id="text-1" type="text"/>
</div>

Test case:
EXECUTE:
1. Create Java Project "test"
2. Create folder "test" in test project
3. Create file "test.html" in test folder
{code}
<!DOCTYPE html>
<html>

</html>
{code}
4. Open file test.html in Visual Page Editor

ASSERT: Visual Page Editor appears with test.html and jQuery Mobile Widget Palette on the right side

5. Point mouse to palette element then hold

ASSERT: Palette element description is shown in tooltip popup window

  was:
We need to have palette elements descriptions and we need to show them in tooltips.

1. JS/CSS

Add references to *jQuery*, *jQuery Mobile* JS and CSS to <head>

2. Page

*Page:*
<div data-role="page">
...
</div>

3. Dialog

*Dialog:*
<div data-role="dialog">
...
</div>

4. Popup

*Popup:*
<a href="#popupBasic" data-rel="popup">...&lt;/a>
<div data-role="popup" id="popupBasic">
...
</div>

5. Grid

*Grid:*
<div class="ui-grid-b">
...
</div>

6. Field Container

*Field Container:*
<div data-role="fieldcontain">
...
</div>

7. Panel

*Panel:*
<div data-role="panel">
...
</div>

8. Table

*Table:*
<table data-role="table"></code><br>
...
</table>

9. Collapsible

*Collapsible:*
<div data-role="collapsible">
...
</div>

10. Collapsible Set

*Collapsible Set:*
<div data-role="collapsible-set">
...
</div>

11. Header Bar

*Header Bar:*
<div data-role="header">
...
</div>

12. Footer Bar

*Footer Bar:*
<div data-role="footer">
...
</div>

13. Navbar

*Navbar:*
<div data-role="navbar">
...
</div>

14. Select

*Select menu:*
<label for="select-choice-0" class="select">...</label>
<select name="select-choice-0">
...
</select>

15. Listview

*Listview:*
<ul data-role="listview">
...
</ul>

16. Button

*Button:*
<a href="..." data-role="button">...</a>

17. Buttons

*Grouped buttons:*
<div data-role="controlgroup">
...
</div>

18. Link

*Link:*
<a href="...">...</a>

19. Toggle

*Flip toggle switch:*
<div data-role="fieldcontain">
  <label for="flip-1">...</label>
  <select name="flip-1" id="flip-1" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select>
</div>

20. Radio

*Radio button:*
<fieldset data-role="controlgroup">
  <legend></legend>
  <input name="radio-choice-1" id="radio-choice-1a" value="A" type="radio"/>
  <label for="radio-choice-1a">...</label>
</fieldset>

21. Checkbox

*Checkbox:*
<label>
  <input type="checkbox" name="checkbox-1"/>
  ...
</label>

22. Checkboxes

*Grouped checkboxes:*
<fieldset data-role="controlgroup">
  <legend></legend>
  <input name="checkbox-1a" id="checkbox-1a" type="checkbox"/>
  <label for="checkbox-1a">...</label>
</fieldset>

23. Slider

*Slider/Range slider:*
<label for="range-1">...&lt;/label>
<input name="range-1" data-highlight="true" type="range"/>

24. Text Input

*Text Input:*
<div data-role="fieldcontain">
  <label for="text-1">...</label>
  <input name="text-1" id="text-1" type="text"/>
</div>


    
> Descriptions for jQuery Widget Palette elements
> -----------------------------------------------
>
>                 Key: JBIDE-13778
>                 URL: https://issues.jboss.org/browse/JBIDE-13778
>             Project: Tools (JBoss Tools)
>          Issue Type: Sub-task
>          Components: jsp/jsf/xml/html source editing
>            Reporter: Daniel Azarov
>            Assignee: Daniel Azarov
>             Fix For: 4.1.0.Alpha2
>
>
> We need to have palette elements descriptions and we need to show them in tooltips.
> 1. JS/CSS
> Add references to *jQuery*, *jQuery Mobile* JS and CSS to <head>
> 2. Page
> *Page:*
> <div data-role="page">
> ...
> </div>
> 3. Dialog
> *Dialog:*
> <div data-role="dialog">
> ...
> </div>
> 4. Popup
> *Popup:*
> <a href="#popupBasic" data-rel="popup">...&lt;/a>
> <div data-role="popup" id="popupBasic">
> ...
> </div>
> 5. Grid
> *Grid:*
> <div class="ui-grid-b">
> ...
> </div>
> 6. Field Container
> *Field Container:*
> <div data-role="fieldcontain">
> ...
> </div>
> 7. Panel
> *Panel:*
> <div data-role="panel">
> ...
> </div>
> 8. Table
> *Table:*
> <table data-role="table"></code><br>
> ...
> </table>
> 9. Collapsible
> *Collapsible:*
> <div data-role="collapsible">
> ...
> </div>
> 10. Collapsible Set
> *Collapsible Set:*
> <div data-role="collapsible-set">
> ...
> </div>
> 11. Header Bar
> *Header Bar:*
> <div data-role="header">
> ...
> </div>
> 12. Footer Bar
> *Footer Bar:*
> <div data-role="footer">
> ...
> </div>
> 13. Navbar
> *Navbar:*
> <div data-role="navbar">
> ...
> </div>
> 14. Select
> *Select menu:*
> <label for="select-choice-0" class="select">...</label>
> <select name="select-choice-0">
> ...
> </select>
> 15. Listview
> *Listview:*
> <ul data-role="listview">
> ...
> </ul>
> 16. Button
> *Button:*
> <a href="..." data-role="button">...</a>
> 17. Buttons
> *Grouped buttons:*
> <div data-role="controlgroup">
> ...
> </div>
> 18. Link
> *Link:*
> <a href="...">...</a>
> 19. Toggle
> *Flip toggle switch:*
> <div data-role="fieldcontain">
>   <label for="flip-1">...</label>
>   <select name="flip-1" id="flip-1" data-role="slider">
>     <option value="off">Off</option>
>     <option value="on">On</option>
>   </select>
> </div>
> 20. Radio
> *Radio button:*
> <fieldset data-role="controlgroup">
>   <legend></legend>
>   <input name="radio-choice-1" id="radio-choice-1a" value="A" type="radio"/>
>   <label for="radio-choice-1a">...</label>
> </fieldset>
> 21. Checkbox
> *Checkbox:*
> <label>
>   <input type="checkbox" name="checkbox-1"/>
>   ...
> </label>
> 22. Checkboxes
> *Grouped checkboxes:*
> <fieldset data-role="controlgroup">
>   <legend></legend>
>   <input name="checkbox-1a" id="checkbox-1a" type="checkbox"/>
>   <label for="checkbox-1a">...</label>
> </fieldset>
> 23. Slider
> *Slider/Range slider:*
> <label for="range-1">...&lt;/label>
> <input name="range-1" data-highlight="true" type="range"/>
> 24. Text Input
> *Text Input:*
> <div data-role="fieldcontain">
>   <label for="text-1">...</label>
>   <input name="text-1" id="text-1" type="text"/>
> </div>
> Test case:
> EXECUTE:
> 1. Create Java Project "test"
> 2. Create folder "test" in test project
> 3. Create file "test.html" in test folder
> {code}
> <!DOCTYPE html>
> <html>
> </html>
> {code}
> 4. Open file test.html in Visual Page Editor
> ASSERT: Visual Page Editor appears with test.html and jQuery Mobile Widget Palette on the right side
> 5. Point mouse to palette element then hold
> ASSERT: Palette element description is shown in tooltip popup window

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira

More information about the jbosstools-issues mailing list