ChangeScreen: Add icons for hashtags

Replace 'Add' button with an icon. This is consistent with editing the
topic which is also done by clicking on an icon.

Also display an icon for each hashtag, instead of the '#' character.

The tag_blue and tag_blue_add icons are taken from the silk icons [1].

[1] http://famfamfam.com/lab/icons/silk/

Change-Id: I50a095e3f489c92c2486bf6b112580584609779a
Signed-off-by: Edwin Kempin <ekempin@google.com>

gerrit-gwtui-common/src/main/java/com/google/gerrit/client/Resources.java

@@ -24,6 +24,9 @@ public interface Resources extends ClientBundle {
   @Source("note_add.png")
   ImageResource addFileComment();
 
+  @Source("tag_blue_add.png")
+  ImageResource addHashtag();
+
   @Source("user_add.png")
   ImageResource addUser();
 
@@ -58,6 +61,9 @@ public interface Resources extends ClientBundle {
   @Source("tick.png")
   ImageResource greenCheck();
 
+  @Source("tag_blue.png")
+  ImageResource hashtag();
+
   @Source("lightbulb.png")
   ImageResource info();
 

gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.java

@@ -116,6 +116,7 @@ public class ChangeScreen extends Screen {
   interface Style extends CssResource {
     String avatar();
     String hashtagName();
+    String hashtagIcon();
     String highlight();
     String labelName();
     String label_may();

gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.ui.xml

@@ -228,8 +228,9 @@ limitations under the License.
 
     .hashtagName {
       display: inline-block;
+      height: 15px;
       margin-bottom: 2px;
-      padding: 1px 3px 0px 3px;
+      padding: 1px 3px 1px 3px;
       border-radius: 5px;
       -webkit-border-radius: 5px;
       background: #E2F5FF;
@@ -237,6 +238,12 @@ limitations under the License.
       white-space: nowrap;
     }
 
+    .hashtagName a,
+    .hashtagName button {
+      position: relative;
+      top: -4px;
+    }
+
     .hashtagName button {
       cursor: pointer;
       padding: 0;
@@ -246,6 +253,11 @@ limitations under the License.
       white-space: nowrap;
     }
 
+    .hashtagIcon img {
+      position: relative;
+      top: 4px;
+    }
+
     .headerButtons button {
       margin: 5.286px 3px 0 0;
       text-align: center;

gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.java

@@ -26,6 +26,7 @@ import com.google.gwt.core.client.JsArrayString;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.NativeEvent;
 import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.event.dom.client.KeyCodes;
 import com.google.gwt.event.dom.client.KeyDownEvent;
 import com.google.gwt.event.dom.client.KeyDownHandler;
@@ -34,9 +35,10 @@ import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.rpc.StatusCodeException;
-import com.google.gwt.user.client.ui.Button;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.HTMLPanel;
+import com.google.gwt.user.client.ui.Image;
+import com.google.gwt.user.client.ui.ImageResourceRenderer;
 import com.google.gwt.user.client.ui.UIObject;
 import com.google.gwtexpui.globalkey.client.NpTextBox;
 import com.google.gwtexpui.safehtml.client.SafeHtmlBuilder;
@@ -93,7 +95,7 @@ public class Hashtags extends Composite {
   }
 
   @UiField Element hashtagsText;
-  @UiField Button openForm;
+  @UiField Image addHashtagIcon;
   @UiField Element form;
   @UiField Element error;
   @UiField NpTextBox hashtagTextBox;
@@ -116,6 +118,15 @@ public class Hashtags extends Composite {
         }
       }
     });
+
+    addHashtagIcon.addDomHandler(
+        new ClickHandler() {
+          @Override
+          public void onClick(ClickEvent event) {
+            onOpenForm();
+          }
+        },
+        ClickEvent.getType());
   }
 
   void init(ChangeScreen.Style style){
@@ -126,18 +137,13 @@ public class Hashtags extends Composite {
     canEdit = info.hasActions() && info.actions().containsKey("hashtags");
     this.changeId = info.legacyId();
     display(info);
-    openForm.setVisible(canEdit);
-  }
-
-  @UiHandler("openForm")
-  void onOpenForm(@SuppressWarnings("unused") ClickEvent e) {
-    onOpenForm();
+    addHashtagIcon.setVisible(canEdit);
   }
 
   void onOpenForm() {
     UIObject.setVisible(form, true);
     UIObject.setVisible(error, false);
-    openForm.setVisible(false);
+    addHashtagIcon.setVisible(false);
     hashtagTextBox.setFocus(true);
   }
 
@@ -167,7 +173,13 @@ public class Hashtags extends Composite {
           .setAttribute("href",
               "#" + PageLinks.toChangeQuery("hashtag:\"" + hashtagName + "\""))
           .setAttribute("role", "listitem")
-          .append("#").append(hashtagName)
+          .openSpan()
+            .setStyleName(style.hashtagIcon())
+            .append(new ImageResourceRenderer().render(
+                Gerrit.RESOURCES.hashtag()))
+          .closeSpan()
+          .append(" ")
+          .append(hashtagName)
           .closeAnchor();
       if (canEdit) {
         html.openElement("button")
@@ -186,7 +198,7 @@ public class Hashtags extends Composite {
 
   @UiHandler("cancel")
   void onCancel(@SuppressWarnings("unused") ClickEvent e) {
-    openForm.setVisible(true);
+    addHashtagIcon.setVisible(true);
     UIObject.setVisible(form, false);
     hashtagTextBox.setFocus(false);
   }

gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.ui.xml

@@ -18,6 +18,7 @@ limitations under the License.
     xmlns:ui='urn:ui:com.google.gwt.uibinder'
     xmlns:c='urn:import:com.google.gwtexpui.globalkey.client'
     xmlns:g='urn:import:com.google.gwt.user.client.ui'>
+  <ui:with field='ico' type='com.google.gerrit.client.GerritResources'/>
   <ui:with field='res' type='com.google.gerrit.client.change.Resources'/>
   <ui:style gss='false'>
     button.openAdd {
@@ -47,6 +48,7 @@ limitations under the License.
       font-weight: bold;
     }
 
+    .addHashtag,
     .cancel {
       float: right;
     }
@@ -54,14 +56,10 @@ limitations under the License.
   <g:HTMLPanel>
     <div>
       <span ui:field='hashtagsText'/>
-      <g:Button ui:field='openForm'
-         title='Add hashtags to this change'
-         styleName='{res.style.button}'
-         addStyleNames='{style.openAdd}'
-         visible='false'>
-       <ui:attribute name='title'/>
-       <div><ui:msg>Add #...</ui:msg></div>
-      </g:Button>
+      <g:Image ui:field='addHashtagIcon'
+        resource='{ico.addHashtag}'
+        styleName='{style.addHashtag}'
+        title='Add Hashtag'/>
     </div>
     <div ui:field='form' style='display: none' aria-hidden='true'>
       <c:NpTextBox ui:field='hashtagTextBox' styleName='{style.hashtagTextBox}'/>