search

arayabrain / MRIAnalysisStudioforMouse

pipeline tool for mouse MRI analysis
GNU General Public License v3.0
6 stars 0 forks source link

[4-1. Add Project] [4-2. Edit Project] 複数画像の選択・移動 #42

Closed itutu-tienday closed 1 year ago

itutu-tienday commented 1 year ago

複数の画像を、右ペインから左ペインへ、選択・移動させたい。

Reactplus-Hao commented 1 year ago
Reactplus-Hao commented 1 year ago

@itutu-tienday

複数の画像を、右ペインから左ペインへ、選択・移動させたい。

Commandキー又はCtrlキーを押下して、対象の画像を選択することで、複数の画像を選択・移動できるという認識で合っていますでしょうか。

itutu-tienday commented 1 year ago

@Reactplus-Hao

Commandキー又はCtrlキーを押下して、対象の画像を選択することで、複数の画像を選択・移動できるという認識で合っていますでしょうか。

はい、ご記載の動作仕様で、お願いいたします。

Reactplus-Hao commented 1 year ago

@itutu-tienday [[4-1. Add Project] [4-2. Edit Project] 複数画像の選択・移動について、対応とテスト実施が完了しました。 お手数ですが、下記のデモ動画をご確認お願い出来ますでしょうか。 https://drive.google.com/file/d/1SPPDJgbEh4Zz8C6KStx8m9YjHDiY9pCY/view?usp=sharing

itutu-tienday commented 1 year ago

@Reactplus-Hao 対応ありがとうございます。

想定している仕様は、基本的には実現されているものと思います。

なおUIに関して、以下 幾つか調整をいただきたい点があります。

■調整要望点 画像のクリック表示の動作と、ctrl(command)+クリック の動作が、競合している様なので、以下に調整いただきたい。

  1. 画像のクリック表示は、ダブルクリックによる表示に変更。
    • 画像をViewer表示する箇所は、すべて同様の動作とする。
  2. 画像レコードのクリック時の挙動について、
    • 画像レコードのシングルクリック時は、選択された単一行をハイライト表示する。
    • 画像レコードのctrl(command)+シングルクリック時は、選択された複数行をハイライト表示する。
    • ※Explorer(Windows) や Finder(Mac) のファイル選択操作に類似した動作。
  3. 画面上部の textbox(project name), radio group(between factor) が、画面右端まで選択可能となっているため、適切な長さへ調整ください。
    • textboxは、左ペインの幅で最大。
    • radio は、label の長さで最大。

上記について、もし技術面などで課題があれば、お知らせください。（簡易な実装方法を検討する） また上記の内容は、別途画面設計書へも反映予定。

Reactplus-Hao commented 1 year ago

KH cảm ơn bên mình, họ đã check hoạt động đang được thực hiện giống với spec mong muốn rồi.

Tuy nhiên, họ muốn nhờ mình chỉnh sửa 1 vài phần về UI giúp

■Phần mong muốn chỉnh sửa: Hoạt động hiển thị khi click để hiển thị ảnh và hoạt động khi ctrl(command) + click đang conflict với nhau. Nên nhờ bên mình chỉnh sửa theo như dưới đây giúp:

1/ Khi double click vào record thì sẽ hiển thị ảnh ・Những chỗ khác để hiển thị Viewer ảnh khác cũng có thao tác giống như vậy (Double click)

2/ Về thao tác khi click record ・Khi single click vào record, thì sẽ hiển thị highlight dòng mà đã được chọn ・Khi nhấn ctrl(command)+ single click vào record ảnh thì sẽ hiển thị highlight nhiều dòng mà đã được chọn ※Thao tác giống với thao tác chọn file trên Explorer(Windows) và Finder(Mac)

3/ Hiện tại đang có thể select phần textbox(project name), radio group(between factor) từ cuối cùng bên phải của màn hình, nên họ muốn mình điều chỉnh lại độ dài của phần select ・textbox thì để max là đến width của khung bên trái ・radio thì để max là đến độ dài của label

Về các phần chỉnh sửa trên, nếu có khó khăn gì về mặt kĩ thuật thì hãy báo cho họ biết (Họ sẽ xem xét cách nào đơn giản hơn)

---> Ngoài ra, các nội dung chỉnh sửa trên họ cũng sẽ note lại vào spec màn hình sau

Reactplus-Hao commented 1 year ago

@itutu-tienday

Image

上記の修正内容は、Add ProjectとEdit Projectページのみで対応するか、それとも、Databaseページでも対応するのでしょうか。

itutu-tienday commented 1 year ago

@Reactplus-Hao

画像をViewer表示する箇所は、すべて同様の動作とする。

上記は、Database ページも含む想定でおります。 ※なお Database ページ では、画像のDrug&Drop の機能はないため、以下は除外ください。

画像レコードのctrl(command)+シングルクリック時は、選択された複数行をハイライト表示する。

もし技術面や対応工数面で課題があれば、お知らせください。

linhb273 commented 1 year ago

@Reactplus-Hao 対応ありがとうございます。

想定している仕様は、基本的には実現されているものと思います。

なおUIに関して、以下 幾つか調整をいただきたい点があります。

■調整要望点 画像のクリック表示の動作と、ctrl(command)+クリック の動作が、競合している様なので、以下に調整いただきたい。

  1. 画像のクリック表示は、ダブルクリックによる表示に変更。

    • 画像をViewer表示する箇所は、すべて同様の動作とする。

  2. 画像レコードのクリック時の挙動について、

    • 画像レコードのシングルクリック時は、選択された単一行をハイライト表示する。
    • 画像レコードのctrl(command)+シングルクリック時は、選択された複数行をハイライト表示する。
    • ※Explorer(Windows) や Finder(Mac) のファイル選択操作に類似した動作。

  3. 画面上部の textbox(project name), radio group(between factor) が、画面右端まで選択可能となっているため、適切な長さへ調整ください。

    • textboxは、左ペインの幅で最大。
    • radio は、label の長さで最大。

上記について、もし技術面などで課題があれば、お知らせください。（簡易な実装方法を検討する） また上記の内容は、別途画面設計書へも反映予定。

@itutu-tienday 上記の対応について対応とテスト実施が完了しました。 デモ動画が下記にて共有させて頂きますので、ご確認お願い致します。 Database 画面のデモ動画：https://drive.google.com/file/d/1PQd0dN06dqM9cMIx6-fGLt91uJmCW0KO/view?usp=sharing Add/Edit Project 画面のデモ動画：https://drive.google.com/file/d/1j-SgLxaMy6SpJnIZzPN-Z0xhSeKTYoRp/view?usp=share_link

itutu-tienday commented 1 year ago

@Reactplus-Hao 上の対応で、ほぼ想定する動作に、修正いただいているものと思います。

なお一点、以下の依頼説明が少し曖昧でしたが、

※Explorer(Windows) や Finder(Mac) のファイル選択操作に類似した動作。 現在、右→左 へ複数画像をドラッグ移動する際、ctrlキーを押しっぱなしとする必要がありますが（ctrlを離すと複数選択が解除される）、これをExplorerやFinderに類似して、以下の様な動作とすることは、可能でしょうか？

Reactplus-Hao commented 1 year ago

KH đã check thì thấy hoạt động của phần double click và thao tác drag&drop gần giống như dự định rồi. Tuy nhiên, do lúc trước họ không giải thích rõ yêu cầu nên bị mơ hồ, nên có 1 phần dưới đây cần nhờ mình sửa giúp.

・Khi nhấn ctrl(command)+ single click vào record ảnh thì sẽ hiển thị highlight nhiều dòng mà đã được chọn ※Thao tác giống với thao tác chọn file trên Explorer(Windows) và Finder(Mac)

sanglevinh commented 1 year ago

PR: https://github.com/arayabrain/MRIAnalysisStudioforMouse/pull/55

Reactplus-Hao commented 1 year ago

@itutu-tienday

想定動作 ctrlキー+クリックで、複数選択可能。 ctrlキーを離しても、複数選択は解除されない。 画面上の任意の場所をクリックすると、複数選択は解除される。

上記の対応が完了して、テスト実施しました。 お手数ですが、ご確認お願い致します。

itutu-tienday commented 1 year ago

@Reactplus-Hao

ctrlキー+クリックの件は、修正済みを確認しました。ありがとうございます。

また上記とは別件で、左右のペインのデータが多く、スクロールが必要な場合、下の方のドラッグ＆ドロップが操作不可ですが、対策は想定されていますでしょうか。 ※画面設計資料上は、左右のペイン毎にスクロール可としています。

Reactplus-Hao commented 1 year ago

@sanglevinh KH đã check phần xử lý khi nhấn phím Ctrl + Click đã ok rồi. Tuy nhiên, họ nhờ mình check 1 phần khác dưới đây:

Trong trường hợp data trong khung bên trái và bên phải nhiều và cần scroll, thì hiện tại đang không thể thao tác drag&drop đến phần dưới. Bên mình có đối sách gì để xử lý phần này không ạ? ※Trong spec design màn hình thì mỗi khung bên trái phải đều có thể scroll.

Reactplus-Hao commented 1 year ago

@itutu-tienday

また上記とは別件で、左右のペインのデータが多く、スクロールが必要な場合、下の方のドラッグ＆ドロップが操作不可ですが、対策は想定されていますでしょうか。

上記の件の対策について、左右のペインの高さを固定に設定して、スクロールを表示させるように対応します。 その時、スクロールがある場合、下の方のドラッグ＆ドロップが操作できます。

Reactplus-Hao commented 1 year ago

@itutu-tienday

上記の件の対策について、左右のペインの高さを固定に設定して、スクロールを表示させるように対応します。 その時、スクロールがある場合、下の方のドラッグ＆ドロップが操作できます。

上記の件について、対応とテスト実施が完了しました。 お手数ですが、下記のデモ動画をご確認お願いできますでしょうか。 https://drive.google.com/file/d/15mmTQSvH1CmiyscXEpy5cnGneAqhf8Yb/view