Skip to content

Commit

Permalink
Feature/android 13547 sheet with action buttons (#293)
Browse files Browse the repository at this point in the history 
* ANDROID-13479 Add chevron to Button in compose

* ANDROID-13479 Add chevron to Button in xml

* ANDROID-13479 update chevron alpha on button disabled

* ANDROID-13479 update using the same dimens in compose than in xml for the chevron spacing

* ANDROID-13479 using the same text on chevron sample buttons

* ANDROID-13479 rename hasChevron to withChevron

* ANDROID-13479 scale chevron in compose according to textHeight

* ANDROID-13479 separating the constant of the chevron aspect ratio

* ANDROID-13479 update using a typeface (misticafont) for classic views

* ANDROID-13479 Using a compose wrapper for LinkButton

* ANDROID-13479 Using the compose wrapper for progress

* ANDROID-13479 Added button styles and renaming to MisticaButton

* ANDROID-13479 add Upgrade message

* ANDROID-13479 update upgrading message

* ANDROID-13479 remove unused attribute

* ANDROID-13479 remove unused attribute

* ANDROID-13479 cleaning constructors

* ANDROID-13479 default button value set to PRIMARY

* ANDROID-13479 add UPGRADING message

* ANDROID-13479 add UPGRANDROID-13479 add UPGRADING messageADING message

* ANDROID-13547 Sheet with bottom actions

* ANDROID-13479 renamed button.MisticaButton to button2.Button

* ANDROID-13547 using button2.Button

* ANDROID-13547 using withChevron public property

* ANDROID-13547 imPRovement

* ANDROID-13547 imPRovement

* ANDROID-13547 Sheet Header design changes

* ANDROID-13547 extracted setBottomActionsContent
  • Loading branch information
@jeprubio
jeprubio authored Aug 23, 2023
1 parent e0df29d commit 7c0384c
Show file tree
Hide file tree
Showing 10 changed files with 252 additions and 28 deletions.
2 changes: 1 addition & 1 deletion UPGRADING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,4 @@ We should start migrating the links that have to use chevron from button.Button
Watch out that the new app:style attribute is needed to set the button style (with LINK / LINK_INVERSE for links).
Later on we'll deprecate the button.Button in favour of button2.Button and start migrating the rest.

When this new compose wrapper is used on dialogs the ViewTreeLifecycle should be provided.
When this new compose wrapper is used on dialogs the ViewTreeLifecycle should be provided (see initViewTreeOwners() in Sheet.kt).
2 changes: 1 addition & 1 deletion build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ buildscript {
compose_core_version = '1.3.1'
compose_compiler_version = '1.4.7'
kotlin_version = "1.8.21"
androidx_appcompat_version = "1.5.1"
androidx_appcompat_version = "1.6.0"
androidx_activity_compose_version = "1.6.0"
accompanist_version = "0.30.1"
coil_version = '2.2.2'
Expand Down
60 changes: 53 additions & 7 deletions ...rc/main/java/com/telefonica/mistica/catalog/ui/classic/components/SheetCatalogFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import androidx.fragment.app.Fragment
import com.telefonica.mistica.catalog.R
import com.telefonica.mistica.catalog.databinding.ScreenFragmentSheetCatalogBinding
import com.telefonica.mistica.input.DropDownInput
import com.telefonica.mistica.sheet.ActionButton
import com.telefonica.mistica.sheet.InformativeIcon
import com.telefonica.mistica.sheet.RowAction
import com.telefonica.mistica.sheet.RowActionStyle
Expand Down Expand Up @@ -71,14 +72,20 @@ class SheetCatalogFragment : Fragment() {
id = "0",
elements = buildSelectableListElements()
)
ComponentType.Action -> it.withActionsList(
ComponentType.ActionList -> it.withActionsList(
id = "0",
elements = buildActionsListElements()
)
ComponentType.Informative -> it.withInformativeList(
id = "0",
elements = buildInformativeListElements()
)
ComponentType.BottomActions -> it.withBottomActions(
id ="bottom-actions-0",
primaryButton = samplePrimaryActionButton(),
secondaryButton = sampleSecondaryActionButton(),
linkButton = sampleLinkActionButton(),
)
}
}
.withOnSheetTappedListener(object : onSheetTapped {
Expand Down Expand Up @@ -155,6 +162,31 @@ class SheetCatalogFragment : Fragment() {
return elements
}

private fun samplePrimaryActionButton() = ActionButton(
title = binding.inputSheetActionPrimaryButtonTitle.text.toString(),
)

private fun sampleSecondaryActionButton(): ActionButton? {
val secondaryButtonText = binding.inputSheetActionSecondaryButtonTitle.text.toString()
if (secondaryButtonText.isNotBlank()) {
return ActionButton(
title = secondaryButtonText,
)
}
return null
}

private fun sampleLinkActionButton(): ActionButton? {
val linkButtonText = binding.inputSheetActionLinkButtonTitle.text.toString()
if (linkButtonText.isNotBlank()) {
return ActionButton(
title = linkButtonText,
withChevron = true,
)
}
return null
}

private fun getInformativeIcon(): InformativeIcon = try {
when (InformativeIconType.valueOf(binding.informativeIconType.dropDown.text.toString())) {
InformativeIconType.Bullet -> InformativeIcon.Bullet
Expand Down Expand Up @@ -205,21 +237,34 @@ class SheetCatalogFragment : Fragment() {
))
setOnItemClickListener { _, _, position, _ ->
binding.buttonShow.visibility = View.VISIBLE
when (ComponentType.values().get(position)) {
when (ComponentType.values()[position]) {
ComponentType.Single_Selection -> {
binding.sectionSingleSelection.visibility = View.VISIBLE
binding.sectionAction.visibility = View.GONE
binding.sectionActionList.visibility = View.GONE
binding.sectionInformative.visibility = View.GONE
binding.inputSheetNumberOfElements.visibility = View.VISIBLE
binding.sectionBottomActions.visibility = View.GONE
}
ComponentType.Action -> {
ComponentType.ActionList -> {
binding.sectionSingleSelection.visibility = View.GONE
binding.sectionAction.visibility = View.VISIBLE
binding.sectionActionList.visibility = View.VISIBLE
binding.sectionInformative.visibility = View.GONE
binding.inputSheetNumberOfElements.visibility = View.VISIBLE
binding.sectionBottomActions.visibility = View.GONE
}
ComponentType.Informative -> {
binding.sectionSingleSelection.visibility = View.GONE
binding.sectionAction.visibility = View.GONE
binding.sectionActionList.visibility = View.GONE
binding.sectionInformative.visibility = View.VISIBLE
binding.inputSheetNumberOfElements.visibility = View.VISIBLE
binding.sectionBottomActions.visibility = View.GONE
}
ComponentType.BottomActions -> {
binding.sectionSingleSelection.visibility = View.GONE
binding.sectionActionList.visibility = View.GONE
binding.sectionInformative.visibility = View.GONE
binding.inputSheetNumberOfElements.visibility = View.GONE
binding.sectionBottomActions.visibility = View.VISIBLE
}
}
}
Expand Down Expand Up @@ -259,8 +304,9 @@ class SheetCatalogFragment : Fragment() {

private enum class ComponentType {
Single_Selection,
Action,
ActionList,
Informative,
BottomActions,
}

private enum class InformativeIconType {Bullet, Small, Regular}
Expand Down
64 changes: 53 additions & 11 deletions catalog/src/main/res/layout/screen_fragment_sheet_catalog.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<ScrollView 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"
>
Expand Down Expand Up @@ -47,15 +48,6 @@
app:inputHint="Sheet Description"
app:inputText="Description" />

<com.telefonica.mistica.input.TextInput
android:id="@+id/input_sheet_number_of_elements"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:inputType="number"
app:inputHint="Number of elements"
app:inputText="4" />

<com.telefonica.mistica.input.DropDownInput
android:id="@+id/sheet_type"
android:layout_width="match_parent"
Expand All @@ -64,6 +56,17 @@
android:layout_marginBottom="16dp"
app:inputHint="Children type" />

<com.telefonica.mistica.input.TextInput
android:id="@+id/input_sheet_number_of_elements"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:inputType="number"
android:visibility="gone"
app:inputHint="Number of elements"
app:inputText="4"
tools:visibility="visible" />

<LinearLayout
android:id="@+id/section_single_selection"
android:layout_width="match_parent"
Expand Down Expand Up @@ -100,7 +103,7 @@
</LinearLayout>

<LinearLayout
android:id="@+id/section_action"
android:id="@+id/section_action_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
Expand Down Expand Up @@ -145,12 +148,51 @@

</LinearLayout>

<LinearLayout
android:id="@+id/section_bottom_actions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:visibility="gone"
tools:visibility="visible">

<com.telefonica.mistica.input.TextInput
android:id="@+id/input_sheet_action_primary_button_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:inputType="text"
app:inputHint="Primary Button Title"
app:inputText="Primary Button" />

<com.telefonica.mistica.input.TextInput
android:id="@+id/input_sheet_action_secondary_button_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:inputType="text"
app:inputHint="Secondary Button Title"
app:inputText="Secondary Button" />

<com.telefonica.mistica.input.TextInput
android:id="@+id/input_sheet_action_link_button_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:inputType="text"
app:inputHint="Link Button Title"
app:inputText="Link Button" />

</LinearLayout>

<com.telefonica.mistica.button.Button
android:id="@+id/button_show"
style="@style/AppTheme.Button.DefaultButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Show Feedback"
android:text="Show Sheet"
android:visibility="gone"
/>

Expand Down
2 changes: 2 additions & 0 deletions library/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@ dependencies {

implementation "com.github.skydoves:balloon-compose:1.5.3"

implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"

testImplementation 'junit:junit:4.13.2'
testImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
testImplementation "org.mockito.kotlin:mockito-kotlin:4.0.0"
Expand Down
4 changes: 2 additions & 2 deletions library/src/main/java/com/telefonica/mistica/button2/Button.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ class Button @JvmOverloads constructor(
defStyleAttr: Int = 0,
) : AbstractMisticaComposeView(context, attrs, defStyleAttr) {

private var text: String by mutableStateOf("")
var text: String by mutableStateOf("")
private var loadingText: String by mutableStateOf("")
private var isLoading: Boolean by mutableStateOf(false)
private var style: ButtonStyle by mutableStateOf(ButtonStyle.PRIMARY)
private var icon: Int? by mutableStateOf(null)
private var isEnable: Boolean by mutableStateOf(true)
private var withChevron: Boolean by mutableStateOf(true)
var withChevron: Boolean by mutableStateOf(true)
private var onClick: () -> Unit by mutableStateOf({})

init {
Expand Down
Loading

0 comments on commit 7c0384c

Please sign in to comment.