For #18243 - Add a credit card editor screen

upstream-sync
Gabriel Luong 3 years ago
parent cb1fb95a3a
commit 46a267a494

@ -0,0 +1,36 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
package org.mozilla.fenix.settings.creditcards
import android.os.Bundle
import android.view.View
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import kotlinx.android.synthetic.main.fragment_credit_card_editor.view.*
import org.mozilla.fenix.R
import org.mozilla.fenix.ext.showToolbar
/**
* Display a credit card editor for adding and editing a credit card.
*/
class CreditCardEditorFragment : Fragment(R.layout.fragment_credit_card_editor) {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
showToolbar(getString(R.string.credit_cards_add_card))
setupButtonClickListeners(view)
}
/**
* Setup the all button click listeners in the credit card editor.
*/
private fun setupButtonClickListeners(view: View) {
view.cancel_button.setOnClickListener {
findNavController().popBackStack()
}
}
}

@ -6,9 +6,11 @@ package org.mozilla.fenix.settings.creditcards
import android.os.Bundle import android.os.Bundle
import androidx.navigation.fragment.findNavController import androidx.navigation.fragment.findNavController
import androidx.preference.Preference
import androidx.preference.PreferenceFragmentCompat import androidx.preference.PreferenceFragmentCompat
import mozilla.components.service.fxa.SyncEngine import mozilla.components.service.fxa.SyncEngine
import org.mozilla.fenix.R import org.mozilla.fenix.R
import org.mozilla.fenix.ext.getPreferenceKey
import org.mozilla.fenix.ext.requireComponents import org.mozilla.fenix.ext.requireComponents
import org.mozilla.fenix.ext.showToolbar import org.mozilla.fenix.ext.showToolbar
import org.mozilla.fenix.settings.SyncPreferenceView import org.mozilla.fenix.settings.SyncPreferenceView
@ -51,4 +53,16 @@ class CreditCardsSettingFragment : PreferenceFragmentCompat() {
} }
) )
} }
override fun onPreferenceTreeClick(preference: Preference): Boolean {
when (preference.key) {
getPreferenceKey(R.string.pref_key_credit_cards_add_credit_card) -> {
val directions =
CreditCardsSettingFragmentDirections.actionCreditCardsSettingFragmentToCreditCardEditorFragment()
findNavController().navigate(directions)
}
}
return super.onPreferenceTreeClick(preference)
}
} }

@ -0,0 +1,237 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<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:layout_margin="16dp"
android:orientation="vertical">
<!-- Card Number -->
<TextView
android:id="@+id/card_number_title"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:gravity="center_vertical"
android:paddingStart="3dp"
android:paddingEnd="0dp"
android:text="@string/credit_cards_card_number"
android:textColor="?primaryText"
android:textSize="12sp"
android:letterSpacing="0.05"
app:fontFamily="@font/metropolis_semibold" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/card_number_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="?primaryText"
app:errorEnabled="true"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/card_number_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:fontFamily="sans-serif"
android:textColor="?primaryText"
android:letterSpacing="0.01"
android:lineSpacingExtra="8sp"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true"
android:imeOptions="flagNoExtractUi"
android:inputType="phone"
android:digits="0123456789- " />
</com.google.android.material.textfield.TextInputLayout>
<!-- Name on Card -->
<TextView
android:id="@+id/name_on_card_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingStart="3dp"
android:paddingEnd="0dp"
android:text="@string/credit_cards_name_on_card"
android:textColor="?primaryText"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:letterSpacing="0.05"
app:fontFamily="@font/metropolis_semibold" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_on_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="11dp"
android:textColor="?primaryText"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_on_card_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="sans-serif"
android:letterSpacing="0.01"
android:lineSpacingExtra="8sp"
android:maxLines="1"
android:singleLine="true"
android:textColor="?primaryText"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
<!-- Expiration Date -->
<TextView
android:id="@+id/expiration_date_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingStart="3dp"
android:paddingEnd="0dp"
android:text="@string/credit_cards_expiration_date"
android:textColor="?primaryText"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:letterSpacing="0.05"
app:fontFamily="@font/metropolis_semibold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="24dp"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatSpinner
android:id="@+id/expiry_month_drop_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:listitem="@android:layout/simple_list_item_1" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?primaryText" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatSpinner
android:id="@+id/expiry_year_drop_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:listitem="@android:layout/simple_list_item_1" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?primaryText" />
</LinearLayout>
</LinearLayout>
<!-- Card Nickname -->
<TextView
android:id="@+id/card_nickname_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingStart="3dp"
android:paddingEnd="0dp"
android:text="@string/credit_cards_card_nickname"
android:textColor="?primaryText"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:letterSpacing="0.05"
app:fontFamily="@font/metropolis_semibold" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/card_nickname_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="11dp"
android:textColor="?primaryText"
app:errorEnabled="true"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/card_nickname_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="sans-serif"
android:letterSpacing="0.01"
android:lineSpacingExtra="8sp"
android:maxLines="1"
android:singleLine="true"
android:textColor="?primaryText"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:id="@+id/delete_button"
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:letterSpacing="0"
android:padding="10dp"
android:text="@string/credit_cards_delete_card"
android:textAllCaps="false"
android:textColor="@color/destructive_button_text_color"
android:visibility="gone"
app:fontFamily="@font/metropolis_semibold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/cancel_button"
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:letterSpacing="0"
android:padding="10dp"
android:text="@string/cancel"
android:textAllCaps="false"
android:textColor="?primaryText"
android:textStyle="bold"
app:fontFamily="@font/metropolis_semibold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/save_button" />
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/NeutralButton"
android:layout_width="wrap_content"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:text="@string/save"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>

