Redmineのチケット一覧を右クリックで表示されるコンテキストメニューを調整する(View customize plugin)

redmine のチケット一覧とかに出るポップアップメニューのサブメニューが出る位置がもうちょっと賢くならないかなぁ。項目が多いのが良くないんだけど、上の方の選択メニューが選べない。または出す項目を絞りたい。どうせバージョンとステータスぐらいしか変えないし。
— ばしゅら (@basyura) January 13, 2016

確かにカスタムフィールドが多かったりすると、サブメニューが画面に収まらなくて、とても選択しづらくなります。

なぜこういったことがおこるかというと、コンテキストメニューを表示する際に、選択位置を起点として、

下方向に表示して、画面上で収まれば下方向に表示
おさまらなければ、上方向に表示

としているようで、ここで決定した方式をサブメニューにも適用しているため、サブメニューが画面からはみ出す可能性が高くなってしまっています。上へ上へ/下へ下へと伸びててしまうイメージです。

サブメニュー表示の際に、画面から切れない位置に都度調整すればよいのですが、それはそれで実装が面倒なので、CSSで調整することによって切れる可能性を減らせないかと考えてみました。

調整方法

上へ上へと延びてしまうのが切れてしまう要因なので、上方向にコンテキストメニューを表示した際には、サブメニューは下方向にしてみます。

結構良い感じになった気がします。

あと、サブメニューで出す項目数が多いと、どうしても切れてしまいかねないので、サブメニューで表示する項目の高さの上限を設定し、それ以上の場合はスクロールバーを出すようにします。

全てのシチュエーションで切れずに選択可能とはならないかもしれませんが、かなり操作しやすくなったのではと思います。

設定内容

今回の調整を、View customize plugin使って実現してみます。

Path pattern

対象のパスはチケット一覧となります。

/issues$

Code

Type:StyleSheetとして下記を設定します。

/* 上方向に表示している時でも、サブメニューは下方向へ */
#context-menu.reverse-y > ul > li.folder > ul {
    top: 0;
    bottom: auto;
}

/* サブメニューの高さを固定にして、スクロールを出すように */
#context-menu > ul > li.folder > ul {
    max-height: 200px;
    overflow-y: auto;
}