BIZ:ToDoリストの重要度を表す左側の線がなくなっている

[imamura623]

■現象

2.10で表示されていた、BIZ:ToDoリストで重要度を表している左側の赤い縦線が、2.12、2.13でなくなっている。

■原因

テンプレート内で、2.10では重要度に応じてstyle属性の装飾が切り替わっていたが、2.12、2.13では重要度による分岐がなくなっていたため。

■修正内容

CSSに新たにクラスを定義し、重要度に応じて使用するクラスを切り替え、リストの左側に2.10と同様の赤い縦線を表示するよう修正する。

重要度:高の場合は赤い縦線が左側に表示される。

重要度:中の場合は薄い赤線が表示される。

重要度:低の場合は何も表示されない。

■関連情報

元のDescription

​http://sns.openpne.jp/?m=pc&a=page_c_topic_detail&target_c_commu_topic_id=3654より転記

お世話になります。

BizモードにてToDoを入れるところで
重要度を「高」にしても、赤い帯がつかなくなりました。
2.10では、赤い帯がついて目立つようになっていましたが

バグでしょうか？

[nakasone]

以下のような確認を行ったところ再現できました。

■確認ブラウザ

• FireFox2

■確認バージョン

• 2.10.x
• 2.12.x
• trunk

■手順

1. マイホーム→Todo作成
2. Todo編集→重要度を「高」に設定
3. マイホーム→Todo確認
4. 2.10.xではTodoの左に赤い線が入っている、2.11.xとtrunkでは変化がない。

　　

[kiwa]

2.13.2に入れてほしいです

[masabon]

以下のリビジョンで修正しました。

• 2.12 - r7887
• 2.13 - r7888

[kiwa]

CSSに新たにクラスを定義し、重要度に応じて使用するクラスを切り替えるよう修正する。

この修正を行ったことでこのバグがどう改善されたのかがわかりづらいです。descriptionの修正をお願いします。

[masabon]

修正しました。 確認お願いします。

[ogawa]

チェック画像の横位置が揃うようにしてください。

[masabon]

チェック画像の横位置について以下のリビジョンで修正しました。

• r7965(2.12)
• r7967(2.13)

確認お願いします。

[kiwa]

完了したタスクに重要度のラインが表示されません。確認お願いします。

[kiwa]

すいません、早とちりでした。2.10でも完了したタスクには線が表示されていませんでした。

[kiwa]

先に再現画像です

[kiwa]

ブラウザ毎に表示が違います。対応お願いします。いずれもWindowsXP（SP2)で動作確認しました。

!InternetExplorer6

• 優先度低・未完了のタスクに黒い線が入る
• 完了したチケットに灰色の線が入る

Safari3

• 線の入らないタスクのチェックマークの位置が若干左にずれている

Firefox3, Opera9

• タスク毎の区切り線（横線）の左端のほうが切れている

!InternetExplorer7, Firefox1.5

• 特に問題なし。

[masabon]

以下のリビジョンで修正しました。

• r8018(2.12)
• r8019(2.13)

Firefox3とOpera9のタスク毎の区切り線(横線)の左端のほうが切れているのは修正できませんでした。

→takaiさん どうしたらいいでしょう？

[ebihara]

Replying to kiwa: 補足です。

Safari3

• 線の入らないタスクのチェックマークの位置が若干左にずれている

については、テストに使用していたブラウザのキャッシュが残っていたことが原因のようです。

適切に最新の CSS を読み込んでいる状態では、 Windows 版、 Mac 版ともにこの現象は発生しませんでした。

[takai]

本件の問題の解消と併せて、カスタマイズ性を考慮したマークアップ及びスタイル記述を提示します。

【マークアップ】r7887(inc_biz_todo.tpl) のと変更点を示します。

