From 81e12a9e1fde70576f4d59fcac559f272ecb9ac4 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 de4bf762b0..baf6cac8b2 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
@@ -104,6 +104,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)
@@ -204,7 +206,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(
@@ -248,13 +250,22 @@ 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 screenWidth = scrollView.getWidth();
int finalHeight = (screenWidth*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" />
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index 822be2dd4a..06d9ad6e2e 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -26,6 +26,12 @@
+
+
+
+
+
+
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index e0bc3fdc5b..dd75fec404 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -24,7 +24,8 @@
#ffffff
#000000
- #90960a0a
+ #D32F2F
+ #90960a0a
#44000000
#88000000
#44ffffff
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index d4ea8ac576..a4116157ac 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -34,6 +34,12 @@
- @color/enabled_button_text_color_dark
- @color/main_background_dark
- @style/DarkFlatNearbyPermissionButton
+ - @drawable/ic_info_outline_24dp
+ - @drawable/ic_map_white_24dp
+ - @color/white
+ - @color/layout_light_grey
+ - @color/deleteRedDark
+ - @color/browser_actions_divider_color
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file