Skip to content

Commit

Permalink
ADS: Remote Messaging (#2674)
Browse files Browse the repository at this point in the history 
Task/Issue URL:
https://app.asana.com/0/1174433894299346/1203411647299665

### Description
PR to update the Remote Messaging views
Design Review in
https://app.asana.com/0/1174433894299346/1203593299114126

Co-authored-by: Noelia Alcala <nalcalag@gmail.com>
Co-authored-by: Aitor Viana <aitorvs@gmail.com>
  • Loading branch information
@malmstein @nalcalag @aitorvs
3 people committed Jan 9, 2023
1 parent 3137a21 commit e04f163
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 45 deletions.
1 change: 1 addition & 0 deletions common-ui/src/main/java/com/duckduckgo/mobile/android/themepreview/ui/component/Component.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ enum class Component {
BOTTOM_APP_BAR,
TABS,
SNACKBAR,
REMOTE_MESSAGE,
INFO_PANEL,
DIALOG,
BOTTOM_SHEET,
Expand Down
58 changes: 58 additions & 0 deletions .../main/java/com/duckduckgo/mobile/android/themepreview/ui/component/ComponentViewHolder.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import android.view.ViewGroup
import android.widget.FrameLayout
import androidx.recyclerview.widget.RecyclerView
import com.duckduckgo.mobile.android.R
import com.duckduckgo.mobile.android.ui.view.MessageCta
import com.duckduckgo.mobile.android.ui.view.MessageCta.Message
import com.duckduckgo.mobile.android.ui.view.listitem.OneLineListItem
import com.duckduckgo.mobile.android.ui.view.listitem.SectionHeaderListItem
import com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
Expand Down Expand Up @@ -60,6 +62,61 @@ sealed class ComponentViewHolder(val view: View) : RecyclerView.ViewHolder(view)
parent: ViewGroup,
) : ComponentViewHolder(inflate(parent, R.layout.component_info_panel))

class RemoteMessageComponentViewHolder(
parent: ViewGroup,
) : ComponentViewHolder(inflate(parent, R.layout.component_remote_message)) {
override fun bind(component: Component) {
val smallMessage = Message(title = "Small Message", subtitle = "Body text goes here. This component doesn't have buttons")
val bigSingleMessage = Message(
illustration = R.drawable.ic_announce,
title = "Big Single Message",
subtitle = "Body text goes here. This component has one button",
action = "Primary",
)
val bigTwoActionsMessage = Message(
illustration = R.drawable.ic_ddg_announce,
title = "Big Two Actions Message",
subtitle = "Body text goes here. This component has two buttons",
action = "Primary",
action2 = "Secondary",
)

val bigTwoActionsUpdateMessage = Message(
illustration = R.drawable.ic_app_update,
title = "Big Two Actions Message",
subtitle = "Body text goes here. This component has two buttons and showcases and app update",
action = "Primary",
action2 = "Secondary",
)

val mediumMessage = Message(
illustration = R.drawable.ic_critical_update,
title = "Big Single Message",
subtitle = "Body text goes here. This component has one button",
)

view.findViewById<MessageCta>(R.id.small_remote_message).apply {
setMessage(smallMessage)
}

view.findViewById<MessageCta>(R.id.medium_remote_message).apply {
setMessage(mediumMessage)
}

view.findViewById<MessageCta>(R.id.big_single_remote_message).apply {
setMessage(bigSingleMessage)
}

view.findViewById<MessageCta>(R.id.big_two_actions_remote_message).apply {
setMessage(bigTwoActionsMessage)
}

view.findViewById<MessageCta>(R.id.big_two_actions_update_remote_message).apply {
setMessage(bigTwoActionsUpdateMessage)
}
}
}

class SearchBarComponentViewHolder(
parent: ViewGroup,
) : ComponentViewHolder(inflate(parent, R.layout.component_search_bar))
Expand Down Expand Up @@ -236,6 +293,7 @@ sealed class ComponentViewHolder(val view: View) : RecyclerView.ViewHolder(view)
Component.SLIDER -> SliderComponentViewHolder(parent)
Component.SNACKBAR -> SnackbarComponentViewHolder(parent)
Component.INFO_PANEL -> InfoPanelComponentViewHolder(parent)
Component.REMOTE_MESSAGE -> RemoteMessageComponentViewHolder(parent)
Component.SEARCH_BAR -> SearchBarComponentViewHolder(parent)
Component.MENU_ITEM -> MenuItemComponentViewHolder(parent)
Component.SECTION_HEADER_LIST_ITEM -> HeaderSectionComponentViewHolder(parent)
Expand Down
2 changes: 1 addition & 1 deletion ...kduckgo/mobile/android/themepreview/ui/component/navigation/ComponentMessagingFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@ import com.duckduckgo.mobile.android.themepreview.ui.component.ComponentFragment

class ComponentMessagingFragment : ComponentFragment() {
override fun getComponents(): List<Component> {
return listOf(Component.INFO_PANEL, Component.SNACKBAR)
return listOf(Component.REMOTE_MESSAGE, Component.INFO_PANEL, Component.SNACKBAR)
}
}
4 changes: 2 additions & 2 deletions common-ui/src/main/res/drawable/background_message_cta.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
-->

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="?attr/dialogBgColor" />
<corners android:radius="@dimen/keyline_2" />
<solid android:color="?attr/daxColorSurface" />
<corners android:radius="@dimen/mediumShapeCornerRadius" />
</shape>
70 changes: 70 additions & 0 deletions common-ui/src/main/res/layout/component_remote_message.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2019 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->


<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingTop="@dimen/keyline_5"
android:paddingBottom="@dimen/keyline_5"
android:paddingStart="@dimen/keyline_4"
android:paddingEnd="@dimen/keyline_4">

<com.duckduckgo.mobile.android.ui.view.listitem.SectionHeaderListItem
android:id="@+id/label"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:primaryText="Remote Messaging Framework"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

<com.duckduckgo.mobile.android.ui.view.MessageCta
android:id="@+id/small_remote_message"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<com.duckduckgo.mobile.android.ui.view.MessageCta
android:id="@+id/medium_remote_message"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<com.duckduckgo.mobile.android.ui.view.MessageCta
android:id="@+id/big_single_remote_message"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<com.duckduckgo.mobile.android.ui.view.MessageCta
android:id="@+id/big_two_actions_remote_message"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<com.duckduckgo.mobile.android.ui.view.MessageCta
android:id="@+id/big_two_actions_update_remote_message"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

</androidx.core.widget.NestedScrollView>
50 changes: 22 additions & 28 deletions common-ui/src/main/res/layout/view_message_cta.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,11 @@
android:id="@+id/close"
android:layout_width="@dimen/messageCtaCloseButtonSize"
android:layout_height="@dimen/messageCtaCloseButtonSize"
android:padding="@dimen/keyline_2"
android:background="?selectableItemBackground"
android:padding="@dimen/keyline_2"
android:src="@drawable/ic_close_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="?normalTextColor" />
app:layout_constraintTop_toTopOf="parent" />

<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/illustration"
Expand All @@ -40,67 +39,62 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/messageTitle"
style="@style/MessageCta.Title"
android:layout_width="match_parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginTop="6dp"
android:layout_marginEnd="@dimen/keyline_4"
android:layout_marginStart="40dp"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginEnd="40dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/illustration"
app:layout_goneMarginTop="20dp"
app:layout_goneMarginTop="@dimen/keyline_4"
app:typography="h3"
tools:text="Placeholder Title" />

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/messageSubtitle"
style="@style/MessageCta.Description"
android:layout_width="match_parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginTop="4dp"
android:layout_marginEnd="@dimen/keyline_4"
android:layout_marginBottom="6dp"
android:gravity="center"
app:layout_constraintBottom_toTopOf="@id/primaryActionButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/messageTitle"
app:layout_goneMarginBottom="18dp"
app:typography="body2"
tools:text="Body text goes here. This component can be used with one or two buttons." />

<com.duckduckgo.mobile.android.ui.view.button.ButtonPrimarySmall
<com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
android:id="@+id/primaryActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_2"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginStart="@dimen/keyline_1"
android:layout_marginTop="@dimen/keyline_4"
android:layout_marginBottom="@dimen/keyline_4"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingStart="14dp"
android:paddingEnd="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/secondaryActionButton"
app:layout_constraintTop_toBottomOf="@id/messageSubtitle"
app:layout_goneMarginStart="0dp"
tools:text="button" />

<com.duckduckgo.mobile.android.ui.view.button.ButtonGhostSmall
<com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
android:id="@+id/secondaryActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingStart="14dp"
android:paddingEnd="14dp"
app:layout_constraintBottom_toBottomOf="@id/primaryActionButton"
android:layout_marginTop="@dimen/keyline_4"
android:layout_marginEnd="@dimen/keyline_1"
android:layout_marginBottom="@dimen/keyline_4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/primaryActionButton"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/primaryActionButton"
tools:text="button" />

</androidx.constraintlayout.widget.ConstraintLayout>
10 changes: 0 additions & 10 deletions common-ui/src/main/res/values/styles.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,16 +439,6 @@

<style name="MessageCta" />

<style name="MessageCta.Title" parent="TextAppearance.DuckDuckGo.Headline4">
<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:textStyle">normal</item>
<item name="android:gravity">center</item>
</style>

<style name="MessageCta.Description" parent="TextAppearance.DuckDuckGo.Body2">
<item name="android:gravity">center</item>
</style>

<style name="MessageCta.Button" parent="Widget.AppCompat.Button.Borderless">
<item name="android:minHeight">36dp</item>
<item name="android:paddingTop">10dp</item>
Expand Down
5 changes: 1 addition & 4 deletions common-ui/src/main/res/values/widgets.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,10 +292,7 @@
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@drawable/background_message_cta</item>
<item name="android:elevation">4dp</item>
<item name="android:layout_marginTop">@dimen/keyline_4</item>
<item name="android:layout_marginStart">@dimen/keyline_4</item>
<item name="android:layout_marginEnd">@dimen/keyline_4</item>
<item name="android:layout_marginBottom">@dimen/keyline_1</item>
<item name="android:layout_margin">@dimen/keyline_4</item>
</style>

<!-- Dialogs -->
Expand Down

0 comments on commit e04f163

Please sign in to comment.