Skip to content

Commit

Permalink
Merge pull request #20085 from wordpress-mobile/issue/20024-like-inli…
Browse files Browse the repository at this point in the history 
…ne-action

Refactor the layout of notifications item
  • Loading branch information
Antonis Lilis authored Jan 31, 2024
2 parents 0ead1d9 + d007b0b commit c9d6fac
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 70 deletions.
14 changes: 14 additions & 0 deletions WordPress/src/main/java/org/wordpress/android/ui/notifications/adapters/NotesAdapter.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.MarginLayoutParams;
import android.view.ViewParent;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
Expand Down Expand Up @@ -290,6 +291,19 @@ public void onBindViewHolder(NoteViewHolder noteViewHolder, int position) {
if (mOnLoadMoreListener != null && position >= getItemCount() - 1) {
mOnLoadMoreListener.onLoadMore(note.getTimestamp());
}

final int headerMarginTop;
final Context context = noteViewHolder.itemView.getContext();
if (position == 0) {
headerMarginTop = context.getResources()
.getDimensionPixelSize(R.dimen.notifications_header_margin_top_position_0);
} else {
headerMarginTop = context.getResources()
.getDimensionPixelSize(R.dimen.notifications_header_margin_top_position_n);
}
MarginLayoutParams layoutParams = (MarginLayoutParams) noteViewHolder.mHeaderText.getLayoutParams();
layoutParams.topMargin = headerMarginTop;
noteViewHolder.mHeaderText.setLayoutParams(layoutParams);
}

