Fix #2881 (Change Media Details UI) (#2954)

* Media Details UI changed - XML file

* Onclicks added, design updated

* Removed bookmark item from media detail menu

* Update in XML

Author: ujjwalagrawal17

app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java

@@ -2,20 +2,24 @@
 
 import android.annotation.SuppressLint;
 import android.app.AlertDialog;
+import android.app.DownloadManager;
 import android.content.Intent;
 import android.database.DataSetObserver;
 import android.net.Uri;
 import android.os.Bundle;
+import android.os.Environment;
 import android.text.Editable;
 import android.text.TextWatcher;
 import android.util.TypedValue;
 import android.view.LayoutInflater;
+import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewTreeObserver;
 import android.widget.ArrayAdapter;
 import android.widget.Button;
 import android.widget.EditText;
+import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.ScrollView;
 import android.widget.Spinner;
@@ -44,13 +48,19 @@
 import fr.free.nrw.commons.MediaDataExtractor;
 import fr.free.nrw.commons.R;
 import fr.free.nrw.commons.Utils;
+import fr.free.nrw.commons.bookmarks.Bookmark;
+import fr.free.nrw.commons.bookmarks.pictures.BookmarkPicturesContentProvider;
+import fr.free.nrw.commons.bookmarks.pictures.BookmarkPicturesDao;
 import fr.free.nrw.commons.category.CategoryDetailsActivity;
 import fr.free.nrw.commons.contributions.ContributionsFragment;
 import fr.free.nrw.commons.delete.DeleteHelper;
 import fr.free.nrw.commons.delete.ReasonBuilder;
 import fr.free.nrw.commons.di.CommonsDaggerSupportFragment;
 import fr.free.nrw.commons.ui.widget.CompatTextView;
 import fr.free.nrw.commons.ui.widget.HtmlTextView;
+import fr.free.nrw.commons.utils.NetworkUtils;
+import fr.free.nrw.commons.utils.PermissionUtils;
+import fr.free.nrw.commons.utils.ViewUtil;
 import fr.free.nrw.commons.utils.ViewUtilWrapper;
 import io.reactivex.Single;
 import io.reactivex.android.schedulers.AndroidSchedulers;
@@ -61,6 +71,8 @@
 import org.wikipedia.util.StringUtil;
 import timber.log.Timber;
 
+import static android.Manifest.permission.WRITE_EXTERNAL_STORAGE;
+import static android.content.Context.DOWNLOAD_SERVICE;
 import static android.view.View.GONE;
 import static android.view.View.VISIBLE;
 
