Improve detailed status looks (#4260)
#4205 did change how the counters for the detailed posts behave and for a good reason I believe. However I find the changed order very confusing and not aesthetically pleasing. I have tried a few options, including reserving space for it but it was confusing (when counters are not displayed there would be a danging separator or if we show separator together with it it would be confusing as well). I propose we simply show the counters independent on the counts. I know we try to de-emphasize the counters but I believe this is fine to do in detailed view. One disadvantage is that we need translators to update the translations. Additionally I've done two spacing changes: I removed a separator between the counters and the buttons, removed padding around the counters and increased the space between the counters and the buttons instead. I believe it's better to use space than separators. This also makes the space above/below the media/counters separator balanced. In the second commit I've also made the metadata/counters separators thinner, I think it looks better. here's the combined version: ![proposal_final](https://github.com/tuskyapp/Tusky/assets/3099142/ea9d4c0c-fe6a-4f2e-8427-673b2a833e6b)
This commit is contained in:
parent
48afcacd98
commit
22ec78c75a
|
@ -976,22 +976,14 @@ public abstract class StatusBaseViewHolder extends RecyclerView.ViewHolder {
|
||||||
|
|
||||||
@NonNull
|
@NonNull
|
||||||
protected CharSequence getFavsText(@NonNull Context context, int count) {
|
protected CharSequence getFavsText(@NonNull Context context, int count) {
|
||||||
if (count > 0) {
|
|
||||||
String countString = numberFormat.format(count);
|
String countString = numberFormat.format(count);
|
||||||
return HtmlCompat.fromHtml(context.getResources().getQuantityString(R.plurals.favs, count, countString), HtmlCompat.FROM_HTML_MODE_LEGACY);
|
return HtmlCompat.fromHtml(context.getResources().getQuantityString(R.plurals.favs, count, countString), HtmlCompat.FROM_HTML_MODE_LEGACY);
|
||||||
} else {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@NonNull
|
@NonNull
|
||||||
protected CharSequence getReblogsText (@NonNull Context context, int count) {
|
protected CharSequence getReblogsText (@NonNull Context context, int count) {
|
||||||
if (count > 0) {
|
|
||||||
String countString = numberFormat.format(count);
|
String countString = numberFormat.format(count);
|
||||||
return HtmlCompat.fromHtml(context.getResources().getQuantityString(R.plurals.reblogs, count, countString), HtmlCompat.FROM_HTML_MODE_LEGACY);
|
return HtmlCompat.fromHtml(context.getResources().getQuantityString(R.plurals.reblogs, count, countString), HtmlCompat.FROM_HTML_MODE_LEGACY);
|
||||||
} else {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private void setupPoll(PollViewData poll, List<Emoji> emojis,
|
private void setupPoll(PollViewData poll, List<Emoji> emojis,
|
||||||
|
|
|
@ -67,7 +67,6 @@ public class StatusDetailedViewHolder extends StatusBaseViewHolder {
|
||||||
|
|
||||||
Date createdAt = status.getCreatedAt();
|
Date createdAt = status.getCreatedAt();
|
||||||
if (createdAt != null) {
|
if (createdAt != null) {
|
||||||
|
|
||||||
sb.append(" ");
|
sb.append(" ");
|
||||||
sb.append(dateFormat.format(createdAt));
|
sb.append(dateFormat.format(createdAt));
|
||||||
}
|
}
|
||||||
|
@ -105,7 +104,6 @@ public class StatusDetailedViewHolder extends StatusBaseViewHolder {
|
||||||
Status.Application app = status.getApplication();
|
Status.Application app = status.getApplication();
|
||||||
|
|
||||||
if (app != null) {
|
if (app != null) {
|
||||||
|
|
||||||
sb.append(metadataJoiner);
|
sb.append(metadataJoiner);
|
||||||
|
|
||||||
if (app.getWebsite() != null) {
|
if (app.getWebsite() != null) {
|
||||||
|
@ -121,25 +119,8 @@ public class StatusDetailedViewHolder extends StatusBaseViewHolder {
|
||||||
}
|
}
|
||||||
|
|
||||||
private void setReblogAndFavCount(int reblogCount, int favCount, StatusActionListener listener) {
|
private void setReblogAndFavCount(int reblogCount, int favCount, StatusActionListener listener) {
|
||||||
|
|
||||||
if (reblogCount > 0) {
|
|
||||||
reblogs.setText(getReblogsText(reblogs.getContext(), reblogCount));
|
reblogs.setText(getReblogsText(reblogs.getContext(), reblogCount));
|
||||||
reblogs.setVisibility(View.VISIBLE);
|
|
||||||
} else {
|
|
||||||
reblogs.setVisibility(View.GONE);
|
|
||||||
}
|
|
||||||
if (favCount > 0) {
|
|
||||||
favourites.setText(getFavsText(favourites.getContext(), favCount));
|
favourites.setText(getFavsText(favourites.getContext(), favCount));
|
||||||
favourites.setVisibility(View.VISIBLE);
|
|
||||||
} else {
|
|
||||||
favourites.setVisibility(View.GONE);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (reblogs.getVisibility() == View.GONE && favourites.getVisibility() == View.GONE) {
|
|
||||||
infoDivider.setVisibility(View.GONE);
|
|
||||||
} else {
|
|
||||||
infoDivider.setVisibility(View.VISIBLE);
|
|
||||||
}
|
|
||||||
|
|
||||||
reblogs.setOnClickListener(v -> {
|
reblogs.setOnClickListener(v -> {
|
||||||
int position = getBindingAdapterPosition();
|
int position = getBindingAdapterPosition();
|
||||||
|
|
|
@ -283,17 +283,11 @@
|
||||||
app:layout_constraintTop_toBottomOf="@id/status_poll_description"
|
app:layout_constraintTop_toBottomOf="@id/status_poll_description"
|
||||||
tools:text="21 Dec 2018 18:45" />
|
tools:text="21 Dec 2018 18:45" />
|
||||||
|
|
||||||
<androidx.constraintlayout.widget.Barrier
|
|
||||||
android:id="@+id/status_counters_barrier"
|
|
||||||
android:layout_width="wrap_content"
|
|
||||||
android:layout_height="wrap_content"
|
|
||||||
app:barrierDirection="bottom"
|
|
||||||
app:constraint_referenced_ids="status_reblogs,status_favourites" />
|
|
||||||
|
|
||||||
<View
|
<View
|
||||||
android:id="@+id/status_buttons_divider"
|
android:id="@+id/status_info_divider"
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="1dp"
|
android:layout_height="0.5dp"
|
||||||
|
android:layout_below="@id/status_meta_info"
|
||||||
android:layout_marginStart="14dp"
|
android:layout_marginStart="14dp"
|
||||||
android:layout_marginTop="6dp"
|
android:layout_marginTop="6dp"
|
||||||
android:layout_marginEnd="14dp"
|
android:layout_marginEnd="14dp"
|
||||||
|
@ -303,18 +297,56 @@
|
||||||
android:paddingEnd="16dp"
|
android:paddingEnd="16dp"
|
||||||
app:layout_constraintTop_toBottomOf="@id/status_meta_info" />
|
app:layout_constraintTop_toBottomOf="@id/status_meta_info" />
|
||||||
|
|
||||||
|
<TextView
|
||||||
|
android:id="@+id/status_reblogs"
|
||||||
|
android:layout_width="wrap_content"
|
||||||
|
android:layout_height="wrap_content"
|
||||||
|
android:layout_marginTop="6dp"
|
||||||
|
android:background="?attr/selectableItemBackground"
|
||||||
|
android:importantForAccessibility="no"
|
||||||
|
android:textSize="?attr/status_text_medium"
|
||||||
|
app:layout_constraintStart_toStartOf="@id/status_info_divider"
|
||||||
|
app:layout_constraintTop_toBottomOf="@id/status_info_divider"
|
||||||
|
tools:text="4 Boosts"
|
||||||
|
tools:visibility="visible" />
|
||||||
|
|
||||||
|
<TextView
|
||||||
|
android:id="@+id/status_favourites"
|
||||||
|
android:layout_width="wrap_content"
|
||||||
|
android:layout_height="wrap_content"
|
||||||
|
android:layout_marginStart="12dp"
|
||||||
|
android:layout_marginTop="6dp"
|
||||||
|
android:background="?attr/selectableItemBackground"
|
||||||
|
android:importantForAccessibility="no"
|
||||||
|
android:textSize="?attr/status_text_medium"
|
||||||
|
app:layout_constraintStart_toEndOf="@id/status_reblogs"
|
||||||
|
app:layout_constraintTop_toBottomOf="@id/status_info_divider"
|
||||||
|
app:layout_goneMarginStart="0dp"
|
||||||
|
tools:text="8 Favorites"
|
||||||
|
tools:visibility="visible" />
|
||||||
|
|
||||||
|
<androidx.constraintlayout.widget.Barrier
|
||||||
|
android:id="@+id/status_counters_barrier"
|
||||||
|
android:layout_width="wrap_content"
|
||||||
|
android:layout_height="wrap_content"
|
||||||
|
app:barrierDirection="bottom"
|
||||||
|
app:constraint_referenced_ids="status_reblogs,status_favourites" />
|
||||||
|
|
||||||
|
|
||||||
<ImageButton
|
<ImageButton
|
||||||
android:id="@+id/status_reply"
|
android:id="@+id/status_reply"
|
||||||
style="@style/TuskyImageButton"
|
style="@style/TuskyImageButton"
|
||||||
android:layout_width="52dp"
|
android:layout_width="52dp"
|
||||||
android:layout_height="48dp"
|
android:layout_height="48dp"
|
||||||
|
android:layout_marginTop="4dp"
|
||||||
android:contentDescription="@string/action_reply"
|
android:contentDescription="@string/action_reply"
|
||||||
android:importantForAccessibility="no"
|
android:importantForAccessibility="no"
|
||||||
android:padding="4dp"
|
android:padding="4dp"
|
||||||
|
app:layout_constraintBottom_toBottomOf="parent"
|
||||||
app:layout_constraintEnd_toStartOf="@id/status_inset"
|
app:layout_constraintEnd_toStartOf="@id/status_inset"
|
||||||
app:layout_constraintHorizontal_chainStyle="spread_inside"
|
app:layout_constraintHorizontal_chainStyle="spread_inside"
|
||||||
app:layout_constraintStart_toStartOf="parent"
|
app:layout_constraintStart_toStartOf="parent"
|
||||||
app:layout_constraintTop_toBottomOf="@id/status_buttons_divider"
|
app:layout_constraintTop_toBottomOf="@id/status_counters_barrier"
|
||||||
app:srcCompat="@drawable/ic_reply_24dp" />
|
app:srcCompat="@drawable/ic_reply_24dp" />
|
||||||
|
|
||||||
<at.connyduck.sparkbutton.SparkButton
|
<at.connyduck.sparkbutton.SparkButton
|
||||||
|
@ -382,45 +414,4 @@
|
||||||
app:layout_constraintTop_toTopOf="@id/status_reply"
|
app:layout_constraintTop_toTopOf="@id/status_reply"
|
||||||
app:srcCompat="@drawable/ic_more_horiz_24dp" />
|
app:srcCompat="@drawable/ic_more_horiz_24dp" />
|
||||||
|
|
||||||
<View
|
|
||||||
android:id="@+id/status_info_divider"
|
|
||||||
android:layout_width="match_parent"
|
|
||||||
android:layout_height="1dp"
|
|
||||||
android:layout_below="@id/status_meta_info"
|
|
||||||
android:layout_marginStart="14dp"
|
|
||||||
android:layout_marginEnd="14dp"
|
|
||||||
android:background="?android:attr/listDivider"
|
|
||||||
android:importantForAccessibility="no"
|
|
||||||
android:paddingStart="16dp"
|
|
||||||
android:paddingEnd="16dp"
|
|
||||||
app:layout_constraintTop_toBottomOf="@id/status_reply" />
|
|
||||||
|
|
||||||
<TextView
|
|
||||||
android:id="@+id/status_reblogs"
|
|
||||||
android:layout_width="wrap_content"
|
|
||||||
android:layout_height="wrap_content"
|
|
||||||
android:background="?attr/selectableItemBackground"
|
|
||||||
android:importantForAccessibility="no"
|
|
||||||
android:padding="4dp"
|
|
||||||
android:textSize="?attr/status_text_medium"
|
|
||||||
app:layout_constraintStart_toStartOf="@id/status_info_divider"
|
|
||||||
app:layout_constraintTop_toBottomOf="@id/status_info_divider"
|
|
||||||
tools:text="4 reblogs"
|
|
||||||
tools:visibility="visible" />
|
|
||||||
|
|
||||||
<TextView
|
|
||||||
android:id="@+id/status_favourites"
|
|
||||||
android:layout_width="wrap_content"
|
|
||||||
android:layout_height="wrap_content"
|
|
||||||
android:layout_marginStart="12dp"
|
|
||||||
android:background="?attr/selectableItemBackground"
|
|
||||||
android:importantForAccessibility="no"
|
|
||||||
android:padding="4dp"
|
|
||||||
android:textSize="?attr/status_text_medium"
|
|
||||||
app:layout_constraintStart_toEndOf="@id/status_reblogs"
|
|
||||||
app:layout_constraintTop_toBottomOf="@id/status_info_divider"
|
|
||||||
app:layout_goneMarginStart="0dp"
|
|
||||||
tools:text="8 favs"
|
|
||||||
tools:visibility="visible" />
|
|
||||||
|
|
||||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||||
|
|
|
@ -546,11 +546,13 @@
|
||||||
<string name="failed_to_unpin">Failed to Unpin</string>
|
<string name="failed_to_unpin">Failed to Unpin</string>
|
||||||
|
|
||||||
<plurals name="favs">
|
<plurals name="favs">
|
||||||
|
<item quantity="zero"><b>%1$s</b> Favorites</item>
|
||||||
<item quantity="one"><b>%1$s</b> Favorite</item>
|
<item quantity="one"><b>%1$s</b> Favorite</item>
|
||||||
<item quantity="other"><b>%1$s</b> Favorites</item>
|
<item quantity="other"><b>%1$s</b> Favorites</item>
|
||||||
</plurals>
|
</plurals>
|
||||||
|
|
||||||
<plurals name="reblogs">
|
<plurals name="reblogs">
|
||||||
|
<item quantity="zero"><b>%s</b> Boosts</item>
|
||||||
<item quantity="one"><b>%s</b> Boost</item>
|
<item quantity="one"><b>%s</b> Boost</item>
|
||||||
<item quantity="other"><b>%s</b> Boosts</item>
|
<item quantity="other"><b>%s</b> Boosts</item>
|
||||||
</plurals>
|
</plurals>
|
||||||
|
|
Loading…
Reference in New Issue