Identify parents of comment by using colored lines (#49)

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Subscribing to /r/all ([#28](https://github.com/Tunous/Dank/pull/28))
 - View parent submission of crosspost ([#29](https://github.com/Tunous/Dank/pull/29))
 - Links to repository and changelog in about screen ([#42](https://github.com/Tunous/Dank/pull/42))
+- Colored comments depth level ([#49](https://github.com/Tunous/Dank/pull/49))
 
 ### Fixed
 - Clicking on notification doesn't open downloaded image ([#35](https://github.com/Tunous/Dank/pull/35))

app/src/main/java/me/saket/dank/di/RootComponent.java

@@ -54,6 +54,7 @@
 import me.saket.dank.vote.VoteJobService;
 import me.saket.dank.vote.VotingManager;
 import me.saket.dank.walkthrough.WalkthroughModule;
+import me.saket.dank.widgets.IndentedLayout;
 
 @Component(modules = {
     RootModule.class,
@@ -159,4 +160,6 @@ public interface RootComponent {
   void inject(SubmissionGesturesPreferenceScreen target);
 
   void inject(SubmissionSwipeActionPreferenceChoicePopup target);
+
+  void inject(IndentedLayout target);
 }

app/src/main/java/me/saket/dank/di/UserPreferencesModule.java

@@ -121,6 +121,12 @@ Preference<TypefaceResource> typefacePref(@Named("user_prefs") RxSharedPreferenc
     return rxPrefs.getObject("typeface", TypefaceResource.DEFAULT, new TypefaceResource.Converter(moshi));
   }
 
+  @Provides
+  @Named("show_colored_comments_tree")
+  Preference<Boolean> showColoredCommentsTreePref(@Named("user_prefs") RxSharedPreferences rxPrefs) {
+    return rxPrefs.getBoolean("show_colored_comments_tree", false);
+  }
+
 // ======== DATA USAGE ======== //
 
   @Provides

app/src/main/java/me/saket/dank/ui/preferences/adapter/LookAndFeelPreferencesConstructor.kt

@@ -15,6 +15,7 @@ class LookAndFeelPreferencesConstructor @Inject constructor(
   @Named("show_submission_thumbnails") private val showSubmissionThumbnails: Preference<Boolean>,
   @Named("comment_count_in_submission_list_byline") private val showCommentCountInByline: Preference<Boolean>,
   @Named("show_submission_thumbnails_on_left") private val showSubmissionThumbnailsOnLeft: Preference<Boolean>,
+  @Named("show_colored_comments_tree") private val showColoredCommentsTree: Preference<Boolean>,
   @Named("submission_start_swipe_actions") private val submissionStartSwipeActions: Preference<List<SubmissionSwipeAction>>,
   @Named("submission_end_swipe_actions") private val submissionEndSwipeActions: Preference<List<SubmissionSwipeAction>>
 ) : UserPreferencesConstructor.ChildConstructor {
@@ -100,6 +101,18 @@ class LookAndFeelPreferencesConstructor @Inject constructor(
       )
     )
 
+    uiModels.add(
+      UserPreferenceSwitch.UiModel(
+        c.getString(R.string.userprefs_show_colored_comments_tree),
+        if (showColoredCommentsTree.get())
+          c.getString(R.string.userprefs_show_colored_comments_tree_on)
+        else
+          c.getString(R.string.userprefs_show_colored_comments_tree_off),
+        showColoredCommentsTree.get(),
+        showColoredCommentsTree
+      )
+    )
+
     uiModels.add(UserPreferenceSectionHeader.UiModel.create(c.getString(R.string.userprefs_group_gestures)))
 
     uiModels.add(UserPreferenceButton.UiModel.create(

app/src/main/java/me/saket/dank/widgets/IndentedLayout.java

@@ -7,44 +7,64 @@
 import android.graphics.DashPathEffect;
 import android.graphics.Paint;
 import android.graphics.Path;
-import androidx.annotation.IntRange;
 import androidx.annotation.Nullable;
 import androidx.annotation.Px;
+import com.f2prateek.rx.preferences2.Preference;
+import com.jakewharton.rxbinding2.view.RxView;
+
 import android.util.AttributeSet;
 import android.util.TypedValue;
 import android.widget.LinearLayout;
 
+import java.util.ArrayList;
+import java.util.List;
+
+import javax.inject.Inject;
+import javax.inject.Named;
+
 import me.saket.dank.R;
+import me.saket.dank.di.Dank;
 
 public class IndentedLayout extends LinearLayout {
+  private static final int DEFAULT_SPACING_PER_DEPTH_DP = 10;
+  private static final int DEFAULT_LINE_WIDTH = 6;
 
-  private static final int DEFAULT_SPACING_PER_DEPTH_DP = 8;
-  private static final int DEFAULT_LINE_WIDTH = 4;
-
-  private int indentationDepth;
+  private final Paint indentationLinePaint;
+  private final int defaultIndentationLineColor;
+  private final int originalPaddingStart;
   private final int spacePerDepthPx;
-  private Paint indentationLinePaint;
-  private Path indentationLinePath;
+  private final int indentationLineWidth;
+  private final int[] indentationColors;
 
-  private int originalPaddingStart;
+  private int indentationDepth;
+  private List<ColoredTree> trees = new ArrayList<>();
+  @Inject @Named("show_colored_comments_tree") Preference<Boolean> coloredDepthPreference;
 
   public IndentedLayout(Context context, @Nullable AttributeSet attrs) {
     super(context, attrs);
     setWillNotDraw(false);
 
-    indentationLinePaint = new Paint();
+    Dank.dependencyInjector().inject(this);
+
+    coloredDepthPreference.asObservable()
+        .skip(1)
+        .takeUntil(RxView.detaches(this))
+        .subscribe(colored -> {
+          updateLineColors(colored);
+          invalidate();
+        });
+
     originalPaddingStart = getPaddingStart();
+    indentationColors = getResources().getIntArray(R.array.indentation_colors);
 
     TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.IndentedLayout);
     spacePerDepthPx = attributes.getDimensionPixelSize(R.styleable.IndentedLayout_spacePerDepth, dpToPx(DEFAULT_SPACING_PER_DEPTH_DP, context));
-    int indentationLineColor = attributes.getColor(R.styleable.IndentedLayout_indentationLineColor, Color.LTGRAY);
-    int indentationLineWidth = attributes.getDimensionPixelSize(R.styleable.IndentedLayout_indentationLineWidth, dpToPx(DEFAULT_LINE_WIDTH, context));
+    indentationLineWidth = attributes.getDimensionPixelSize(R.styleable.IndentedLayout_indentationLineWidth, dpToPx(DEFAULT_LINE_WIDTH, context));
+    defaultIndentationLineColor = attributes.getColor(R.styleable.IndentedLayout_indentationLineColor, Color.LTGRAY);
     attributes.recycle();
 
     // Using a Path so that dashes can be rendered
-    indentationLinePath = new Path();
     indentationLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
-    indentationLinePaint.setColor(indentationLineColor);
     indentationLinePaint.setStrokeWidth(indentationLineWidth);
     indentationLinePaint.setStyle(Paint.Style.FILL_AND_STROKE);
     indentationLinePaint.setPathEffect(new DashPathEffect(new float[] { indentationLineWidth * 2, indentationLineWidth * 2 }, 0));
@@ -54,31 +74,70 @@ public IndentedLayout(Context context, @Nullable AttributeSet attrs) {
   protected void onLayout(boolean changed, int l, int t, int r, int b) {
     super.onLayout(changed, l, t, r, b);
 
-    indentationLinePath.reset();
     for (int i = 0; i < indentationDepth; i++) {
       float lineStartX = spacePerDepthPx * (i + 1) + indentationLinePaint.getStrokeWidth();
-      indentationLinePath.moveTo(lineStartX, 0);
-      indentationLinePath.lineTo(lineStartX, getHeight());
+
+      ColoredTree tree = trees.get(i);
+
+      tree.path.reset();
+      tree.path.moveTo(lineStartX, 0);
+      tree.path.lineTo(lineStartX, getHeight());
     }
   }
 
   @Override
   public void draw(Canvas canvas) {
     super.draw(canvas);
-    canvas.drawPath(indentationLinePath, indentationLinePaint);
+
+    for (ColoredTree tree : trees) {
+      indentationLinePaint.setColor(tree.color);
+      canvas.drawPath(tree.path, indentationLinePaint);
+    }
   }
 
-  public void setIndentationDepth(@IntRange(from = 0, to = 1) int depth) {
+  public void setIndentationDepth(int depth) {
     indentationDepth = depth;
 
+    setupDepthLines(coloredDepthPreference.get());
+
     int indentationSpacing = (int) (indentationDepth * spacePerDepthPx + indentationLinePaint.getStrokeWidth());
     setPaddingRelative(originalPaddingStart + indentationSpacing, getPaddingTop(), getPaddingEnd(), getPaddingBottom());
 
     invalidate();
   }
 
+  private void setupDepthLines(Boolean colored) {
+    trees = new ArrayList<>();
+
+    for (int i = 0; i < indentationDepth; i++) {
+      int depthColor = getDepthColor(i, colored);
+      trees.add(new ColoredTree(depthColor, new Path()));
+    }
+  }
+
+  private int getDepthColor(int index, Boolean shouldBeColored) {
+    int colorIndex = index % indentationColors.length;
+    return shouldBeColored ? indentationColors[colorIndex] : defaultIndentationLineColor;
+  }
+
+  private void updateLineColors(Boolean colored) {
+    for (int i = 0; i < trees.size(); i++) {
+      trees.get(i).color = getDepthColor(i, colored);
+    }
+  }
+
   @Px
   public static int dpToPx(float dpValue, Context context) {
     return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
   }
+
+  private static class ColoredTree {
+    public int color;
+    public final Path path;
+
+    public ColoredTree(int color, Path path) {
+      this.color = color;
+      this.path = path;
+    }
+  }
 }

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

@@ -94,4 +94,26 @@
   <!-- Text -->
   <color name="text_primary">@color/gray_200</color>
   <color name="text_secondary">@color/gray_500</color>
+
+  <!-- Indentation Colors / Comments Depth Level -->
+  <array name="indentation_colors">
+    <item>#FFC40D</item>
+    <item>#2D89EF</item>
+    <item>#B91D47</item>
+    <item>#00ABA9</item>
+    <item>#E3A21A</item>
+    <item>#99B433</item>
+    <item>#7E3878</item>
+    <item>#FFB300</item>
+    <item>#FFFFFF</item>
+    <item>#00A300</item>
+    <item>#2B5797</item>
+    <item>#9F00A7</item>
+    <item>#603CBA</item>
+    <item>#EE1111</item>
+    <item>#EFF4FF</item>
+    <item>#DA532C</item>
+    <item>#FF0097</item>
+    <item>#1E7145</item>
+  </array>
 </resources>

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

@@ -25,6 +25,10 @@
   <string name="userprefs_item_byline_comment_count_summary_on">Always show</string>
   <string name="userprefs_item_byline_comment_count_summary_off">Always hidden</string>
 
+  <string name="userprefs_show_colored_comments_tree">Colored comments depth level</string>
+  <string name="userprefs_show_colored_comments_tree_on">Lines are colored</string>
+  <string name="userprefs_show_colored_comments_tree_off">Same color for all lines</string>
+
   <string name="userprefs_group_gestures">Gestures</string>
   <string name="userprefs_customize_submission_gestures">Submission gesture actions</string>
   <string name="userprefs_customize_comment_gestures">Comment gesture actions</string>