private void handleMaxLines(final TextView subject, final TextView detail) {
Expand Down
11 changes: 11 additions & 0 deletions WordPress/src/main/res/drawable/star_empty.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M9.7,8.65a0.25,0.25 0,0 1,-0.18 0.13l-4.63,0.68a0.25,0.25 0,0 0,-0.14 0.42l3.35,3.26a0.25,0.25 0,0 1,0.07 0.23l-0.79,4.6a0.25,0.25 0,0 0,0.37 0.27l4.13,-2.18a0.25,0.25 0,0 1,0.24 0l4.13,2.18a0.25,0.25 0,0 0,0.37 -0.27l-0.8,-4.6a0.25,0.25 0,0 1,0.08 -0.23l3.35,-3.26a0.25,0.25 0,0 0,-0.14 -0.43l-4.63,-0.67a0.25,0.25 0,0 1,-0.19 -0.13l-2.07,-4.2a0.25,0.25 0,0 0,-0.44 0L9.7,8.65ZM12,7.39l-0.95,1.92a1.75,1.75 0,0 1,-1.31 0.96l-2.12,0.3 1.53,1.5c0.41,0.4 0.6,0.98 0.5,1.55l-0.36,2.11 1.9,-1a1.75,1.75 0,0 1,1.63 0l1.89,1 -0.36,-2.1a1.75,1.75 0,0 1,0.5 -1.56l1.54,-1.5 -2.12,-0.3a1.75,1.75 0,0 1,-1.32 -0.96L12,7.4Z"
android:fillColor="#3C3C43"
android:fillAlpha="0.6"
android:fillType="evenOdd"/>
</vector>
151 changes: 81 additions & 70 deletions WordPress/src/main/res/layout/notifications_list_item.xml
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,115 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical">
android:layout_height="wrap_content">

<org.wordpress.android.widgets.WPTextView
android:id="@+id/header_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="viewStart"
android:layout_marginTop="@dimen/margin_extra_large"
android:fontFamily="sans-serif-medium"
android:padding="@dimen/margin_extra_large"
android:includeFontPadding="false"
android:paddingHorizontal="@dimen/notifications_item_horizontal_padding"
android:textAlignment="viewStart"
android:textColor="?attr/wpColorOnSurfaceHigh"
android:visibility="gone"
android:textSize="@dimen/text_sz_large"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
tools:text="Today"
tools:visibility="visible" />

<FrameLayout
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/note_content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:foreground="?android:selectableItemBackground">
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_small"
android:background="?android:selectableItemBackground"
android:paddingVertical="@dimen/notifications_item_vertical_padding"
app:layout_constraintTop_toBottomOf="@+id/header_text"
app:layout_goneMarginTop="@dimen/margin_none">

<ImageView
android:id="@+id/notification_unread"
android:layout_width="@dimen/notifications_unread_icon_sz"
android:layout_height="@dimen/notifications_unread_icon_sz"
android:layout_marginStart="@dimen/margin_small"
android:layout_gravity="center_vertical|start"
android:contentDescription="@string/notifications_unread_content_description"
android:src="@drawable/ic_notification_unread" />
android:src="@drawable/ic_notification_unread"
app:layout_constraintBottom_toBottomOf="@+id/note_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/note_avatar" />

<RelativeLayout
android:layout_width="match_parent"
<ImageView
android:id="@+id/note_avatar"
android:layout_width="@dimen/activity_log_icon_size"
android:layout_height="@dimen/activity_log_icon_size"
android:layout_marginStart="@dimen/notifications_avatar_margin_start"
android:contentDescription="@null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@drawable/bg_oval_placeholder_user_32dp" />

<ImageView
android:id="@+id/action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/listPreferredItemHeight"
android:padding="@dimen/margin_extra_large"
android:clipChildren="false"
android:clipToPadding="false"
tools:ignore="UselessParent">
android:foreground="?attr/selectableItemBackgroundBorderless"
android:padding="@dimen/notifications_item_action_padding"
android:contentDescription="@null"
app:layout_constraintBottom_toBottomOf="@+id/note_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/note_avatar"
tools:src="@drawable/star_empty" />

<ImageView
android:id="@+id/note_avatar"
android:layout_width="@dimen/activity_log_icon_size"
android:layout_height="@dimen/activity_log_icon_size"
android:layout_marginEnd="@dimen/activity_log_icon_margin"
android:layout_marginTop="@dimen/margin_small"
android:contentDescription="@null"
tools:src="@drawable/bg_oval_placeholder_user_32dp" />
<FrameLayout
android:id="@+id/note_subject_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/margin_extra_large"
android:layout_marginStart="@dimen/margin_medium_large"
app:layout_constraintEnd_toStartOf="@+id/action"
app:layout_constraintStart_toEndOf="@+id/note_avatar"
app:layout_constraintTop_toTopOf="parent">

<FrameLayout
android:id="@+id/note_subject_container"
android:layout_width="match_parent"
<org.wordpress.android.widgets.NoticonTextView
android:id="@+id/note_subject_noticon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/note_avatar">

<org.wordpress.android.widgets.NoticonTextView
android:id="@+id/note_subject_noticon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_extra_small"
android:gravity="start"
android:textAlignment="viewStart"
android:textColor="?attr/wpColorOnSurfaceMedium"
android:textSize="@dimen/text_sz_larger" />

<org.wordpress.android.widgets.WPTextView
android:id="@+id/note_subject"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="start"
android:maxLines="2"
android:textAppearance="@style/WordPress.TextAppearance.NotificationItemTitle"
android:textAlignment="viewStart"
tools:text="Bob Ross commented on your post Happy Trees" />

</FrameLayout>
android:layout_marginTop="@dimen/margin_extra_small"
android:gravity="start"
android:textAlignment="viewStart"
android:textColor="?attr/wpColorOnSurfaceMedium"
android:textSize="@dimen/text_sz_larger" />

<org.wordpress.android.widgets.WPTextView
android:id="@+id/note_detail"
android:layout_width="wrap_content"
android:id="@+id/note_subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/note_subject_container"
android:layout_toEndOf="@+id/note_avatar"
android:ellipsize="end"
android:importantForAccessibility="no"
android:gravity="start"
android:maxLines="2"
android:textAppearance="@style/WordPress.TextAppearance.NotificationItemContent"
android:visibility="gone"
tools:text="What an amazing post!"
tools:visibility="visible" />
android:textAlignment="viewStart"
android:textAppearance="@style/WordPress.TextAppearance.NotificationItemTitle"
tools:text="Bob Ross commented on your post Happy Trees" />
</FrameLayout>

</RelativeLayout>
</FrameLayout>
</LinearLayout>
<org.wordpress.android.widgets.WPTextView
android:id="@+id/note_detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/margin_extra_large"
android:layout_marginStart="@dimen/margin_medium_large"
android:ellipsize="end"
android:importantForAccessibility="no"
android:maxLines="2"
android:textAppearance="@style/WordPress.TextAppearance.NotificationItemContent"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="@id/action"
app:layout_constraintStart_toEndOf="@+id/note_avatar"
app:layout_constraintTop_toBottomOf="@+id/note_subject_container"
tools:text="What an amazing post!"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
6 changes: 6 additions & 0 deletions WordPress/src/main/res/values/dimens.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,10 +275,16 @@
<dimen name="notifications_adjusted_font_margin">10dp</dimen>
<dimen name="notifications_content_margin">0dp</dimen>
<dimen name="notifications_avatar_sz">48dp</dimen>
<dimen name="notifications_avatar_margin_start">18dp</dimen>
<dimen name="notifications_text_indent_sz">22dp</dimen>
<dimen name="notification_comment_padded_frame_bg_offset">14dp</dimen> <!-- results in 6dp border -->
<dimen name="notification_comment_frame_bg_border_width">6dp</dimen>
<dimen name="notifications_unread_icon_sz">8dp</dimen>
<dimen name="notifications_item_vertical_padding">12dp</dimen>
<dimen name="notifications_item_horizontal_padding">18dp</dimen>
<dimen name="notifications_item_action_padding">12dp</dimen>
<dimen name="notifications_header_margin_top_position_0">16dp</dimen>
<dimen name="notifications_header_margin_top_position_n">4dp</dimen>

<dimen name="progress_bar_height">3dp</dimen>
<dimen name="activity_progress_bar_height">5dp</dimen>
Expand Down

0 comments on commit c9d6fac

Please sign in to comment.