Replicate element coloring with icons (#305)

* fix invalid icon name

* CenterAlignedImageSpan

* Vote direction icon

* Vote icon for comments

* OP comment icon

* use centering based on font metrics

* Add preference

* Fix tests

* sp to px units conversion

* Add vertical offset

* Revert c3598f8, 9d13eca (remove preference)

* Remove preference gates

* Update changelog entry

* Improve icon centering for different fonts

* Use dimension resource for line spacing

* Remove drawable caching

* Don't apply extra line spacing correction to last line

Co-authored-by: Łukasz Rutkowski <[email protected]>

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 
+-	Icons for OP comments and up/downvote ([#305](https://github.com/Tunous/Dawn/pull/305))
 -   Support for reddit galleries ([#312](https://github.com/Tunous/Dawn/pull/312))
 
 ### Changed

app/src/main/java/me/saket/dank/ui/submission/SubmissionCommentTreeUiConstructor.java

@@ -8,6 +8,7 @@
 import androidx.annotation.ColorRes;
 import androidx.core.content.ContextCompat;
 
+import me.saket.dank.utils.*;
 import net.dean.jraw.models.Comment;
 import net.dean.jraw.models.Identifiable;
 import net.dean.jraw.models.MoreChildren;
@@ -39,16 +40,7 @@
 import me.saket.dank.ui.submission.adapter.SubmissionRemoteComment;
 import me.saket.dank.ui.submission.adapter.SubmissionScreenUiModel;
 import me.saket.dank.ui.user.UserSessionRepository;
-import me.saket.dank.utils.CombineLatestWithLog;
 import me.saket.dank.utils.CombineLatestWithLog.O;
-import me.saket.dank.utils.DankSubmissionRequest;
-import me.saket.dank.utils.Dates;
-import me.saket.dank.utils.JrawUtils2;
-import me.saket.dank.utils.Optional;
-import me.saket.dank.utils.RxHashSet;
-import me.saket.dank.utils.Strings;
-import me.saket.dank.utils.Themes;
-import me.saket.dank.utils.Truss;
 import me.saket.dank.utils.markdown.Markdown;
 import me.saket.dank.vote.VotingManager;
 import timber.log.Timber;
@@ -616,6 +608,7 @@ private CharSequence constructCommentByline(
       boolean isCollapsed)
   {
     Truss bylineBuilder = new Truss();
+    int voteColor = color(context, Themes.voteColor(voteDirection));
     if (isCollapsed) {
       bylineBuilder.append(author);
       bylineBuilder.append(context.getString(R.string.submission_comment_byline_item_separator));
@@ -625,6 +618,10 @@ private CharSequence constructCommentByline(
       bylineBuilder.append(String.format(hiddenCommentsString, hiddenCommentsCount));
 
     } else {
+      if (isAuthorOP) {
+        ColorReplicationIcons.pushOPCommentIcon(context, bylineBuilder);
+      }
+
       bylineBuilder.pushSpan(new ForegroundColorSpan(color(context, isAuthorOP
           ? R.color.submission_comment_byline_author_op
           : R.color.submission_comment_byline_author)
@@ -633,7 +630,7 @@ private CharSequence constructCommentByline(
       bylineBuilder.popSpan();
 
       bylineBuilder.append(context.getString(R.string.submission_comment_byline_item_separator));
-      bylineBuilder.pushSpan(new ForegroundColorSpan(color(context, Themes.voteColor(voteDirection))));
+      bylineBuilder.pushSpan(new ForegroundColorSpan(voteColor));
       String scoreText = optionalCommentScore
           .map(score -> context.getResources().getQuantityString(
               R.plurals.submission_comment_byline_item_score,
@@ -643,6 +640,8 @@ private CharSequence constructCommentByline(
       bylineBuilder.append(scoreText);
       bylineBuilder.popSpan();
 
+      ColorReplicationIcons.pushVoteIcon(context, bylineBuilder, voteDirection, voteColor, R.dimen.submission_comment_byline, 0);
+
       optionalAuthorFlairText.ifPresent(flair -> {
         bylineBuilder.append(context.getString(R.string.submission_comment_byline_item_separator));
         bylineBuilder.append(markdown.get().parseAuthorFlair(flair));

app/src/main/java/me/saket/dank/ui/submission/adapter/SubmissionUiConstructor.kt

@@ -215,7 +215,8 @@ class SubmissionUiConstructor @Inject constructor(
       swipeActions: SwipeActions
   ): SubmissionCommentsHeader.UiModel {
     val pendingOrDefaultVote = votingManager.getPendingOrDefaultVote(submission, submission.vote)
-    val voteDirectionColor = Themes.voteColor(pendingOrDefaultVote)
+    val voteDirectionColor = color(context, Themes.voteColor(pendingOrDefaultVote))
+    val titleLineSpacingExtra = context.getResources().getDimensionPixelSize(R.dimen.submission_title_extra_spacing);
     val adapterId = JrawUtils2.generateAdapterId(submission)
 
 
@@ -250,9 +251,21 @@ class SubmissionUiConstructor @Inject constructor(
     }
 
     titleBuilder = titleBuilder
-        .pushSpan(ForegroundColorSpan(color(context, voteDirectionColor)))
+        .pushSpan(ForegroundColorSpan(voteDirectionColor))
         .append(Strings.abbreviateScore(vote.toFloat()))
         .popSpan()
+
+    ColorReplicationIcons
+        .pushVoteIcon(
+          context,
+          titleBuilder,
+          pendingOrDefaultVote,
+          voteDirectionColor,
+          R.dimen.submission_title,
+          titleLineSpacingExtra
+        )
+
+    titleBuilder = titleBuilder
         .append("  ")
         .pushSpan(SubmissionTitleSpan)
         .append(Html.fromHtml(submission.title))

app/src/main/java/me/saket/dank/ui/subreddit/uimodels/SubredditUiConstructor.java

@@ -260,9 +260,20 @@ public SubredditSubmission.UiModel submissionUiModel(
     int postedAndPendingCommentCount = submission.getCommentCount() + pendingSyncReplyCount;
 
     Truss titleBuilder = new Truss();
-    titleBuilder.pushSpan(new ForegroundColorSpan(ContextCompat.getColor(c, Themes.voteColor(voteDirection))));
+    int voteColor = ContextCompat.getColor(c, Themes.voteColor(voteDirection));
+    int titleLineSpacingExtra = c.getResources().getDimensionPixelSize(R.dimen.submission_title_extra_spacing);
+
+    titleBuilder.pushSpan(new ForegroundColorSpan(voteColor));
     titleBuilder.append(Strings.abbreviateScore(submissionScore));
     titleBuilder.popSpan();
+
+    ColorReplicationIcons.pushVoteIcon(c,
+        titleBuilder,
+        voteDirection,
+        voteColor,
+        R.dimen.subreddit_submission_title,
+        titleLineSpacingExtra);
+
     titleBuilder.append("  ");
     //noinspection deprecation
     titleBuilder.append(Html.fromHtml(submission.getTitle()));

app/src/main/java/me/saket/dank/utils/ColorReplicationIcons.kt

@@ -0,0 +1,37 @@
+package me.saket.dank.utils
+
+import android.content.Context
+import androidx.core.content.ContextCompat
+import me.saket.dank.R
+import me.saket.dank.widgets.span.CenterAlignedImageSpan
+import net.dean.jraw.models.VoteDirection
+
+object ColorReplicationIcons {
+  @JvmStatic fun pushIcon(context: Context, builder: Truss, sizeDimenResId: Int,
+                          drawableResId: Int, tintColor: Int, lineSpacingExtra: Int) {
+    val size = context.resources.getDimensionPixelSize(sizeDimenResId)
+    val icon = context.resources.getDrawable(drawableResId, null).mutate()
+    icon.setTint(tintColor)
+    icon.setBounds(0, 0, size, size)
+
+    builder
+        .pushSpan(CenterAlignedImageSpan(icon, lineSpacingExtra))
+        .append("icon")
+        .popSpan()
+  }
+
+  @JvmStatic fun pushVoteIcon(context: Context, builder: Truss, vote: VoteDirection?, color: Int, iconSizeResId: Int, lineSpacingExtra: Int) {
+    val icon = when (vote) {
+      VoteDirection.DOWN -> R.drawable.ic_arrow_downward_24dp
+      VoteDirection.UP -> R.drawable.ic_arrow_upward_24dp
+      VoteDirection.NONE, null -> return
+    }
+
+    pushIcon(context, builder, iconSizeResId, icon, color, lineSpacingExtra)
+  }
+
+  @JvmStatic fun pushOPCommentIcon(context: Context, builder: Truss) {
+    val color = ContextCompat.getColor(context, R.color.submission_comment_byline_author_op)
+    pushIcon(context, builder, R.dimen.submission_comment_byline, R.drawable.ic_person_12dp, color, 0)
+  }
+}

app/src/main/java/me/saket/dank/utils/Units.java

@@ -7,8 +7,18 @@
 
 public class Units {
 
+  @Px
+  public static int unitToPx(float value, int unit, Context context) {
+    return (int) TypedValue.applyDimension(unit, value, context.getResources().getDisplayMetrics());
+  }
+
   @Px
   public static int dpToPx(float dpValue, Context context) {
-    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
+    return unitToPx(dpValue, TypedValue.COMPLEX_UNIT_DIP, context);
+  }
+
+  @Px
+  public static int spToPx(float spValue, Context context) {
+    return unitToPx(spValue, TypedValue.COMPLEX_UNIT_SP, context);
   }
 }

app/src/main/java/me/saket/dank/widgets/span/CenterAlignedImageSpan.kt

@@ -0,0 +1,24 @@
+package me.saket.dank.widgets.span
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Paint.FontMetricsInt
+import android.graphics.drawable.Drawable
+import android.text.style.ImageSpan
+import java.lang.ref.WeakReference
+
+class CenterAlignedImageSpan(drawable: Drawable, private val lineSpacingExtra: Int): ImageSpan(drawable, ALIGN_BASELINE) {
+
+  override fun draw(canvas: Canvas, text: CharSequence?,
+                    start: Int, end: Int, x: Float,
+                    top: Int, y: Int, bottom: Int, paint: Paint) {
+    val drawableHeight = drawable.bounds.height()
+    val realExtraSpacing = if (canvas.clipBounds.bottom != bottom) lineSpacingExtra else 0 // extra line spacing is not applied to last line
+    val translationY = top + (bottom - top - drawableHeight - realExtraSpacing) / 2f
+
+    canvas.save()
+    canvas.translate(x, translationY)
+    drawable.draw(canvas)
+    canvas.restore()
+  }
+}

app/src/main/res/layout/list_item_submission_comment.xml

@@ -27,7 +27,7 @@
       android:ellipsize="end"
       android:textColor="@color/submission_comment_byline_default_color"
       android:textIsSelectable="false"
-      android:textSize="@dimen/textsize12"
+      android:textSize="@dimen/submission_comment_byline"
       tools:text="nuckingfuts73 \u00b7 516 points \u00b7 i5 4690 + GTX 1060 / rip Athlon II (stolen) \u00b7 2 hr. ago" />
 
     <me.saket.dank.utils.markdown.markwon.MarkdownTextView

app/src/main/res/layout/list_item_submission_comments_header.xml

@@ -39,9 +39,9 @@
       android:layout_marginBottom="@dimen/spacing8"
       android:layout_marginEnd="@dimen/spacing16"
       android:layout_marginStart="@dimen/spacing16"
-      android:lineSpacingExtra="@dimen/spacing2"
+      android:lineSpacingExtra="@dimen/submission_title_extra_spacing"
       android:textColor="@color/gray_100"
-      android:textSize="@dimen/textsize16"
+      android:textSize="@dimen/submission_title"
       android:textIsSelectable="false"
       tools:text="I did a thing in Photoshop, and am fairly proud of it." />
 

app/src/main/res/layout/list_item_submission_content.xml

@@ -34,10 +34,10 @@
     android:layout_marginStart="@dimen/subreddit_submission_padding"
     android:layout_marginTop="@dimen/spacing12"
     android:layout_marginEnd="@dimen/subreddit_submission_thumbnail_padding"
-    android:lineSpacingExtra="@dimen/spacing2"
+    android:lineSpacingExtra="@dimen/submission_title_extra_spacing"
     android:textColor="@color/gray_100"
     android:textIsSelectable="false"
-    android:textSize="@dimen/textsize16"
+    android:textSize="@dimen/subreddit_submission_title"
     app:layout_constraintEnd_toStartOf="@+id/submission_item_icon"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/submission_item_image"

app/src/main/res/layout/list_item_submission_content_left.xml

@@ -52,7 +52,7 @@
     android:layout_marginStart="@dimen/subreddit_submission_thumbnail_padding"
     android:layout_marginTop="@dimen/spacing12"
     android:layout_marginEnd="@dimen/subreddit_submission_padding"
-    android:lineSpacingExtra="@dimen/spacing2"
+    android:lineSpacingExtra="@dimen/submission_title_extra_spacing"
     android:textColor="@color/gray_100"
     android:textIsSelectable="false"
     android:textSize="@dimen/textsize16"

app/src/main/res/values/dimens.xml

@@ -27,6 +27,7 @@
   <dimen name="subreddit_toolbar_sheet_elevation">10dp</dimen>
   <dimen name="subreddit_picker_sheet_height">366dp</dimen>
   <dimen name="subreddit_picker_sheet_bottom_margin">20dp</dimen>
+  <dimen name="subreddit_submission_title">@dimen/textsize16</dimen>
   <dimen name="subreddit_submission_padding">@dimen/spacing16</dimen>
   <dimen name="subreddit_submission_thumbnail_padding">@dimen/spacing24</dimen>
   <dimen name="subreddit_submission_thumbnail">52dp</dimen>
@@ -36,6 +37,8 @@
   <dimen name="popup_menu_vertical_offset_for_button">6dp</dimen> <!-- that includes padding to make space for shadow. -->
 
   <!-- Submission -->
+  <dimen name="submission_title">@dimen/textsize16</dimen>
+  <dimen name="submission_title_extra_spacing">@dimen/spacing2</dimen>
   <dimen name="submission_commentssheet_minimum_visible_height">76dp</dimen>
   <!--<dimen name="submission_link_thumbnail_width_reddit_link">60dp</dimen>-->
   <dimen name="submission_link_thumbnail_width_external_link">100dp</dimen>
@@ -44,6 +47,7 @@
   <!--<dimen name="submission_link_favicon_min_size">20dp</dimen>-->
   <dimen name="submission_link_title_container_vert_padding_link">@dimen/spacing16</dimen>
   <dimen name="submission_link_title_container_vert_padding_album">32dp</dimen>
+  <dimen name="submission_comment_byline">@dimen/textsize12</dimen>
   <dimen name="submission_comment_body_expanded">@dimen/textsize14</dimen>
   <dimen name="submission_comment_elevation">1dp</dimen>
   <dimen name="submission_comment_top_padding">@dimen/spacing8</dimen>