From 79ec76f11fdfc208a6e9f703c3d942e3fc03994b Mon Sep 17 00:00:00 2001 From: Alex Hart Date: Wed, 7 Dec 2022 14:58:01 -0400 Subject: [PATCH] Update tooltip to behave better when content is at edge of screen. --- .../securesms/components/TooltipPopup.java | 28 ++++++++++++++++++- .../main/res/drawable/ic_tooltip_arrow_up.xml | 9 ------ .../res/drawable/ic_tooltip_arrow_up_left.xml | 9 ++++++ .../drawable/ic_tooltip_arrow_up_right.xml | 9 ++++++ app/src/main/res/layout/tooltip.xml | 20 +++++++------ 5 files changed, 57 insertions(+), 18 deletions(-) delete mode 100644 app/src/main/res/drawable/ic_tooltip_arrow_up.xml create mode 100644 app/src/main/res/drawable/ic_tooltip_arrow_up_left.xml create mode 100644 app/src/main/res/drawable/ic_tooltip_arrow_up_right.xml diff --git a/app/src/main/java/org/thoughtcrime/securesms/components/TooltipPopup.java b/app/src/main/java/org/thoughtcrime/securesms/components/TooltipPopup.java index 972540be4f..5bdbc68bb5 100644 --- a/app/src/main/java/org/thoughtcrime/securesms/components/TooltipPopup.java +++ b/app/src/main/java/org/thoughtcrime/securesms/components/TooltipPopup.java @@ -18,10 +18,12 @@ import androidx.annotation.Px; import androidx.annotation.StringRes; import androidx.core.content.ContextCompat; +import com.google.android.material.shape.MaterialShapeDrawable; +import com.google.android.material.shape.ShapeAppearanceModel; + import org.signal.core.util.DimensionUnit; import org.thoughtcrime.securesms.R; import org.thoughtcrime.securesms.mms.GlideApp; -import org.thoughtcrime.securesms.util.ViewUtil; /** * Class for creating simple tooltips to show throughout the app. Utilizes a popup window so you @@ -42,6 +44,8 @@ public class TooltipPopup extends PopupWindow { private final int position; private final int startMargin; + private final MaterialShapeDrawable shapeableBubbleBackground = new MaterialShapeDrawable(); + public static Builder forTarget(@NonNull View anchor) { return new Builder(anchor); } @@ -85,9 +89,11 @@ public class TooltipPopup extends PopupWindow { if (backgroundTint == 0) { bubble.getBackground().setColorFilter(ContextCompat.getColor(anchor.getContext(), R.color.tooltip_default_color), PorterDuff.Mode.MULTIPLY); arrow.setColorFilter(ContextCompat.getColor(anchor.getContext(), R.color.tooltip_default_color), PorterDuff.Mode.SRC_IN); + shapeableBubbleBackground.setTint(ContextCompat.getColor(anchor.getContext(), R.color.tooltip_default_color)); } else { bubble.getBackground().setColorFilter(backgroundTint, PorterDuff.Mode.MULTIPLY); arrow.setColorFilter(backgroundTint, PorterDuff.Mode.SRC_IN); + shapeableBubbleBackground.setTint(backgroundTint); } if (iconGlideModel != null) { @@ -161,6 +167,26 @@ public class TooltipPopup extends PopupWindow { xoffset -= startMargin; } + View bubble = getContentView().findViewById(R.id.tooltip_bubble); + ShapeAppearanceModel.Builder shapeAppearanceModel = ShapeAppearanceModel.builder() + .setAllCornerSizes(DimensionUnit.DP.toPixels(18)); + + // If the arrow is within the last 20dp of the right hand side, use RIGHT and set corner to 9dp + onLayout(() -> { + if (arrow.getX() > getContentView().getWidth() / 2f) { + arrow.setImageResource(R.drawable.ic_tooltip_arrow_up_right); + } + + float arrowEnd = arrow.getX() + arrow.getRight(); + if (arrowEnd > getContentView().getRight() - DimensionUnit.DP.toPixels(20)) { + shapeableBubbleBackground.setShapeAppearanceModel(shapeAppearanceModel.setTopRightCornerSize(DimensionUnit.DP.toPixels(9f)).build()); + bubble.setBackground(shapeableBubbleBackground); + } else if (arrowEnd < DimensionUnit.DP.toPixels(20)) { + shapeableBubbleBackground.setShapeAppearanceModel(shapeAppearanceModel.setTopLeftCornerSize(DimensionUnit.DP.toPixels(9f)).build()); + bubble.setBackground(shapeableBubbleBackground); + } + }); + showAsDropDown(anchor, xoffset, yoffset); } diff --git a/app/src/main/res/drawable/ic_tooltip_arrow_up.xml b/app/src/main/res/drawable/ic_tooltip_arrow_up.xml deleted file mode 100644 index 41111950ba..0000000000 --- a/app/src/main/res/drawable/ic_tooltip_arrow_up.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/app/src/main/res/drawable/ic_tooltip_arrow_up_left.xml b/app/src/main/res/drawable/ic_tooltip_arrow_up_left.xml new file mode 100644 index 0000000000..e87ef33d7a --- /dev/null +++ b/app/src/main/res/drawable/ic_tooltip_arrow_up_left.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/ic_tooltip_arrow_up_right.xml b/app/src/main/res/drawable/ic_tooltip_arrow_up_right.xml new file mode 100644 index 0000000000..f2ed994fac --- /dev/null +++ b/app/src/main/res/drawable/ic_tooltip_arrow_up_right.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/layout/tooltip.xml b/app/src/main/res/layout/tooltip.xml index 53d1b270ba..8870aae79c 100644 --- a/app/src/main/res/layout/tooltip.xml +++ b/app/src/main/res/layout/tooltip.xml @@ -15,7 +15,7 @@ android:layout_height="20dp" android:importantForAccessibility="no" android:scaleType="fitXY" - android:visibility="invisible" + android:visibility="gone" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/ic_tooltip_arrow_left" @@ -24,14 +24,14 @@ @@ -39,15 +39,19 @@ android:id="@+id/tooltip_bubble" android:layout_width="wrap_content" android:layout_height="wrap_content" + android:layout_marginTop="12dp" android:background="@drawable/tooltip_background" android:clipChildren="false" android:clipToPadding="false" android:gravity="center_vertical" android:orientation="horizontal" android:padding="16dp" + app:layout_constraintEnd_toStartOf="@id/tooltip_arrow_end" app:layout_constraintStart_toEndOf="@id/tooltip_arrow_start" - app:layout_constraintTop_toBottomOf="@id/tooltip_arrow_top" + app:layout_constraintTop_toTopOf="parent" app:layout_constraintWidth_max="320dp" + app:layout_goneMarginEnd="8dp" + app:layout_goneMarginStart="8dp" tools:backgroundTint="@color/signal_colorPrimaryContainer">