[#789] Fixed Timetable grid item UI #898

Noddy20 · 2023-08-22T17:10:18Z

Issue

closes #789

Overview

[Updated] Changes made in the TimeTable grid item UI -

Issue fixed : Long titles were truncating, Fixed with ellipsis
Added Checks and changes to make UI look like Figma UI
Updated the error content (replace full message with icon only) as shown in Figma

Background Context -

Truncating lines fixed by the Column weights

Links

NA

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

Before	After

github-actions · 2023-08-23T01:16:06Z

Snapshot diff report

File name	Image
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-DarkMode-1 2_13_null_0_compare. png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-DarkMode-1 2_13_null_4_compare. png
io.github.droidkaigi .confsched2023.sessi ons.component_null_L anguage_PreviewTimet ableGridLongTitleIte m-English-5_8_null_c ompare.png
io.github.droidkaigi .confsched2023.sessi ons.section_null_The me_TimetablePreview- LightMode-25_25_null _compare.png
io.github.droidkaigi .confsched2023.sessi ons.component_null_L anguage_PreviewTimet ableGridItem-Japanes e-4_6_null_compare.p ng
io.github.droidkaigi .confsched2023.sessi ons.section_null_The me_TimetablePreview- DarkMode-25_26_null_ compare.png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-LightMode- 12_12_null_3_compare .png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-DarkMode-1 2_13_null_6_compare. png
io.github.droidkaigi .confsched2023.sessi ons.section_null_Lan guage_TimetablePrevi ew-English-15_18_nul l_compare.png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridMultiSpeakersIt em-DarkMode-11_12_nu ll_compare.png
io.github.droidkaigi .confsched2023.sessi ons.section_null_Lan guage_TimetablePrevi ew-Japanese-15_17_nu ll_compare.png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-DarkMode-1 2_13_null_5_compare. png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-LightMode- 12_12_null_4_compare .png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-LightMode- 12_12_null_5_compare .png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-DarkMode-1 2_13_null_1_compare. png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-LightMode- 12_12_null_0_compare .png
io.github.droidkaigi .confsched2023.sessi ons.component_null_L anguage_PreviewTimet ableGridItem-English -4_7_null_compare.pn g
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-LightMode- 12_12_null_6_compare .png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-DarkMode-1 2_13_null_3_compare. png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-LightMode- 12_12_null_1_compare .png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-LightMode- 12_12_null_2_compare .png
io.github.droidkaigi .confsched2023.sessi ons.component_null_L anguage_PreviewTimet ableGridLongTitleIte m-Japanese-5_7_null_ compare.png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridMultiSpeakersIt em-LightMode-11_11_n ull_compare.png
io.github.droidkaigi .confsched2023.sessi ons.component_null_T heme_PreviewTimetabl eGridItem-DarkMode-1 2_13_null_2_compare. png
TimetableScreenTest. checkGridShot_compar e.png
TimetableScreenTest. checkGridScrollShot_ compare.png

github-actions · 2023-08-23T01:23:12Z

Test Results

206 tests 206 ✔️ 6m 43s ⏱️
  11 suites     0 💤
  11 files     0 ❌

Results for commit b1fada1.

♻️ This comment has been updated with latest results.

github-actions · 2023-08-23T05:08:34Z

Hi @Noddy20! Codes seem to be unformatted. To resolve this issue, please run ./gradlew detekt --auto-correct and fix the results of ./gradlew lintDebug.. Thank you for your contribution.

takahirom · 2023-08-24T12:30:41Z

...ons/src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableGridItem.kt

-                    .weight(1f)
-                    .defaultMinSize(minHeight = 8.dp),
-            )
+        if (speakers.isEmpty()) return@ConstraintLayout


Almost LGTM! I would like to use if block here. This is because we don't expect an early return when we write Compose so we could accidentally skip important component 🙏

takahirom · 2023-08-26T09:29:40Z

It looks like the sessions that don't have a speaker can break. Could you check it? We have several sessions that have no speakers. 👀

Noddy20 · 2023-08-26T15:40:24Z

It looks like the sessions that don't have a speaker can break. Could you check it? We have several sessions that have no speakers. 👀

