Grid-like session list (timetable / favorites) #693

ked4ma · 2024-08-20T18:08:50Z

Issue

close Make TimetableList grid-like for horizontal terminals #658

Overview (Required)

Show grid-like list when device has wide width screen (e.g. foldable, rotated)

Links

Screenshot (Optional if screenshot test is present or unrelated to UI)

Before	After

Movie (Optional)

Before	After
Screen_recording_20240821_032012.mp4	Screen_recording_20240821_030209.mp4
Screen_recording_20240821_032105.mp4	Screen_recording_20240821_030629.mp4

github-actions · 2024-08-20T18:19:24Z

Snapshot diff report

File name	Image
TimetableScreenTest[ TimetableScreen - wh en the current date is 2024-09-13 - it s hould show timetable items for Conferenc eDay2]_compare.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - input search word t o TextField - it sho uld show search word and filtered items] _compare.png
SearchScreenTest[Sea rchScreen - when dev ice is tablet - it s hould no timetable i tems are displayed]_ compare.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter categor y chip click - when click category Jetpa ck Compose en - it s hould selected categ ory Jetpack Compose en]_compare.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter day chi p click - when click conference day 2 - it should selected d ay 2]_compare.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter languag e chip click - when click language JAPAN ESE - it should sele cted language JAPANE SE]_compare.png
TimetableScreenTest[ TimetableScreen - wh en the current date is 2024-09-12 - it s hould show timetable items for Conferenc eDay1]_compare.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter languag e chip click - when click language ENGLI SH - it should selec ted language ENGLISH ]_compare.png
TimetableScreenTest[ TimetableScreen - wh en server is operati onal - it should sho w timetable items]_c ompare.png
TimetableScreenTest[ TimetableScreen - wh en device is tablet - it should show tim etable items]_compar e.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter categor y chip click - when click category Other en - it should sele cted category Other en]_compare.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter day chi p click - when click conference day 1 - it should selected d ay 1]_compare.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter languag e chip click - when click language MIXED - it should selecte d language MIXED]_co mpare.png
TimetableScreenTest[ TimetableScreen - wh en server is operati onal - click confere nce day2 tab - it sh ould change displaye d day]_compare.png
TimetableScreenTest[ TimetableScreen - wh en the current date is 2024-09-11 - it s hould show timetable items for Conferenc eDay1]_compare.png
TimetableScreenTest[ TimetableScreen - wh en server is operati onal - scroll timeta ble - it should firs t session is not dis played]_compare.png
SearchScreenTest[Sea rchScreen - when dev ice is tablet - inpu t search word to Tex tField - it should s how search word and filtered items]_comp are.png
SearchScreenTest[Sea rchScreen - when ser ver is operational - when filter categor y chip click - when click category App A rchitecture en - it should selected cate gory App Architectur e en]_compare.png
TimetableScreenTest[ TimetableScreen - wh en server is operati onal - click first s ession bookmark - it should show bookmar ked session]_compare .png
FavoritesScreenTest[ FavoritesScreen - wh en device is tablet - it should show tim etable items]_compar e.png
KaigiAppTest[KaigiAp p - when app is star ting - it should sho w timetable items]_c ompare.png

takahirom · 2024-08-21T02:26:06Z

I think we should run a test for tablet devices. Could you try implementing this?
setQuorifier(RobolectricDeviceQualifiers.MediumTablet)

ked4ma · 2024-08-21T03:19:34Z

@takahirom
Thanks for your information!
I'm going to try it after adjusting detail layout (unnecessary spaces at bottom of cards).
(but I didn't understand how to change device, so it's helpful for me 🙇 )
Please wait until implement tests!! 🙏 🙏

github-actions · 2024-08-21T10:57:56Z

Detekt check failed. Please run ./gradlew detekt --auto-correct to fix the issues.

ked4ma · 2024-08-21T10:58:16Z

core/testing/src/main/java/io/github/droidkaigi/confsched/testing/robot/MiniRobots.kt

+    override fun setQualifier(qualifier: String) {
+        RuntimeEnvironment.setQualifiers(qualifier)
+    }
+}


tried to add function for RobolectricDeviceQualifier programmatically.

Testing Robot separates a test's 'what' and 'how'. The 'qualifier' is how we set up the device or configure settings. So I think it should not be in the test. How about naming it DeviceSetupRobot? And having a method called setupTabletDevice?

