akabekobeko/redmine-theme-minimalflat2

テキスト系のカスタムフィールドがテーブルで表示すると**寄せになっている

uma-blue opened this issue · 7 comments

uma-blue commented

タイトルままです。
仕様ではないならば、左寄せを希望します。

【追伸】
いつもありがたく使わせて頂いております。
感謝します。

akabekobeko commented

@uma-blue

現象を確認しようとしたのですが、以下の手順で再現しませんでした。

  1. 本リポジトリの docker イメージで Redmine を起動 (v3.4 系)
  2. Redmine 管理画面から Issues に Text のカスタムフィールドを追加 ...X とします
  3. Issue を追加して X を入力
  4. Issue を確認 ...X は他のフィールドと同様に表示される

表題にある「テーブルで表示する」という状態はどのような操作でおこなえるでしょうか？私の再現手順では単に Issues へ Text のフィールドが追加されるだけで HTML の table となるわけではないようです。

再現手順と**寄せが発生している状態のスクリーンショットをいただけると助かります。

uma-blue commented

申し訳ないです、"テキスト系"という記述は語弊がありました。
正しくは"長いテキスト"型です。

issues でオプションを使って表示フィールドに追加するとclass="cf_ text"でチケット一覧のテーブルに表示されます。

現状はminimalflat2 下の./stylesheets/application.css に下記を追記することで解消させています。

table.issues td { text-align: left; }

スクショは...すみません、ちょっとすぐに手元環境で再現させるのが難しいのでお時間下さい。

uma-blue commented

スクリーンショットです。
赤丸囲い箇所が該当です。
minimalflat2_2018-11-9 14-47

以上で事足りますでしょうか？

akabekobeko commented

ありがとうございます。

これはカスタムフィールド問題というよりチケット一覧のテーブル CSS の話ですね。Redmine の CSS では

table.list td.id {
  width: 2%;
  text-align: center;
}

が優先されます。これを列ごとに上書きして制御しているようです。例えば

table.list td.name, table.list td.description, table.list td.subject, table.list td.comments, table.list td.roles, table.list td.attachments {
  text-align: left;
}

のように左寄せしているものもあります。そのため異なる寄せが混在しています。このあたりは Redmine 標準 CSS を踏襲しているのですが、よくない設計ですね。

以上を踏まえて修正するとしたら table.list td.name のようにカスタムフィールド列を特定するクラスを指定して text-align: left を上書きすることでしょうか。Redmine 本家の設計**を踏襲しつつ直す方法となります。

CSS を見ると center になるものは短くなることが予想できるものに限られているため、カスタムフィールドのように目的が明確でない (Redmine ではなく定義したユーザーが決める) ものであればご指摘のとおり既定値といえる left のほうが適切ですね。

カスタムフィールドであることを特定できる CSS クラス名があれば left にするよう、対応します。

  • 👍1
akabekobeko commented

補足。table.list td ではなく

table.issues td { text-align: left; }

で左寄せになるのは

現状はminimalflat2 下の./stylesheets/application.css に下記を追記することで解消させています。

の追記位置が table.list td より後であるためと予想されます。追記とあるため、おそらく末尾に書いているのではないかと。Redmine の CSS 的には table.list td がリスト系全般のテーブル定義を決めており、前述のように各列ごとの td で寄せを上書きしています。

よって table.list td ではなく table.issues td.XXXX を追加するのが既存セルに影響を与えず修正する方法となります。また、そのようにする予定です。

  • 👍1
uma-blue commented

ありがとうございます。
そして、こちらの雑な追記対応、お恥ずかし限りです。///
早速修正しておきます。
重ねてありがとうございます。

akabekobeko commented

覚書。

テキストと長いテキストを Issues で有効にすると以下の td が出力される。

<td class="cf_1 string">SampleSample</td>
<td class="cf_2 text"><p>LongTextLong TextLong TextLong TextLong TextLong Text</p></td>

cf_N が Custom Field に相当して N に連番が振られる。続けて種別がそれぞれ string = テキスト、text = 長いテキスト。

string は <input> になるため単一行の短いテキスト向け。text は <textarea> で複数行の長いテキストを書くためのものらしい。今回は text のみ左寄せにする。stirng に長い文字列が指定される可能性もあるが、入力形式的に例外であろう。

CSS の指定は以下でゆける。

table.list td[class^='cf_'].text, table.list td[class*=' cf_'].text {
  text-align: left;
}

cf_N と種別の順序が入れ替わることはないと思うが、念の為そうなってもよいようにしておく。この指定で Custom Filed の text のみ左寄せとなり string は既定値の center が維持されることを確認。

これを修正として採用する予定。