1:04 p.m.
[
https://issues.jboss.org/browse/JBIDE-13778?page=com.atlassian.jira.plugi...
]
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">...</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">...</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">...</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">...</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">...</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">...</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
4761
days inactive
4761
days old
jbosstools-issues@lists.jboss.org
0 comments
1 participants
participants (1)
-
Daniel Azarov (JIRA)