Skip to content

Commit 91ee2fa

Browse files
authored
Merge pull request #9834 from wordpress-mobile/issue/9730-improve-failed-media-upload-in-aztec
Fix #9730: Improve failed media error in Aztec
2 parents b81fc3f + 6b7315e commit 91ee2fa

File tree

5 files changed

+130
-20
lines changed

5 files changed

+130
-20
lines changed

WordPress/src/main/res/values/strings.xml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1252,6 +1252,8 @@
12521252
<string name="visual_editor_disabled">Visual Editor disabled</string>
12531253
<string name="new_editor_reflection_error">Visual editor is not compatible with your device. It was
12541254
automatically disabled.</string>
1255+
<string name="editor_failed_to_insert_media_tap_to_retry">Failed to insert media.\nPlease tap to retry.</string>
1256+
<string name="editor_failed_to_insert_media_tap_for_options">Failed to insert media.\nPlease tap for options.</string>
12551257

12561258
<string name="async_promo_title_publish">Publish with Confidence</string>
12571259
<string name="async_promo_title_schedule">Schedule with Confidence</string>
@@ -2612,7 +2614,7 @@
26122614
<string name="gutenberg_mobile_gutenberg_packages_block_library_src_image_edit_native_js_198" tools:ignore="UnusedResources">WordPress Media Library</string>
26132615
<string name="gutenberg_mobile_gutenberg_packages_block_library_src_image_edit_native_js_273" tools:ignore="UnusedResources">Alt Text</string>
26142616
<string name="gutenberg_mobile_gutenberg_packages_block_library_src_image_edit_native_js_280" tools:ignore="UnusedResources">Clear All Settings</string>
2615-
<string name="gutenberg_mobile_gutenberg_packages_block_library_src_image_edit_native_js_374" tools:ignore="UnusedResources">Failed to insert media.\nPlease tap for options.</string>
2617+
<string name="gutenberg_mobile_gutenberg_packages_block_library_src_image_edit_native_js_374" translatable="false" tools:ignore="UnusedResources">@string/editor_failed_to_insert_media_tap_for_options</string>
26162618
<string name="gutenberg_mobile_gutenberg_packages_editor_src_components_media_placeholder_index_native_js_26" tools:ignore="UnusedResources">CHOOSE IMAGE</string>
26172619
<string name="gutenberg_mobile_gutenberg_packages_editor_src_components_url_input_index_native_js_27" tools:ignore="UnusedResources">Paste URL</string>
26182620
<string name="gutenberg_mobile_src_block_types_unsupported_block_index_js_21" tools:ignore="UnusedResources">Unsupported Block</string>

libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/AztecEditorFragment.java

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -891,12 +891,19 @@ private void overlayFailedMedia() {
891891
private void overlayFailedMedia(String localMediaId, Attributes attributes) {
892892
// set intermediate shade overlay
893893
AztecText.AttributePredicate localMediaIdPredicate = MediaPredicate.getLocalMediaIdPredicate(localMediaId);
894-
mContent.setOverlay(localMediaIdPredicate, 0,
895-
new ColorDrawable(getResources().getColor(R.color.media_shade_overlay_error_color)),
896-
Gravity.FILL);
897894

898-
Drawable alertDrawable = getResources().getDrawable(R.drawable.media_retry_image);
899-
mContent.setOverlay(localMediaIdPredicate, 1, alertDrawable, Gravity.CENTER);
895+
Drawable iconDrawable = getResources().getDrawable(R.drawable.media_retry_image);
896+
float textSize = getResources().getDimension(R.dimen.text_header);
897+
TextDrawable textDrawable = new TextDrawable(getResources(),
898+
getString(R.string.editor_failed_to_insert_media_tap_to_retry), textSize);
899+
// Divide icon height by 2 and shift the text vertically (note: both elements are vertically centered)
900+
textDrawable.setTranslateY(iconDrawable.getIntrinsicHeight() / 2);
901+
902+
mContent.setOverlay(localMediaIdPredicate, 0,
903+
new ColorDrawable(getResources().getColor(R.color.media_shade_overlay_color)),
904+
Gravity.FILL);
905+
mContent.setOverlay(localMediaIdPredicate, 1, iconDrawable, Gravity.CENTER);
906+
mContent.setOverlay(localMediaIdPredicate, 2, textDrawable, Gravity.CENTER);
900907
mContent.updateElementAttributes(localMediaIdPredicate, new AztecAttributes(attributes));
901908
}
902909

@@ -1664,12 +1671,14 @@ public void onClick(DialogInterface dialog, int id) {
16641671
AttributesWithClass attributesWithClass = getAttributesWithClass(
16651672
mContent.getElementAttributes(mTappedMediaPredicate));
16661673

1667-
// remove the failed class
1674+
// add or remove the failed class depending on whether the media was uploaded or not
16681675
attributesWithClass = addFailedStatusToMediaIfLocalSrcPresent(attributesWithClass);
16691676

1677+
// clear overlays
1678+
mContent.clearOverlays(mTappedMediaPredicate);
1679+
16701680
if (!attributesWithClass.hasClass(ATTR_STATUS_FAILED)) {
16711681
// just save the item and leave
1672-
mContent.clearOverlays(mTappedMediaPredicate);
16731682
mContent.resetAttributedMediaSpan(mTappedMediaPredicate);
16741683
return;
16751684
}
@@ -1680,17 +1689,8 @@ public void onClick(DialogInterface dialog, int id) {
16801689
}
16811690

16821691
// set intermediate shade overlay
1683-
mContent.setOverlay(mTappedMediaPredicate, 0, new ColorDrawable(
1684-
getResources().getColor(R.color.media_shade_overlay_color)), Gravity.FILL);
1685-
1686-
Drawable progressDrawable = getResources().getDrawable(
1687-
android.R.drawable.progress_horizontal);
1688-
// set the height of the progress bar to 2
1689-
// (it's in dp since the drawable will be adjusted by the span)
1690-
progressDrawable.setBounds(0, 0, 0, 4);
1692+
overlayProgressingMedia(mTappedMediaPredicate);
16911693

1692-
mContent.setOverlay(mTappedMediaPredicate, 1, progressDrawable,
1693-
Gravity.FILL_HORIZONTAL | Gravity.TOP);
16941694
mContent.updateElementAttributes(mTappedMediaPredicate,
16951695
attributesWithClass.getAttributes());
16961696

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*
2+
* Copyright (C) 2012 The Android Open Source Project
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*
16+
* Imported and modified from:
17+
* https://android.googlesource.com/platform/packages/apps/Camera/+/master/src/com/android/camera/drawable
18+
* /TextDrawable.java
19+
*
20+
*/
21+
package org.wordpress.android.editor;
22+
23+
import android.content.res.Resources;
24+
import android.graphics.Canvas;
25+
import android.graphics.Color;
26+
import android.graphics.ColorFilter;
27+
import android.graphics.Paint;
28+
import android.graphics.Paint.Align;
29+
import android.graphics.Rect;
30+
import android.graphics.drawable.Drawable;
31+
import android.support.annotation.ColorInt;
32+
import android.text.Layout.Alignment;
33+
import android.text.StaticLayout;
34+
import android.text.TextPaint;
35+
36+
37+
public class TextDrawable extends Drawable {
38+
private static final int DEFAULT_COLOR = Color.WHITE;
39+
private TextPaint mPaint;
40+
private CharSequence mText;
41+
private int mIntrinsicWidth;
42+
private int mIntrinsicHeight;
43+
private int mTranslateX;
44+
private int mTranslateY;
45+
private StaticLayout mTextLayout;
46+
47+
public TextDrawable(Resources res, CharSequence text, float textSize) {
48+
mText = text;
49+
mPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
50+
mPaint.setColor(DEFAULT_COLOR);
51+
mPaint.setTextAlign(Align.CENTER);
52+
mPaint.setTextSize(textSize);
53+
mIntrinsicWidth = (int) (mPaint.measureText(mText, 0, mText.length()) + .5);
54+
mIntrinsicHeight = mPaint.getFontMetricsInt(null);
55+
mTextLayout = new StaticLayout(mText, mPaint, mIntrinsicWidth, Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
56+
}
57+
58+
@Override
59+
public void draw(Canvas canvas) {
60+
Rect bounds = getBounds();
61+
canvas.translate(bounds.centerX() + mTranslateX, bounds.centerY() + mTranslateY);
62+
mTextLayout.draw(canvas);
63+
}
64+
65+
@Override
66+
public int getOpacity() {
67+
return mPaint.getAlpha();
68+
}
69+
70+
@Override
71+
public int getIntrinsicWidth() {
72+
return mIntrinsicWidth;
73+
}
74+
75+
@Override
76+
public int getIntrinsicHeight() {
77+
return mIntrinsicHeight;
78+
}
79+
80+
@Override
81+
public void setAlpha(int alpha) {
82+
mPaint.setAlpha(alpha);
83+
}
84+
85+
@Override
86+
public void setColorFilter(ColorFilter filter) {
87+
mPaint.setColorFilter(filter);
88+
}
89+
90+
public void setColor(@ColorInt int color) {
91+
mPaint.setColor(color);
92+
}
93+
94+
/**
95+
* Shift the text on the x axis by @param x pixels.
96+
*/
97+
public void setTranslateX(int x) {
98+
mTranslateX = x;
99+
}
100+
/**
101+
* Shift the text on the y axis by @param y pixels.
102+
*/
103+
public void setTranslateY(int y) {
104+
mTranslateY = y;
105+
}
106+
}

libs/editor/WordPressEditor/src/main/res/values/colors.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@
2828
<color name="quote_background">@color/wp_grey_lighten_30</color>
2929
<color name="text">@color/wp_grey_darken_30</color>
3030

31-
<color name="media_shade_overlay_color">#50000000</color>
32-
<color name="media_shade_overlay_error_color">#50FF0000</color>
31+
<color name="black_translucent_50">#80000000</color>
32+
<color name="media_shade_overlay_color">@color/black_translucent_50</color>
3333
</resources>

libs/editor/WordPressEditor/src/main/res/values/strings.xml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@
106106
<string name="editor_dropped_title_images_not_allowed">Dropping images in the Title is not allowed</string>
107107
<string name="editor_dropped_html_images_not_allowed">Dropping images while in HTML mode is not allowed</string>
108108
<string name="editor_dropped_unsupported_files">Warning: not all dropped items are supported!</string>
109+
<string name="editor_failed_to_insert_media_tap_to_retry">Failed to insert media.\nPlease tap to retry.</string>
110+
<string name="editor_failed_to_insert_media_tap_for_options">Failed to insert media.\nPlease tap for options.</string>
109111

110112
<!-- Aztec -->
111113
<string name="editor_content_hint">Share your story here&#8230;</string>

0 commit comments

Comments
 (0)