From 9b68ea504715ee3c33dd329283a8e79e0bdcc463 Mon Sep 17 00:00:00 2001
From: Edwin Kempin <ekempin@google.com>
Date: Wed, 23 Dec 2015 15:49:21 +0100
Subject: [PATCH] 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>
---
 .../com/google/gerrit/client/Resources.java   |   6 ++++
 .../com/google/gerrit/client/tag_blue.png     | Bin 0 -> 586 bytes
 .../com/google/gerrit/client/tag_blue_add.png | Bin 0 -> 671 bytes
 .../gerrit/client/change/ChangeScreen.java    |   1 +
 .../gerrit/client/change/ChangeScreen.ui.xml  |  14 +++++++-
 .../google/gerrit/client/change/Hashtags.java |  34 ++++++++++++------
 .../gerrit/client/change/Hashtags.ui.xml      |  14 ++++----
 7 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 gerrit-gwtui-common/src/main/resources/com/google/gerrit/client/tag_blue.png
 create mode 100644 gerrit-gwtui-common/src/main/resources/com/google/gerrit/client/tag_blue_add.png

diff --git a/gerrit-gwtui-common/src/main/java/com/google/gerrit/client/Resources.java b/gerrit-gwtui-common/src/main/java/com/google/gerrit/client/Resources.java
index b7e9699997..ae7114fcb7 100644
--- a/gerrit-gwtui-common/src/main/java/com/google/gerrit/client/Resources.java
+++ b/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();
 
diff --git a/gerrit-gwtui-common/src/main/resources/com/google/gerrit/client/tag_blue.png b/gerrit-gwtui-common/src/main/resources/com/google/gerrit/client/tag_blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..9757fc6ed6597438eb8e5a70a1ab2402cdebd5d1
GIT binary patch
literal 586
zcmV-Q0=4~#P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz+(|@1R5;6p
zli7+IK@^7TCFVB4w-A~<T_9wVOfEA+67m49DDEgIDsIy~ZaprDn2w^x+%>6YY<vFH
zDX|@K$;G*;I{)|or}{M0bsgPq7wvW%tyT-oW)qsGK~+^W8jULe>{78#rvt}vj%qrc
zN=UU@y$E6COaj9&r1NAlaUpajQlL~SorN%pOwHs*2laYgHBA$?ZOd~4Rw@<b^ZAny
zMy|U?A$}5(4a>5yFm2?1ZIg`0V-$-;<Z`(q2qWiR<jrOS694||;KRc+-rfUQV|zCm
zjVJ}u>GT1Fi5dB7wUSNi^%`^Ge62m>OBeX610Nsukl}DhDG-mxT?nhyYH!4he7Ri8
zrq0Ti&UXUvqX&F@JcJAe14@BNBqAY_QZAPjF(Y3r7P9H_kB#@LgFAf>xz>Qp&n=|a
z>ro1XLZK^nmO`PRh#C2OK0ktd7l6-A;O5?fz1gNnCX)yR0<RBVRLrMjvspfy&0NSk
z0r@0GxNWUrT2C*<9(RP7mC0n3R4T=36A7XV$Zgw!W$&H+e!s_k#8b<WNF<b4EXHXQ
zcb}NV;`~5-7C;q^M!n*tIW1Vf-#;n72%rjw!`@&p$Vu$;`8+3A`G3EwaP<oDt8@4N
Y09wpC?6mZIDF6Tf07*qoM6N<$f_O;+EC2ui

literal 0
HcmV?d00001

diff --git a/gerrit-gwtui-common/src/main/resources/com/google/gerrit/client/tag_blue_add.png b/gerrit-gwtui-common/src/main/resources/com/google/gerrit/client/tag_blue_add.png
new file mode 100644
index 0000000000000000000000000000000000000000..f135248f82e3d0b87d29d1628057f62dc51ec6c6
GIT binary patch
literal 671
zcmV;Q0$}}#P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!F-b&0R5;6h
zlFy4$Q547DKQW6oMY}dFS|v!WBZ3w!T4vD{)S?!%szp@LXk!_{l+@5VbW}7IeLX=@
z@mD(jcu!G8%rrGyB|XWf^PPL1>0~-SI9%?%=X}23bKl`4NrEVf$mjFO<#Nbov&dvJ
zNT<_CrBZ7ExK+Uw3I&YE<ArE8n<^w8kFSJqq)Y{kMnhGu*XuI~oiP`PL?TB*II>L1
zq(%qHWHR0F_n|0?dQQMtEQVk(xD>*X>NJrR|6!IJgTVluzJkEFiIZBbhHyBHKp?OH
z;YfLEc{Cb<ihukb<N4k`o_+y@#^kPAt&$7){r))!$9j}|y`Gvh91hWD%7)B7-iW|E
z3E0{@gj6aOasiLWGlOu6MB*IlQSNrTYEq%6sLEyr_)r4g7v~}6a+zGf>2#_Pl@g6c
zwX8?E)9I*5#h(iF=`qaGA;gdY_^%U4sZ=5tu-olxvtB}>ke2l*x7+On$PNQM`eeub
zw>sQ<c^NwW1w1itV0U--#N3Or{<MN1$gNgu26@IH4;&xy*m@mqaU0q1JWQYO;Hv2~
z&fYy{T==g%&ue`?pG=cT5Q#yq87{(Ecm-$iHO&f)!a7XCZ2}CIPM6o~)w<nonI@4S
zmmZ#hSKPtBpDVvjfTL&J<#K7*OUpE1=kJ}w7JmbqyiP6N^y^kTn1;jQ(AaD?dBe1h
zE5=iJ!QWJsX{G(rH~2rSR;$Khu^eZ~dKSOP_TN=c_XkmWAk7nQ<Ea1u002ovPDHLk
FV1l%4HFp32

literal 0
HcmV?d00001

diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.java
index 60d21bae1e..995a1e0663 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.java
+++ b/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();
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.ui.xml b/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.ui.xml
index c643072b06..86f3bb3ec8 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/ChangeScreen.ui.xml
+++ b/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;
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.java
index 55f66b7fff..46e1814460 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.java
+++ b/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);
   }
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.ui.xml b/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.ui.xml
index ba4d6ccee5..02538e2328 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Hashtags.ui.xml
+++ b/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}'/>