Redmine テーマ minimalflat2 v1.3.0 リリース
Redmine 3.4 がリリースされたので minimalflat2 も対応した。
以下、開発メモ。
Stylus 定義を標準 application.css にあわせる
minimalflat2 の CSS は Stylus で記述して application.css と responsive.css へコンパイルしている。Stylus の代表的な機能には透過的な変数参照、Mix-In、クラスのネストがあってこれまで便利に利用してきたのだけど本バージョンからネストは控え目にした。
ネストによってクラス定義の冗長さは軽減される。例えば
#top-menu {background: #3E5B76; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;}
#top-menu ul {margin: 0; padding: 0;}
#top-menu li {
float:left;
list-style-type:none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
white-space:nowrap;
}のように同一 id やクラスを親としているものは
#top-menu {
background: #3E5B76; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;
ul {
margin: 0; padding: 0;
}
li {
float:left;
list-style-type:none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
white-space:nowrap;
}
}のようにネスト可能。ただし徹底するほどに標準 application.css と定義位置は乖離。差分比較して追従するのが難しくなる。また、ときには位置の依存関係が崩れることで意図せぬ問題を引き起こす。
以上の理由からアイコン フォント用の疑似要素などを除き、標準 application.css の定義順へならうことにした。Redmine のバージョン更新があれば最後に対応したものと最新版の application.css を差分比較して部分対応すればよい。従来もそうしていたのだが今回の変更によりこれが更に容易となった。
Redmine v3.4 の Vagrant Box
テーマ開発における Redmine 上の動作確認は onozaty さん が提供している Vagrant Box を利用している。今回も Redmine v3.4 版が公開されたので、それを Vagrantfile へ指定するようにした。
Twitter 上で Vagrant Box リリースされないのかな？とつぶやいていたら迅速に対応していただけた。非常にありがたい。
Redmine v3.4.0 から間隔が空いたのはすぐに致命的なバグを修正した v3.4.1 がリリースされたので、これを待っていたのかもしれない。
Redmine v3.4 プロジェクト一覧の謎
minimalflat2 では theme.js によりプロジェクト一覧をツリー上に開閉する機能がある。しかし Redmine v3.4 へ更新したら、これがうまく動作しない。そもそもプロジェクト名と説明文が横並びになったりする。
もしかして HTML の DOM 構造が大幅に変更された？標準テーマではどうだろう？と試したら再現した。これは application.css にある
#projects-index {
column-count: auto;
column-width: 400px;
-webkit-column-count: auto;
-webkit-column-width: 400px;
-webkit-column-gap : 0.5rem;
-moz-column-count: auto;
-moz-column-width: 400px;
-moz-column-gap : 0.5rem;
}という定義が原因だった。
複数カラムでグリッド状に表示するためのものらしいけど responsive.css のほうは従来どおり縦一列。表示幅が広ければグリッドで、ということなのだろう。しかしプロジェクト名に対して説明文が回り込んでしまうなど好ましくない表示のされかたをする。また minimalflat2 としてはツリー表示によりプロジェクト一覧を整理する方針なのでグリッドにしなくても冗長さはおさえられる。
以上の理由から、この新しい定義は無効化することにした。プロジェクト一覧は表示幅にかかわらず従来どおり常に縦一列になる。
モバイル用メニューのアイコン フォント対応強化
Redmine v3.4 ではアイコン画像を表示する DOM 要素に icon- を接頭辞とするクラスが統一的に指定されるようになった。指定されるだけで CSS に画像指定のないものも多数あるのだが minimalflat2 としてはなるべくこれらにアイコン フォントを割り当てるようにした。
もっとも目立つのはモバイル用メニューのアイコンだろう。サイド メニューから移動されてきた項目以外はのきなみ icon- 接頭辞をもつため、かなり華やかになった。
簡易テスト用 HTML 更新
Vagrant なのか Redmine の設計なのか分からないが、VM のテーマ ディレクトリーと同期している場所で CSS が更新されても Redmine に反映されない。Web ブラウザーのリロード、スーパー リロードをしてもダメで、しかたなく vagrant reload している。
しかしこれは非常に時間がかかる。そのため Redmine の代表的な画面を静的 HTML として保存し、そこにコンパイルされた application.css などを読ませるようにして簡易テストできるようにしている。
今回も Redmine v3.4 用に HTML を保存し直して更新。また従来のリポジトリー構成では
src/
├── debug_images/
├── favicon/
├── fonts/
├── images/
├── javascripts/
├── stylesheets/
├── stylus/
└── *.htmlのように src/ 直下に全ファイルが並んでいて stylus のように開発で頻繁に書き換えるものと、静的でほとんど更新のないものが区別しにくかった。そこで
src/
├── assets/
│ ├── debug_images/
│ ├── favicon/
│ ├── fonts/
│ ├── images/
│ ├── stylesheets/
│ └── *.html
└── stylus/のように静的リソースは assets/ へ置くようにした。最近の Web フロントエンドや Electron アプリ開発でもこのようにしている。Stylus がコンパイルした CSS と Source Maps は assets/stylesheets/ へ出力される。
assets/ がテーマとして動作するための構成をもったディレクトリー。リリース用イメージ生成も、ここにあるものから必要なファイルをコピーすればよい。動的なファイルは Stylus のコンパイル結果ぐらいなので cpx 用のフィルターも書きやすくなった。