Improve ParameterSet table UI #729
Conversation
yusiro-bps
force-pushed
the
feature/impove_parameter_sets_table
branch
5 times, most recently
from
99a948c
to
2899433
Compare
| @@ -1,4 +1,5 @@ | |||
| class ParameterSetsListDatatable | |||
| HUE_MAX = 215 | |||
There was a problem hiding this comment.
HSLでセルの色を指定するようにしました。
値が大きいものから小さいものへ、赤(0)から青(215)に変化するようにしています(青が濃すぎると数値が見辛くなるので適当に215を最大値として設定しています)。
There was a problem hiding this comment.
ありがとうございます。セルへの色付けイメージ通りです。
色をもう少し全般的に透明度をつけて薄い色にしていただけますか？背景がうっすらと色付けされているくらいで良いかと思います。
There was a problem hiding this comment.
コメントありがとうございます。hslaの透明度を0.3で設定してみました。
| @@ -40,28 +41,28 @@ def sort_by | |||
| end | |||
|
|
|||
| def data | |||
| data = [] | |||
There was a problem hiding this comment.
列の並び替え後にサーバ側とフロント側で並び順の整合性を取るため、dataの形を以下のような形に変えています。
"data": [
{
"Checkbox": "...",
"Progress": "...",
"ParamsSetID": "...",
"Updated_at": "...",
},
{
"Checkbox": "...",
"Progress": "...",
"ParamsSetID": "...",
"Updated_at": "...",
},
]There was a problem hiding this comment.
Simulatorが持つパラメータの定義として "Checkbox", "Progress"などの文字をとることも原理的にはできるので、ここを重複しないようにできないでしょうか？（"Progress" はパラメータの定義としてありうるかもしれないので）
パラメータの定義は letter, number, underscore しかとることができないので、"Progress" を "-Progress" などのようにすれば一意性を保証できます。
There was a problem hiding this comment.
ご指摘ありがとうございます。固定カラムは"-"を先頭につけるように修正しました。
| tmp << @view.raw('<span class="ps_updated_at">'[email protected]_to_now_in_words(ps.updated_at)+'</span>') | ||
| tmp.store('Progress', @view.raw(progress)) | ||
| tmp.store('ParamSetID', @view.link_to( @view.shortened_id_monospaced(ps.id), @view.parameter_set_path(ps), data: {toggle: 'tooltip', placement: 'bottom', html: true, 'original-title': _tooltip_title(ps)} )) | ||
| tmp.store('Updated_at', @view.raw('<span class="ps_updated_at">'[email protected]_to_now_in_words(ps.updated_at)+'</span>')) | ||
| @param_keys.each do |key| | ||
| if @base_ps |
There was a problem hiding this comment.
List of Similar Parameter Sets のテーブルでは、数値に色がつくようなので、セルに色はつけていませんが、必要であればお知らせください。
yusiro-bps
force-pushed
the
feature/impove_parameter_sets_table
branch
from
2899433
to
592a4de
Compare
yusiro-bps
force-pushed
the
feature/impove_parameter_sets_table
branch
from
592a4de
to
53c229b
Compare
| @@ -232,3 +232,10 @@ input[type="checkbox"] { | |||
| .alert { | |||
| padding: 10px; | |||
| } | |||
|
|
|||
| table.dataTable.fixed_thead thead th { | |||
There was a problem hiding this comment.
https://datatables.net/extensions/fixedheader という拡張機能があるのですが、それを使うと、チェックボックス全選択が効かなくなったり、別タブを開いた際にヘッダーが残るようだったので、CSSで固定しています。
| url: $(selector).data('source'), | ||
| data: function (d) { | ||
| const data = JSON.parse(localStorage.getItem(`DataTables_${$(selector)[0].id}_`+window.location.pathname)); | ||
| d.sort_column = data ? data['order'][0][0] : null; |
There was a problem hiding this comment.
列並び替えのあと、列ソートした際にサーバ側でフロント側で指定した列を識別できるようにソート対象列のindexを新しくパラメータとして追加しています。
| @@ -40,28 +41,28 @@ def sort_by | |||
| end | |||
|
|
|||
| def data | |||
| data = [] | |||
There was a problem hiding this comment.
Simulatorが持つパラメータの定義として "Checkbox", "Progress"などの文字をとることも原理的にはできるので、ここを重複しないようにできないでしょうか？（"Progress" はパラメータの定義としてありうるかもしれないので）
パラメータの定義は letter, number, underscore しかとることができないので、"Progress" を "-Progress" などのようにすれば一意性を保証できます。
refs: #716
対応内容