RedmineをView Customize pluginを使ってカスタマイズ～カスタムクエリBootstrap風ボタン実装編～

要件

• BtoCサービスのスタッフ向けに構築したRedmineでカスタムクエリを複数作成した

その結果、下記のような課題がスタッフより上がってきたので、その課題の解決をView Customize pluginで行った。
RedmineをView Customize pluginを使ってカスタマイズ～引用折り畳み編～、RedmineをView Customize pluginを使ってカスタマイズ～LINE風チャット画面実装編～の続き。

課題

• カスタムクエリがサイドバーにあり、ぱっと見、目に入ってこないので押さない
• サイドバーにあるとなんとなく、押してしまってよいのか(何か変更されたりとか)気になってしまって結局押さない

解決案

• カスタムクエリをBootstrap風の押しやすいボタンにする
• 押しやすいようにメイン部分の上下にボタンを配置する

環境

• Redmine Ver. 3.4.6
• View Customize plugin Ver. 2.0.0
• テーマ Farend basic

View Customize pluginでの設定手順

View Customize pluginのインストール方法など公式リポジトリを参照。
以下はView Customize pluginがインストールされている前提での設定手順

1. 新しい表示のカスタマイズを押す
2. パスのパターンに/issues/*を入力する。
3. 挿入位置を全てのページのヘッダにする。
4. 種別をJavaScriptにする。
5. コードに下記コードを入力する。

$(document).ready(function () {
    var querieBtns = $('<div class="querieBtns" style="margin:10px 0;"></div>');
    var querieCnt = 0;
    var colors = new Array();
    var txtColors = new Array();
    colors.push('#2780E3');
    txtColors.push('#ffffff');
    colors.push('#3FB618');
    txtColors.push('#ffffff');
    colors.push('#9954BB');
    txtColors.push('#ffffff');
    colors.push('#FF7518');
    txtColors.push('#ffffff');
    colors.push('#FF0039');
    txtColors.push('#ffffff');
    colors.push('#373a3c');
    txtColors.push('#ffffff');
    $('.query').each(function (index, element) {
        var tgt = $(this).clone();
        tgt.css('display', 'inline-block');
        tgt.css('padding', '10px');
        tgt.css('border-radius', '5px');
        tgt.css('margin', '10px');
        tgt.css('box-shadow', '5px 5px 6px 3px #808080');
        tgt.css('color', txtColors[querieCnt % txtColors.length]);
        tgt.css('background-color', colors[querieCnt % colors.length]);
        if (tgt.hasClass('selected')) {
            tgt.css('border', '5px solid #3E5B76');
        }
        querieBtns.append(tgt);
        querieCnt++;
    });
    if (querieCnt != 0) {
        $('#content').before(querieBtns.clone());
        $('.pagination').before(querieBtns.clone());
    }
});

完成イメージ

解説

サイドバーにあるカスタムクエリエレメントをループで取得しながら、エレメントをクローンして、ボタン風に改造するためのCSSを付加して、ページの上下に配置している。カスタムクエリがたくさんあるとページがうるさくなるが、5～6個くらいなら実用には耐えるかと思われる。

所感

原色系の色を6色用意して、6個以上のカスタムクエリがあった場合には色がループするように考慮してある点が工夫した点。
デザイン的な面ではボタンにCSSでシャドー付けたり、角丸にしたりしてBootstrap風ボタンに仕上げた点かな。
スマホでもそれなりに押しやすいので、お勧めです。