Jihan Kim 2014-01-21
Use common.commitMsg to render multiline commit message
@d63da4e7fa15579f6c4016c7dc7990bfd0a6db70
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -2725,68 +2725,30 @@
 
                 }
 
+                /** pullRequest view **/
                 .commit-list {
                     list-style:none;
                     padding:0;
                     margin:0;
 
                     .commit-info {
-                        padding:5px;
+                        padding:10px 5px;
 
                         .commit-id {
                             float:left;
-                            margin-top: 5px;
                             color:#51aacc;
                             width: 70px;
                             text-align: center;
                         }
 
                         .commitMsg {
-                            margin:0;
-                            margin-left:90px;
-                            margin-right:150px;
-                            padding:5px;
-                            font-size:14px;
-                            word-break: break-word;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space:nowrap;
-                            vertical-align:middle;
-
-                            &.desc {
-                                padding-left:15px;
-                                white-space: pre-wrap;
-                                word-break: break-all;
-                                word-wrap: break-word;
-                                font-size:11px;
-                                border-left: 3px solid #F1f1f1;
-
-                                &.hide {
-                                    display:none;
-                                }
+                            &.short {
+                                margin:0;
+                                vertical-align: middle;
+                                padding:5px;
                             }
-
-                            .moreBtn {
-                                background-color:transparent;
-                                border:0;
-                                display: inline-block;
-                                line-height: 0;
-                                margin-left: 3px;
-                                position: relative;
-                                top: -1px;
-                                outline:none;
-
-                                span {
-                                    background-color: #bbb;
-                                    color: #fff;
-                                    padding: 0 7px;
-                                    line-height: 6px;
-                                    height: 12px;
-                                    font-size: 12px;
-                                    vertical-align: middle;
-                                    display: inline-block;
-                                    .border-radius(2px);
-                                }
+                            &.desc {
+                                margin-left:80px;
                             }
                         }
 
@@ -2808,7 +2770,7 @@
                     }
 
                     .avatar-wrap {
-                        margin-top:2px;
+                        margin-top:-2px;
                         float:right;
                         margin-right:5px;
                     }
@@ -2816,7 +2778,7 @@
                     .date {
                         float:right;
                         margin-right:15px;
-                        margin-top:5px;
+                        margin-top:3px;
                     }
                 }
 
@@ -2904,6 +2866,49 @@
         }
     }
 