22: ({if $value.memo})
23: <tr({if $value.writer_id != $target_id}) class="someone"({/if})>
24: <td class="({if $value.priority == 1})state1({elseif $value.priority == 2})state2({else})state({/if})"><a href="({t_url m=biz a=do_`$cmd`_home_check_biz_todo})&amp;sessid=({$PHPSESSID})&amp;chid=({$value.biz_todo_id})&amp;is_check=({$value.is_check})"><img src="./skin/default/img/biz/checkbox_nochecked_({if $value.c_member_id == 0})share_({/if})2.gif" alt="" /></a></td>
25: <td class="text">({strip})

40: ({if $value.memo})
41: <tr class="checked({if $value.writer_id != $target_id}) someone({/if})">
42: <td class="state">
43: <a href="({t_url m=biz a=do_`$cmd`_home_check_biz_todo})&amp;sessid=({$PHPSESSID})&amp;chid=({$value.biz_todo_id})&amp;is_check=({$value.is_check})"><img src="./skin/default/img/biz/checkbox_checked_({if !$value.member_id == 0})share_({/if})2.gif" alt="" /></a>
44: </td>
45: <td class="text">({strip})

• 上記23～24行目を、下記23～26行目に変更
• 上記41～44行目を、下記43～46行目に変更

22: ({if $value.memo})
23: <tr class="({if $value.priority == 1})priHigh({elseif $value.priority == 2})priMiddle({else})priLow({/if})({if $value.writer_id != $target_id}) someone({/if})">
24: <td class="state">
25: <p><a href="({t_url m=biz a=do_`$cmd`_home_check_biz_todo})&amp;sessid=({$PHPSESSID})&amp;chid=({$value.biz_todo_id})&amp;is_check=({$value.is_check})"><img src="./skin/default/img/biz/checkbox_nochecked_({if $value.c_member_id == 0})share_({/if})2.gif" alt="" /></a></p>
26: </td>
27: <td class="text">({strip})

42: ({if $value.memo})
43: <tr class="checked({if $value.priority == 1}) priHigh({elseif $value.priority == 2}) priMiddle({else}) priLow({/if})({if $value.writer_id != $target_id}) someone({/if})">
44: <td class="state">
45: <p><a href="({t_url m=biz a=do_`$cmd`_home_check_biz_todo})&amp;sessid=({$PHPSESSID})&amp;chid=({$value.biz_todo_id})&amp;is_check=({$value.is_check})"><img src="./skin/default/img/biz/checkbox_checked_({if !$value.member_id == 0})share_({/if})2.gif" alt="" /></a></p>
46: </td>
47: <td class="text">({strip})

• 23行目：tr要素にpriorityのクラス名を振りました
• 25行目：p要素で包含し、このp要素のborder-leftで本件の『左側の線』を表示しています
• 24～26行目：1行に書かれていたため改行しました
• 43行目：todoリストに合わせて、checkedリストも23行目と同様にしました
• 45行目：25行目と同様です

【スタイル】xhtml_style.php

/*==============================================================================
 * 32. bizSideTodoList（BIZ用Todoリスト）
 *----------------------------------------------------------------------------*/
#Body .bizSideTodoList {
	width: 220px;
	margin: 10px 5px;
	border: 1px solid #<?php echo $colors[1]; ?>;
}
#Body .bizSideTodoList td {
	border-width: 1px 0 0;
}
.bizSideTodoList .block {
	padding: 5px;
}
.bizSideTodoList textarea {
	width: 98%;
}
.bizSideTodoList tr.someone {
	background: #<?php echo $colors[6]; ?>;
}
.bizSideTodoList tr.checked {
	color: #999999;
}
.bizSideTodoList td.state {
	width: 38px;
	vertical-align: top;
}
.bizSideTodoList tr.priLow td.state p {
	padding-left: 4px;
	border-left: 0;
}
.bizSideTodoList tr.priMiddle td.state p {
	padding-left: 0;
	border-left: 4px solid #ff8080;
}
.bizSideTodoList tr.priHigh td.state p {
	padding-left: 0;
	border-left: 4px solid #ff0000;
}
.bizSideTodoList tr.checked td.state p {
	padding-left: 4px;
	border-left: 0;
}
.bizSideTodoList td.operation {
	width: 16px;
	vertical-align: top;
}
.bizSideTodoList td.operation a {
	display: block;
	width: 14px;
	margin-top: 2px;
}