Sorry for my lack of understanding 🙇
I renamed class name and fun name as above 🙏
commit: 7ddc3bd

Thanks, but we don't want to use "qualifier" as a parameter. For example, we could use an emulator instead. In that pattern, we need to use other APIs for the emulator. In such cases, we don't have a qualifier. Also, testers might find it difficult to understand what a qualifier is. What I want to have is just "setupTabletDevice()". 🙇

So sorry again 🙇 🙇
I DID misread setupTabletDevice as setupTestDevice 💀
I modified this function name and params 🙏
commit: cc228b4

github-actions · 2024-08-21T11:08:41Z

Detekt check failed. Please run ./gradlew detekt --auto-correct to fix the issues.

ked4ma · 2024-08-21T11:10:54Z

core/ui/src/commonMain/kotlin/io/github/droidkaigi/confsched/ui/component/TimetableItemCard.kt

@@ -119,7 +120,7 @@ fun TimetableItemCard(

                    timetableItem.speakers.forEach { speaker ->
                        Row(
-                            modifier = Modifier.padding(top = 4.dp),
+                            modifier = Modifier.height(36.dp).padding(top = 4.dp),


to enable measure component height correctly even if we use IntrinsicSize.Max,
add height(...) explicitly.

ked4ma · 2024-08-21T11:22:31Z

core/ui/src/commonMain/kotlin/io/github/droidkaigi/confsched/ui/component/TimetableItemCard.kt

-                            modifier = Modifier.padding(top = 8.dp),
+                            modifier = Modifier
+                                .padding(top = 8.dp)
+                                .height(IntrinsicSize.Min),


When I used IntrinsicSize.Max + fillMaxSize() for Card, compose couldn't calculate component height correctly.
It seems due to Row here.
by this, shorter size will be measured as much as possible.

before after

ked4ma · 2024-08-21T11:47:55Z

ℹ️ the almost all screenshot differences of TimetableScreen are because of the code when I was debugging 🙏
("false" is displayed in the screen)
current these are removed 🙇

takahirom · 2024-08-21T12:07:02Z

...rites/src/commonMain/kotlin/io/github/droidkaigi/confsched/favorites/section/FavoriteList.kt

@@ -30,39 +39,54 @@ fun FavoriteList(
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(),
 ) {
+    val isWideWidthScreen = LocalIsWideWidthScreen.current


Thanks! How about using WindowWidthSizeClass directly here instead of providing a CompositionLocal?

Thank your for your comment 🙇

using WindowWidthSizeClass directly here

I see 👍 I changed to use directly 🙏
c089579

ked4ma · 2024-08-21T12:42:20Z

I noticed an issue (#700).
And I think this pr's implemantation won't go well with above issue...
(when 2 items are displayed in one row. 2 items of each row is displayed with Row, so we cannot use animateItemPlacement to each card component)
Should I consider other implementation for this pr? (Or do you have any idea?)

takahirom · 2024-08-21T14:41:22Z

Now we are not using Lazy Colms for favorite items so implementing the animation might be difficult. But you don't have to think about the animation.
But could you please resolve the conflict?

ked4ma · 2024-08-21T17:02:31Z

Thank you for your comment 🙏 and I understood 🙇

In addition, I resolved conflicts!

takahirom

Thank you for finding the way to do this and addressing points!

ked4ma added 3 commits August 21, 2024 02:42

grid like timetabe list if screen is wide

46d3dc5

grid like favorites list if screen is wide

5ff8040

run detekt

9d90f1f

github-actions bot temporarily deployed to deploygate-distribution August 20, 2024 18:12 Inactive

ked4ma added 3 commits August 21, 2024 12:39

fix card height on list

22d5900

fit space

eda58cf

add setQualifier func for screen test

f3e0177

github-actions bot temporarily deployed to deploygate-distribution August 21, 2024 10:45 Inactive

ked4ma added 2 commits August 21, 2024 19:54

add basic test about favorites and search

59a47ca

remove dev code

b2b3716

ked4ma commented Aug 21, 2024

View reviewed changes

github-actions bot temporarily deployed to deploygate-distribution August 21, 2024 10:59 Inactive

ked4ma added 2 commits August 21, 2024 20:02

move setting CompositionLocalProvider to MainActivity

29f42c8

run detekt

45ed6f9

github-actions bot temporarily deployed to deploygate-distribution August 21, 2024 11:10 Inactive

ked4ma commented Aug 21, 2024

View reviewed changes

ked4ma added 2 commits August 21, 2024 20:23

Merge branch 'main' into feature/grid-like-tabletable-list-658

f07fbaa

update SearchScreenTest

31be709

github-actions bot temporarily deployed to deploygate-distribution August 21, 2024 11:31 Inactive

ked4ma marked this pull request as ready for review August 21, 2024 11:48

takahirom reviewed Aug 21, 2024

View reviewed changes

use WindowSize directly

c089579

github-actions bot temporarily deployed to deploygate-distribution August 21, 2024 12:47 Inactive

ked4ma requested a review from takahirom August 21, 2024 13:10

takahirom added the Waiting for response or commit label Aug 21, 2024

Merge branch 'main' into feature/grid-like-tabletable-list-658

2febf8e

github-actions bot removed the Waiting for response or commit label Aug 21, 2024

github-actions bot temporarily deployed to deploygate-distribution August 21, 2024 16:51 Inactive

ked4ma added 2 commits August 22, 2024 11:36

restore contentPadding

77c1bf2

rename around test robot for device qualifier

7ddc3bd

github-actions bot temporarily deployed to deploygate-distribution August 22, 2024 02:44 Inactive

update fun name to setupTabletDevice

cc228b4

github-actions bot temporarily deployed to deploygate-distribution August 22, 2024 03:47 Inactive

takahirom approved these changes Aug 22, 2024

View reviewed changes

takahirom merged commit 3b3fabd into DroidKaigi:main Aug 22, 2024
7 checks passed

ked4ma deleted the feature/grid-like-tabletable-list-658 branch August 22, 2024 15:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Grid-like session list (timetable / favorites) #693

Grid-like session list (timetable / favorites) #693

ked4ma commented Aug 20, 2024 •

edited

Loading

github-actions bot commented Aug 20, 2024 •

edited

Loading

takahirom commented Aug 21, 2024

ked4ma commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024

ked4ma Aug 21, 2024 •

edited

Loading

takahirom Aug 22, 2024

ked4ma Aug 22, 2024

takahirom Aug 22, 2024

ked4ma Aug 22, 2024

github-actions bot commented Aug 21, 2024

ked4ma Aug 21, 2024

ked4ma Aug 21, 2024

ked4ma commented Aug 21, 2024

takahirom Aug 21, 2024 •

edited

Loading

ked4ma Aug 21, 2024

ked4ma commented Aug 21, 2024 •

edited

Loading

takahirom commented Aug 21, 2024

ked4ma commented Aug 21, 2024

takahirom left a comment

Grid-like session list (timetable / favorites) #693

Grid-like session list (timetable / favorites) #693

Conversation

ked4ma commented Aug 20, 2024 • edited Loading

Issue

Overview (Required)

Links

Screenshot (Optional if screenshot test is present or unrelated to UI)

Movie (Optional)

github-actions bot commented Aug 20, 2024 • edited Loading

takahirom commented Aug 21, 2024

ked4ma commented Aug 21, 2024 • edited Loading

github-actions bot commented Aug 21, 2024

ked4ma Aug 21, 2024 • edited Loading

Choose a reason for hiding this comment

takahirom Aug 22, 2024

Choose a reason for hiding this comment

ked4ma Aug 22, 2024

Choose a reason for hiding this comment

takahirom Aug 22, 2024

Choose a reason for hiding this comment

ked4ma Aug 22, 2024

Choose a reason for hiding this comment

github-actions bot commented Aug 21, 2024

ked4ma Aug 21, 2024

Choose a reason for hiding this comment

ked4ma Aug 21, 2024

Choose a reason for hiding this comment

ked4ma commented Aug 21, 2024

takahirom Aug 21, 2024 • edited Loading

Choose a reason for hiding this comment

ked4ma Aug 21, 2024

Choose a reason for hiding this comment

ked4ma commented Aug 21, 2024 • edited Loading

takahirom commented Aug 21, 2024

ked4ma commented Aug 21, 2024

takahirom left a comment

Choose a reason for hiding this comment

ked4ma commented Aug 20, 2024 •

edited

Loading

github-actions bot commented Aug 20, 2024 •

edited

Loading

ked4ma commented Aug 21, 2024 •

edited

Loading

ked4ma Aug 21, 2024 •

edited

Loading

takahirom Aug 21, 2024 •

edited

Loading

ked4ma commented Aug 21, 2024 •

edited

Loading