Editor - Move Undo/Redo to the header

WordPress/src/main/java/org/wordpress/android/ui/posts/EditPostActivity.java

@@ -8,17 +8,15 @@
 import android.net.Uri;
 import android.os.Bundle;
 import android.os.Handler;
+import android.os.Looper;
 import android.text.TextUtils;
 import android.view.DragEvent;
-import android.view.LayoutInflater;
 import android.view.Menu;
 import android.view.MenuInflater;
 import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.webkit.MimeTypeMap;
-import android.widget.Button;
-import android.widget.ImageButton;
 import android.widget.ImageView;
 import android.widget.Toast;
 
@@ -30,7 +28,6 @@
 import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.widget.Toolbar;
 import androidx.core.app.ActivityCompat.OnRequestPermissionsResultCallback;
-import androidx.core.content.ContextCompat;
 import androidx.core.util.Consumer;
 import androidx.core.util.Pair;
 import androidx.fragment.app.Fragment;
@@ -377,7 +374,6 @@ enum RestartEditorOptions {
 
     private AppBarLayout mAppBarLayout;
     private Toolbar mToolbar;
-    private Menu mMenu;
     private boolean mMenuHasUndo = false;
     private boolean mMenuHasRedo = false;
 
@@ -603,6 +599,7 @@ public void handleOnBackPressed() {
         final ActionBar actionBar = getSupportActionBar();
         if (actionBar != null) {
             actionBar.setDisplayHomeAsUpEnabled(false);
+            actionBar.setDisplayShowTitleEnabled(false);
         }
 
         mAppBarLayout = findViewById(R.id.appbar_main);
@@ -766,8 +763,6 @@ public void handleOnBackPressed() {
             resetUploadingMediaToFailedIfPostHasNotMediaInProgressOrQueued();
         }
 
-        getSupportActionBar().setDisplayShowTitleEnabled(false);
-
         mSectionsPagerAdapter = new SectionsPagerAdapter(fragmentManager);
 
         // we need to make sure AT cookie is available when trying to edit post on private AT site
@@ -790,32 +785,20 @@ public void handleOnBackPressed() {
     }
 
     private void customizeToolbar() {
-        // Custom overflow icon
-        Drawable overflowIcon = ContextCompat.getDrawable(this, R.drawable.more_vertical);
-        mToolbar.setOverflowIcon(overflowIcon);
-
-        // Customize insets
-        int insetStart = (int) (8 * getResources().getDisplayMetrics().density);
-        mToolbar.setContentInsetsRelative(insetStart, mToolbar.getContentInsetEnd());
-
-        // Set custom header
-        LayoutInflater inflater = LayoutInflater.from(this);
-        View customLayout = inflater.inflate(R.layout.edit_post_header, mToolbar, false);
-        mToolbar.addView(customLayout, 0);
-
-        Button closeButton = customLayout.findViewById(R.id.close_editor_button);
-        closeButton.setOnClickListener(v -> onBackPressed());
+        // Custom close button
+        View closeHeader = mToolbar.findViewById(R.id.edit_post_header);
+        closeHeader.setOnClickListener(v -> handleBackPressed());
 
         // Update site icon
         String siteIconUrl = SiteUtils.getSiteIconUrl(
                 mSite,
                 getResources().getDimensionPixelSize(R.dimen.blavatar_sz_small)
         );
-        ImageButton siteIcon = customLayout.findViewById(R.id.close_editor_site_icon);
+        ImageView siteIcon = mToolbar.findViewById(R.id.close_editor_site_icon);
         ImageType blavatarType = SiteUtils.getSiteImageType(
                 mSite.isWpForTeamsSite(), BlavatarShape.SQUARE_WITH_ROUNDED_CORNERES);
         mImageManager.loadImageWithCorners(siteIcon, blavatarType, siteIconUrl,
-                DisplayUtils.dpToPx(siteIcon.getContext(), 2));
+                getResources().getDimensionPixelSize(R.dimen.edit_post_header_image_corner_radius));
     }
 
     private void presentNewPageNoticeIfNeeded() {
@@ -1311,42 +1294,6 @@ public boolean onCreateOptionsMenu(Menu menu) {
         super.onCreateOptionsMenu(menu);
         MenuInflater inflater = getMenuInflater();
         inflater.inflate(R.menu.edit_post, menu);
-        mMenu = menu;
-        boolean isRtlLayout = getResources().getConfiguration().getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
-
-        // Set opacity for undo/redo items
-        MenuItem undoItem = mMenu.findItem(R.id.menu_undo_action);
-        MenuItem redoItem = mMenu.findItem(R.id.menu_redo_action);
-
-        if (undoItem.getActionView() != null) {
-            ImageView undoIcon = undoItem.getActionView().findViewById(R.id.menu_undo_icon);
-            undoIcon.setRotationY(isRtlLayout ? 180 : 0);
-        }
-
-        if (redoItem.getActionView() != null) {
-            ImageView redoIcon = redoItem.getActionView().findViewById(R.id.menu_redo_icon);
-            redoIcon.setRotationY(isRtlLayout ? 180 : 0);
-        }
-
-        undoItem.setEnabled(mMenuHasUndo);
-        View undoView = undoItem.getActionView();
-        ImageView undoIcon = undoView.findViewById(R.id.menu_undo_icon);
-        undoIcon.setImageAlpha(mMenuHasUndo ? 255 : 76);
-        undoView.setOnClickListener(v -> {
-            if (mEditorFragment instanceof GutenbergEditorFragment) {
-                ((GutenbergEditorFragment) mEditorFragment).onUndoPressed();
-            }
-        });
-
-        redoItem.setEnabled(mMenuHasRedo);
-        View redoView = redoItem.getActionView();
-        ImageView redoIcon = redoView.findViewById(R.id.menu_redo_icon);
-        redoIcon.setImageAlpha(mMenuHasRedo ? 255 : 76);
-        redoView.setOnClickListener(v -> {
-            if (mEditorFragment instanceof GutenbergEditorFragment) {
-                ((GutenbergEditorFragment) mEditorFragment).onRedoPressed();
-            }
-        });
         return true;
     }
 
@@ -1357,13 +1304,23 @@ public boolean onPrepareOptionsMenu(Menu menu) {
             showMenuItems = false;
         }
 
+        MenuItem undoItem = menu.findItem(R.id.menu_undo_action);
+        MenuItem redoItem = menu.findItem(R.id.menu_redo_action);
         MenuItem secondaryAction = menu.findItem(R.id.menu_secondary_action);
         MenuItem previewMenuItem = menu.findItem(R.id.menu_preview_post);
         MenuItem viewHtmlModeMenuItem = menu.findItem(R.id.menu_html_mode);
         MenuItem historyMenuItem = menu.findItem(R.id.menu_history);
         MenuItem settingsMenuItem = menu.findItem(R.id.menu_post_settings);
         MenuItem helpMenuItem = menu.findItem(R.id.menu_editor_help);
 
+        if (undoItem != null) {
+            undoItem.setEnabled(mMenuHasUndo);
+        }
+
+        if (redoItem != null) {
+            redoItem.setEnabled(mMenuHasRedo);
+        }
+
         if (secondaryAction != null && mEditPostRepository.hasPost()) {
             secondaryAction.setVisible(showMenuItems && getSecondaryAction().isVisible());
             secondaryAction.setTitle(getSecondaryActionText());
@@ -1619,6 +1576,14 @@ public boolean onOptionsItemSelected(final MenuItem item) {
                     mAnalyticsTrackerWrapper.track(Stat.EDITOR_HELP_SHOWN, mSite);
                     ((GutenbergEditorFragment) mEditorFragment).showEditorHelp();
                 }
+            } else if (itemId == R.id.menu_undo_action) {
+                if (mEditorFragment instanceof GutenbergEditorFragment) {
+                    ((GutenbergEditorFragment) mEditorFragment).onUndoPressed();
+                }
+            } else if (itemId == R.id.menu_redo_action) {
+                if (mEditorFragment instanceof GutenbergEditorFragment) {
+                    ((GutenbergEditorFragment) mEditorFragment).onRedoPressed();
+                }
             }
         }
         return false;
@@ -3601,37 +3566,17 @@ public void onTrackableEvent(TrackableEvent event, Map<String, String> propertie
     }
 
     @Override public void onToggleUndo(boolean isDisabled) {
-        mMenuHasUndo = !isDisabled;
-        if (mMenu != null) {
-            runOnUiThread(new Runnable() {
-                @Override
-                public void run() {
-                    MenuItem undoItem = mMenu.findItem(R.id.menu_undo_action);
-                    undoItem.setEnabled(mMenuHasUndo);
+        if (mMenuHasUndo == !isDisabled) return;
 
-                    View undoView = undoItem.getActionView();
-                    ImageView undoIcon = undoView.findViewById(R.id.menu_undo_icon);
-                    undoIcon.setImageAlpha(mMenuHasUndo ? 255 : 76);
-                }
-            });
-        }
+        mMenuHasUndo = !isDisabled;
+        new Handler(Looper.getMainLooper()).post(this::invalidateOptionsMenu);
     }
 
     @Override public void onToggleRedo(boolean isDisabled) {
-        mMenuHasRedo = !isDisabled;
-        if (mMenu != null) {
-            runOnUiThread(new Runnable() {
-                @Override
-                public void run() {
-                    MenuItem redoItem = mMenu.findItem(R.id.menu_redo_action);
-                    redoItem.setEnabled(mMenuHasRedo);
+        if (mMenuHasRedo == !isDisabled) return;
 
-                    View redoView = redoItem.getActionView();
-                    ImageView redoIcon = redoView.findViewById(R.id.menu_redo_icon);
-                    redoIcon.setImageAlpha(mMenuHasRedo ? 255 : 76);
-                }
-            });
-        }
+        mMenuHasRedo = !isDisabled;
+        new Handler(Looper.getMainLooper()).post(this::invalidateOptionsMenu);
     }
 
     // FluxC events

WordPress/src/main/res/drawable-ldrtl/redo.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M18.3,11.7C17.7,11.1 16.9,10.8 16,10.8H6.7L9.6,7.5L8.5,6.5L4,11.5L8.5,16L9.5,15L6.8,12.3H16C16.5,12.3 16.9,12.5 17.3,12.8C18.3,13.8 18.3,16.2 18.3,17.3V17.6H19.8V17.4C19.8,15.9 19.8,13.1 18.3,11.7Z"
+      android:fillColor="@color/on_surface_disabled_selector"/>
+</vector>

WordPress/src/main/res/drawable-ldrtl/undo.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M15.6,6.5L14.5,7.5L17.4,10.8H8C7.1,10.8 6.3,11.1 5.7,11.7C4.3,13.2 4.3,15.9 4.3,17.3V17.5H5.8V17.2C5.8,16.1 5.8,13.7 6.8,12.7C7.1,12.4 7.5,12.2 8.1,12.2H17.3L14.5,15L15.6,16.1L20.2,11.5L15.6,6.5Z"
+      android:fillColor="@color/on_surface_disabled_selector"/>
+</vector>

WordPress/src/main/res/drawable/bg_rectangle_placeholder_radius_2dp_globe_32dp.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/bg_rectangle_placeholder_radius_2dp" />
+
+    <item
+        android:drawable="@drawable/ic_globe_white_24dp"
+        android:bottom="2dp"
+        android:left="2dp"
+        android:right="2dp"
+        android:top="2dp" />
+
+</layer-list>

WordPress/src/main/res/drawable/redo.xml

@@ -2,9 +2,8 @@
     android:width="24dp"
     android:height="24dp"
     android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="?attr/colorOnSurface">
+    android:viewportHeight="24">
   <path
       android:pathData="M15.6,6.5L14.5,7.5L17.4,10.8H8C7.1,10.8 6.3,11.1 5.7,11.7C4.3,13.2 4.3,15.9 4.3,17.3V17.5H5.8V17.2C5.8,16.1 5.8,13.7 6.8,12.7C7.1,12.4 7.5,12.2 8.1,12.2H17.3L14.5,15L15.6,16.1L20.2,11.5L15.6,6.5Z"
-      android:fillColor="?attr/colorOnSurface"/>
+      android:fillColor="@color/on_surface_disabled_selector"/>
 </vector>

WordPress/src/main/res/drawable/undo.xml

@@ -2,9 +2,8 @@
     android:width="24dp"
     android:height="24dp"
     android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="?attr/colorOnSurface">
+    android:viewportHeight="24">
   <path
       android:pathData="M18.3,11.7C17.7,11.1 16.9,10.8 16,10.8H6.7L9.6,7.5L8.5,6.5L4,11.5L8.5,16L9.5,15L6.8,12.3H16C16.5,12.3 16.9,12.5 17.3,12.8C18.3,13.8 18.3,16.2 18.3,17.3V17.6H19.8V17.4C19.8,15.9 19.8,13.1 18.3,11.7Z"
-      android:fillColor="?attr/colorOnSurface"/>
+      android:fillColor="@color/on_surface_disabled_selector"/>
 </vector>

WordPress/src/main/res/layout/edit_post_header.xml

@@ -1,51 +1,31 @@
-<RelativeLayout
+<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="wrap_content"
     android:layout_height="match_parent"
-    android:layout_centerVertical="true">
+    android:orientation="horizontal"
+    android:gravity="center_vertical"
+    android:contentDescription="@string/menu_close_editor"
+    android:foreground="?attr/selectableItemBackground"
+    android:clickable="true"
+    android:focusable="true">
 
-    <ImageButton
-        android:id="@+id/close_editor"
-        android:layout_width="24dp"
-        android:layout_height="24dp"
-        android:layout_alignBottom="@id/close_editor_button"
-        android:layout_alignParentStart="true"
-        android:layout_alignTop="@id/close_editor_button"
-        android:background="@null"
+    <ImageView
+        android:layout_width="@dimen/edit_post_header_chevron_size"
+        android:layout_height="@dimen/edit_post_header_chevron_size"
         android:importantForAccessibility="no"
         android:src="@drawable/chevron_down"
         android:clickable="false"
         android:visibility="visible" />
 
-    <androidx.cardview.widget.CardView
-        android:layout_width="32dp"
-        android:layout_height="32dp"
-        android:layout_toEndOf="@id/close_editor"
-        android:layout_centerVertical="true"
-        android:layout_marginStart="2dp"
-        app:cardElevation="0dp">
-
-        <ImageButton
-            android:id="@+id/close_editor_site_icon"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:background="@null"
-            android:contentDescription="@string/menu_site_icon_context"
-            android:src="@drawable/bg_rectangle_placeholder_globe_32dp"
-            android:visibility="visible"
-            tools:ignore="TouchTargetSizeCheck" />
-
-    </androidx.cardview.widget.CardView>
-
-    <Button
-        android:id="@+id/close_editor_button"
-        android:layout_width="57dp"
-        android:layout_height="57dp"
-        android:layout_centerVertical="true"
-        android:background="?android:attr/actionBarItemBackground"
-        android:contentDescription="@string/menu_close_editor"
-        android:textColor="@android:color/transparent" />
+    <ImageView
+        android:id="@+id/close_editor_site_icon"
+        android:layout_width="@dimen/edit_post_header_image_size"
+        android:layout_height="@dimen/edit_post_header_image_size"
+        android:importantForAccessibility="no"
+        android:src="@drawable/bg_rectangle_placeholder_radius_2dp_globe_32dp"
+        android:visibility="visible"
+        android:clickable="false"
+        tools:ignore="TouchTargetSizeCheck" />
 
-</RelativeLayout>
+</LinearLayout>

WordPress/src/main/res/layout/new_edit_post_activity.xml

@@ -17,7 +17,14 @@
             android:duplicateParentState="true"
             android:background="@drawable/tab_layout_background"
             android:layout_height="wrap_content"
-            app:theme="@style/WordPress.ActionBar" />
+            app:contentInsetStart="@dimen/margin_medium"
+            app:theme="@style/WordPress.ActionBar">
+
+            <include
+                layout="@layout/edit_post_header"
+                android:id="@+id/edit_post_header" />
+
+        </com.google.android.material.appbar.MaterialToolbar>
 
     </com.google.android.material.appbar.AppBarLayout>