diff --git a/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt b/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt new file mode 100644 index 000000000000..0f4ec879ca06 --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt @@ -0,0 +1,91 @@ +package org.wordpress.android.ui + +import android.content.Context +import android.support.annotation.DrawableRes +import android.support.annotation.NonNull +import android.support.v7.widget.AppCompatButton +import android.util.AttributeSet +import android.view.View +import android.widget.ImageView +import android.widget.LinearLayout +import org.wordpress.android.R +import org.wordpress.android.widgets.WPTextView + +/** + * View shown when screen is in an empty state. It contains the following: + * - Image showing related illustration (optional) + * - Title describing cause for empty state (required) + * - Subtitle detailing cause for empty state (optional) + * - Button providing action to take (optional) + */ +class ActionableEmptyView : LinearLayout { + lateinit var button: AppCompatButton + lateinit var image: ImageView + lateinit var subtitle: WPTextView + lateinit var title: WPTextView + + constructor(context: Context, attrs: AttributeSet) : super(context, attrs) { + initView(context, attrs) + } + + constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) { + initView(context, attrs) + } + + private fun initView(context: Context, attrs: AttributeSet) { + val layout = View.inflate(context, R.layout.actionable_empty_view, this) + + image = layout.findViewById(R.id.image) + title = layout.findViewById(R.id.title) + subtitle = layout.findViewById(R.id.subtitle) + button = layout.findViewById(R.id.button) + + attrs.let { + val typedArray = context.obtainStyledAttributes(it, R.styleable.ActionableEmptyView, 0, 0) + + val imageResource = typedArray.getResourceId(R.styleable.ActionableEmptyView_aevImage, 0) + val titleAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevTitle) + val subtitleAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevSubtitle) + val buttonAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevButton) + + if (imageResource != 0) { + image.setImageResource(imageResource) + image.visibility = View.VISIBLE + } + + if (!titleAttribute.isNullOrEmpty()) { + title.text = titleAttribute + } else { + throw RuntimeException(context.toString() + ": ActionableEmptyView must have a title (wpTitle)") + } + + if (!subtitleAttribute.isNullOrEmpty()) { + subtitle.text = subtitleAttribute + subtitle.visibility = View.VISIBLE + } + + if (!buttonAttribute.isNullOrEmpty()) { + button.text = buttonAttribute + button.visibility = View.VISIBLE + } + + typedArray.recycle() + } + } + + fun setButtonClickListener(@NonNull listener: OnClickListener) { + button.setOnClickListener(listener) + } + + fun setImageResource(@NonNull @DrawableRes resId: Int) { + image.setImageResource(resId) + } + + fun setSubtitleText(@NonNull charSequence: CharSequence) { + subtitle.text = charSequence + } + + fun setTitleText(@NonNull charSequence: CharSequence) { + title.text = charSequence + } +} diff --git a/WordPress/src/main/java/org/wordpress/android/ui/media/MediaBrowserActivity.java b/WordPress/src/main/java/org/wordpress/android/ui/media/MediaBrowserActivity.java index 632ec1812be1..5fd3d67b3008 100755 --- a/WordPress/src/main/java/org/wordpress/android/ui/media/MediaBrowserActivity.java +++ b/WordPress/src/main/java/org/wordpress/android/ui/media/MediaBrowserActivity.java @@ -784,7 +784,7 @@ public void onReceive(Context context, Intent intent) { } }; - private void showAddMediaPopup() { + public void showAddMediaPopup() { View anchor = findViewById(R.id.menu_new_media); PopupMenu popup = new PopupMenu(this, anchor); diff --git a/WordPress/src/main/java/org/wordpress/android/ui/media/MediaGridFragment.java b/WordPress/src/main/java/org/wordpress/android/ui/media/MediaGridFragment.java index c8191648d124..c958a6271b2a 100755 --- a/WordPress/src/main/java/org/wordpress/android/ui/media/MediaGridFragment.java +++ b/WordPress/src/main/java/org/wordpress/android/ui/media/MediaGridFragment.java @@ -17,8 +17,8 @@ import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; +import android.view.View.OnClickListener; import android.view.ViewGroup; -import android.widget.TextView; import org.greenrobot.eventbus.Subscribe; import org.greenrobot.eventbus.ThreadMode; @@ -34,6 +34,7 @@ import org.wordpress.android.fluxc.store.MediaStore.MediaErrorType; import org.wordpress.android.fluxc.store.MediaStore.OnMediaListFetched; import org.wordpress.android.fluxc.utils.MediaUtils; +import org.wordpress.android.ui.ActionableEmptyView; import org.wordpress.android.ui.EmptyViewMessageType; import org.wordpress.android.ui.media.MediaGridAdapter.MediaGridAdapterCallback; import org.wordpress.android.ui.media.services.MediaDeleteService; @@ -146,7 +147,7 @@ private static MediaFilter fromMimeType(@NonNull String mimeType) { private SwipeToRefreshHelper mSwipeToRefreshHelper; - private TextView mEmptyView; + private ActionableEmptyView mEmptyView; private EmptyViewMessageType mEmptyViewMessageType = EmptyViewMessageType.NO_CONTENT; private SiteModel mSite; @@ -241,7 +242,14 @@ public void onScrollStateChanged(RecyclerView recyclerView, int newState) { } }); - mEmptyView = (TextView) view.findViewById(R.id.empty_view); + mEmptyView = (ActionableEmptyView) view.findViewById(R.id.actionable_empty_view); + mEmptyView.setButtonClickListener(new OnClickListener() { + @Override public void onClick(View view) { + if (isAdded() && getActivity() instanceof MediaBrowserActivity) { + ((MediaBrowserActivity) getActivity()).showAddMediaPopup(); + } + } + }); mRecycler.setEmptyView(mEmptyView); // swipe to refresh setup @@ -599,7 +607,7 @@ private void updateEmptyView(EmptyViewMessageType emptyViewMessageType) { break; } - mEmptyView.setText(getText(stringId)); + mEmptyView.setTitleText(getText(stringId)); mEmptyView.setVisibility(View.VISIBLE); } else { mEmptyView.setVisibility(View.GONE); diff --git a/WordPress/src/main/res/drawable/img_illustration_media.xml b/WordPress/src/main/res/drawable/img_illustration_media.xml new file mode 100644 index 000000000000..e10c1486e3d3 --- /dev/null +++ b/WordPress/src/main/res/drawable/img_illustration_media.xml @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + diff --git a/WordPress/src/main/res/layout/actionable_empty_view.xml b/WordPress/src/main/res/layout/actionable_empty_view.xml new file mode 100644 index 000000000000..4feaa766f12b --- /dev/null +++ b/WordPress/src/main/res/layout/actionable_empty_view.xml @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/WordPress/src/main/res/layout/media_grid_fragment.xml b/WordPress/src/main/res/layout/media_grid_fragment.xml index d0b6c4e7fc60..3af8446c6f89 100644 --- a/WordPress/src/main/res/layout/media_grid_fragment.xml +++ b/WordPress/src/main/res/layout/media_grid_fragment.xml @@ -33,21 +33,15 @@ - + app:aevButton="@string/media_empty_upload_media" + app:aevImage="@drawable/img_illustration_media" + app:aevTitle="@string/media_empty_list" + tools:visibility="visible" > + diff --git a/WordPress/src/main/res/values/attrs.xml b/WordPress/src/main/res/values/attrs.xml index e9d4d0af3de9..a7c828da791f 100644 --- a/WordPress/src/main/res/values/attrs.xml +++ b/WordPress/src/main/res/values/attrs.xml @@ -139,4 +139,18 @@ + + + + + + + + + + + + diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml index d12ec0f97081..f40b4f6a7ee5 100644 --- a/WordPress/src/main/res/values/dimens.xml +++ b/WordPress/src/main/res/values/dimens.xml @@ -315,5 +315,9 @@ 40dp 16dp + + 30dp + 440dp + 18dp diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml index 22904df42e8f..e384fba1d07c 100644 --- a/WordPress/src/main/res/values/strings.xml +++ b/WordPress/src/main/res/values/strings.xml @@ -198,11 +198,12 @@ Some media can\'t be deleted at this time. Try again later. Media has been removed. Delete it from this post? - No media + You don\'t have any media You don\'t have any images You don\'t have any videos You don\'t have any documents You don\'t have any audio + Upload media Delete Delete this image? Remove this image from the post? diff --git a/WordPress/src/main/res/values/styles.xml b/WordPress/src/main/res/values/styles.xml index be8defa5cf0c..3115fad6e6b6 100644 --- a/WordPress/src/main/res/values/styles.xml +++ b/WordPress/src/main/res/values/styles.xml @@ -698,4 +698,32 @@ @dimen/list_divider_height @color/grey_lighten_20 + + + + + + +