要件
- 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がインストールされている前提での設定手順
-
新しい表示のカスタマイズを押す - パスのパターンに
/issues/*を入力する。 - 挿入位置を
全てのページのヘッダにする。 - 種別を
JavaScriptにする。 - コードに下記コードを入力する。
$(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風ボタンに仕上げた点かな。
スマホでもそれなりに押しやすいので、お勧めです。