Solution of the issue of focus on clicking

Selected element in the palette is now colored green making it easier to
see that it is selected.

Change-Id: I09006eb537495343bef3dfdad2888a3d96135e29

appinventor/appengine/src/com/google/appinventor/client/editor/simple/palette/SimplePaletteItem.java

@@ -12,6 +12,8 @@ import com.google.appinventor.client.editor.simple.components.MockComponentsUtil
 import com.google.appinventor.client.widgets.dnd.DragSourcePanel;
 import com.google.appinventor.client.widgets.dnd.DragSourceSupport;
 import com.google.appinventor.client.widgets.dnd.DropTarget;
+import com.google.gwt.event.dom.client.MouseDownEvent;
+import com.google.gwt.event.dom.client.MouseDownHandler;
 import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
@@ -32,11 +34,14 @@ public class SimplePaletteItem extends DragSourcePanel {
   // Properties of the prototype may be queried by accessors.
   private MockComponent componentPrototype;
 
+  //It is here to keep the selected panel item
+  private static Widget selectedPaletteItemWidget;
+
   /**
    * Creates a new palette item.
    *
-   * @param scd  component descriptor for palette item
-   * @param dropTargetProvider  provider of targets that palette items can be dropped on
+   * @param scd component descriptor for palette item
+   * @param dropTargetProvider provider of targets that palette items can be dropped on
    */
   public SimplePaletteItem(SimpleComponentDescriptor scd, DropTargetProvider dropTargetProvider) {
     this.dropTargetProvider = dropTargetProvider;
@@ -79,6 +84,30 @@ public class SimplePaletteItem extends DragSourcePanel {
     panel.setWidth("100%");
     add(panel);
     setWidth("100%");
+
+    addHandlers();
+  }
+
+  /**
+   * Selects (sets the background to green of) a palette item when it is clicked.
+   *
+   * @param paletteItemWidget the Widget of the panel item to be selected
+   */
+  private static void select(Widget paletteItemWidget) {
+    if (selectedPaletteItemWidget != null) {
+      selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "white");
+    }
+    selectedPaletteItemWidget = paletteItemWidget;
+    selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "#d2e0a6");
+  }
+
+  private void addHandlers() {
+    addMouseDownHandler(new MouseDownHandler() {
+      @Override
+      public void onMouseDown(MouseDownEvent arg0) {
+        select(getWidget());
+      }
+    });
   }
 
   /**
@@ -86,7 +115,7 @@ public class SimplePaletteItem extends DragSourcePanel {
    * <p>
    * The caller is assumed to take ownership of the returned component.
    *
-   * @return  mock component
+   * @return mock component
    */
   public MockComponent createMockComponent() {
     cacheInternalComponentPrototype();
@@ -97,8 +126,7 @@ public class SimplePaletteItem extends DragSourcePanel {
   }
 
   /**
-   * Returns whether this palette item creates components with a
-   * visual representation.
+   * Returns whether this palette item creates components with a visual representation.
    */
   public boolean isVisibleComponent() {
     cacheInternalComponentPrototype();
@@ -157,6 +185,6 @@ public class SimplePaletteItem extends DragSourcePanel {
   // Utility methods
 
   public String getName() {
-      return scd.getName();
+    return scd.getName();
   }
 }

appinventor/appengine/war/Ya.css

@@ -794,7 +794,7 @@ select {
   background-color: white; /* needed on Firefox */
   height: 15px;
   cursor: pointer;
-  padding-bottom: 10px;
+  padding: 5px;
 }
 
 .ode-SimplePaletteItem-icon {