+}
+
+.commitMsg {
+    &.short {
+        padding:5px;
+        font-size:14px;
+        word-break: break-word;
+        vertical-align:middle;
+        .text-overflow();
+    }
+    &.desc { /* pre */
+        word-break: break-all;
+        word-wrap: break-word;
+        font-size:12px;
+        background:transparent;
+        border:none;
+        border-left: 3px solid #F1f1f1;
+        font-family:@base-font-family;
+        color:#666;
+        .border-radius(0);
+    }
+    &.moreBtn { /* button */
+        position: relative;
+        top: -1px;
+        display: inline-block;
+        outline:none;
+        background-color:transparent;
+        border:0;
+        line-height: 0;
+        margin-left: 3px;
+
+        span {
+            display: inline-block;
+            background-color: #bbb;
+            color: #fff;
+            padding: 2px 7px;
+            line-height: 6px;
+            height: 12px;
+            font-size: 12px;
+            vertical-align: middle;
+            .border-radius(2px);
+        }
+    }
 }
 
 div.markdown-preview {
@@ -3543,22 +3548,11 @@
     .commit-wrap {
         background-color: @white;
 
-        .commit-id { text-align:center; }
+        .commit-id { text-align:center; vertical-align: top; }
 
         .tbody {
             td { padding:10px 15px 10px 5px; }
-            .messages {
-                a { display:inline-block; font-size:14px; }
-                pre { background:#f5f5f5; }
-                vertical-align:top;
-                button.more {
-                    display:inline-block;
-                    border:none; margin:0; font-size:14px;
-                    background:#bbb; color:#fff;
-                    padding: 0px 6px; margin-bottom:2px; margin-left:5px;
-                    .border-radius(2px);
-                }
-            }
+            .messages { /* see .commitMsg */ }
 
             .commit-id {
                 width: 70px; text-align:center;
@@ -3572,8 +3566,12 @@
                     &:hover { color:@link-hover-color; text-decoration:underline; }
                 }
             }
+            .messages { vertical-align:top;}
             .date { vertical-align:top;}
-            .author { vertical-align:top;}
+            .author {
+                vertical-align:top;
+                .avatar-wrap { margin-top:0; }
+            }
             .browse {  width:70px; text-align:center; }
         }
     }
@@ -3583,10 +3581,6 @@
     .commitId {
         color:#999;
         margin-top:5px;
-    }
-    .commitMsg {
-        font-family:@base-font-family;
-        font-size:12px;
     }
     .commitInfo {
         .avatar-wrap { margin-right:5px; }
@@ -3798,9 +3792,6 @@
         .updir { font-weight:bold; }
 
         .messages {
-           /* commit History */
-           pre { background:none; border:none; margin:0; }
-
            .number-of-comments { float: right; position: relative; }
 
            /* fileList */
@@ -5143,7 +5134,7 @@
         background: #fafafa;
     }
     th, td {
-        .vmiddle;
+        vertical-align:top;
         border:none;
     }
     tr {
@@ -5151,7 +5142,7 @@
     }
 
     .branchName {
-        width:250px;
+        padding-top:13px;
 
         a { color:@blue; }
 
@@ -5160,30 +5151,31 @@
             background-color: #fff;
             border: 1px solid rgba(0, 0, 0, 0.1);
             padding:3px 5px;
+            .inline-block;
             .border-radius(3px);
         }
     }
-    .commitMsg {
-        a {
-            .inline-block;
-            .vmiddle;
+
+    .commitMessage {
+        padding-top:13px;
+
+        .usf-group       { float:left; }
+        .avatar-wrap     { margin-top:0px; margin-right:10px; }
+        .commitMsg.short {
+            display:inline;
+            overflow:visible;
+            white-space: normal;
+            padding:0;
         }
-        pre { background:#f5f5f5; }
-        button.more {
-            .inline-block;
-            border:none; margin:0; font-size:14px;
-            background:#bbb; color:#fff;
-            padding:0px 6px; margin-bottom:2px; margin-left:5px;
-            .border-radius(2px);
-        }
+        .commitMsg.desc  { margin-top:5px; }
     }
-    
+
     .commitDate {
-        width:100px;
+        width:115px; padding-top:13px;
     }
 
     .pullRequest {
-        width:150px;
+        width:170px; padding-top:13px;
         .disabled  { color:#cdcdcd; }
         .pullrequest-state {
             &.open:before {
@@ -5208,7 +5200,7 @@
     }
 
     .actions {
-        width:200px;
+        width:220px; min-width:220px;
         text-align:right !important;
     }
 }
app/views/code/branches.scala.html
--- app/views/code/branches.scala.html
+++ app/views/code/branches.scala.html
@@ -67,8 +67,8 @@
 </div>
 <script type="text/javascript">
     $(document).ready(function(){
-        $("button.more").click(function(){
-            $(this).next("pre").toggleClass("hidden");
+        $("button.moreBtn").on("click", function(){
+            $(this).next("pre.commitMsg.desc").toggleClass("hidden");
         });
     });
 </script>
app/views/code/history.scala.html
--- app/views/code/history.scala.html
+++ app/views/code/history.scala.html
@@ -133,17 +133,7 @@
                                     }
                                 }
 
-                                @defining(commit.getMessage()){ commitMsg =>
-                                    @if(commit.getShortMessage()) {
-                                        <a href="@showCommitURL">@commit.getShortMessage()</a>
-                                    } else {
-                                        <a href="@showCommitURL">@Messages("code.commitMsg.empty")</a>
-                                    }
-                                    @if(commitMsg.split("\n").length > 1){
-                                        <button type="button" class="more">&hellip;</button>
-                                        <pre class="hidden">@commitMsg.replace(commitMsg.split("\n")(0)+"\n", "")</pre>
-                                    }
-                                }
+                                @common.commitMsg(commit.getShortMessage(), commit.getMessage(), showCommitURL.toString())
                             </td>
                             @if(path != null){
                             <td class="browse">
@@ -153,7 +143,7 @@
                             </td>
                             }
                             <td class="date">@momentFromNow(commit.getAuthorDate(), lang.language)</td>
-                            <td class="author @commit.getAuthorEmail">
+                            <td class="author">
                                 @(commit.getAuthor, commit.getAuthorEmail, commit.getAuthorName) match {
                                 case (user: User, _, _) if !user.isAnonymous => {
 
@@ -203,8 +193,8 @@
 
 <script type="text/javascript">
 $(document).ready(function(){
-    $("button.more").click(function(){
-        $(this).next("pre").toggleClass("hidden");
+    $("button.moreBtn").on("click", function(){
+        $(this).next("pre.commitMsg.desc").toggleClass("hidden");
     });
 
     var htKeyMap = {};
app/views/code/partial_branchrow.scala.html
--- app/views/code/partial_branchrow.scala.html
+++ app/views/code/partial_branchrow.scala.html
@@ -56,22 +56,11 @@
         <a href="@goToBranchURL(branch.getName)">@branch.getShortName</a>
         @if(isHead){<span class="headBranch ml10">@Messages("code.branches.defaultBranch")</span>}
     </td>
-    <td class="commitMsg">
+    <td class="commitMessage">
         @getCommiterAvatar(branch)
-
-        <a href="@getShowCommitURL(branch)" class="message">
-            @if(branch.getHeadCommit.getShortMessage()){
-                @branch.getHeadCommit.getShortMessage()
-            } else {
-                @Messages("code.commitMsg.empty")
-            }
-        </a>
-        @defining(branch.getHeadCommit.getMessage){ commitMsg =>
-            @if(commitMsg.split("\n").length > 1){
-                <button type="button" class="more">&hellip;</button>
-                <pre class="hidden mt5">@commitMsg.replace(commitMsg.split("\n")(0)+"\n", "")</pre>
-            }
-        }
+        @common.commitMsg(branch.getHeadCommit.getShortMessage(),
+                          branch.getHeadCommit.getMessage,
+                          getShowCommitURL(branch))
     </td>
     <td class="commitDate">
         @momentFromNow(branch.getHeadCommit.getCommitterDate, lang.language)
 
app/views/common/commitMsg.scala.html (added)
+++ app/views/common/commitMsg.scala.html
@@ -0,0 +1,36 @@
+@**
+* Yobi, Project Hosting SW
+*
+* Copyright 2013 NAVER Corp.
+* http://yobi.io
+*
+* @Author Jihan Kim
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**@
+@(shortMessage:String, commitMsg:String, linkURL:String)
+
+@import org.apache.commons.lang3.StringUtils
+
+@defining(StringUtils.defaultIfEmpty(shortMessage, Messages("code.commitMsg.empty"))) { msgText =>
+    @if(StringUtils.isEmpty(linkURL)){
+        <span class="commitMsg short">@msgText</span>
+    } else {
+        <a href="@linkURL" class="commitMsg short">@msgText</a>
+    }
+}
+
+@if(commitMsg.split("\n").length > 1){
+    <button type="button" class="commitMsg moreBtn"><span>&hellip;</span></button>
+    <pre class="commitMsg desc hidden">@commitMsg.replace(commitMsg.split("\n")(0)+"\n", "")</pre>
+}
app/views/git/partial_diff.scala.html
--- app/views/git/partial_diff.scala.html
+++ app/views/git/partial_diff.scala.html
@@ -97,13 +97,9 @@
                                     }
                                 }
                                 @defining(commit.getMessage()){ commitMsg =>
-                                <a href="@routes.CodeHistoryApp.show(pullRequest.fromProject.owner, pullRequest.fromProject.name, commit.getId())">
-                                    @commitMsg.split("\n")(0)
-                                </a>
-                                @if(commitMsg.split("\n").length > 1){
-                                <button type="button" class="more"><i class="yobicon-ellipsis-horizontal"></i></button>
-                                <pre class="hidden">@commitMsg.replace(commitMsg.split("\n")(0)+"\n", "")</pre>
-                                }
+                                    @common.commitMsg(commitMsg.split("\n")(0),
+                                        commitMsg,
+                                        routes.CodeHistoryApp.show(pullRequest.fromProject.owner, pullRequest.fromProject.name, commit.getId()).toString())
                                 }
                             </td>
                             <td class="date">@agoString(ago(commit.getAuthorDate()))</td>
app/views/git/partial_pull_request_event.scala.html
--- app/views/git/partial_pull_request_event.scala.html
+++ app/views/git/partial_pull_request_event.scala.html
@@ -114,8 +114,9 @@
                         } else {
                             <img src="@urlToPicture(commit.getAuthorEmail, 32)" class="avatar-wrap small">
                         }
-                        <p class="commitMsg"><a href="@routes.PullRequestApp.commitView(pull.toProject.owner, pull.toProject.name, pull.number, commit.commitId)">@commit.commitMessage.split("\n")(0)</a>  @if(commit.commitMessage.split("\n").length > 1) {<button class="moreBtn" data-toggle="more"><span>...</span></button>}</p>
-                        <p class="commitMsg desc hide">@commit.commitMessage.replace(commit.commitMessage.split("\n")(0)+"\n", "")</p>
+
+                        @common.commitMsg(commit.commitMessage.split("\n")(0), commit.commitMessage,
+                            routes.PullRequestApp.commitView(pull.toProject.owner, pull.toProject.name, pull.number, commit.commitId).toString)
                     }
                     </li>
                 }
app/views/git/view.scala.html
--- app/views/git/view.scala.html
+++ app/views/git/view.scala.html
@@ -122,6 +122,10 @@
                 url : "@Html(routes.ProjectApp.mentionListAtPullRequest(pull.toProject.owner, pull.toProject.name, pull.getCurrentCommits.get(0).getCommitId, pull.id).toString)"
             }
         });
+
+        $("button.moreBtn").on("click", function(){
+            $(this).next("pre.commitMsg.desc").toggleClass("hidden");
+        });
     });
 </script>
 }
app/views/git/viewChanges.scala.html
--- app/views/git/viewChanges.scala.html
+++ app/views/git/viewChanges.scala.html
@@ -59,6 +59,10 @@
             "welDiff"      : $("#pull-request-changes"),
             "bCommentable" : "@isProjectResourceCreatable(UserApp.currentUser, project, ResourceType.PULL_REQUEST_COMMENT)"
         });
