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.

6 files changed, 30 insertions, 3 deletions

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/Libreoffice.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/Libreoffice.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
--- /dev/null
+++ b/bug/bug/icons/icon-selected.png
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');