Tweak the design of comments.

This commit is contained in:
Alex Ning 2021-04-09 23:20:46 +08:00
parent fd86448f72
commit 0bef61a45f
6 changed files with 108 additions and 181 deletions

View File

@ -111,6 +111,7 @@ import ml.docilealligator.infinityforreddit.comment.Comment;
import ml.docilealligator.infinityforreddit.comment.FetchComment;
import ml.docilealligator.infinityforreddit.customtheme.CustomThemeWrapper;
import ml.docilealligator.infinityforreddit.customviews.AspectRatioGifImageView;
import ml.docilealligator.infinityforreddit.customviews.CommentIndentationView;
import ml.docilealligator.infinityforreddit.customviews.MarkwonLinearLayoutManager;
import ml.docilealligator.infinityforreddit.fragments.ViewPostDetailFragment;
import ml.docilealligator.infinityforreddit.post.Post;
@ -237,6 +238,7 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
private int mCommentIconAndInfoColor;
private int mFullyCollapsedCommentBackgroundColor;
private int mAwardedCommentBackgroundColor;
private int[] verticalBlockColors;
private Drawable mCommentIcon;
private float mScale;
@ -569,6 +571,16 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
mFullyCollapsedCommentBackgroundColor = customThemeWrapper.getFullyCollapsedCommentBackgroundColor();
mAwardedCommentBackgroundColor = customThemeWrapper.getAwardedCommentBackgroundColor();
verticalBlockColors = new int[] {
customThemeWrapper.getCommentVerticalBarColor1(),
customThemeWrapper.getCommentVerticalBarColor2(),
customThemeWrapper.getCommentVerticalBarColor3(),
customThemeWrapper.getCommentVerticalBarColor4(),
customThemeWrapper.getCommentVerticalBarColor5(),
customThemeWrapper.getCommentVerticalBarColor6(),
customThemeWrapper.getCommentVerticalBarColor7(),
};
mCommentIcon = activity.getDrawable(R.drawable.ic_comment_grey_24dp);
if (mCommentIcon != null) {
DrawableCompat.setTint(mCommentIcon, mPostIconAndInfoColor);
@ -1104,42 +1116,7 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
Utils.getNVotes(mShowAbsoluteNumberOfVotes,
comment.getScore() + comment.getVoteType())));
((CommentViewHolder) holder).linearLayout.setPadding(comment.getDepth() * 24, 0, 0, 0);
if (comment.getDepth() > 0) {
switch (comment.getDepth() % 7) {
case 0:
((CommentViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor7);
break;
case 1:
((CommentViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor1);
break;
case 2:
((CommentViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor2);
break;
case 3:
((CommentViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor3);
break;
case 4:
((CommentViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor4);
break;
case 5:
((CommentViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor5);
break;
case 6:
((CommentViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor6);
break;
}
ViewGroup.LayoutParams params = ((CommentViewHolder) holder).verticalBlock.getLayoutParams();
params.width = 12;
((CommentViewHolder) holder).verticalBlock.setLayoutParams(params);
}
((CommentViewHolder) holder).commentIndentationView.setLevelAndColors(comment.getDepth(), verticalBlockColors);
if (comment.hasReply()) {
if (comment.isExpanded()) {
@ -1205,85 +1182,13 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
}
((CommentFullyCollapsedViewHolder) holder).scoreTextView.setText(mActivity.getString(R.string.top_score,
Utils.getNVotes(mShowAbsoluteNumberOfVotes, comment.getScore() + comment.getVoteType())));
((CommentFullyCollapsedViewHolder) holder).itemView.setPadding(comment.getDepth() * 24, 0, 0, 0);
if (comment.getDepth() > 0) {
switch (comment.getDepth() % 7) {
case 0:
((CommentFullyCollapsedViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor7);
break;
case 1:
((CommentFullyCollapsedViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor1);
break;
case 2:
((CommentFullyCollapsedViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor2);
break;
case 3:
((CommentFullyCollapsedViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor3);
break;
case 4:
((CommentFullyCollapsedViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor4);
break;
case 5:
((CommentFullyCollapsedViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor5);
break;
case 6:
((CommentFullyCollapsedViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor6);
break;
}
ViewGroup.LayoutParams params = ((CommentFullyCollapsedViewHolder) holder).verticalBlock.getLayoutParams();
params.width = 12;
((CommentFullyCollapsedViewHolder) holder).verticalBlock.setLayoutParams(params);
}
((CommentFullyCollapsedViewHolder) holder).commentIndentationView.setLevelAndColors(comment.getDepth(), verticalBlockColors);
} else if (holder instanceof LoadMoreChildCommentsViewHolder) {
Comment placeholder;
placeholder = mIsSingleCommentThreadMode ? mVisibleComments.get(holder.getBindingAdapterPosition() - 2)
: mVisibleComments.get(holder.getBindingAdapterPosition() - 1);
((LoadMoreChildCommentsViewHolder) holder).itemView.setPadding(placeholder.getDepth() * 24, 0, 0, 0);
if (placeholder.getDepth() > 0) {
switch (placeholder.getDepth() % 7) {
case 0:
((LoadMoreChildCommentsViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor7);
break;
case 1:
((LoadMoreChildCommentsViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor1);
break;
case 2:
((LoadMoreChildCommentsViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor2);
break;
case 3:
((LoadMoreChildCommentsViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor3);
break;
case 4:
((LoadMoreChildCommentsViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor4);
break;
case 5:
((LoadMoreChildCommentsViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor5);
break;
case 6:
((LoadMoreChildCommentsViewHolder) holder).verticalBlock
.setBackgroundColor(mCommentVerticalBarColor6);
break;
}
ViewGroup.LayoutParams params = ((LoadMoreChildCommentsViewHolder) holder).verticalBlock.getLayoutParams();
params.width = 12;
((LoadMoreChildCommentsViewHolder) holder).verticalBlock.setLayoutParams(params);
}
((LoadMoreChildCommentsViewHolder) holder).commentIndentationView.setLevelAndColors(placeholder.getDepth(), verticalBlockColors);
if (placeholder.isLoadingMoreChildren()) {
((LoadMoreChildCommentsViewHolder) holder).placeholderTextView.setText(R.string.loading);
@ -1989,16 +1894,12 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
((CommentViewHolder) holder).scoreTextView.setTextColor(mCommentIconAndInfoColor);
((CommentViewHolder) holder).downvoteButton.setColorFilter(mCommentIconAndInfoColor, android.graphics.PorterDuff.Mode.SRC_IN);
((CommentViewHolder) holder).replyButton.setColorFilter(mCommentIconAndInfoColor, android.graphics.PorterDuff.Mode.SRC_IN);
ViewGroup.LayoutParams params = ((CommentViewHolder) holder).verticalBlock.getLayoutParams();
params.width = 0;
((CommentViewHolder) holder).verticalBlock.setLayoutParams(params);
((CommentViewHolder) holder).linearLayout.setPadding(0, 0, 0, 0);
((CommentViewHolder) holder).itemView.setBackgroundColor(mCommentBackgroundColor);
((CommentViewHolder) holder).commentIndentationView.setLevelAndColors(0, verticalBlockColors);
} else if (holder instanceof CommentFullyCollapsedViewHolder) {
ViewGroup.LayoutParams params = ((CommentFullyCollapsedViewHolder) holder).verticalBlock.getLayoutParams();
params.width = 0;
((CommentFullyCollapsedViewHolder) holder).verticalBlock.setLayoutParams(params);
((CommentFullyCollapsedViewHolder) holder).itemView.setPadding(0, 0, 0, 0);
((CommentFullyCollapsedViewHolder) holder).commentIndentationView.setLevelAndColors(0, verticalBlockColors);
} else if (holder instanceof LoadMoreChildCommentsViewHolder) {
((LoadMoreChildCommentsViewHolder) holder).commentIndentationView.setLevelAndColors(0, verticalBlockColors);
} else if (holder instanceof PostDetailBaseViewHolder) {
((PostDetailBaseViewHolder) holder).mUpvoteButton.setColorFilter(mPostIconAndInfoColor, android.graphics.PorterDuff.Mode.SRC_IN);
((PostDetailBaseViewHolder) holder).mScoreTextView.setTextColor(mPostIconAndInfoColor);
@ -2023,11 +1924,6 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
} else if (holder instanceof PostDetailLinkViewHolder) {
mGlide.clear(((PostDetailLinkViewHolder) holder).mImageView);
}
} else if (holder instanceof LoadMoreChildCommentsViewHolder) {
((LoadMoreChildCommentsViewHolder) holder).itemView.setPadding(0, 0, 0, 0);
ViewGroup.LayoutParams params = ((LoadMoreChildCommentsViewHolder) holder).verticalBlock.getLayoutParams();
params.width = 0;
((LoadMoreChildCommentsViewHolder) holder).verticalBlock.setLayoutParams(params);
}
}
@ -3376,8 +3272,6 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
}
public class CommentViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.linear_layout_item_comment)
LinearLayout linearLayout;
@BindView(R.id.author_text_view_item_post_comment)
TextView authorTextView;
@BindView(R.id.author_flair_text_view_item_post_comment)
@ -3406,8 +3300,8 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
ImageView expandButton;
@BindView(R.id.reply_button_item_post_comment)
ImageView replyButton;
@BindView(R.id.vertical_block_item_post_comment)
View verticalBlock;
@BindView(R.id.vertical_block_indentation_item_comment)
CommentIndentationView commentIndentationView;
@BindView(R.id.divider_item_comment)
View commentDivider;
@ -3838,8 +3732,8 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
}
class CommentFullyCollapsedViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.vertical_block_item_comment_fully_collapsed)
View verticalBlock;
@BindView(R.id.vertical_block_indentation_item_comment_fully_collapsed)
CommentIndentationView commentIndentationView;
@BindView(R.id.user_name_text_view_item_comment_fully_collapsed)
TextView usernameTextView;
@BindView(R.id.score_text_view_item_comment_fully_collapsed)
@ -3893,8 +3787,8 @@ public class CommentAndPostRecyclerViewAdapter extends RecyclerView.Adapter<Recy
}
class LoadMoreChildCommentsViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.vertical_block_item_load_more_comments)
View verticalBlock;
@BindView(R.id.vertical_block_indentation_item_load_more_comments_placeholder)
CommentIndentationView commentIndentationView;
@BindView(R.id.placeholder_text_view_item_load_more_comments)
TextView placeholderTextView;
@BindView(R.id.divider_item_load_more_comments_placeholder)

View File

@ -10,14 +10,12 @@ import android.text.SpannableStringBuilder;
import android.text.Spanned;
import android.text.TextPaint;
import android.text.style.ClickableSpan;
import android.text.style.SuperscriptSpan;
import android.text.util.Linkify;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
@ -45,7 +43,6 @@ import io.noties.markwon.ext.strikethrough.StrikethroughPlugin;
import io.noties.markwon.html.HtmlPlugin;
import io.noties.markwon.linkify.LinkifyPlugin;
import io.noties.markwon.movement.MovementMethodPlugin;
import io.noties.markwon.simple.ext.SimpleExtPlugin;
import me.saket.bettermovementmethod.BetterLinkMovementMethod;
import ml.docilealligator.infinityforreddit.NetworkState;
import ml.docilealligator.infinityforreddit.R;
@ -59,6 +56,7 @@ import ml.docilealligator.infinityforreddit.bottomsheetfragments.CommentMoreBott
import ml.docilealligator.infinityforreddit.bottomsheetfragments.UrlMenuBottomSheetFragment;
import ml.docilealligator.infinityforreddit.comment.Comment;
import ml.docilealligator.infinityforreddit.customtheme.CustomThemeWrapper;
import ml.docilealligator.infinityforreddit.customviews.CommentIndentationView;
import ml.docilealligator.infinityforreddit.utils.APIUtils;
import ml.docilealligator.infinityforreddit.utils.SharedPreferencesUtils;
import ml.docilealligator.infinityforreddit.utils.Utils;
@ -295,8 +293,6 @@ public class CommentsListingRecyclerViewAdapter extends PagedListAdapter<Comment
break;
}
((CommentViewHolder) holder).verticalBlock.setVisibility(View.GONE);
if (comment.isSaved()) {
((CommentViewHolder) holder).saveButton.setImageResource(R.drawable.ic_bookmark_grey_24dp);
} else {
@ -402,10 +398,8 @@ public class CommentsListingRecyclerViewAdapter extends PagedListAdapter<Comment
}
public class CommentViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.linear_layout_item_comment)
LinearLayout linearLayout;
@BindView(R.id.vertical_block_item_post_comment)
View verticalBlock;
@BindView(R.id.vertical_block_indentation_item_comment)
CommentIndentationView commentIndentationView;
@BindView(R.id.author_text_view_item_post_comment)
TextView authorTextView;
@BindView(R.id.author_flair_text_view_item_post_comment)
@ -461,6 +455,8 @@ public class CommentsListingRecyclerViewAdapter extends PagedListAdapter<Comment
constraintSet.applyTo(bottomConstraintLayout);
}
commentIndentationView.setVisibility(View.GONE);
if (mShowCommentDivider) {
commentDivider.setVisibility(View.VISIBLE);
}
@ -520,7 +516,7 @@ public class CommentsListingRecyclerViewAdapter extends PagedListAdapter<Comment
}
});
linearLayout.setOnClickListener(view -> {
itemView.setOnClickListener(view -> {
int position = getAdapterPosition();
if (position < 0) {
return;
@ -536,7 +532,7 @@ public class CommentsListingRecyclerViewAdapter extends PagedListAdapter<Comment
commentMarkdownView.setOnClickListener(view -> {
if (commentMarkdownView.getSelectionStart() == -1 && commentMarkdownView.getSelectionEnd() == -1) {
linearLayout.callOnClick();
itemView.callOnClick();
}
});

View File

@ -0,0 +1,68 @@
package ml.docilealligator.infinityforreddit.customviews;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.widget.LinearLayout;
import androidx.annotation.Nullable;
import java.util.ArrayList;
import ml.docilealligator.infinityforreddit.utils.Utils;
public class CommentIndentationView extends LinearLayout {
private final Paint paint;
private int level;
private int[] colors;
private ArrayList<Path> paths;
private final int spacing;
private final int pathWidth;
public CommentIndentationView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setWillNotDraw(false);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
pathWidth = (int) Utils.convertDpToPixel(2, context);
spacing = pathWidth * 6;
paint.setStrokeWidth(pathWidth);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setPathEffect(new DashPathEffect(new float[] { pathWidth * 2, pathWidth * 2 }, 0));
paths = new ArrayList<>();
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
for (int i = 0; i < level; i++) {
float startX = spacing * (i + 1) + pathWidth;
Path path = new Path();
path.moveTo(startX, 0);
path.lineTo(startX, getHeight());
paths.add(path);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < paths.size(); i++) {
paint.setColor(colors[i % 7]);
canvas.drawPath(paths.get(i), paint);
}
}
public void setLevelAndColors(int level, int[] colors) {
paths.clear();
this.colors = colors;
this.level = level;
int indentationSpacing = (int) (level * spacing + pathWidth);
setPaddingRelative(indentationSpacing, 0, pathWidth, 0);
}
}

View File

@ -8,45 +8,14 @@
android:background="?attr/cardViewBackgroundColor">
<LinearLayout
android:id="@+id/linear_layout_item_comment"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="@+id/vertical_block_item_post_comment"
android:layout_width="0dp"
<ml.docilealligator.infinityforreddit.customviews.CommentIndentationView
android:id="@+id/vertical_block_indentation_item_comment"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<!--<View
android:id="@+id/vertical_block_item_post_comment"
android:layout_width="0dp"
android:layout_height="match_parent" />
<View
android:id="@+id/vertical_block_item_post_comment"
android:layout_width="0dp"
android:layout_height="match_parent" />
<View
android:id="@+id/vertical_block_item_post_comment"
android:layout_width="0dp"
android:layout_height="match_parent" />
<View
android:id="@+id/vertical_block_item_post_comment"
android:layout_width="0dp"
android:layout_height="match_parent" />
<View
android:id="@+id/vertical_block_item_post_comment"
android:layout_width="0dp"
android:layout_height="match_parent" />
<View
android:id="@+id/vertical_block_item_post_comment"
android:layout_width="0dp"
android:layout_height="match_parent" />-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"

View File

@ -8,9 +8,9 @@
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="@+id/vertical_block_item_comment_fully_collapsed"
android:layout_width="0dp"
<ml.docilealligator.infinityforreddit.customviews.CommentIndentationView
android:id="@+id/vertical_block_indentation_item_comment_fully_collapsed"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<TextView

View File

@ -9,8 +9,8 @@
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="@+id/vertical_block_item_load_more_comments"
<ml.docilealligator.infinityforreddit.customviews.CommentIndentationView
android:id="@+id/vertical_block_indentation_item_load_more_comments_placeholder"
android:layout_width="wrap_content"
android:layout_height="match_parent" />