Redmine テーマ minimalflat2 v1.3.5 リリース

2017年11月6日 0 開発 ,

Redmine テーマ minimalflat2 v1.3.5 をリリースした。

Redmine v3.4.3 対応

以下の問題が報告されたので

Redmine v3.4.2 と v3.4.3 の application.css を比較して変更点を反映してから修正しようとした。結果、CSS の差分はこの問題に対するものだけであることが判明。

よって Redmine v3.4.3 対応ついでに、チケット一覧のバージョン条件リストに名前の長いものがあっても省略されず表示するようになった。

マイページ画面の table が見切れる問題の修正

だいぶ前に報告されて放置してた

When “my project” is displayed in 1 column mode, the table protrudes – Issue #117

を修正した。マイページ画面を表示しながら Web ブラウザーの幅を狭めて 1 カラムにすると table が見切れる。標準テーマでは起きないとのことなので調べたら、

  • 標準テーマは body に font-size: 12px を指定している
  • そのため「たまたま」表示幅を狭めても table のコンテンツが収まる
  • minimalflat2 は特別な箇所をのぞき font-size は指定しない設計方針
  • そのため Web ブラウザーの文字サイズによっては table コンテンツがはみ出る = 見切れる

ということがわかった。短絡的に修正するなら標準テーマ同様に bodyfont-size: 12px を指定すれば済む。しかし現在の設計方針はユーザーの文字サイズを維持するためのものであり、ひとつの問題のため変えたくはない。マイページの table 限定で直すことも可能だが、ここだけ文字サイズが小さくなるのも収まりが悪い。

というわけで修正を断ろうとしたのだが、マイページをよく観察すると「ウォッチしているチケット」などの table は表示幅が狭くなったときに横スクロールバーを提供している。HTML の構造としては

<div class="autoscroll">
  <table class="list issues odd-even sort-by-updated-on sort-desc">
  </table>
</div>

こんな感じになっていて、table の親となる <div class="autoscroll">

.autoscroll {
  overflow-x: auto;
  padding: 1px;
  margin-bottom: 1.2em;
  position: relative;
}

となっているおかげでスクロール可能になっていた。ならば「作業時間」などの table もこれを指定すれば?と思うだろう。しかしわざわざ <div class="autoscroll"> が用意されていることから分かるように table へ指定してもダメだ。可変幅の table にしたければスクロールは外周の div が担当しなければならない。

というわけで theme.js 側に以下の関数を定義して実行するようにした。

// The table can be scrolled when "My Page" is displayed in one column
function setupMyPageAutoScroll () {
  $('#my-page table').each(function () {
    var parent = $(this).parent()
    if (parent.hasClass('autoscroll')) {
      return
    }

    $(this).wrap($('<div class="autoscroll"></div>'))
  })
}

<div class="autoscroll"> で囲われていない table 限定で囲いなおしている。これで無事、他の table も横スクロール可能となった。

設計的に一部の table だけスクロール可能になってるのは統一感がなくておかしいため、将来の Redmine では同様の修正が入るかもしれない。その場合でも処理的に誤動作することはないはず。

Redmine テーマ minimalflat2 v1.3.0 リリース

2017年7月16日 0 開発 , ,

Redmine 3.4 がリリースされたので minimalflat2 も対応した。

以下、開発メモ。

Stylus 定義を標準 application.css にあわせる

minimalflat2 の CSS は Stylus で記述して application.cssresponsive.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 用のフィルターも書きやすくなった。

Redmine theme minimalflat2 v1.2.2 release

2016年10月24日 0 開発 , ,

長らく放置していた minimalflat2 を v1.2.2 としてリリースした。

今回の変更点は以下。

大きな変更、というか方針転換として Redmine プラグイン対応がある。

テーマ側で特定のプラグインに対応すると、それらの更新に影響を受けるため避けてきた。しかし何件か PR で対応されたことから考えを改めた。

現在の方針としては

  • 最新の Redmine に対応していること
  • Vagrant の最新 Redmine box で動作確認できること
  • テーマとして対応が容易であること
  • GitHub issues にて要望されること

を満たしたものについては対応することにした。なお、この条件は意外に厳しい。

かの有名な Redmine CMS の対応を要望されたのだが、依存 gem の関係か bundle に失敗、そのまま Redmine を再起動したら 500 error になってしまった。ログを見るに Active Record の参照問題っぽいが、それはテーマ側で修正するものではなく、どうにもならない。

前に Redmine 運用の記事でも書いたが、Redmine プラグインは gem 依存が自身で完結しておらず、うまく解決されないと Redmine 本体がクラッシュする。

要望があっても私の環境で動作確認しないことには対応できないわけで、今のところ gem 未使用なプラグインとか Redmine 最新版に追従できてるものだけサポートという状態である。

放置していたものをリリースすることになったのはこの issueで修正したはずの問題が再報告されたため。

開発者としては commit/push 時点で終わったつもりになっていたけど、それを反映したものをリリースしなければ意味がない。半端に修正したまま放置というのはいかにも無責任である。

ということに気づいたのでリリースとあいなった。

あと、対応するバージョンを決めかねる issue は v.NEXT という Milestone を設定することにした。Redmine でも同じような運用をしているのだが、将来に見送るものはそうであることを明示しておくと issue の状態がわかりやすくなる。