Redmine: 長いテキストをRedmine 3.4 のワイド表示とは異なる形で、広めに表示する(View customize plugin) - Enjoy*Study

Redmine 3.4 では、長いテキストに対して「ワイド表示」というオプションが追加されていて、長いテキストを見やすく表示することが可能になりました。

Redmine 3.4 新機能紹介 | Redmine.JP Blog

上記機能だと、表示位置が説明欄の下に来てしまうので、今回は説明欄の上に表示するようにView customizeで実装してみました。

なお、Redmine 3.4の機能を使っているわけではないので、Redmine 3.4 未満でワイド表示したい場合にも参考になるかと思います。

View customize の設定内容

Path pattern

チケット画面を対象にします。

/issues

Code

Type:JavaScriptとして下記を設定します。カスタムフィールドのIDに応じて、customFieldId を変更してください。

$(function() {
  // 処理したいカスタムフィールドに応じて変更
  var customFieldId = 3;

  // 詳細表示エリア
  function changeDetailArea() {

    var target = $('div.cf_' + customFieldId + '.attribute');

    // 移動
    $('div.issue > div.attributes').append(
      $('<div>', { class: 'splitcontent' }).append(target));
  }

  // 編集エリア
  function changeEditArea() {

    var target = $('#issue_custom_field_values_' + customFieldId).parent();

    // 移動
    $('#attributes').append(target);
  }

  changeDetailArea();
  changeEditArea();

  // ステータス変更時などにDOMが差し替えられるので
  // フォームの内容が書き変わるたびに調整
  var _replaceIssueFormWith = replaceIssueFormWith;
  replaceIssueFormWith = function(html){

    _replaceIssueFormWith(html);

    changeDetailArea();
    changeEditArea();
  };
})