Redmine代码评审页添加基本信息

最新推荐文章于 2019-08-27 09:06:13 发布

weixin_30596023

最新推荐文章于 2019-08-27 09:06:13 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/compulsive/archive/2011/08/29/2158977.html

本文详细介绍了如何在Redmine的codereview插件中添加代码作者、发布时间等基本信息，通过修改源代码并引入HTML、CSS和JavaScript实现了功能增强。文章最后讨论了在展示多个文件时遇到的问题及后续解决方案，并分享了学习过程中的技术知识积累。

Redmine的code review插件可以显示代码的具体内容，但是缺少代码的作者、发布时间等等信息，所以需要对插件进行修改，添加这个功能。如图所示为没有修改时的显示页面：

可以看到，图中只有代码。

我们要做的就是在上面添加显示基本信息，研究过code_review源代码之后，发现相关的内容是在/app/views/code_review/_update_diff_view.html.erb中，添加如下代码段：

<div id="code-review-assign-info">
    <table style="width:100%">
        <tr>
            <th>id </th>
            <th>changeset.id </th>
            <th>action </th>
            <th>revision </th>
            <th>commiter </th>
            <th>committed_on </th>
            <th>comment </th>
        </tr>
        <tr>
            <th><%=h @change.id %> </th>
            <th><%=h @change.changesetid %> </th>
            <th><%=h @change.action %> </th>
            <th><%=h @changeset.revision %> </th>
            <th><%=h @changeset.committer %> </th>
            <th><%=h @changeset.committed_on %> </th>
            <th><%=h @changeset.comments %> </th>
        </tr>
    </table>
</div>

这段代码可以显示基本信息，通过如下所示的javascript代码调用：

   var tables = $$('#content table.filecontent');
   if (tables.length > 0) {
     var table = tables[0];
     new Insertion.Before(table, $('code-review-assign-info'));
   }

其中，code-review-assign-info是一个CSS框架，需要在/assert/stylesheets/code_review.css中定义：

#code-review-assign-info {
    text-align: center;
    background-color: #0F2059;
    color: white;
    padding-left: 2px;
    padding-right: 2px;
    cursor: default;
}

经过以上修改之后，我们可以看到如下图所示的变化：

通过对比两幅图像，可以看到，多出的这部分信息就是我们新加入的代码改写的。这个基本可以很好的实现，但是当同时显示多个文件的时候就会遇到问题，这是接下来需要解决的。

通过这部分内容的学习，我了解了HTML、CSS和JavaScript的一些基础知识，不过还比较肤浅，还需要进一步的学习。

转载于:https://www.cnblogs.com/compulsive/archive/2011/08/29/2158977.html