Tracのインタフェースでのデザインをカスタマイズするポイント

前の記事「カッとなってTracのインタフェースをカスタマイズするJavaScriptを公開してみる」の続きです。

以下に、変換後のHTMLのに付けられるid名をメモしておきます。

ヘッダー部分(<div id=”metanav”>~</div>内 )

前記事の変換後のHTMLソースを参考にCSSで定義してください。

変換前 変換後 id名(<li><a id=”***”>)
Logout ログアウト metanav_logout
Settings 設定 metanav_settings
Help/Guide ヘルプ metanav_help
About Trac Tracとは metanav_about

デフォルトではログインしてる場合は以下のようにログイン表示部分のliタグにid名がつきます。

ログインユーザー名: hoge
id名:login_hoge

変更例
<li class="first">logged in as hoge</li>

<li id="login_hoge" class="first">hogeがログインしています</li>

メニュー部分(<di id=”mainnav”>内 )</div>)

変換前 変換後 id名(<li><a id=”***”>)
Wiki Wiki mainnav_wiki
Timeline 作業の流れ mainnav_timeline
Roadmap 進捗状況 mainnav_roadmap
Browse Source ソースを見る mainnav_brouse
View Tickets チケット mainnav_view
New Ticket 新規チケット mainnav_new
Search 検索 mainnav_search
Admin 運営管理 mainnav_admin

アクティブなページには対応するliタグにclass属性で”active”が追加定義されます。

メンバーアイコンの表示

利用ユーザーのIDを trac_design.js に登録して、以下の命名規則のclass名をCSSに定義しておけばアイコン表示を利用できます。
デフォルトでは[ cgfm_doticon_(ユーザー名)]となっています。
(このclass名の変更はJSファイルをいじってください)

class名はTracページ内を検索してこんな感じで付けられます。

例)利用ユーザー: hogeの場合

チケット内に「hoge」の文字列があったら

hoge

<span class="cgfm_doticon_hoge">hoge</span>

チケットをacceptしてたら

hoge *

<span class="cgfm_doticon_hoge_accept">hoge *</span>

これで誰から誰へのチケットなのか、わかりやすくなります。(少し重くなるけども)
もちろんアイコンにしなくて、上記のclass名に対してシンプルにCSSで背景色・文字色の変更するだけでも良いと思います。

こんなTIPSが本当に役に立つのかわからんですが、
同じような境遇になった人の役に立てれば幸い。
(そもそもTracにデザインなんて求めねーよ! なんて言われたらオシマイ)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*