[dev] trac の milestone のカスタマイズ
せっかくなので、trac 続きで id:kanu-orz:20100301:1267374237 のコメントの件。
XML のコメントが表示されてないと思ったら、不具合らしい？ (idea:16978 等) 「続きを読む」ではなくて、日付のところにあるリンクを使うと、XML コメントが表示されます。
まずは、css の作成先。特定のプロジェクトにのみ適用するコンテンツファイルは、trac の各プロジェクトにある htdocs というディレクトリに配置します。多くの人はプロジェクトのロゴ画像をここに配置していると思います。
ここに、追加の css を作成します。
table.progress td.red { background: #ffcccc } table.progress td.blue { background: #99ccff } table.progress td.orange { background: #ffcc99 } table.progress td.violet { background: #cc99ff }
ファイル名は roadmap_color.css とでもしましょう。これを読み込む処理は、同じく各プロジェクトにある templates というディレクトリになります。おそらく、site.html というファイルが最初からあると思いますので、このファイルを編集します。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" py:strip=""> <!--! Custom match templates go here --> <head py:match="head" py:attrs="select('@*')"> ${select('*|comment()|text()')} <py:if test="req.environ['PATH_INFO'] == '/roadmap' or req.environ['PATH_INFO'].startswith('/milestone/')"> <link rel="stylesheet" type="text/css" href="${href.chrome('site/roadmap_color.css')}" /> </py:if> </head> </html>
詳しいことは、Genshi http://genshi.edgewall.org/ のドキュメントでも見てもらうとして、内容としては /roadmap または /milestone/* がリクエストされた場合のみ、roadmap_color.css を読み込むように link タグを追加します。おそらく、href=roadmap.css の link タグを検出して追加するほうがベターだとは思います。
ついでにメモがてら、チケット画面の属性というグループを折りたためるようにする設定は、
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" py:strip=""> <!--! head タグの中身をカスタマイズします --> <head py:match="head" py:attrs="select('@*')"> ${select('*|comment()|text()')} <!--! roadmap.css が読み込まれる場面に、着色用のスタイルシートを追加する --> <py:if test="req.environ['PATH_INFO'] == '/roadmap' or req.environ['PATH_INFO'].startswith('/milestone/')"> <link rel="stylesheet" type="text/css" href="${href.chrome('site/roadmap_color.css')}" /> </py:if> <!--! /ticket/* の場合に、properties を折りたためるようにする --> <py:if test="req.environ['PATH_INFO'].startswith('/ticket/')"> <link rel="stylesheet" type="text/css" href="${href.chrome('site/ticket_properties.css')}" /> <script type="text/javascript" src="${chrome.htdocs_location}js/folding.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $("#properties legend.foldable").enableFolding(false); $("#properties").toggleClass("collapsed"); }); </script> </py:if> </head> <!--! head タグのカスタマイズここまで --> <!--! /ticket/* の場合に、properties を折りたためるようにするため、legend タグに foldable クラスを設定 --> <py:if test="req.environ['PATH_INFO'].startswith('/ticket/')"> <legend py:match="legend" py:attrs="select('@*')" class="foldable">${select('*|comment()|text()')}</legend> </py:if> </html>
こんなかんじでやっています。こちらも、必要最低限の legend タグに限定したほうがよいはずですが、適当なので（・ω・
ticket_properties.css を書くのを忘れていました。検索画面のコピーですがっ
fieldset legend.foldable :link, fieldset legend.foldable :visited { background: url(/trac-common/expanded.png) 0 50% no-repeat; border: none; color: #666; font-size: 110%; padding-left: 16px; } fieldset legend.foldable :link:hover, fieldset legend.foldable :visited:hover { background-color: transparent; } fieldset.collapsed legend.foldable :link, fieldset.collapsed legend.foldable :visited { background-image: url(/trac-common/collapsed.png); } fieldset.collapsed table, fieldset.collapsed div { display: none }
