マイルストーンのプログレスバーをカスタマイズする
前回からずいぶんと時間が経ちましたつづきです。(激しく申し訳ない)
前回は永遠とQueryChartの説明をしましたが皆さん試してみましたか？
チケットに手を入れる必要があるので躊躇ってやっていない人も多いと思います。
さて今回はチケットに手を入れなくても出来る、マイルストーンのプログレスバーをカスタマイズについてです。
プログレスバーをカスタマイズ
Tracのマイルストーンビューは結構悲しくて、デフォルトでは「解決済み」と「未解決」を二色で塗り分けて表示しているだけです。
0.11からワークフローのカスタマイズも可能になり、色々な状況を設定可能になりましたがTracのwiki(TracIni#milestone-groups-section)に書かれている内容はイマイチ良く分かりません。
ワークフローも0.10とは違い、acceptとassignが明確に分けて管理されるようにもなりました。
ならばマイルストーンのプログレスバーも、acceptとassignを色分けして出ると少し幸せになれるはず。
本来ならば、まずはcssの修正を行うのですが、Trac Lightningの2.4.2にはThemeプラグインが入っているので、管理コンソールのTheme Customize: Advanacedの部分に
table.progress td.red { background: #ffcccc } table.progress td.blue { background: #99ccff } table.progress td.orange { background: #ffcc99 } table.progress td.violet { background: #cc99ff }
を追加します。
そしてtrac.iniをメモ帳以外で開いて以下のセクションを追加します。
[milestone-groups] accepted = accepted accepted.css_class = red accepted.label = 作業中 accepted.order = 2 closed = closed closed.label = 完了 closed.order = １ closed.overall_completion = true closed.query_args = group=resolution new = new new.css_class = open new.label = 未着手 new.order = 4 assigned = assigned,reopened assigned.css_class = blue assigned.label = 割当済 assigned.order = 3
これでプログレスバーはこんな感じに表示されるようになったはずです。
完成形
前回のQueryChartの表示をマイルストーンビューで設定すると・・・
おぉ〜！進捗が何となく可視化された気がします。
同様に右側に表示されるxx別チケットのステータスのプログレスバーも同じ色づけをされるので非常に状況を把握しやすくなるはずです。
地味で何に使うか難しかったマイルストーン画面もこれで進捗確認用として使えそうです。
次回予告
さて次回は前回のQueryChartと今回のプログレスバーを使って、更に作業の進捗を確認しやすいようにワークフローの修正サンプルについて書きたいと思います。
補足
一部訂正・訂正有り
Themeプラグインが入っていないTracLightningや素のTrac場合には直接Trac本体のcssに手を入れます。ると全てのプロジェクトに反映するので楽です。
Trac Lightningの2.4系の場合 %TracLightning%\\python\Lib\site-packages\Trac-0.11.5.ja1-py2.5.egg\trac\htdocs\cssにある roadmap.css を修正ます。*1
21行目付近からプログレスバー関連の設定があるので以下を追記します。
table.progress td.red { background: #ffcccc }
table.progress td.blue { background: #99ccff }
table.progress td.orange { background: #ffcc99 }
table.progress td.violet { background: #cc99ff }
<||
これでThemeプラグインで指定したのと同じ状態になります。
<span style="color:#FF0000;"><追加></span>
プロジェクト毎にcssをカスタマイズしたい場合には、site.htmlを用意して対処しましょう。
