From d7c2480174db15bd834872d7b669b1acc6ca85ea Mon Sep 17 00:00:00 2001 From: Kshitij Bhardwaj <44129798+kbhardwaj123@users.noreply.github.com> Date: Sun, 19 Apr 2020 18:24:17 -0400 Subject: [PATCH] Fixes #3436 and #2881: Media Detail design Overhaul (#3505) * ic_map_dark_24dp: map icon for white background * ic_info_outline_dark_24dp: info icon for dark background * MediaDetailFragment: update the spacer as per image aspect ratio * fragment_media_detail: design overhaul * fragment_media_detail: remove redundant background color statements * make requested changes * add dark mode support * minor ui tweak * white map icon in dark mode * make rquested changes * make requested changes to layout * fix misalignment of category list * subtle amendments * convert comments to javadocs * minor amendments * minor changes * add styles for media detail * Media detail fragment refactored * make suggested changes * minor name fix * fix the delete button border --- .../commons/media/MediaDetailFragment.java | 13 +- .../res/drawable/bg_copy_wikitext_button.xml | 9 + .../main/res/drawable/bg_delete_button.xml | 5 +- .../drawable/ic_info_outline_dark_24dp.xml | 9 + .../main/res/drawable/ic_map_dark_24dp.xml | 9 + .../main/res/layout/detail_category_item.xml | 10 +- .../main/res/layout/fragment_media_detail.xml | 265 +++++++----------- app/src/main/res/values/attrs.xml | 6 + app/src/main/res/values/colors.xml | 3 +- app/src/main/res/values/styles.xml | 43 +++ 10 files changed, 194 insertions(+), 178 deletions(-) create mode 100644 app/src/main/res/drawable/bg_copy_wikitext_button.xml create mode 100644 app/src/main/res/drawable/ic_info_outline_dark_24dp.xml create mode 100644 app/src/main/res/drawable/ic_map_dark_24dp.xml diff --git a/app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java b/app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java index 2349b62367..689e623955 100644 --- a/app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java +++ b/app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java @@ -105,6 +105,8 @@ public static MediaDetailFragment forMedia(int index, boolean editable, boolean @BindView(R.id.mediaDetailImageView) SimpleDraweeView image; + @BindView(R.id.mediaDetailImageViewSpacer) + LinearLayout imageSpacer; @BindView(R.id.mediaDetailTitle) TextView title; @BindView(R.id.mediaDetailDesc) @@ -205,7 +207,7 @@ && getParentFragment() instanceof MediaDetailPagerFragment) { return view; } - @OnClick(R.id.mediaDetailImageView) + @OnClick(R.id.mediaDetailImageViewSpacer) public void launchZoomActivity(View view) { Context ctx = view.getContext(); ctx.startActivity( @@ -241,12 +243,21 @@ private void displayMediaDetails() { compositeDisposable.add(disposable); } + /** + * The imageSpacer is Basically a transparent overlay for the SimpleDraweeView + * which holds the image to be displayed( moreover this image is out of + * the scroll view ) + * @param imageInfo used to calculate height of the ImageSpacer + */ private void updateAspectRatio(ImageInfo imageInfo) { if (imageInfo != null) { int finalHeight = (scrollView.getWidth()*imageInfo.getHeight()) / imageInfo.getWidth(); ViewGroup.LayoutParams params = image.getLayoutParams(); + ViewGroup.LayoutParams spacerParams = imageSpacer.getLayoutParams(); params.height = finalHeight; + spacerParams.height = finalHeight; image.setLayoutParams(params); + imageSpacer.setLayoutParams(spacerParams); } } diff --git a/app/src/main/res/drawable/bg_copy_wikitext_button.xml b/app/src/main/res/drawable/bg_copy_wikitext_button.xml new file mode 100644 index 0000000000..a69e1073a8 --- /dev/null +++ b/app/src/main/res/drawable/bg_copy_wikitext_button.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_delete_button.xml b/app/src/main/res/drawable/bg_delete_button.xml index 819986f5be..2eab78e895 100644 --- a/app/src/main/res/drawable/bg_delete_button.xml +++ b/app/src/main/res/drawable/bg_delete_button.xml @@ -9,12 +9,9 @@ + android:color="?attr/mediaDetailNominationBackground"/> - diff --git a/app/src/main/res/drawable/ic_info_outline_dark_24dp.xml b/app/src/main/res/drawable/ic_info_outline_dark_24dp.xml new file mode 100644 index 0000000000..79fc472615 --- /dev/null +++ b/app/src/main/res/drawable/ic_info_outline_dark_24dp.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/ic_map_dark_24dp.xml b/app/src/main/res/drawable/ic_map_dark_24dp.xml new file mode 100644 index 0000000000..2063dfe95d --- /dev/null +++ b/app/src/main/res/drawable/ic_map_dark_24dp.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/layout/detail_category_item.xml b/app/src/main/res/layout/detail_category_item.xml index 02fb6c80f5..181fdb1e0e 100644 --- a/app/src/main/res/layout/detail_category_item.xml +++ b/app/src/main/res/layout/detail_category_item.xml @@ -10,15 +10,15 @@ android:id="@+id/mediaDetailCategoryItemText" android:layout_width="match_parent" android:layout_height="wrap_content" - android:background="?attr/subBackground" + android:background="?attr/mainBackground" android:foreground="?attr/selectableItemBackground" android:gravity="center_vertical" android:minHeight="@dimen/overflow_button_dimen" - android:padding="@dimen/quarter_standard_height" - android:textColor="@android:color/white" + android:padding="@dimen/small_gap" + android:textColor="?attr/mediaDetailsText" android:textSize="@dimen/description_text_size" - app:drawablePadding="@dimen/small_gap" - app:drawableStart="@drawable/ic_info_outline_24dp" + app:drawablePadding="@dimen/tiny_gap" + app:drawableStart="?attr/iconInfo24" /> diff --git a/app/src/main/res/layout/fragment_media_detail.xml b/app/src/main/res/layout/fragment_media_detail.xml index 1cdcccaa59..1e238f377f 100644 --- a/app/src/main/res/layout/fragment_media_detail.xml +++ b/app/src/main/res/layout/fragment_media_detail.xml @@ -19,11 +19,10 @@ /> + android:layout_height="@dimen/dimen_250" + app:actualImageScaleType="none" /> - + android:orientation="vertical" + android:background="@android:color/transparent" + android:id="@+id/mediaDetailImageViewSpacer" + /> + android:background="?attr/mainBackground" + android:orientation="vertical"> + android:background="@color/primaryDarkColor" + android:orientation="horizontal" + android:padding="@dimen/quarter_standard_height"> + + style="@style/MediaDetailTextLabelTitle" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/media_detail_title" /> - - + android:orientation="horizontal"> + style="@style/MediaDetailTextLabelGeneric" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/media_detail_author" /> - - + android:orientation="horizontal"> + style="@style/MediaDetailTextLabelGeneric" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/media_detail_description" /> - + android:layout_height="@dimen/tiny_gap"/> + android:orientation="horizontal"> + style="@style/MediaDetailTextLabelGeneric" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/media_detail_license" /> - - + android:orientation="horizontal"> + style="@style/MediaDetailTextLabelGeneric" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/media_detail_coordinates" /> - - + style="@style/MediaDetailTextLabelGeneric" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/detail_panel_cats_label" /> - - + android:orientation="horizontal"> + style="@style/MediaDetailTextLabelGeneric" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/media_detail_uploaded_date" /> - - + + - - + android:orientation="horizontal"> + style="@style/MediaDetailTextLabelGeneric" + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" + android:text="@string/media_detail_discussion" /> + android:layout_width="@dimen/widget_margin" + android:layout_height="match_parent" />