+
+        $("button.moreBtn").on("click", function(){
+            $(this).next("pre.commitMsg.desc").toggleClass("hidden");
+        });
     });
 </script>
 }
app/views/git/viewCommits.scala.html
--- app/views/git/viewCommits.scala.html
+++ app/views/git/viewCommits.scala.html
@@ -46,14 +46,9 @@
                             }
 
                             @defining(commit.getCommitMessage()){ commitMsg =>
-                                <a href="@routes.PullRequestApp.commitView(pull.toProject.owner, pull.toProject.name, pull.number, commit.getCommitId())">
-                                    @commitMsg.split("\n")(0)
-                                </a>
-
-                                @if(commitMsg.split("\n").length > 1){
-                                <button type="button" class="more">&hellip;</button>
-                                <pre class="hidden">@commitMsg.replace(commitMsg.split("\n")(0)+"\n", "")</pre>
-                                }
+                                @common.commitMsg(commitMsg.split("\n")(0),
+                                    commitMsg,
+                                    routes.PullRequestApp.commitView(pull.toProject.owner, pull.toProject.name, pull.number, commit.getCommitId()).toString())
                             }
                         </td>
                         <td class="date">@agoString(ago(commit.getAuthorDate()))</td>
@@ -83,9 +78,9 @@
 }
 
 <script type="text/javascript">
-$(function() {
-    $('.code-table').on('click','.more',function(){
-        $(this).next('pre').toggleClass('hidden');
+    $(document).ready(function(){
+        $("button.moreBtn").on("click", function(){
+            $(this).next("pre.commitMsg.desc").toggleClass("hidden");
+        });
     });
-});
 </script>
Add a comment
List