@ -1044,6 +1044,17 @@
app:exitAnim="@anim/slide_out_left" app:exitAnim="@anim/slide_out_left"
app:popEnterAnim="@anim/slide_in_left" app:popEnterAnim="@anim/slide_in_left"
app:popExitAnim="@anim/slide_out_right" /> app:popExitAnim="@anim/slide_out_right" />
<action
android:id="@+id/action_creditCardsSettingFragment_to_creditCardEditorFragment"
app:destination="@id/creditCardEditorFragment"
app:enterAnim="@anim/slide_in_right"
app:exitAnim="@anim/slide_out_left"
app:popEnterAnim="@anim/slide_in_left"
app:popExitAnim="@anim/slide_out_right" />
</fragment> </fragment>
<fragment
android:id="@+id/creditCardEditorFragment"
android:name="org.mozilla.fenix.settings.creditcards.CreditCardEditorFragment"
android:label="@string/credit_cards_add_card" />
</navigation> </navigation>
</navigation> </navigation>

@ -2,6 +2,12 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this - License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<resources> <resources>
<!-- Generic Strings -->
<!-- A 'Cancel' string to be used for labeling any UI elements. -->
<string name="cancel">Cancel</string>
<!-- A 'Save' string to be used for labeling UI elements. -->
<string name="save">Save</string>
<!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)--> <!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)-->
<string name="app_name_private_5">Private %s</string> <string name="app_name_private_5">Private %s</string>
<!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)--> <!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)-->
@ -1513,6 +1519,18 @@
<string name="preferences_credit_cards_sync_cards_across_devices">Sync cards across devices</string> <string name="preferences_credit_cards_sync_cards_across_devices">Sync cards across devices</string>
<!-- Preference option for adding a credit card --> <!-- Preference option for adding a credit card -->
<string name="preferences_credit_cards_add_credit_card">Add credit card</string> <string name="preferences_credit_cards_add_credit_card">Add credit card</string>
<!-- Title of the "Add card" screen -->
<string name="credit_cards_add_card">Add card</string>
<!-- The header for the card number of a credit card -->
<string name="credit_cards_card_number">Card Number</string>
<!-- The header for the expiration date of a credit card -->
<string name="credit_cards_expiration_date">Expiration Date</string>
<!-- The header for the name on the credit card -->
<string name="credit_cards_name_on_card">Name on Card</string>
<!-- The header for the nickname for a credit card -->
<string name="credit_cards_card_nickname">Card Nickname</string>
<!-- The text for the "Delete card" button -->
<string name="credit_cards_delete_card">Delete card</string>
<!-- Title of the Add search engine screen --> <!-- Title of the Add search engine screen -->
<string name="search_engine_add_custom_search_engine_title">Add search engine</string> <string name="search_engine_add_custom_search_engine_title">Add search engine</string>

Loading…
Cancel
Save