I'll look into it.

Noddy20 · 2023-08-26T17:32:22Z

It looks like the sessions that don't have a speaker can break. Could you check it? We have several sessions that have no speakers. 👀

Fixed it, please review @takahirom

takahirom · 2023-08-28T15:03:46Z

If there is a speaker. Maybe the title is going to center?

Noddy20 · 2023-08-28T15:39:35Z

If there is a speaker. Maybe the title is going to center?

Thanks 🧐 @takahirom, Looks like the whole content is moving center vertically when the content is less.
Pushing a fix right away.

takahirom · 2023-08-29T15:32:19Z

Sorry for bothering you. But, the text is hidden when the item is small. What do you think?

Noddy20 · 2023-08-30T04:50:41Z

Sorry for bothering you. But, the text is hidden when the item is small. What do you think?

I can take a look at that. Might need to change the approach.
@takahirom Is it possible to have a case with that small item? In a case like that what can we prioritize to show, since it will be difficult to fit all the content there.

Noddy20 · 2023-08-30T14:08:01Z

@takahirom

Refactored the code and made some changes according to the Figma UI
There is one catch though, the schedule time text and speaker name title fontSizes will be adjusted according to the fontSizes of the title. Hope it works since a small title fontSize will any way look weird. This was required to make the Grid item more responsive for different heights.

takahirom · 2023-08-31T14:57:12Z

I think we can't see the session message 👀

Noddy20 · 2023-08-31T17:01:42Z

I think we can't see the session message 👀

Yes. Session canceled message is not there in the Figma UI. Only Icon is there, please check the Figma link.
That is why I made this change which also reduces the items we can fit in this dynamic height Grid item.
This commit makes it look exactly like the Figma UI.

takahirom · 2023-09-01T01:10:58Z

Oh, I see.

takahirom · 2023-09-01T01:44:27Z

...ons/src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableGridItem.kt