@@ -97,8 +109,12 @@ public static MediaDetailFragment forMedia(int index, boolean editable, boolean
     DeleteHelper deleteHelper;
     @Inject
     ViewUtilWrapper viewUtil;
+    @Inject
+    BookmarkPicturesDao bookmarkDao;
+
 
     private int initialListTop = 0;
+    private Bookmark bookmark;
 
     @BindView(R.id.mediaDetailImage)
     SimpleDraweeView image;
@@ -130,6 +146,8 @@ public static MediaDetailFragment forMedia(int index, boolean editable, boolean
     Button delete;
     @BindView(R.id.mediaDetailScrollView)
     ScrollView scrollView;
+    @BindView(R.id.iv_bookmark_icon)
+    ImageView ivBookmarkIcon;
 
     private ArrayList<String> categoryNames;
     private boolean categoriesLoaded = false;
@@ -276,6 +294,15 @@ private void displayMediaDetails() {
                 .observeOn(AndroidSchedulers.mainThread())
                 .subscribe(this::setTextFields);
         compositeDisposable.add(disposable);
+
+        // Initialize bookmark object
+        bookmark = new Bookmark(
+                media.getFilename(),
+                media.getCreator(),
+                BookmarkPicturesContentProvider.uriForName(media.getFilename())
+        );
+        updateBookmarkState();
+
     }
 
     /**
@@ -445,6 +472,82 @@ private void onDeleteClicked(Spinner spinner) {
 
     }
 
+    @OnClick(R.id.ll_bookmark)
+    public void onBookMarkClick(){
+        bookmarkDao.updateBookmark(bookmark);
+        updateBookmarkState();
+    }
+
+    private void updateBookmarkState() {
+        boolean isBookmarked = bookmarkDao.findBookmark(bookmark);
+        int icon = isBookmarked ? R.drawable.ic_star_filled_primary_dark_24dp : R.drawable.ic_star_border_primary_dark_24dp;
+        ivBookmarkIcon.setImageResource(icon);
+    }
+
+    @OnClick(R.id.ll_share)
+    public void onShareClick(){
+        Intent shareIntent = new Intent(Intent.ACTION_SEND);
+        shareIntent.setType("text/plain");
+        shareIntent.putExtra(Intent.EXTRA_TEXT, media.getDisplayTitle() + " \n" + media.getPageTitle().getCanonicalUri());
+        startActivity(Intent.createChooser(shareIntent, "Share image via..."));
+    }
+
+    @OnClick(R.id.ll_download)
+    public void onDownloadClick(){
+        if (!NetworkUtils.isInternetConnectionEstablished(getActivity())) {
+            ViewUtil.showShortSnackbar(getView(), R.string.no_internet);
+            return;
+        }
+        downloadMedia(media);
+    }
+
+    /**
+     * Start the media file downloading to the local SD card/storage.
+     * The file can then be opened in Gallery or other apps.
+     *
+     * @param m Media file to download
+     */
+    private void downloadMedia(Media m) {
+        String imageUrl = m.getImageUrl(), fileName = m.getFilename();
+
+        if (imageUrl == null
+                || fileName == null
+                || getContext() ==  null
+                || getActivity() == null) {
+            Timber.d("Skipping download media as either imageUrl %s or filename %s activity is null", imageUrl, fileName);
+            return;
+        }
+
+        // Strip 'File:' from beginning of filename, we really shouldn't store it
+        fileName = fileName.replaceFirst("^File:", "");
+
+        Uri imageUri = Uri.parse(imageUrl);
+
+        DownloadManager.Request req = new DownloadManager.Request(imageUri);
+        //These are not the image title and description fields, they are download descs for notifications
+        req.setDescription(getString(R.string.app_name));
+        req.setTitle(m.getDisplayTitle());
+        req.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, fileName);
+
+        // Modern Android updates the gallery automatically. Yay!
+        req.allowScanningByMediaScanner();
+        req.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
+        PermissionUtils.checkPermissionsAndPerformAction(getActivity(), WRITE_EXTERNAL_STORAGE,
+                () -> enqueueRequest(req), () -> Toast.makeText(getContext(),
+                        R.string.download_failed_we_cannot_download_the_file_without_storage_permission,
+                        Toast.LENGTH_SHORT).show(), R.string.storage_permission,
+                R.string.write_storage_permission_rationale);
+
+    }
+
+    private void enqueueRequest(DownloadManager.Request req) {
+        DownloadManager systemService =
+                (DownloadManager) getActivity().getSystemService(DOWNLOAD_SERVICE);
+        if (systemService != null) {
+            systemService.enqueue(req);
+        }
+    }
+
     @OnClick(R.id.seeMore)
     public void onSeeMoreClicked(){
         if (nominatedForDeletion.getVisibility() == VISIBLE && getActivity() != null) {

app/src/main/java/fr/free/nrw/commons/media/MediaDetailPagerFragment.java

@@ -41,27 +41,20 @@
 import fr.free.nrw.commons.kvstore.JsonKvStore;
 import fr.free.nrw.commons.mwapi.MediaWikiApi;
 import fr.free.nrw.commons.utils.ImageUtils;
-import fr.free.nrw.commons.utils.NetworkUtils;
-import fr.free.nrw.commons.utils.PermissionUtils;
-import fr.free.nrw.commons.utils.ViewUtil;
 import timber.log.Timber;
 
-import static android.Manifest.permission.WRITE_EXTERNAL_STORAGE;
-import static android.content.Context.DOWNLOAD_SERVICE;
 import static fr.free.nrw.commons.Utils.handleWebUrl;
 
 public class MediaDetailPagerFragment extends CommonsDaggerSupportFragment implements ViewPager.OnPageChangeListener {
 
     @Inject MediaWikiApi mwApi;
     @Inject SessionManager sessionManager;
     @Inject @Named("default_preferences") JsonKvStore store;
-    @Inject BookmarkPicturesDao bookmarkDao;
 
     @BindView(R.id.mediaDetailsPager) ViewPager pager;
     private Boolean editable;
     private boolean isFeaturedImage;
     MediaDetailAdapter adapter;
-    private Bookmark bookmark;
     private MediaDetailProvider provider;
 
     public MediaDetailPagerFragment() {
@@ -157,28 +150,10 @@ public boolean onOptionsItemSelected(MenuItem item) {
 
         Media m = provider.getMediaAtPosition(pager.getCurrentItem());
         switch (item.getItemId()) {
-            case R.id.menu_bookmark_current_image:
-                bookmarkDao.updateBookmark(bookmark);
-                updateBookmarkState(item);
-                return true;
-            case R.id.menu_share_current_image:
-                Intent shareIntent = new Intent(Intent.ACTION_SEND);
-                shareIntent.setType("text/plain");
-                shareIntent.putExtra(Intent.EXTRA_TEXT, m.getDisplayTitle() + " \n" + m.getPageTitle().getCanonicalUri());
-                startActivity(Intent.createChooser(shareIntent, "Share image via..."));
-                return true;
             case R.id.menu_browser_current_image:
                 // View in browser
                 handleWebUrl(requireContext(), Uri.parse(m.getPageTitle().getMobileUri()));
                 return true;
-            case R.id.menu_download_current_image:
-                // Download
-                if (!NetworkUtils.isInternetConnectionEstablished(getActivity())) {
-                    ViewUtil.showShortSnackbar(getView(), R.string.no_internet);
-                    return false;
-                }
-                downloadMedia(m);
-                return true;
             case R.id.menu_set_as_wallpaper:
                 // Set wallpaper
                 setWallpaper(m);
@@ -201,52 +176,6 @@ private void setWallpaper(Media media) {
         ImageUtils.setWallpaperFromImageUrl(getActivity(), Uri.parse(media.getImageUrl()));
     }
 
-    /**
-     * Start the media file downloading to the local SD card/storage.
-     * The file can then be opened in Gallery or other apps.
-     *
-     * @param m Media file to download
-     */
-    private void downloadMedia(Media m) {
-        String imageUrl = m.getImageUrl(), fileName = m.getFilename();
-
-        if (imageUrl == null
-                || fileName == null
-                || getContext() ==  null
-                || getActivity() == null) {
-            Timber.d("Skipping download media as either imageUrl %s or filename %s activity is null", imageUrl, fileName);
-            return;
-        }
-
-        // Strip 'File:' from beginning of filename, we really shouldn't store it
-        fileName = fileName.replaceFirst("^File:", "");
-
-        Uri imageUri = Uri.parse(imageUrl);
-
-        DownloadManager.Request req = new DownloadManager.Request(imageUri);
-        //These are not the image title and description fields, they are download descs for notifications
-        req.setDescription(getString(R.string.app_name));
-        req.setTitle(m.getDisplayTitle());
-        req.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, fileName);
-
-        // Modern Android updates the gallery automatically. Yay!
-        req.allowScanningByMediaScanner();
-        req.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
-        PermissionUtils.checkPermissionsAndPerformAction(getActivity(), WRITE_EXTERNAL_STORAGE,
-            () -> enqueueRequest(req), () -> Toast.makeText(getContext(),
-                R.string.download_failed_we_cannot_download_the_file_without_storage_permission,
-                Toast.LENGTH_SHORT).show(), R.string.storage_permission,
-            R.string.write_storage_permission_rationale);
-
-    }
-
-    private void enqueueRequest(DownloadManager.Request req) {
-        DownloadManager systemService =
-            (DownloadManager) getActivity().getSystemService(DOWNLOAD_SERVICE);
-        if (systemService != null) {
-            systemService.enqueue(req);
-        }
-    }
 
     @Override
     public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
@@ -263,33 +192,16 @@ public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
                 if (m != null) {
                     // Enable default set of actions, then re-enable different set of actions only if it is a failed contrib
                     menu.findItem(R.id.menu_browser_current_image).setEnabled(true).setVisible(true);
-                    menu.findItem(R.id.menu_share_current_image).setEnabled(true).setVisible(true);
-                    menu.findItem(R.id.menu_download_current_image).setEnabled(true).setVisible(true);
-                    menu.findItem(R.id.menu_bookmark_current_image).setEnabled(true).setVisible(true);
-
-                    // Initialize bookmark object
-                    bookmark = new Bookmark(
-                            m.getFilename(),
-                            m.getCreator(),
-                            BookmarkPicturesContentProvider.uriForName(m.getFilename())
-                    );
-                    updateBookmarkState(menu.findItem(R.id.menu_bookmark_current_image));
 
                     if (m instanceof Contribution ) {
                         Contribution c = (Contribution) m;
                         switch (c.getState()) {
                             case Contribution.STATE_FAILED:
                                 menu.findItem(R.id.menu_browser_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_share_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_download_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_bookmark_current_image).setEnabled(false).setVisible(false);
                                 break;
                             case Contribution.STATE_IN_PROGRESS:
                             case Contribution.STATE_QUEUED:
                                 menu.findItem(R.id.menu_browser_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_share_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_download_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_bookmark_current_image).setEnabled(false).setVisible(false);
                                 break;
                             case Contribution.STATE_COMPLETED:
                                 // Default set of menu items works fine. Treat same as regular media object
@@ -301,12 +213,6 @@ public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
         }
     }
 
-    private void updateBookmarkState(MenuItem item) {
-        boolean isBookmarked = bookmarkDao.findBookmark(bookmark);
-        int icon = isBookmarked ? R.drawable.ic_round_star_filled_24px : R.drawable.ic_round_star_border_24px;
-        item.setIcon(icon);
-    }
-
     public void showImage(int i) {
         Handler handler =  new Handler();
         handler.postDelayed(() -> pager.setCurrentItem(i), 5);

app/src/main/res/drawable-hdpi/ic_mode_edit_primary_dark_24dp.png

@@ -9,12 +9,9 @@
         <shape
             android:shape="rectangle">
             <solid
-                android:color="@color/deleteButton"/>
+                android:color="@color/deleteRed"/>
             <corners
-                android:radius="3dp" />
-            <stroke
-                android:width="5px"
-                android:color="@color/deleteRed" />
+                android:radius="2dp" />
         </shape>
     </item>
 
@@ -25,7 +22,7 @@
             <solid
                 android:color="@color/deleteButtonDark"/>
             <corners
-                android:radius="3dp" />
+                android:radius="2dp" />
         </shape>
     </item>
 

app/src/main/res/drawable-hdpi/ic_star_border_primary_dark_24dp.png

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector
+    android:layout_height="match_parent"
+    android:layout_width="match_parent"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:state_enabled="true" >
+        <shape
+            android:shape="rectangle">
+            <solid
+                android:color="@color/button_blue"/>
+            <corners
+                android:radius="2dp" />
+        </shape>
+    </item>
+
+</selector>

app/src/main/res/drawable-hdpi/ic_star_filled_primary_dark_24dp.png

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
+    <path android:fillColor="#00376d" android:pathData="M19,9h-4V3H9v6H5l7,7 7,-7zM5,18v2h14v-2H5z"/>
+</vector>

app/src/main/res/drawable-mdpi/ic_mode_edit_primary_dark_24dp.png

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
+    <path android:fillColor="#00376d" android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
+</vector>