From 9678d0ae4cd477aa40333355596393cafea4f974 Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 3 Dec 2018 15:53:11 -0700 Subject: [PATCH 01/11] Expose GiphyPickerDataSourceFactory.searchQuery The value will be read to determine how we want to show the empty view. --- .../giphy/GiphyPickerDataSourceFactory.kt | 19 ++++++++++--------- .../viewmodel/giphy/GiphyPickerViewModel.kt | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerDataSourceFactory.kt b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerDataSourceFactory.kt index 1039dabb58e0..8d6f8d59b81a 100644 --- a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerDataSourceFactory.kt +++ b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerDataSourceFactory.kt @@ -22,7 +22,16 @@ class GiphyPickerDataSourceFactory : Factory() { */ private val apiClient: GPHApiClient by lazy { GPHApiClient(BuildConfig.GIPHY_API_KEY) } - private var searchQuery: String = "" + /** + * The active search query. + * + * When changed, the current [GiphyPickerDataSource] will be invalidated. A new API search will be performed. + */ + var searchQuery: String = "" + set(value) { + field = value + dataSource?.invalidate() + } /** * The last [dataSource] that was created @@ -31,14 +40,6 @@ class GiphyPickerDataSourceFactory : Factory() { */ private var dataSource: DataSource? = null - /** - * Set the current [searchQuery] and invalidate the current [GiphyPickerDataSource] - */ - fun setSearchQuery(searchQuery: String) { - this.searchQuery = searchQuery - dataSource?.invalidate() - } - override fun create(): DataSource { val dataSource = GiphyPickerDataSource(apiClient, searchQuery) this.dataSource = dataSource diff --git a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt index d462f679ec13..9e2602d06e8a 100644 --- a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt +++ b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt @@ -52,7 +52,7 @@ class GiphyPickerViewModel( */ fun search(searchQuery: String) { _selectedMediaViewModelList.postValue(LinkedHashMap()) - dataSourceFactory.setSearchQuery(searchQuery) + dataSourceFactory.searchQuery = searchQuery } /** From c3bb64a6d4ee33d16f45122f27073efa96d788b7 Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 3 Dec 2018 16:22:40 -0700 Subject: [PATCH 02/11] Giphy Picker: Show an empty view if there are no results --- .../android/ui/giphy/GiphyPickerActivity.kt | 40 ++++++++++++++++ .../viewmodel/giphy/GiphyPickerViewModel.kt | 48 ++++++++++++++++++- WordPress/src/main/res/values/strings.xml | 3 ++ 3 files changed, 90 insertions(+), 1 deletion(-) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt index 01c43723bc0e..bc7e437dbd30 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt @@ -6,6 +6,8 @@ import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.support.v7.widget.GridLayoutManager import android.support.v7.widget.SearchView.OnQueryTextListener +import android.text.Html +import android.util.Log import android.view.MenuItem import android.view.View import android.view.ViewGroup @@ -13,11 +15,14 @@ import android.widget.RelativeLayout import kotlinx.android.synthetic.main.media_picker_activity.* import org.wordpress.android.R import org.wordpress.android.WordPress +import org.wordpress.android.ui.ActionableEmptyView import org.wordpress.android.ui.giphy.GiphyMediaViewHolder.ThumbnailViewDimensions import org.wordpress.android.util.AniUtils import org.wordpress.android.util.DisplayUtils +import org.wordpress.android.util.WPLinkMovementMethod import org.wordpress.android.util.image.ImageManager import org.wordpress.android.viewmodel.giphy.GiphyPickerViewModel +import org.wordpress.android.viewmodel.giphy.GiphyPickerViewModel.EmptyDisplayMode import javax.inject.Inject /** @@ -54,6 +59,7 @@ class GiphyPickerActivity : AppCompatActivity() { initializeRecyclerView() initializeSearchView() initializeSelectionBar() + initializeEmptyView() } /** @@ -148,6 +154,40 @@ class GiphyPickerActivity : AppCompatActivity() { }) } + private fun initializeEmptyView() { + viewModel.emptyDisplayMode.observe(this, Observer { emptyDisplayMode -> + val emptyView: ActionableEmptyView = actionable_empty_view + + emptyView.updateLayoutForSearch(true, 0) + + when (emptyDisplayMode) { + EmptyDisplayMode.HIDDEN -> { + emptyView.visibility = View.GONE + } + EmptyDisplayMode.VISIBLE_NO_SEARCH_RESULTS -> { + with(emptyView) { + visibility = View.VISIBLE + title.setText(R.string.giphy_picker_empty_search_list) + subtitle.visibility = View.GONE + } + } + EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY -> { + // Leave span with hard-coded #0087be to override jazzy orange until accent color is blue_wordpress. + val link = "Giphy" + val html = Html.fromHtml(getString(R.string.giphy_picker_initial_empty_subtext, link)) + + with(emptyView) { + visibility = View.VISIBLE + title.setText(R.string.giphy_picker_initial_empty_text) + subtitle.text = html + subtitle.movementMethod = WPLinkMovementMethod.getInstance() + subtitle.visibility = View.VISIBLE + } + } + } + }) + } + /** * Close this Activity when the up button is pressed */ diff --git a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt index 9e2602d06e8a..8d0be92d0610 100644 --- a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt +++ b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt @@ -6,6 +6,7 @@ import android.arch.lifecycle.Transformations import android.arch.lifecycle.ViewModel import android.arch.paging.LivePagedListBuilder import android.arch.paging.PagedList +import android.arch.paging.PagedList.BoundaryCallback import org.wordpress.android.util.getDistinct /** @@ -23,6 +24,27 @@ class GiphyPickerViewModel( */ private val dataSourceFactory: GiphyPickerDataSourceFactory = GiphyPickerDataSourceFactory() ) : ViewModel() { + /** + * Describes how an empty view UI should be displayed + */ + enum class EmptyDisplayMode { + HIDDEN, + /** + * Visible because the user has not performed a search or the search string is blank. + */ + VISIBLE_NO_SEARCH_QUERY, + /** + * Visible because the user has performed a search but there are no search results + */ + VISIBLE_NO_SEARCH_RESULTS + } + + private val _emptyDisplayMode = MutableLiveData().apply { value = EmptyDisplayMode.HIDDEN } + /** + * Describes how the empty view UI should be displayed + */ + val emptyDisplayMode: LiveData = _emptyDisplayMode.getDistinct() + private val _selectedMediaViewModelList = MutableLiveData>() /** * A [Map] of the [GiphyMediaViewModel]s that were selected by the user @@ -41,7 +63,27 @@ class GiphyPickerViewModel( val mediaViewModelPagedList: LiveData> by lazy { val pagedListConfig = PagedList.Config.Builder().setEnablePlaceholders(true).setPageSize(30).build() - LivePagedListBuilder(dataSourceFactory, pagedListConfig).build() + LivePagedListBuilder(dataSourceFactory, pagedListConfig).setBoundaryCallback(pagedListBoundaryCallback).build() + } + + /** + * Update the [emptyDisplayMode] depending on the number of API search results + */ + private val pagedListBoundaryCallback = object : BoundaryCallback() { + override fun onZeroItemsLoaded() { + val visibility = if (dataSourceFactory.searchQuery.isBlank()) { + EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY + } else { + EmptyDisplayMode.VISIBLE_NO_SEARCH_RESULTS + } + _emptyDisplayMode.postValue(visibility) + super.onZeroItemsLoaded() + } + + override fun onItemAtFrontLoaded(itemAtFront: GiphyMediaViewModel) { + _emptyDisplayMode.postValue(EmptyDisplayMode.HIDDEN) + super.onItemAtFrontLoaded(itemAtFront) + } } /** @@ -52,6 +94,10 @@ class GiphyPickerViewModel( */ fun search(searchQuery: String) { _selectedMediaViewModelList.postValue(LinkedHashMap()) + + // The empty view should be hidden while the user is searching + _emptyDisplayMode.postValue(EmptyDisplayMode.HIDDEN) + dataSourceFactory.searchQuery = searchQuery } diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml index ec3553ad381e..fdbca9d0b4ae 100644 --- a/WordPress/src/main/res/values/strings.xml +++ b/WordPress/src/main/res/values/strings.xml @@ -1999,6 +1999,9 @@ Photos provided by %s Search Giphy + Search to find free GIFs to add to your Media Library + GIFs provided by %s + No GIFs matching your search Saving post as draft From 17483dd6e05f6ed464dc0ed8168f56fec9b80c35 Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 3 Dec 2018 19:57:07 -0700 Subject: [PATCH 03/11] Giphy Picker: Move getDistinct() to UI Using `getDistinct()` in the ViewModel makes `emptyDisplayMode` slightly harder to test. It looks like we'll have to add an `Observer` for it to work. --- .../org/wordpress/android/ui/giphy/GiphyPickerActivity.kt | 3 ++- .../android/viewmodel/giphy/GiphyPickerViewModel.kt | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt index bc7e437dbd30..00fa56002d42 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt @@ -20,6 +20,7 @@ import org.wordpress.android.ui.giphy.GiphyMediaViewHolder.ThumbnailViewDimensio import org.wordpress.android.util.AniUtils import org.wordpress.android.util.DisplayUtils import org.wordpress.android.util.WPLinkMovementMethod +import org.wordpress.android.util.getDistinct import org.wordpress.android.util.image.ImageManager import org.wordpress.android.viewmodel.giphy.GiphyPickerViewModel import org.wordpress.android.viewmodel.giphy.GiphyPickerViewModel.EmptyDisplayMode @@ -155,7 +156,7 @@ class GiphyPickerActivity : AppCompatActivity() { } private fun initializeEmptyView() { - viewModel.emptyDisplayMode.observe(this, Observer { emptyDisplayMode -> + viewModel.emptyDisplayMode.getDistinct().observe(this, Observer { emptyDisplayMode -> val emptyView: ActionableEmptyView = actionable_empty_view emptyView.updateLayoutForSearch(true, 0) diff --git a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt index 8d0be92d0610..43aebaf280da 100644 --- a/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt +++ b/WordPress/src/main/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModel.kt @@ -39,11 +39,13 @@ class GiphyPickerViewModel( VISIBLE_NO_SEARCH_RESULTS } - private val _emptyDisplayMode = MutableLiveData().apply { value = EmptyDisplayMode.HIDDEN } + private val _emptyDisplayMode = MutableLiveData().apply { + value = EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY + } /** * Describes how the empty view UI should be displayed */ - val emptyDisplayMode: LiveData = _emptyDisplayMode.getDistinct() + val emptyDisplayMode: LiveData = _emptyDisplayMode private val _selectedMediaViewModelList = MutableLiveData>() /** From 44adc609ded7d8defcf3a832b4b4d86c5e61ae69 Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 3 Dec 2018 20:14:33 -0700 Subject: [PATCH 04/11] Giphy Picker: Add tests for emptyDisplayMode --- .../giphy/GiphyPickerViewModelTest.kt | 58 ++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt b/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt index 172aa94d26a5..79641c8d1334 100644 --- a/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt +++ b/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt @@ -1,16 +1,31 @@ package org.wordpress.android.viewmodel.giphy import android.arch.core.executor.testing.InstantTaskExecutorRule +import android.arch.paging.PositionalDataSource.LoadInitialCallback +import com.nhaarman.mockito_kotlin.any +import com.nhaarman.mockito_kotlin.argumentCaptor +import com.nhaarman.mockito_kotlin.doNothing import com.nhaarman.mockito_kotlin.mock +import com.nhaarman.mockito_kotlin.times +import com.nhaarman.mockito_kotlin.verify +import com.nhaarman.mockito_kotlin.whenever import org.assertj.core.api.Assertions.assertThat +import org.junit.Before import org.junit.Rule import org.junit.Test +import org.wordpress.android.viewmodel.giphy.GiphyPickerViewModel.EmptyDisplayMode class GiphyPickerViewModelTest { @get:Rule val rule = InstantTaskExecutorRule() - private val viewModel = GiphyPickerViewModel(dataSourceFactory = mock()) + private val dataSourceFactory = mock() + private lateinit var viewModel: GiphyPickerViewModel + + @Before + fun setup() { + viewModel = GiphyPickerViewModel(dataSourceFactory = dataSourceFactory) + } @Test fun `when setting a mediaViewModel as selected, it adds that to the selected list`() { @@ -92,4 +107,45 @@ class GiphyPickerViewModelTest { // Assert assertThat(viewModel.selectedMediaViewModelList.value).isEmpty() } + + @Test + fun `when searching, the empty view should be immediately set to hidden`() { + // Arrange + assertThat(viewModel.emptyDisplayMode.value).isEqualTo(EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY) + + // Act + viewModel.search("dummy") + + // Assert + assertThat(viewModel.emptyDisplayMode.value).isEqualTo(EmptyDisplayMode.HIDDEN) + } + + @Test + fun `when search results are empty, the empty view should be visible and says there are no results`() { + // Arrange + val dataSource = mock() + + whenever(dataSourceFactory.create()).thenReturn(dataSource) + whenever(dataSourceFactory.searchQuery).thenReturn("dummy") + + val callbackCaptor = argumentCaptor>() + doNothing().whenever(dataSource).loadInitial(any(), callbackCaptor.capture()) + + // Observe mediaViewModelPagedList so the DataSourceFactory will be activated and perform API requests + viewModel.mediaViewModelPagedList.observeForever { + + } + + assertThat(viewModel.emptyDisplayMode.value).isEqualTo(EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY) + + // Act + viewModel.search("dummy") + // Emulate a callback from the API + callbackCaptor.lastValue.onResult(emptyList(), 0, 0) + + // Assert + assertThat(viewModel.emptyDisplayMode.value).isEqualTo(EmptyDisplayMode.VISIBLE_NO_SEARCH_RESULTS) + + verify(dataSource, times(1)).loadInitial(any(), any()) + } } From 2a33fe4fe0760ab90ae447dde9885b6f1be0a731 Mon Sep 17 00:00:00 2001 From: Shiki Date: Tue, 4 Dec 2018 07:34:38 -0700 Subject: [PATCH 05/11] Giphy Picker: Add comments --- .../org/wordpress/android/ui/giphy/GiphyPickerActivity.kt | 4 +++- .../android/viewmodel/giphy/GiphyPickerViewModelTest.kt | 6 ++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt index 00fa56002d42..88fdc070deba 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt @@ -7,7 +7,6 @@ import android.support.v7.app.AppCompatActivity import android.support.v7.widget.GridLayoutManager import android.support.v7.widget.SearchView.OnQueryTextListener import android.text.Html -import android.util.Log import android.view.MenuItem import android.view.View import android.view.ViewGroup @@ -155,6 +154,9 @@ class GiphyPickerActivity : AppCompatActivity() { }) } + /** + * Set up showing and hiding of the empty view depending on the search results + */ private fun initializeEmptyView() { viewModel.emptyDisplayMode.getDistinct().observe(this, Observer { emptyDisplayMode -> val emptyView: ActionableEmptyView = actionable_empty_view diff --git a/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt b/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt index 79641c8d1334..3cfa54c79364 100644 --- a/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt +++ b/WordPress/src/test/java/org/wordpress/android/viewmodel/giphy/GiphyPickerViewModelTest.kt @@ -132,15 +132,13 @@ class GiphyPickerViewModelTest { doNothing().whenever(dataSource).loadInitial(any(), callbackCaptor.capture()) // Observe mediaViewModelPagedList so the DataSourceFactory will be activated and perform API requests - viewModel.mediaViewModelPagedList.observeForever { - - } + viewModel.mediaViewModelPagedList.observeForever { } assertThat(viewModel.emptyDisplayMode.value).isEqualTo(EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY) // Act viewModel.search("dummy") - // Emulate a callback from the API + // Emulate that the API responded with an empty result callbackCaptor.lastValue.onResult(emptyList(), 0, 0) // Assert From f0f3f13959a49b11b60ebaa4e07d86ef1ff6d0cf Mon Sep 17 00:00:00 2001 From: Shiki Date: Tue, 4 Dec 2018 07:39:00 -0700 Subject: [PATCH 06/11] Rename giphy_search_hint to giphy_picker_search_hint This makes it consistent with the other string resource names. --- .../java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt | 2 +- WordPress/src/main/res/values/strings.xml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt index 88fdc070deba..0ac0b7058cab 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt @@ -95,7 +95,7 @@ class GiphyPickerActivity : AppCompatActivity() { * Configure the search view to execute search when the keyboard's Done button is pressed. */ private fun initializeSearchView() { - search_view.queryHint = getString(R.string.giphy_search_hint) + search_view.queryHint = getString(R.string.giphy_picker_search_hint) search_view.setOnQueryTextListener(object : OnQueryTextListener { override fun onQueryTextSubmit(query: String): Boolean { diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml index fdbca9d0b4ae..6af9a705bf6f 100644 --- a/WordPress/src/main/res/values/strings.xml +++ b/WordPress/src/main/res/values/strings.xml @@ -1998,7 +1998,7 @@ Search to find free photos to add to your Media Library Photos provided by %s - Search Giphy + Search Giphy Search to find free GIFs to add to your Media Library GIFs provided by %s No GIFs matching your search From 0471627a7e82d0100f53aeb1850a05f23ffd0abb Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 10 Dec 2018 17:30:18 -0700 Subject: [PATCH 07/11] Add bottomImage to ActionableEmptyView This will be used for the Giphy logo. It is hidden by default. --- .../org/wordpress/android/ui/ActionableEmptyView.kt | 8 ++++++++ .../src/main/res/layout/actionable_empty_view.xml | 10 ++++++++++ 2 files changed, 18 insertions(+) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt b/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt index 02282e458d31..d0e2b716fee0 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt @@ -17,6 +17,7 @@ import org.wordpress.android.widgets.WPTextView * - Title describing cause for empty state (required) * - Subtitle detailing cause for empty state (optional) * - Button providing action to take (optional) + * - Bottom Image which can be used for attribution logos (optional) */ class ActionableEmptyView : LinearLayout { lateinit var button: AppCompatButton @@ -24,6 +25,12 @@ class ActionableEmptyView : LinearLayout { lateinit var layout: View lateinit var subtitle: WPTextView lateinit var title: WPTextView + /** + * Image shown at the bottom after the subtitle. + * + * This can be used for attribution logos. This is [View.GONE] by default. + */ + lateinit var bottomImage: ImageView constructor(context: Context, attrs: AttributeSet) : super(context, attrs) { initView(context, attrs) @@ -45,6 +52,7 @@ class ActionableEmptyView : LinearLayout { title = layout.findViewById(R.id.title) subtitle = layout.findViewById(R.id.subtitle) button = layout.findViewById(R.id.button) + bottomImage = layout.findViewById(R.id.bottom_image) attrs.let { val typedArray = context.obtainStyledAttributes(it, R.styleable.ActionableEmptyView, 0, 0) diff --git a/WordPress/src/main/res/layout/actionable_empty_view.xml b/WordPress/src/main/res/layout/actionable_empty_view.xml index aabd0d1b4720..d84e1bd30273 100644 --- a/WordPress/src/main/res/layout/actionable_empty_view.xml +++ b/WordPress/src/main/res/layout/actionable_empty_view.xml @@ -53,6 +53,16 @@ android:visibility="gone" > + + + From 5f06db2da946f8aad7ae0f5cf90b4f3b4ae9f448 Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 10 Dec 2018 17:40:03 -0700 Subject: [PATCH 08/11] Giphy: Show logo when the picker is shown - Also show the `img_illustration_media_105dp` at the top. This matches the iOS app. - The logo was taken from https://developers.giphy.com/docs/. The original file name used was `Poweredby_640px-White_VertText.png`. We converted to SVG and changed the size to 100x34. --- .../android/ui/giphy/GiphyPickerActivity.kt | 26 ++++++++-------- .../res/drawable/giphy_attribution_100dp.xml | 31 +++++++++++++++++++ WordPress/src/main/res/values/strings.xml | 2 +- 3 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 WordPress/src/main/res/drawable/giphy_attribution_100dp.xml diff --git a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt index 0ac0b7058cab..dd9c87451cd2 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt @@ -6,19 +6,18 @@ import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.support.v7.widget.GridLayoutManager import android.support.v7.widget.SearchView.OnQueryTextListener -import android.text.Html import android.view.MenuItem import android.view.View import android.view.ViewGroup import android.widget.RelativeLayout import kotlinx.android.synthetic.main.media_picker_activity.* import org.wordpress.android.R +import org.wordpress.android.R.string import org.wordpress.android.WordPress import org.wordpress.android.ui.ActionableEmptyView import org.wordpress.android.ui.giphy.GiphyMediaViewHolder.ThumbnailViewDimensions import org.wordpress.android.util.AniUtils import org.wordpress.android.util.DisplayUtils -import org.wordpress.android.util.WPLinkMovementMethod import org.wordpress.android.util.getDistinct import org.wordpress.android.util.image.ImageManager import org.wordpress.android.viewmodel.giphy.GiphyPickerViewModel @@ -158,11 +157,16 @@ class GiphyPickerActivity : AppCompatActivity() { * Set up showing and hiding of the empty view depending on the search results */ private fun initializeEmptyView() { - viewModel.emptyDisplayMode.getDistinct().observe(this, Observer { emptyDisplayMode -> - val emptyView: ActionableEmptyView = actionable_empty_view + val emptyView: ActionableEmptyView = actionable_empty_view + emptyView.run { + image.setImageResource(R.drawable.img_illustration_media_105dp) + bottomImage.setImageResource(R.drawable.giphy_attribution_100dp) + bottomImage.contentDescription = getString(string.giphy_powered_by_giphy) - emptyView.updateLayoutForSearch(true, 0) + updateLayoutForSearch(true, 0) + } + viewModel.emptyDisplayMode.getDistinct().observe(this, Observer { emptyDisplayMode -> when (emptyDisplayMode) { EmptyDisplayMode.HIDDEN -> { emptyView.visibility = View.GONE @@ -171,20 +175,16 @@ class GiphyPickerActivity : AppCompatActivity() { with(emptyView) { visibility = View.VISIBLE title.setText(R.string.giphy_picker_empty_search_list) - subtitle.visibility = View.GONE + image.visibility = View.GONE + bottomImage.visibility = View.GONE } } EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY -> { - // Leave span with hard-coded #0087be to override jazzy orange until accent color is blue_wordpress. - val link = "Giphy" - val html = Html.fromHtml(getString(R.string.giphy_picker_initial_empty_subtext, link)) - with(emptyView) { visibility = View.VISIBLE title.setText(R.string.giphy_picker_initial_empty_text) - subtitle.text = html - subtitle.movementMethod = WPLinkMovementMethod.getInstance() - subtitle.visibility = View.VISIBLE + image.visibility = View.VISIBLE + bottomImage.visibility = View.VISIBLE } } } diff --git a/WordPress/src/main/res/drawable/giphy_attribution_100dp.xml b/WordPress/src/main/res/drawable/giphy_attribution_100dp.xml new file mode 100644 index 000000000000..eef6295796e2 --- /dev/null +++ b/WordPress/src/main/res/drawable/giphy_attribution_100dp.xml @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml index 6af9a705bf6f..4696e6441eaf 100644 --- a/WordPress/src/main/res/values/strings.xml +++ b/WordPress/src/main/res/values/strings.xml @@ -2000,8 +2000,8 @@ Search Giphy Search to find free GIFs to add to your Media Library - GIFs provided by %s No GIFs matching your search + Powered by GIPHY Saving post as draft From d630fe17f9fb2d235698ac03c8e91ddd31e3d594 Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 10 Dec 2018 17:49:46 -0700 Subject: [PATCH 09/11] Update Giphy logo to match the iOS app's colors --- .../res/drawable/giphy_attribution_100dp.xml | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/WordPress/src/main/res/drawable/giphy_attribution_100dp.xml b/WordPress/src/main/res/drawable/giphy_attribution_100dp.xml index eef6295796e2..0824913ef528 100644 --- a/WordPress/src/main/res/drawable/giphy_attribution_100dp.xml +++ b/WordPress/src/main/res/drawable/giphy_attribution_100dp.xml @@ -1,31 +1,31 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + From 469bb4a1540491559ebeff0eceb8c1db2c896bbf Mon Sep 17 00:00:00 2001 From: Shiki Date: Mon, 10 Dec 2018 17:54:02 -0700 Subject: [PATCH 10/11] Giphy: Update empty view strings to match iOS app --- WordPress/src/main/res/values/strings.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml index 4696e6441eaf..d5646791e80a 100644 --- a/WordPress/src/main/res/values/strings.xml +++ b/WordPress/src/main/res/values/strings.xml @@ -1999,8 +1999,8 @@ Photos provided by %s Search Giphy - Search to find free GIFs to add to your Media Library - No GIFs matching your search + Search to find GIFs to add to your Media Library! + No media matching your search Powered by GIPHY From 73f9b8e77c04ee549aad1af0c86659c80dc41bc9 Mon Sep 17 00:00:00 2001 From: Shiki Date: Tue, 11 Dec 2018 16:48:15 -0700 Subject: [PATCH 11/11] Giphy: Vertically-centered Empty View --- .../org/wordpress/android/ui/giphy/GiphyPickerActivity.kt | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt index dd9c87451cd2..0800259df71c 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/giphy/GiphyPickerActivity.kt @@ -162,8 +162,6 @@ class GiphyPickerActivity : AppCompatActivity() { image.setImageResource(R.drawable.img_illustration_media_105dp) bottomImage.setImageResource(R.drawable.giphy_attribution_100dp) bottomImage.contentDescription = getString(string.giphy_powered_by_giphy) - - updateLayoutForSearch(true, 0) } viewModel.emptyDisplayMode.getDistinct().observe(this, Observer { emptyDisplayMode -> @@ -173,6 +171,8 @@ class GiphyPickerActivity : AppCompatActivity() { } EmptyDisplayMode.VISIBLE_NO_SEARCH_RESULTS -> { with(emptyView) { + updateLayoutForSearch(isSearching = true, topMargin = 0) + visibility = View.VISIBLE title.setText(R.string.giphy_picker_empty_search_list) image.visibility = View.GONE @@ -181,6 +181,8 @@ class GiphyPickerActivity : AppCompatActivity() { } EmptyDisplayMode.VISIBLE_NO_SEARCH_QUERY -> { with(emptyView) { + updateLayoutForSearch(isSearching = false, topMargin = 0) + visibility = View.VISIBLE title.setText(R.string.giphy_picker_initial_empty_text) image.visibility = View.VISIBLE