@@ -111,14 +110,24 @@ fun TimetableGridItem(
            }
            .padding(TimetableGridItemSizes.padding),
    ) {
-        Column {
+        Column(


Honestly, I was hesitant to use ConstraintLayout, as it's not compatible with other platforms. This alternative seems much better.

Yes. I had to try multiple iterations to make this solution 😅
Best thing is that now we have the exact Figma UI 🙌🏻

takahirom

Thank you for this PR. Your relentless perseverance was impressive.

Noddy20 requested a review from a team as a code owner August 22, 2023 17:10

Noddy20 requested a review from ry-itto August 22, 2023 17:10

github-actions bot temporarily deployed to deploygate-distribution August 23, 2023 01:37 Inactive

Noddy20 force-pushed the Issue-789 branch from 1a18aa1 to c507ef9 Compare August 23, 2023 05:06

github-actions bot temporarily deployed to deploygate-distribution August 23, 2023 05:59 Inactive

Noddy20 force-pushed the Issue-789 branch from 6b410e2 to e742cf2 Compare August 23, 2023 15:12

github-actions bot temporarily deployed to deploygate-distribution August 23, 2023 15:13 Inactive

Noddy20 force-pushed the Issue-789 branch 2 times, most recently from 23b50a6 to 4ef49a7 Compare August 24, 2023 04:51

takahirom reviewed Aug 24, 2023

View reviewed changes

Noddy20 force-pushed the Issue-789 branch from 4ef49a7 to 6ad5e9e Compare August 24, 2023 17:07

Noddy20 requested a review from takahirom August 24, 2023 17:08

Noddy20 force-pushed the Issue-789 branch from 6ad5e9e to 928bbbb Compare August 25, 2023 07:11

github-actions bot temporarily deployed to deploygate-distribution August 25, 2023 17:11 Inactive

Noddy20 force-pushed the Issue-789 branch from a98d660 to a4c56ed Compare August 26, 2023 17:31

github-actions bot temporarily deployed to deploygate-distribution August 27, 2023 05:01 Inactive

Noddy20 force-pushed the Issue-789 branch from 1bfb301 to a6e5613 Compare August 28, 2023 16:37

github-actions bot temporarily deployed to deploygate-distribution August 29, 2023 03:22 Inactive

Noddy20 force-pushed the Issue-789 branch from a6e5613 to 4d772d7 Compare August 29, 2023 04:19

github-actions bot temporarily deployed to deploygate-distribution August 29, 2023 16:02 Inactive

Noddy20 force-pushed the Issue-789 branch 3 times, most recently from b641996 to c8ff347 Compare August 30, 2023 09:22

github-actions bot temporarily deployed to deploygate-distribution August 30, 2023 11:35 Inactive

Noddy20 force-pushed the Issue-789 branch from c8ff347 to d612b2e Compare August 30, 2023 14:01

[DroidKaigi#789] Fixed Timetable grid item UI

8146398

Noddy20 force-pushed the Issue-789 branch from d612b2e to 8146398 Compare August 30, 2023 14:08

github-actions bot temporarily deployed to deploygate-distribution August 30, 2023 14:31 Inactive

Merge branch 'main' into Issue-789

f2f5c00

github-actions bot temporarily deployed to deploygate-distribution August 31, 2023 15:56 Inactive

Merge branch 'main' into Issue-789

b1fada1

github-actions bot temporarily deployed to deploygate-distribution September 1, 2023 01:32 Inactive

takahirom reviewed Sep 1, 2023

View reviewed changes

takahirom approved these changes Sep 1, 2023

View reviewed changes

takahirom merged commit 46efa71 into DroidKaigi:main Sep 1, 2023
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#789] Fixed Timetable grid item UI #898

[#789] Fixed Timetable grid item UI #898

Noddy20 commented Aug 22, 2023 •

edited

Loading

github-actions bot commented Aug 23, 2023 •

edited

Loading

github-actions bot commented Aug 23, 2023 •

edited

Loading

github-actions bot commented Aug 23, 2023

takahirom Aug 24, 2023

Noddy20 Aug 24, 2023 •

edited

Loading

takahirom commented Aug 26, 2023

Noddy20 commented Aug 26, 2023

Noddy20 commented Aug 26, 2023 •

edited

Loading

takahirom commented Aug 28, 2023

Noddy20 commented Aug 28, 2023

takahirom commented Aug 29, 2023

Noddy20 commented Aug 30, 2023

Noddy20 commented Aug 30, 2023

takahirom commented Aug 31, 2023

Noddy20 commented Aug 31, 2023 •

edited

Loading

takahirom commented Sep 1, 2023

takahirom Sep 1, 2023

Noddy20 Sep 1, 2023

takahirom left a comment

[#789] Fixed Timetable grid item UI #898

[#789] Fixed Timetable grid item UI #898

Conversation

Noddy20 commented Aug 22, 2023 • edited Loading

Issue

Overview

Background Context -

Links

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

github-actions bot commented Aug 23, 2023 • edited Loading

github-actions bot commented Aug 23, 2023 • edited Loading

Test Results

github-actions bot commented Aug 23, 2023

takahirom Aug 24, 2023

Choose a reason for hiding this comment

Noddy20 Aug 24, 2023 • edited Loading

Choose a reason for hiding this comment

takahirom commented Aug 26, 2023

Noddy20 commented Aug 26, 2023

Noddy20 commented Aug 26, 2023 • edited Loading

takahirom commented Aug 28, 2023

Noddy20 commented Aug 28, 2023

takahirom commented Aug 29, 2023

Noddy20 commented Aug 30, 2023

Noddy20 commented Aug 30, 2023

takahirom commented Aug 31, 2023

Noddy20 commented Aug 31, 2023 • edited Loading

takahirom commented Sep 1, 2023

takahirom Sep 1, 2023

Choose a reason for hiding this comment

Noddy20 Sep 1, 2023

Choose a reason for hiding this comment

takahirom left a comment

Choose a reason for hiding this comment

Noddy20 commented Aug 22, 2023 •

edited

Loading

github-actions bot commented Aug 23, 2023 •

edited

Loading

github-actions bot commented Aug 23, 2023 •

edited

Loading

Noddy20 Aug 24, 2023 •

edited

Loading

Noddy20 commented Aug 26, 2023 •

edited

Loading

Noddy20 commented Aug 31, 2023 •

edited

Loading