Skip to content

feat: [FC-0047] Course progress and collapsing sections - #323

Merged
volodymyr-chekyrta merged 20 commits into
openedx:developfrom
raccoongang:feat/progress_bar_and_sections_ui
Jun 6, 2024
Merged

feat: [FC-0047] Course progress and collapsing sections#323
volodymyr-chekyrta merged 20 commits into
openedx:developfrom
raccoongang:feat/progress_bar_and_sections_ui

Conversation

@PavloNetrebchuk

@PavloNetrebchuk PavloNetrebchuk commented May 21, 2024

Copy link
Copy Markdown
Contributor

https://www.figma.com/design/iZ56YMjbRMShCCDxqrqRrR/Open-edX-Mobile-App-All-Screens-v2.1?node-id=9146-62028&t=9uhsH3nbuxmXNajx-4


Light Theme Dark Theme
Screenshot 2024-05-31 at 12 47 50 Screenshot 2024-05-31 at 12 48 45

Downloading icon

Not Downloaded Downloading Downloaded
Screenshot 2024-05-29 at 20 12 09 Screenshot 2024-05-29 at 20 12 21 Screenshot 2024-05-29 at 20 12 36
Screenshot 2024-05-29 at 20 15 18 Screenshot 2024-05-29 at 20 15 40 Screenshot 2024-05-29 at 20 15 51

Completion

Light Theme Dark Theme
Screenshot 2024-05-29 at 20 18 27 Screenshot 2024-05-29 at 20 18 43

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label May 21, 2024
@openedx-webhooks

openedx-webhooks commented May 21, 2024

Copy link
Copy Markdown

Thanks for the pull request, @PavloNetrebchuk! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

  • supporting documentation
  • Open edX discussion forum threads
  • timeline information ("this must be merged by XX date", and why that is)
  • partner information ("this is a course on edx.org")
  • any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

@PavloNetrebchuk
PavloNetrebchuk force-pushed the feat/progress_bar_and_sections_ui branch from e853ad8 to dd56b78 Compare May 22, 2024 11:42
@mphilbrick211

Copy link
Copy Markdown

Hi @PavloNetrebchuk! Is this for an FC project with Axim?

@PavloNetrebchuk
PavloNetrebchuk force-pushed the feat/progress_bar_and_sections_ui branch from dd56b78 to ff0bfd1 Compare May 23, 2024 15:24
@PavloNetrebchuk

Copy link
Copy Markdown
Contributor Author

Hi @PavloNetrebchuk! Is this for an FC project with Axim?

Hello @mphilbrick211
Yes

@volodymyr-chekyrta volodymyr-chekyrta changed the title Feat: Progress bar and collapsing course sections feat: [FC-0047] Progress bar and collapsing course sections May 24, 2024
PavloNetrebchuk and others added 11 commits May 28, 2024 17:56
…edx#262)

chore: enhance app theme capability for prod edX theme/branding

- Integrate Program config updates
- theming/branding code improvements for light and dark modes
- Force dark mode for the WebView (beta version)
- No major change in the Open edX theme

fixes: LEARNER-9783
* feat: Created calendar setting screen

* feat: CalendarAccessDialog

* feat: NewCalendarDialog

* fix: Fixes according to PR feedback
* feat: Created Learn screen. Added course/program navigation. Added endpoint for UserCourses screen.

* feat: Added primary course card

* feat: Added start/resume course button

* feat: Added alignment items

* feat: Fix future assignment date, add courses list, add onSearch and onCourse clicks

* feat: Add feature flag for enabling new/old dashboard screen, add UserCoursesScreen onClick methods

* feat: Create AllEnrolledCoursesFragment. Add endpoint parameters

* feat: AllEnrolledCoursesFragment UI

* feat: Minor code refactoring, show cached data if no internet connection

* feat: UserCourses screen data caching

* feat: Dashboard

* refactor: Dashboard type flag change, start course button change

* feat: Added programs fragment to LearnFragment viewPager

* feat: Empty states and settings button

* fix: Number of courses

* fix: Minor UI changes

* fix: Fixes according to designer feedback

* fix: Fixes after demo

* refactor: Move CourseContainerTab

* fix: Fixes according to PR feedback

* fix: Fixes according to PR feedback

* feat: added a patch from Omer Habib

