Skip to content

Commit

Permalink
Fix part of #140: Hifi topic play (#339)
Browse files Browse the repository at this point in the history 
* Title and recyclerview fix

* Inital UI implementation

* Icons checks

* Nit changes

* Fix chapter min height

* Final accessibility scanner test

* Nit suggested changes

* Nit change

* Updated click listeners

* Final changes

* Changes on ChapterView
  • Loading branch information
@rt4914
rt4914 authored Nov 14, 2019
1 parent dcf3f22 commit e13b784
Show file tree
Hide file tree
Showing 12 changed files with 219 additions and 109 deletions.
8 changes: 4 additions & 4 deletions app/src/main/java/org/oppia/app/topic/play/ChapterSummaryAdapter.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@ class ChapterSummaryAdapter(
}

override fun onBindViewHolder(chapterSummaryViewHolder: ChapterSummaryViewHolder, position: Int) {
chapterSummaryViewHolder.bind(chapterList[position])
chapterSummaryViewHolder.bind(chapterList[position], position)
}

inner class ChapterSummaryViewHolder(private val binding: PlayChapterViewBinding) :
RecyclerView.ViewHolder(binding.root) {
internal fun bind(chapterSummary: ChapterSummary) {
// TODO(#286): Fix the flickering behaviour of chapter-completion image.
internal fun bind(chapterSummary: ChapterSummary, position: Int) {
binding.chapterSummary = chapterSummary
binding.chapterName.setOnClickListener {
binding.index = position
binding.chapterContainer.setOnClickListener {
chapterSummarySelector.selectChapterSummary(chapterSummary)
}
}
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/java/org/oppia/app/topic/play/StorySummaryAdapter.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ class StorySummaryAdapter(
val chapterList = storySummaryViewModel.storySummary.chapterList
binding.chapterRecyclerView.adapter = ChapterSummaryAdapter(chapterList, chapterSummarySelector)

binding.chapterListViewControl.setOnClickListener {
binding.expandListIcon.setOnClickListener {
val previousIndex: Int? = currentExpandedChapterListIndex
currentExpandedChapterListIndex =
if (currentExpandedChapterListIndex != null && currentExpandedChapterListIndex == position) {
Expand Down
10 changes: 10 additions & 0 deletions app/src/main/res/drawable/dashed_divider.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<solid android:color="@android:color/transparent" />
<stroke
android:width="1dp"
android:color="@color/oppiaDashedDivider"
android:dashWidth="8dp"
android:dashGap="6dp" />
</shape>
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_arrow_drop_down_black_24dp.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M7,10l5,5 5,-5z"/>
</vector>
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_arrow_drop_up_black_24dp.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M7,14l5,-5 5,5z"/>
</vector>
2 changes: 1 addition & 1 deletion app/src/main/res/drawable/ic_check_24dp.xml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#019489"
android:tint="#00645C"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
Expand Down
60 changes: 36 additions & 24 deletions app/src/main/res/layout/play_chapter_view.xml
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,62 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<layout xmlns:android="http://schemas.android.com/apk/res/android">

<data>

<import type="android.view.View" />

<import type="org.oppia.app.model.ChapterPlayState" />

<variable
name="index"
type="Integer" />

<variable
name="chapterSummary"
type="org.oppia.app.model.ChapterSummary" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
<LinearLayout
android:id="@+id/chapter_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp">
android:clickable="@{chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? true: false}"
android:minHeight="48dp"
android:orientation="horizontal"
android:paddingStart="4dp"
android:paddingTop="8dp"
android:paddingEnd="4dp"
android:paddingBottom="8dp">

<ImageView
android:id="@+id/chapter_completed"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:contentDescription="@{String.format(@string/chapter_completed, (index + 1), chapterSummary.name)}"
android:src="@drawable/ic_check_24dp"
android:visibility="@{(chapterSummary.chapterPlayState != ChapterPlayState.COMPLETED)?View.INVISIBLE : View.VISIBLE}" />

<TextView
android:id="@+id/chapter_index"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:drawablePadding="4dp"
android:gravity="center_vertical"
android:src="@drawable/ic_check_24dp"
android:textColor="@color/oppiaPrimaryText"
android:textSize="16sp"
android:visibility="@{(chapterSummary.chapterPlayState != ChapterPlayState.COMPLETED)?View.INVISIBLE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:layout_marginStart="4dp"
android:fontFamily="sans-serif"
android:text="@{String.format(@string/topic_play_chapter_index, (index + 1))}"
android:textColor="@{chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/oppiaPrimaryText: @color/oppiaPrimaryText30}"
android:textSize="12sp" />

<TextView
android:id="@+id/chapter_name"
android:layout_width="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:fontFamily="sans-serif"
android:text="@{chapterSummary.name}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/chapter_completed"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
android:textColor="@{chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/oppiaPrimaryText: @color/oppiaPrimaryText30}"
android:textSize="12sp" />
</LinearLayout>
</layout>
3 changes: 3 additions & 0 deletions app/src/main/res/layout/topic_play_fragment.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@
android:layout_height="match_parent"
android:background="@color/oppiaBackground">


<androidx.recyclerview.widget.RecyclerView
android:id="@+id/story_summary_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingBottom="108dp"
android:scrollbars="none"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
Expand Down
215 changes: 138 additions & 77 deletions app/src/main/res/layout/topic_play_story_summary.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,84 +19,145 @@
type="org.oppia.app.topic.play.StorySummaryViewModel" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="32dp">

<FrameLayout
android:id="@+id/story_progress_container"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<org.oppia.app.customview.SegmentedCircularProgressView
android:id="@+id/story_progress_view"
android:layout_width="50dp"
android:layout_height="50dp" />

<TextView
android:id="@+id/story_progress_percentage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@{@string/topic_story_progress_percentage(storyPercentage)}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="14sp" />
</FrameLayout>

<TextView
android:id="@+id/story_name_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="48dp"
android:onClick="@{viewModel::clickOnStorySummaryTitle}"
android:text="@{viewModel.storySummary.storyName}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/story_progress_container"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/chapter_count"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="@{@plurals/chapter_count(viewModel.storySummary.chapterCount, viewModel.storySummary.chapterCount)}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="@+id/story_name_text_view"
app:layout_constraintStart_toStartOf="@+id/story_name_text_view"
app:layout_constraintTop_toBottomOf="@+id/story_name_text_view" />

<ImageView
android:id="@+id/chapter_list_view_control"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:src="@{isListExpanded? @drawable/ic_keyboard_arrow_up_black_24dp : @drawable/ic_keyboard_arrow_down_black_24dp}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/chapter_count"
app:layout_constraintTop_toBottomOf="@+id/story_name_text_view" />

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/chapter_recycler_view"
android:layout_width="0dp"
android:layout_marginStart="20dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="20dp"
android:onClick="@{viewModel::clickOnStorySummaryTitle}"
app:cardBackgroundColor="@color/white"
app:cardCornerRadius="4dp"
app:cardElevation="4dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:visibility="@{isListExpanded? View.VISIBLE : View.GONE}"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/chapter_count"
app:layout_constraintStart_toEndOf="@+id/story_progress_container"
app:layout_constraintTop_toBottomOf="@+id/chapter_count" />
</androidx.constraintlayout.widget.ConstraintLayout>
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="24dp"
android:orientation="horizontal">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

<FrameLayout
android:id="@+id/story_progress_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<org.oppia.app.customview.SegmentedCircularProgressView
android:id="@+id/story_progress_view"
android:layout_width="48dp"
android:layout_height="48dp" />

<TextView
android:id="@+id/story_progress_percentage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="sans-serif-medium"
android:text="@{@string/topic_story_progress_percentage(storyPercentage)}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="14sp"
android:visibility="@{storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
</FrameLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4dp"
android:fontFamily="sans-serif"
android:text="@{storyPercentage != 100? @string/status_in_progress : @string/status_completed}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="10sp"
android:visibility="@{storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">

<TextView
android:id="@+id/story_name_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:text="@{viewModel.storySummary.storyName}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="20sp" />

<TextView
android:id="@+id/chapter_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="@{@plurals/chapter_count(viewModel.storySummary.chapterCount, viewModel.storySummary.chapterCount)}"
android:textColor="@color/oppiaPrimaryText"
android:textSize="16sp" />
</LinearLayout>

<FrameLayout
android:id="@+id/expand_list_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:minWidth="48dp"
android:minHeight="48dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:contentDescription="@{@string/show_hide_chapter_list(viewModel.storySummary.storyName)}"
android:src="@{isListExpanded? @drawable/ic_arrow_drop_up_black_24dp : @drawable/ic_arrow_drop_down_black_24dp}" />
</FrameLayout>
</LinearLayout>
</LinearLayout>

<LinearLayout
android:id="@+id/chapter_list_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/whiteLight"
android:orientation="vertical"
android:visibility="@{isListExpanded? View.VISIBLE : View.GONE}">

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/dashed_divider" />

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/chapter_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</layout>
Loading

0 comments on commit e13b784

Please sign in to comment.