-
Notifications
You must be signed in to change notification settings - Fork 872
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ADS: Add a custom CardView for DaxDialogs (#2550)
Task/Issue URL: https://app.asana.com/0/1202857801505092/1203425281067996 ### Description The top triangle in the DaxDialog doesn't respect elevation. The outline around it is not consistent with the rest of the Card. ### UI changes | Before | After | | ------ | ----- | ||
- Loading branch information
|](https://user-images.githubusercontent.com/531613/203578300-1a80b73e-cb28-441c-831c-cb9a1307319f.png)||){kind=link}
Showing
13 changed files
with
313 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
...a/com/duckduckgo/mobile/android/themepreview/ui/component/cards/ComponentCardsFragment.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| /* | ||
| * Copyright (c) 2021 DuckDuckGo | ||
| * | ||
| * 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. | ||
| */ | ||
|
|
||
| package com.duckduckgo.mobile.android.themepreview.ui.component.cards | ||
|
|
||
| import com.duckduckgo.mobile.android.themepreview.ui.component.Component | ||
| import com.duckduckgo.mobile.android.themepreview.ui.component.ComponentFragment | ||
|
|
||
| class ComponentCardsFragment : ComponentFragment() { | ||
| override fun getComponents(): List<Component> { | ||
| return listOf(Component.CARD) | ||
| } | ||
| } |
51 changes: 51 additions & 0 deletions
51
common-ui/src/main/java/com/duckduckgo/mobile/android/ui/view/shape/DaxBubbleCardView.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /* | ||
| * Copyright (c) 2022 DuckDuckGo | ||
| * | ||
| * 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. | ||
| */ | ||
|
|
||
| package com.duckduckgo.mobile.android.ui.view.shape | ||
|
|
||
| import android.content.Context | ||
| import android.content.res.ColorStateList | ||
| import android.util.AttributeSet | ||
| import com.duckduckgo.mobile.android.R | ||
| import com.duckduckgo.mobile.android.ui.view.getColorFromAttr | ||
| import com.google.android.material.card.MaterialCardView | ||
| import com.google.android.material.shape.MaterialShapeDrawable | ||
| import com.google.android.material.shape.ShapeAppearanceModel | ||
|
|
||
| class DaxBubbleCardView | ||
| @JvmOverloads | ||
| constructor( | ||
| context: Context, | ||
| attrs: AttributeSet? = null, | ||
| defStyleAttr: Int = R.attr.cardViewStyle, | ||
| ) : MaterialCardView(context, attrs, defStyleAttr) { | ||
|
|
||
| init { | ||
| val cornderRadius = resources.getDimension(R.dimen.mediumShapeCornerRadius) | ||
| val cornerSize = resources.getDimension(R.dimen.daxBubbleDialogEdge) | ||
| val distanceFromEdge = resources.getDimension(R.dimen.daxBubbleDialogDistanceFromEdge) | ||
| val edgeTreatment = DaxBubbleEdgeTreatment(cornerSize, distanceFromEdge) | ||
|
|
||
| background = MaterialShapeDrawable( | ||
| ShapeAppearanceModel.builder() | ||
| .setAllCornerSizes(cornderRadius) | ||
| .setTopEdge(edgeTreatment) | ||
| .build(), | ||
| ).apply { | ||
| fillColor = ColorStateList.valueOf(context.getColorFromAttr(R.attr.daxColorSurface)) | ||
| } | ||
| } | ||
| } |
81 changes: 81 additions & 0 deletions
81
common-ui/src/main/java/com/duckduckgo/mobile/android/ui/view/shape/Shapes.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| /* | ||
| * Copyright (c) 2022 DuckDuckGo | ||
| * | ||
| * 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. | ||
| */ | ||
|
|
||
| package com.duckduckgo.mobile.android.ui.view.shape | ||
|
|
||
| import com.google.android.material.shape.CornerFamily | ||
| import com.google.android.material.shape.EdgeTreatment | ||
| import com.google.android.material.shape.MaterialShapeDrawable | ||
| import com.google.android.material.shape.ShapeAppearanceModel | ||
| import com.google.android.material.shape.ShapePath | ||
|
|
||
| class DaxBubbleEdgeTreatment | ||
| /** | ||
| * Instantiates a triangle treatment of the given size, which faces inward or outward relative to | ||
| * the shape. | ||
| * | ||
| * @param size the length in pixels that the triangle extends into or out of the shape. The length | ||
| * of the side of the triangle coincident with the rest of the edge is 2 * size. | ||
| * @param inside true if the triangle should be "cut out" of the shape (i.e. inward-facing); false | ||
| * if the triangle should extend out of the shape. | ||
| */( | ||
| private val size: Float, | ||
| private val distanceFromEdge: Float, | ||
| ) : EdgeTreatment() { | ||
| override fun getEdgePath( | ||
| length: Float, | ||
| center: Float, | ||
| interpolation: Float, | ||
| shapePath: ShapePath, | ||
| ) { | ||
| shapePath.lineTo(distanceFromEdge - size * interpolation, 0f) | ||
| shapePath.lineTo(distanceFromEdge, -size * interpolation) | ||
| shapePath.lineTo(distanceFromEdge + size * interpolation, 0f) | ||
| shapePath.lineTo(length, 0f) | ||
| } | ||
| } | ||
|
|
||
| class TicketEdgeTreatment( | ||
| private val size: Float, | ||
| ) : EdgeTreatment() { | ||
| override fun getEdgePath( | ||
| length: Float, | ||
| center: Float, | ||
| interpolation: Float, | ||
| shapePath: ShapePath, | ||
| ) { | ||
| val circleRadius = size * interpolation | ||
| shapePath.lineTo(center - circleRadius, 0f) | ||
| shapePath.addArc( | ||
| center - circleRadius, | ||
| -circleRadius, | ||
| center + circleRadius, | ||
| circleRadius, | ||
| 180f, | ||
| -180f, | ||
| ) | ||
| shapePath.lineTo(length, 0f) | ||
| } | ||
| } | ||
|
|
||
| val ticketShapePathModel = ShapeAppearanceModel | ||
| .Builder() | ||
| .setAllCorners(CornerFamily.ROUNDED, 36f) | ||
| .setLeftEdge(TicketEdgeTreatment(36f)) | ||
| .setRightEdge(TicketEdgeTreatment(36f)) | ||
| .build() | ||
|
|
||
| class TicketDrawable : MaterialShapeDrawable(ticketShapePathModel) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <?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. | ||
| --> | ||
|
|
||
| <LinearLayout | ||
| 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:paddingTop="@dimen/keyline_5" | ||
| android:paddingBottom="@dimen/keyline_5" | ||
| android:clipChildren="false" | ||
| android:orientation="vertical"> | ||
|
|
||
| <com.duckduckgo.mobile.android.ui.view.listitem.SectionHeaderListItem | ||
| android:id="@+id/daxBubbleLabel" | ||
| android:layout_height="wrap_content" | ||
| android:layout_width="match_parent" | ||
| app:primaryText="Dax Dialog Card"/> | ||
|
|
||
| <com.duckduckgo.mobile.android.ui.view.shape.DaxBubbleCardView | ||
| android:id="@+id/daxBubbleCardView" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="100dp" | ||
| android:layout_margin="@dimen/keyline_4"/> | ||
|
|
||
| <com.duckduckgo.mobile.android.ui.view.shape.DaxBubbleCardView | ||
| android:layout_width="match_parent" | ||
| android:layout_height="wrap_content" | ||
| android:layout_margin="@dimen/keyline_4"> | ||
|
|
||
| <LinearLayout | ||
| android:id="@+id/cardContainer" | ||
| android:paddingStart="16dp" | ||
| android:paddingTop="26dp" | ||
| android:paddingEnd="16dp" | ||
| android:paddingBottom="20dp" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="wrap_content" | ||
| android:gravity="center" | ||
| android:orientation="vertical"> | ||
|
|
||
| <com.duckduckgo.mobile.android.ui.view.text.DaxTextView | ||
| android:id="@+id/hiddenText" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="wrap_content" | ||
| android:text="@string/text_dialog_message"/> | ||
|
|
||
| <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary | ||
| android:id="@+id/dax_button_primary_disabled" | ||
| android:layout_width="wrap_content" | ||
| android:layout_height="wrap_content" | ||
| android:layout_marginTop="@dimen/keyline_4" | ||
| app:buttonSize="large" | ||
| android:text="Primary"/> | ||
|
|
||
| </LinearLayout> | ||
|
|
||
| </com.duckduckgo.mobile.android.ui.view.shape.DaxBubbleCardView> | ||
|
|
||
|
|
||
| <com.duckduckgo.mobile.android.ui.view.listitem.SectionHeaderListItem | ||
| android:id="@+id/label" | ||
| android:layout_height="wrap_content" | ||
| android:layout_width="match_parent" | ||
| app:primaryText="Default Card"/> | ||
|
|
||
| <com.google.android.material.card.MaterialCardView | ||
| android:id="@+id/defaultCard" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="100dp" | ||
| android:layout_margin="@dimen/keyline_4"/> | ||
|
|
||
| <com.google.android.material.card.MaterialCardView | ||
| android:id="@+id/ticketViewCard" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="100dp" | ||
| android:layout_margin="@dimen/keyline_4"/> | ||
|
|
||
| </LinearLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <!-- | ||
| ~ Copyright (c) 2018 DuckDuckGo | ||
| ~ | ||
| ~ 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. | ||
| --> | ||
|
|
||
| <resources> | ||
|
|
||
| <attr name="cardViewStyle" format="reference"/> | ||
|
|
||
| </resources> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.