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

Author: kbhardwaj123

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);
         }
     }
 

app/src/main/res/drawable/bg_copy_wikitext_button.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid
+        android:color="@color/button_blue" />
+    <corners
+        android:radius="@dimen/progressbar_stroke" />
+</shape>

app/src/main/res/drawable/bg_delete_button.xml

@@ -9,12 +9,9 @@
         <shape
             android:shape="rectangle">
             <solid
-                android:color="@color/deleteButton"/>
+                android:color="?attr/mediaDetailNominationBackground"/>
             <corners
                 android:radius="@dimen/progressbar_stroke" />
-            <stroke
-                android:width="5px"
-                android:color="@color/deleteRed" />
         </shape>
     </item>
 

app/src/main/res/drawable/ic_info_outline_dark_24dp.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="@dimen/half_standard_height"
+        android:height="@dimen/half_standard_height"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="@color/button_background_dark"
+        android:pathData="M11,17h2v-6h-2v6zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM11,9h2L13,7h-2v2z"/>
+</vector>

app/src/main/res/drawable/ic_map_dark_24dp.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="@dimen/half_standard_height"
+        android:height="@dimen/half_standard_height"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="@color/button_background_dark"
+        android:pathData="M20.5,3l-0.16,0.03L15,5.1 9,3 3.36,4.9c-0.21,0.07 -0.36,0.25 -0.36,0.48V20.5c0,0.28 0.22,0.5 0.5,0.5l0.16,-0.03L9,18.9l6,2.1 5.64,-1.9c0.21,-0.07 0.36,-0.25 0.36,-0.48V3.5c0,-0.28 -0.22,-0.5 -0.5,-0.5zM15,19l-6,-2.11V5l6,2.11V19z"/>
+</vector>

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"
         />
 
 </LinearLayout>