Add empty screen UI on empty thread list

This commit is contained in:
ariskotsomitopoulos 2022-01-14 15:11:20 +02:00
parent 53b82dfa3f
commit ff87f07f65
3 changed files with 91 additions and 6 deletions

View file

@ -36,6 +36,7 @@ import im.vector.app.features.home.room.threads.ThreadsActivity
import im.vector.app.features.home.room.threads.arguments.ThreadListArgs
import im.vector.app.features.home.room.threads.list.viewmodel.ThreadListController
import im.vector.app.features.home.room.threads.list.viewmodel.ThreadListViewModel
import im.vector.app.features.home.room.threads.list.viewmodel.ThreadListViewState
import org.matrix.android.sdk.api.session.room.timeline.TimelineEvent
import org.matrix.android.sdk.api.util.MatrixItem
import javax.inject.Inject
@ -90,6 +91,7 @@ class ThreadListFragment @Inject constructor(
}
override fun invalidate() = withState(threadListViewModel) { state ->
renderEmptyStateIfNeeded(state)
threadListController.update(state)
}
@ -104,4 +106,9 @@ class ThreadListFragment @Inject constructor(
override fun onThreadClicked(timelineEvent: TimelineEvent) {
(activity as? ThreadsActivity)?.navigateToThreadTimeline(timelineEvent)
}
private fun renderEmptyStateIfNeeded(state: ThreadListViewState) {
val show = state.rootThreadEventList.invoke().isNullOrEmpty()
views.threadListEmptyConstraintLayout.isVisible = show
}
}

View file

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
@ -25,16 +26,90 @@
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/threadListRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/threadListAppBarLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="?android:colorBackground"
tools:listitem="@layout/item_thread_list" />
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/threadListAppBarLayout"
tools:listitem="@layout/item_thread_list"
tools:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/threadListEmptyConstraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="24dp"
android:paddingEnd="24dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<ImageView
android:id="@+id/threadListEmptyImageView"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="24dp"
android:background="@drawable/bg_rounded_button"
android:backgroundTint="?vctr_system"
android:contentDescription="@string/avatar"
android:padding="18dp"
app:layout_constraintBottom_toTopOf="@id/threadListEmptyTitleTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:srcCompat="@drawable/ic_thread_menu_item"
app:tint="?vctr_content_secondary" />
<TextView
android:id="@+id/threadListEmptyTitleTextView"
style="@style/Widget.Vector.TextView.Subtitle.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:textColor="?vctr_content_primary"
app:layout_constraintBottom_toTopOf="@id/threadListEmptySubtitleTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@id/threadListEmptyImageView"
android:text="@string/thread_list_empty_title" />
<TextView
android:id="@+id/threadListEmptySubtitleTextView"
style="@style/Widget.Vector.TextView.Body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:gravity="center"
android:textColor="?vctr_content_secondary"
app:layout_constraintBottom_toTopOf="@id/threadListEmptyNoticeTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/threadListEmptyTitleTextView"
android:text="@string/thread_list_empty_subtitle" />
<TextView
android:id="@+id/threadListEmptyNoticeTextView"
style="@style/Widget.Vector.TextView.Caption"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="?vctr_content_secondary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/threadListEmptySubtitleTextView"
android:text="@string/thread_list_empty_notice" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -1046,6 +1046,9 @@
<string name="thread_list_modal_all_threads_subtitle">Shows all threads from current room</string>
<string name="thread_list_modal_my_threads_title">My Threads</string>
<string name="thread_list_modal_my_threads_subtitle">Shows all threads youve participated in</string>
<string name="thread_list_empty_title">Keep discussions organised with threads</string>
<string name="thread_list_empty_subtitle">Threads help keep your conversations on-topic and easy to track.</string>
<string name="thread_list_empty_notice">Tip: Long tap a message and use “Reply in thread”.</string>
<!-- Room events -->
<string name="room_event_action_report_prompt_reason">Reason for reporting this content</string>