/*==============================================================================
 * 33. bizSideScheduleList（BIZ用スケジュールリスト） 
 *----------------------------------------------------------------------------*/
...

ソースをコメントで示してしまい申し訳ありませんが、この修正をお願いします。

[ebihara]

修正引き受けます。

[ebihara]

以下のリビジョンで comment:20 の takai さんの修正を適用しました。

• 2.12.x - r8038
• trunk - r8039

[takai]

r8038, r8039共に comment:22 の修正が不十分です。

comment:20 で示した修正すべき点

• 【マークアップ】r7887時点での23～24行目
• 【マークアップ】r7887時点での41～44行目
• 【スタイル記述】32. bizSideTodoList（BIZ用Todoリスト）部

comment:22 で修正された点

• 【スタイル記述】32. bizSideTodoList（BIZ用Todoリスト）部

不十分な点

• 【マークアップ】r7887時点での23～24行目
  • 修正後23行目：priLow と記述すべきところが priRow と記述されています
• 【マークアップ】r7887時点での41～44行目
  • 修正されていません

再修正、あるいは修正が不要と思われるのであればその旨の説明をお願いします。

[ebihara]

指摘事項についてコメントします。

• 【マークアップ】r7887時点での23～24行目
  • 修正後23行目：priLow と記述すべきところが priRow と記述されています

これは誤りでした。修正します。

• 【マークアップ】r7887時点での41～44行目
  • 修正されていません

こちらについてですが、チェック済み ToDo? リストについては、2.10 以前から重要度を表す線が表示されない実装になっているため、そちらにあわせました。

本件は「ToDoリストの重要度を表す左側の線がなくなっている」という現象ですので、 2.10 においてもともと線が表示されない箇所を線が表示されるように変更する理由はなく、取り込みをおこないませんでした。

[ebihara]

priLow を priRow としてしまっていた箇所については、

• 2.12.x - r8042
• trunk - r8043

で修正しました。

[takai]

Replying to ebihara:

本件は「ToDoリストの重要度を表す左側の線がなくなっている」という現象ですので、 2.10 においてもともと線が表示されない箇所を線が表示されるように変更する理由はなく、取り込みをおこないませんでした。

comment:20 では!ToDoリストとCheckedリストのマークアップ修正を示していますが、線の表示といった見栄えに関してはCSSで制御しています。

comment:11 で仰られているように見栄えを統一させるためにはCheckedリストのマークアップ修正も必要になります。

修正後43行目に記述しているpriorityのクラス名についてですが、これはユーザ（オーナー）に対してのカスタマイズ性を考慮したものであって、comment:14 の内容を受けた修正ではありません。

43: <tr class="checked({if $value.priority == 1}) priHigh({elseif $value.priority == 2}) priMiddle({else}) priLow({/if})({if $value.writer_id != $target_id}) someone({/if})">
44: <td class="state">
45: <p><a href="({t_url m=biz a=do_`$cmd`_home_check_biz_todo})&amp;sessid=({$PHPSESSID})&amp;chid=({$value.biz_todo_id})&amp;is_check=({$value.is_check})"><img src="./skin/default/img/biz/checkbox_checked_({if !$value.member_id == 0})share_({/if})2.gif" alt="" /></a></p>
46: </td>

改めて、43～46行目(変更行は43, 45行目)の修正をお願いします。また、私に誤解があるようでしたらご指摘お願いします。

[ebihara]

Replying to takai:

指摘事項について了解しました。早とちりしてしまいすいません。

以下のリビジョンで修正したのでご確認ください。

• 2.12.x - r8050
• trunk - r8051

[kiwa]

以下のブラウザで確認しました。問題ありません

確認ブラウザ

WindowsXP(SP2)

• !InternetExplorer6
• !InternetExplorer7
• Firefox1.5
• Firefox3
• Opera9
• Safari3