Suwon Chae 2015-03-28
user-expression: improve username expression
- show name & avatar at content page with popover
- fix alignment with ago date
- remove transparency of tooltip
@dbcebe6bfc775a6459fd41fc8cb4df06ae707f77
app/assets/stylesheets/less/_common.less
--- app/assets/stylesheets/less/_common.less
+++ app/assets/stylesheets/less/_common.less
@@ -159,6 +159,7 @@
 .bgorange { background:@orange; }
 .bggray   { background:#f5f5f5; }
 .vmiddle  { vertical-align:middle !important; }
+.vertical-top  { vertical-align:top !important; }
 .vtop     { vertical-align:top    !important; }
 
 /** form elements **/
app/assets/stylesheets/less/_mixins.less
--- app/assets/stylesheets/less/_mixins.less
+++ app/assets/stylesheets/less/_mixins.less
@@ -19,9 +19,9 @@
 
 // Drop shadows
 .box-shadow(@shadow: 0 1px 2px rgba(0, 0, 0, .25)){
-    -webkit-box-shadow: @shadow !important;
-    -moz-box-shadow: @shadow !important;
-    box-shadow: @shadow !important;
+    -webkit-box-shadow: @shadow;
+    -moz-box-shadow: @shadow;
+    box-shadow: @shadow;
 }
 
 // Transitions
app/assets/stylesheets/less/_override.less
--- app/assets/stylesheets/less/_override.less
+++ app/assets/stylesheets/less/_override.less
@@ -343,3 +343,14 @@
 .select2-chosen .branch-label {
     margin-top:-2px;
 }
+
+.tooltip {
+  font-size: 12px;
+}
+
+.tooltip.in {
+  font-size: 12px;
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -6165,3 +6165,19 @@
   text-align: center;
   font-weight: bold;
 }
+
+.no-margin-no-padding {
+  margin: 0px !important;
+  padding: 0px !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.no-text-decoration{
+  text-decoration: none !important;
+}
+
+.ago-date {
+  vertical-align: middle;
+}
+
app/utils/AutoLinkRenderer.java
--- app/utils/AutoLinkRenderer.java
+++ app/utils/AutoLinkRenderer.java
@@ -20,11 +20,13 @@
  */
 package utils;
 
+import controllers.UserApp;
 import models.Issue;
 import models.Project;
 import models.User;
 import org.apache.commons.lang.ArrayUtils;
 import org.apache.commons.lang.StringUtils;
+import org.apache.commons.lang3.StringEscapeUtils;
 import org.jsoup.Jsoup;
 import org.jsoup.nodes.Document;
 import org.jsoup.nodes.Element;
@@ -313,7 +315,13 @@
         if (user.isAnonymous()) {
             return Link.EMPTY_LINK;
         } else {
-            return new Link(RouteUtil.getUrl(user), "@" + user.loginId);
+            String avatarImage;
+            if( user.avatarUrl().equals(UserApp.DEFAULT_AVATAR_URL) ){
+                avatarImage = "";
+            } else {
+                avatarImage = "<img src='" + user.avatarUrl() + "' class='avatar-wrap smaller no-margin-no-padding vertical-top' alt='@" + user.loginId + "'> ";
+            }
+            return new Link(RouteUtil.getUrl(user), "no-text-decoration", "<span data-toggle='popover' data-placement='top' data-trigger='hover' data-html='true' data-content=\"" + StringEscapeUtils.escapeHtml4(avatarImage + user.name) + "\">" + user.loginId + "</span>");
         }
     }
 
app/views/board/partial_comments.scala.html
--- app/views/board/partial_comments.scala.html
+++ app/views/board/partial_comments.scala.html
@@ -50,7 +50,9 @@
                         <strong>@comment.authorLoginId </strong>
                     </a>
                 </span>
-                <a href="#comment-@comment.id" class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">@utils.TemplateHelper.agoOrDateString(comment.createdDate)</a>
+                <span class="ago-date">
+                    <a href="#comment-@comment.id" class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">@utils.TemplateHelper.agoOrDateString(comment.createdDate)</a>
+                </span>
                 <span class="act-row pull-right">
                     @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.UPDATE)) {
                         <button type="button" class="btn-transparent mr10" data-toggle="comment-edit" data-comment-id="@comment.id" title="@Messages("common.comment.edit")"><i class="yobicon-edit-2"></i></button>
app/views/issue/partial_comments.scala.html
--- app/views/issue/partial_comments.scala.html
+++ app/views/issue/partial_comments.scala.html
@@ -88,7 +88,9 @@
                         <strong>@comment.authorLoginId </strong>
                     </a>
                 </span>
-                <a href="#comment-@comment.id" class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">@utils.TemplateHelper.agoOrDateString(comment.createdDate)</a>
+                <span class="ago-date">
+                    <a href="#comment-@comment.id" class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">@utils.TemplateHelper.agoOrDateString(comment.createdDate)</a>
+                </span>
                 <span class="act-row pull-right">
                     @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.READ) && comment.isInstanceOf[IssueComment]) {
                         @defining(comment.asInstanceOf[IssueComment]) { issueComment =>
public/javascripts/common/yobi.Common.js
--- public/javascripts/common/yobi.Common.js
+++ public/javascripts/common/yobi.Common.js
@@ -113,6 +113,8 @@
             oModule = oModule[sDepth];
         }
 
+        $("[data-toggle=popover]").popover();
+
         // temporary code for compatibility with nForge
         var oInstance;
         if(typeof oModule == "undefined"){
Add a comment
List