bug/bug.xhtml | 2 +- bug/bug/bug.css | 5 +++++ bug/bug/bug.js | 8 +++++++- bug/bug/icons/icon-selected.png |binary bug/bug/test.html | 4 ++++ bug/bug/test.js | 14 +++++++++++++- 6 files changed, 30 insertions(+), 3 deletions(-)
New commits: commit 349ec9598f0d2f0bf42e4d231554903df6f6f2bc Author: Loic Dachary <l...@dachary.org> Date: Sat Oct 8 12:16:02 2011 +0200 https://bugs.freedesktop.org/show_bug.cgi?id=41564 Suggestion: keep the faded green outline, perhaps changing the color to a blue to indicate it's been selected. In the same vein, if the user selects one, then mouses over another icon, the description should update to the newly moused-over icon, but return to the selected icon after the mouse leaves the icon area. diff --git a/bug/bug.xhtml b/bug/bug.xhtml index 2499e67..d17eec2 100644 --- a/bug/bug.xhtml +++ b/bug/bug.xhtml @@ -120,7 +120,7 @@ </div> <div> <div class="components_icons"> - <div><img src="icons/WRITER.png" title="Text Document" data="Writer" alt="Text Document" /><img src="icons/Spreadsheet.png" title="Spreadsheet" data="Spreadsheet" alt="Spreadsheet" /><img src="icons/Presentation.png" title="Presentation" data="Presentation" alt="Presentation" /><img src="icons/Drawing.png" title="Drawing" data="Drawing" alt="Drawing" /><img src="icons/Database.png" title="Database" data="Database" alt="Database" /><img src="icons/Chart.png" title="Chart" data="Chart" alt="Chart" /></div><div><img src="icons/Libreoffice.png" title="Localisation" data="Localisation" alt="Localisation" /><img src="icons/Documentation.png" title="Documentation" data="Documentation" alt="Documentation" /><img src="icons/Extensions.png" title="Extensions" data="Extensions" alt="Extensions" /><img src="icons/WWW.png" title="Web Pages" data="WWW" alt="Web Pages" /><img src="icons/Libreoffice.png" title="Contrib" data="contrib" alt="Contrib" /><img src="icons/Libreo ffice.png" title="Linguistic" data="Linguistic_component" alt="Linguistic" /></div><div><img src="icons/Installation.png" title="Installation" data="Installation" alt="Installation" /><img src="icons/Libreoffice.png" title="BASIC" data="BASIC" alt="BASIC" /><img src="icons/Formula_editor.png" title="Formula Editor" data="Formula_editor" alt="Formula Editor" /><img src="icons/PDF_export.png" title="PDF Export" data="PDF_export" alt="PDF Export" /><img src="icons/Libreoffice.png" title="User Interface" data="UI" alt="User Interface" /><img src="icons/Libreoffice.png" title="Unspecified" data="Libreoffice" alt="Unspecified" /></div> + <div><img src="icons/WRITER.png" title="Text Document" data="Writer" alt="Text Document" /><img src="icons/Spreadsheet.png" title="Spreadsheet" data="Spreadsheet" alt="Spreadsheet" /><img src="icons/Presentation.png" title="Presentation" data="Presentation" alt="Presentation" /><img src="icons/Drawing.png" title="Drawing" data="Drawing" alt="Drawing" /><img src="icons/Database.png" title="Database" data="Database" alt="Database" /><img src="icons/Chart.png" title="Chart" data="Chart" alt="Chart" /></div><div><img src="icons/Libreoffice.png" title="Localisation" data="Localisation" alt="Localisation" /><img src="icons/Documentation.png" title="Documentation" data="Documentation" alt="Documentation" /><img src="icons/Extensions.png" title="Extensions" data="Extensions" alt="Extensions" /><img src="icons/WWW.png" title="Web Pages" data="WWW" alt="Web Pages" /><img src="icons/Libreoffice.png" title="Contrib" data="contrib" alt="Contrib" /><img src="icons/Libreo ffice.png" title="Linguistic" data="Linguistic_component" alt="Linguistic" /></div><div><img src="icons/Installation.png" title="Installation" data="Installation" alt="Installation" /><img src="icons/Libreoffice.png" title="BASIC" data="BASIC" alt="BASIC" /><img src="icons/Formula_editor.png" title="Formula editor" data="Formula_editor" alt="Formula Editor" /><img src="icons/PDF_export.png" title="PDF Export" data="PDF_export" alt="PDF Export" /><img src="icons/Libreoffice.png" title="User Interface" data="UI" alt="User Interface" /><img src="icons/Libreoffice.png" title="Unspecified" data="Libreoffice" alt="Unspecified" /></div> </div> <div class="component_comments_container">&component_comments;</div> </div> diff --git a/bug/bug/bug.css b/bug/bug/bug.css index 7440fc6..a2aa76d 100644 --- a/bug/bug/bug.css +++ b/bug/bug/bug.css @@ -365,6 +365,11 @@ body { background: url('icons/icon-hover.png') no-repeat; } +.state_component img.selected { + cursor: pointer; + background: url('icons/icon-selected.png') no-repeat; +} + /* state_subcomponent */ .version_and_subcomponent > div { display: inline-block; diff --git a/bug/bug/bug.js b/bug/bug/bug.js index 964af78..bea93ee 100644 --- a/bug/bug/bug.js +++ b/bug/bug/bug.js @@ -108,19 +108,25 @@ $.bug.current_step('component'); element.show(); $('.select', element).select(); - $('.select .choice', element).hover(function() { + $('.select .choice, img', element).hover(function() { var component = $(this).attr('data'); $('.comment', element).hide(); $('.comment.' + component, element).show(); }); $('.select .choice', element).click(function() { $(this).mouseenter(); + var component = $(this).attr('data'); + $('img', element).removeClass('selected'); + $('img[data="' + component + '"]').addClass('selected'); $.bug.state_subcomponent(); }); $('img', element).click(function() { var component = $(this).attr('data'); $(".select .choice[data='" + component + "']", element).click(); }); + $('.components_icons').mouseleave(function() { + $('img.selected', element).mouseenter(); + }); }, state_subcomponent: function() { diff --git a/bug/bug/icons/icon-selected.png b/bug/bug/icons/icon-selected.png new file mode 100644 index 0000000..8f1ff0e Binary files /dev/null and b/bug/bug/icons/icon-selected.png differ diff --git a/bug/bug/test.html b/bug/bug/test.html index 4ce3d62..40cc326 100644 --- a/bug/bug/test.html +++ b/bug/bug/test.html @@ -61,6 +61,10 @@ </ul> </div> </div> + <div class="components_icons"> + <img data="OTHER"/> + <img data="Formula_editor"/> + </div> <div class="comments"> <div class="comment OTHER"></div> <div class="comment Formula_editor"></div> diff --git a/bug/bug/test.js b/bug/bug/test.js index 82b5f9d..cb87f93 100644 --- a/bug/bug/test.js +++ b/bug/bug/test.js @@ -118,7 +118,7 @@ test("state_signin", function() { }); test("state_component", function() { - expect(8); + expect(15); var state_subcomponent = $.bug.state_subcomponent; $.bug.state_subcomponent = function() { ok(true, 'state_subcomponent'); }; @@ -130,7 +130,19 @@ test("state_component", function() { equal($('.component .chosen', element).attr('data'), undefined, 'initialy nothing selected'); equal($('.comment.Formula_editor', element).css('display'), 'none', 'Formula_editor hidden'); equal($('.comment.OTHER', element).css('display'), 'none', 'OTHER hidden'); + equal($('img.selected').length, 0, 'no icon selected'); + // chosing Formula editor updates the comment, selects the icon and moves to subcomponent state $(".component .choice[data='Formula_editor']", element).click(); + equal($('img[data="Formula_editor"].selected', element).length, 1, 'Formula editor icon selected'); + equal($('.comment.Formula_editor', element).css('display'), 'block', 'Formula_editor is visible'); + equal($('.comment.OTHER', element).css('display'), 'none', 'OTHER hidden'); + // hovering on an icon changes the comment but has no effect on the selection + $('img[data="OTHER"]', element).mouseenter(); + equal($('.comment.Formula_editor', element).css('display'), 'none', 'Formula_editor hidden'); + equal($('.comment.OTHER', element).css('display'), 'block', 'OTHER is visible'); + equal($('.component .chosen', element).attr('data'), 'Formula_editor'); + // leaving the icon area reverts back the comment to the selected element + $('.components_icons', element).mouseleave(); equal($('.comment.Formula_editor', element).css('display'), 'block', 'Formula_editor is visible'); equal($('.comment.OTHER', element).css('display'), 'none', 'OTHER hidden'); _______________________________________________ Libreoffice-commits mailing list Libreoffice-commits@lists.freedesktop.org http://lists.freedesktop.org/mailman/listinfo/libreoffice-commits