* fix: Fixes according to PR feedback
@PavloNetrebchuk
PavloNetrebchuk force-pushed the feat/progress_bar_and_sections_ui branch from a9ef278 to b72fc59 Compare May 30, 2024 15:12
…and_sections_ui

# Conflicts:
#	core/src/main/java/org/openedx/core/domain/model/Progress.kt
#	core/src/openedx/org/openedx/core/ui/theme/Colors.kt
#	course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineScreen.kt
#	course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineViewModel.kt
#	course/src/main/java/org/openedx/course/presentation/section/CourseSectionFragment.kt
#	course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt
#	course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt
#	dashboard/src/main/java/org/openedx/courses/presentation/DashboardGalleryView.kt
#	dashboard/src/main/res/values/strings.xml

@volodymyr-chekyrta volodymyr-chekyrta left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good overall 👍 , please address the following issues:

@SerializedName("num_points_possible")
val numPointsPossible: Float?,
) {
fun mapToDomain() = org.openedx.core.domain.model.AssignmentProgress(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move it to the imports section

@SerializedName("due")
val due: String?
) {
fun mapToDomain(blockData: Map<String, org.openedx.core.data.model.Block>): Block {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move it to the imports section

@ColumnInfo("num_points_possible")
val numPointsPossible: Float?,
) {
fun mapToDomain() = org.openedx.core.domain.model.AssignmentProgress(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move it to the imports section

Comment on lines +12 to +16
fun getProgress(): Float = try {
assignmentsCompleted.toFloat() / totalAssignmentsCount.toFloat()
} catch (_: ArithmeticException) {
0f
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about replacing it with a computed property, let's say value, so we can call progress like this progress.value instead of progress.getProgress()?

Comment thread core/src/main/res/values/strings.xml Outdated
<string name="core_date_format_tomorrow" tools:ignore="MissingTranslation">Tomorrow</string>
<string name="core_date_format_yesterday" tools:ignore="MissingTranslation">Yesterday</string>
<string name="core_date_format_days_ago" tools:ignore="MissingTranslation">%1$s days ago</string>
<string name="core_date_format_past_due_assignment" tools:ignore="MissingTranslation">Past due assignment</string>

@volodymyr-chekyrta volodymyr-chekyrta May 31, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused resource core_date_format_past_due_assignment

Comment thread core/src/main/res/values/strings.xml Outdated
Comment on lines +103 to +104
<string name="core_date_format_assignment_due_in" tools:ignore="MissingTranslation">Due in %1$s days</string>
<string name="core_date_format_assignment_due_days_ago" tools:ignore="MissingTranslation">Due %1$s days ago</string>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use plurals here for correct translation into other languages

Column(Modifier
.clickable { onClick(block) }
.background(if (block.isCompleted()) MaterialTheme.appColors.surface else Color.Transparent)
val due = block.due?.let { TimeUtils.getAssignmentFormattedDate(LocalContext.current, it) }

@volodymyr-chekyrta volodymyr-chekyrta May 31, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I'm not mistaken, it's better to use remember when you transform dates in compose because it creates a calendar instance on each recomposition.

Comment on lines +130 to +134
viewModel.courseRouter.navigateToDownloadQueue(
fm = fragmentManager,
viewModel.getDownloadableChildren(blockId)
?: arrayListOf()
)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we transform it to the one line viewModel.getDownloadableChildren(blockId) ?: arrayListOf() for better readability?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use a vector here instead of PNG?
(We can address it in the Offline/Downloading task)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know why, but the vector image I took from Figma shows up as a circle in Android Studio.

Screenshot 2024-05-31 at 13 29 04

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, we'll figure it out in the next PRs related to downloading

@volodymyr-chekyrta

Copy link
Copy Markdown
Contributor

Can we remove this odd ripple effect or at least limit it to the section heading where the user taps?

Screen_recording_20240531_125624.mp4

Comment thread course/src/main/res/values/strings.xml Outdated
<string name="course_delete_while_downloading_confirmation_text" formatted="false">Turning off the switch will stop downloading and delete all downloaded videos for \"%s\"?</string>
<string name="course_delete_downloads_confirmation_text" formatted="false">Are you sure you want to delete all video(s) for \"%s\"?</string>
<string name="course_delete_download_confirmation_text" formatted="false">Are you sure you want to delete video(s) for \"%s\"?</string>
<string name="course_assignments_complete">%1$s of %2$s assignments complete</string>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use plurals for the word assignments

- **WHATS_NEW_ENABLED:** Enables the "What's New" feature to present the latest changes to the user.
- **SOCIAL_AUTH_ENABLED:** Enables SSO buttons on the SignIn and SignUp screens.
- **COURSE_NESTED_LIST_ENABLED:** Enables an alternative visual representation for the course structure.
- **COURSE_DROPDOWN_NAVIGATION_ENABLED:** Enables an alternative visual representation for the course structure.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enables an alternative visual representation for the course structure. -> Enables an alternative navigation through units.

@volodymyr-chekyrta
volodymyr-chekyrta marked this pull request as ready for review May 31, 2024 10:18
@volodymyr-chekyrta volodymyr-chekyrta added the product review PR requires product review before merging label May 31, 2024
@volodymyr-chekyrta

Copy link
Copy Markdown
Contributor

@PavloNetrebchuk please update the config structure according to the #319

…and_sections_ui

# Conflicts:
#	core/src/main/java/org/openedx/core/config/Config.kt
#	course/src/main/java/org/openedx/course/presentation/dates/CourseDatesViewModel.kt
#	course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineViewModel.kt
#	course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt
#	course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModel.kt
#	course/src/main/java/org/openedx/course/presentation/videos/CourseVideoViewModel.kt
#	course/src/test/java/org/openedx/course/presentation/outline/CourseOutlineViewModelTest.kt
#	course/src/test/java/org/openedx/course/presentation/videos/CourseVideoViewModelTest.kt
#	default_config/dev/config.yaml
#	default_config/prod/config.yaml
#	default_config/stage/config.yaml
@volodymyr-chekyrta volodymyr-chekyrta changed the title feat: [FC-0047] Progress bar and collapsing course sections feat: [FC-0047] Course progress and collapsing sections May 31, 2024

@volodymyr-chekyrta volodymyr-chekyrta left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me.
PR is ready for product/design review.

@sdaitzman

Copy link
Copy Markdown

Hi @PavloNetrebchuk, this looks great overall! A couple of design questions/feedback I wanted to check on:

  1. In light mode, sections should use the light theme shade color #F9FAFB as their background color. In the last screenshot, it looks like it might be using a darker color?
  2. In dark mode, the download icon should use the lighter dark theme accent text color #879FF5 for contrast/accessibility reasons

@PavloNetrebchuk

Copy link
Copy Markdown
Contributor Author

Hello @sdaitzman,
Thank you for your feedback.

  1. I double-checked the section color, and it is correct. It may appear darker in the screenshot due to compression.
  2. You are right; I used the wrong color previously. It has been corrected now.

@sdaitzman

Copy link
Copy Markdown

Thanks, @PavloNetrebchuk! Everything else looks great to me from a design standpoint.

k1rill
k1rill previously approved these changes Jun 6, 2024

@k1rill k1rill left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just nits, they can be ignored

viewModel.saveDownloadModels(
FileUtil(context).getExternalAppDir().path, it.id
)
onDownloadClick = { blocksIds ->

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Maybe it's better to move all this to the separate method in the viewModel

val subsectionsDownloadedStates = downloadedStateMap.filterKeys { key ->
key in (courseSubSections?.map { it.id } ?: emptyList())
}.values.toList()
val downloadedState =

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it's better to use when here

@volodymyr-chekyrta
volodymyr-chekyrta merged commit 1bc1d4c into openedx:develop Jun 6, 2024
@openedx-webhooks

Copy link
Copy Markdown

@PavloNetrebchuk 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

@volodymyr-chekyrta
volodymyr-chekyrta deleted the feat/progress_bar_and_sections_ui branch June 6, 2024 12:01
@HamzaIsrar12

Copy link
Copy Markdown
Contributor

Hey @PavloNetrebchuk, I pulled this branch and noticed that the download button seems a bit buggy. Could you please take a look?

Screenrecorder-2024-06-07-14-45-26-461.mp4

@PavloNetrebchuk

Copy link
Copy Markdown
Contributor Author

Hello, @HamzaIsrar12
You're right. I only had one downloadable item in the course when I tested it. I'll create a PR with the fix ASAP.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

open-source-contribution PR author is not from Axim or 2U product review PR requires product review before merging

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

8 participants