Signup flow redesign WIP

This commit is contained in:
Grishka
2023-01-30 01:54:13 +03:00
parent bcb3e217cd
commit b153a64373
31 changed files with 1391 additions and 72 deletions

View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?colorM3OnSecondaryContainer" android:state_enabled="true"/>
<item android:color="?colorM3OnSurface" android:alpha="0.38"/>
</selector>

View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<ripple android:color="@color/m3_on_secondary_container_overlay">
<item>
<shape>
<solid android:color="?colorM3SecondaryContainer"/>
<corners android:radius="20dp"/>
</shape>
</item>
</ripple>
</item>
<item>
<shape>
<solid android:color="?colorM3DisabledBackground"/>
<corners android:radius="20dp"/>
</shape>
</item>
</selector>

View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="28dp"/>
<solid android:color="?colorM3Surface"/>
</shape>

View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M11,19V13H5V11H11V5H13V11H19V13H13V19Z"/>
</vector>

View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportWidth="48"
android:viewportHeight="48">
<path
android:fillColor="@android:color/white"
android:pathData="M29.45,6V9H9Q9,9 9,9Q9,9 9,9V39Q9,39 9,39Q9,39 9,39H39Q39,39 39,39Q39,39 39,39V18.6H42V39Q42,40.2 41.1,41.1Q40.2,42 39,42H9Q7.8,42 6.9,41.1Q6,40.2 6,39V9Q6,7.8 6.9,6.9Q7.8,6 9,6ZM38,6V10.05H42.05V13.05H38V17.1H35V13.05H30.95V10.05H35V6ZM12,33.9H36L28.8,24.3L22.45,32.65L17.75,26.45ZM9,9V14.55V18.6V39Q9,39 9,39Q9,39 9,39Q9,39 9,39Q9,39 9,39V9Q9,9 9,9Q9,9 9,9Z"/>
</vector>

View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M4,15V13H20V15ZM4,11V9H20V11Z"/>
</vector>

View File

@@ -0,0 +1,65 @@
<?xml version="1.0" encoding="utf-8"?>
<me.grishka.appkit.views.FragmentRootLinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/appkit_loader_root"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="?android:colorBackground">
<include layout="@layout/appkit_toolbar"/>
<FrameLayout
android:id="@+id/appkit_loader_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<include layout="@layout/loading"
android:id="@+id/loading"/>
<ViewStub android:layout="?errorViewLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/error"
android:visibility="gone"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/content_stub"/>
</FrameLayout>
<LinearLayout
android:id="@+id/button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:background="@drawable/bg_onboarding_panel">
<Button
android:id="@+id/btn_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
style="@style/Widget.Mastodon.M3.Button.Tonal"
android:text="@string/skip"/>
<Button
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
style="@style/Widget.Mastodon.M3.Button.Filled"
android:text="@string/follow_all"/>
</LinearLayout>
</me.grishka.appkit.views.FragmentRootLinearLayout>

View File

@@ -0,0 +1,164 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="@+id/scroller"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="56dp"
android:layout_marginEnd="24dp"
android:textAppearance="@style/m3_body_large"
android:textColor="?colorM3OnSurface"
android:text="@string/profile_setup_subtitle"/>
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="144dp"
android:foreground="@drawable/ic_add_photo_alternate_48px"
android:foregroundGravity="center"
android:foregroundTint="?colorM3OnSecondaryContainer"
android:scaleType="centerCrop"
android:background="?colorM3SecondaryContainer"/>
<FrameLayout
android:layout_width="104dp"
android:layout_height="104dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="-44dp"
android:background="@drawable/bg_onboarding_avatar">
<ImageView
android:id="@+id/avatar"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center"
android:foreground="@drawable/ic_add_photo_alternate_48px"
android:foregroundGravity="center"
android:foregroundTint="?colorM3OnSecondaryContainer"
android:scaleType="centerCrop"
android:background="?colorM3SecondaryContainer"/>
</FrameLayout>
<org.joinmastodon.android.ui.views.FloatingHintEditTextLayout
android:id="@+id/display_name_wrap"
android:layout_width="match_parent"
android:layout_height="80dp"
android:paddingTop="4dp"
app:labelTextColor="@color/m3_outlined_text_field_label"
android:foreground="@drawable/bg_m3_outlined_text_field">
<EditText
android:id="@+id/display_name"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:padding="16dp"
android:background="@null"
android:elevation="0dp"
android:inputType="textPersonName|textCapWords"
android:autofillHints="name"
android:singleLine="true"
android:hint="@string/display_name"/>
</org.joinmastodon.android.ui.views.FloatingHintEditTextLayout>
<org.joinmastodon.android.ui.views.FloatingHintEditTextLayout
android:id="@+id/bio_wrap"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="-8dp"
android:layout_marginBottom="4dp"
android:paddingTop="4dp"
app:labelTextColor="@color/m3_outlined_text_field_label"
android:foreground="@drawable/bg_m3_outlined_text_field">
<EditText
android:id="@+id/bio"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:padding="16dp"
android:background="@null"
android:elevation="0dp"
android:inputType="textMultiLine|textCapSentences"
android:hint="@string/profile_bio"/>
</org.joinmastodon.android.ui.views.FloatingHintEditTextLayout>
<org.joinmastodon.android.ui.views.ReorderableLinearLayout
android:id="@+id/profile_fields"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
<Button
android:id="@+id/add_row"
android:layout_width="match_parent"
android:layout_height="56dp"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="24dp"
android:textAppearance="@style/m3_body_large"
android:textColor="?colorM3OnSurface"
android:drawableEnd="@drawable/ic_add_24px"
android:drawableTint="?colorM3OnSurface"
android:drawablePadding="16dp"
android:singleLine="true"
android:ellipsize="end"
android:background="?android:attr/selectableItemBackground"
android:stateListAnimator="@null"
android:text="@string/profile_add_row"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:textAppearance="@style/m3_body_small"
android:textColor="?colorM3OnSurfaceVariant"
android:text="@string/profile_setup_explanation"/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:background="@drawable/bg_onboarding_panel"
android:id="@+id/button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/btn_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:minWidth="145dp"
style="@style/Widget.Mastodon.M3.Button.Filled"
android:text="@string/next" />
</LinearLayout>
</LinearLayout>

View File

@@ -7,6 +7,7 @@
android:layout_height="match_parent">
<ScrollView
android:id="@+id/scroller"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
@@ -20,7 +21,8 @@
<org.joinmastodon.android.ui.views.FloatingHintEditTextLayout
android:id="@+id/display_name_wrap"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_height="wrap_content"
android:minHeight="80dp"
android:paddingTop="4dp"
app:labelTextColor="@color/m3_outlined_text_field_label"
android:foreground="@drawable/bg_m3_outlined_text_field">
@@ -78,12 +80,14 @@
<TextView
android:id="@+id/domain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_height="56dp"
android:layout_gravity="right|top"
android:layout_marginRight="20dp"
android:layout_marginTop="8dp"
android:paddingLeft="8dp"
android:paddingRight="16dp"
android:textAppearance="@style/m3_body_large"
android:gravity="center_vertical"
tools:text="\@mastodon.social"/>
</org.joinmastodon.android.ui.views.FloatingHintEditTextLayout>
@@ -91,8 +95,9 @@
<org.joinmastodon.android.ui.views.FloatingHintEditTextLayout
android:id="@+id/email_wrap"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingBottom="12dp"
app:labelTextColor="@color/m3_outlined_text_field_label"
android:foreground="@drawable/bg_m3_outlined_text_field">
@@ -125,8 +130,9 @@
<org.joinmastodon.android.ui.views.FloatingHintEditTextLayout
android:id="@+id/password_wrap"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingBottom="12dp"
app:labelTextColor="@color/m3_outlined_text_field_label"
android:foreground="@drawable/bg_m3_outlined_text_field">
@@ -160,8 +166,9 @@
<org.joinmastodon.android.ui.views.FloatingHintEditTextLayout
android:id="@+id/password_confirm_wrap"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingBottom="12dp"
app:labelTextColor="@color/m3_outlined_text_field_label"
android:foreground="@drawable/bg_m3_outlined_text_field">
@@ -188,6 +195,9 @@
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="-8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textAppearance="@style/m3_body_small"
android:textColor="?colorM3OnSurfaceVariant"
android:text="@string/password_note"/>
@@ -198,6 +208,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingBottom="12dp"
app:labelTextColor="@color/m3_outlined_text_field_label"
android:foreground="@drawable/bg_m3_outlined_text_field">
@@ -223,6 +234,9 @@
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="-8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textAppearance="@style/m3_body_small"
android:textColor="?colorM3OnSurfaceVariant"
android:text="@string/signup_reason_note"/>
@@ -235,7 +249,8 @@
android:id="@+id/button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
android:orientation="horizontal"
android:background="@drawable/bg_onboarding_panel">
<Button
android:id="@+id/btn_next"

View File

@@ -0,0 +1,94 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/avatar"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="12dp"
android:importantForAccessibility="no"
tools:src="#0f0"/>
<FrameLayout
android:id="@+id/action_btn_wrap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="16dp"
android:layout_marginTop="18dp"
android:layout_marginStart="-8dp">
<org.joinmastodon.android.ui.views.ProgressBarButton
android:id="@+id/action_btn"
android:layout_width="wrap_content"
android:layout_height="36dp"
style="@style/Widget.Mastodon.M3.Button.Filled"
tools:text="Follow"/>
<ProgressBar
android:id="@+id/action_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"
style="?android:progressBarStyleSmall"
android:elevation="10dp"
android:outlineProvider="none"
android:indeterminateTint="?colorM3OnPrimary"
android:visibility="gone"/>
</FrameLayout>
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_toEndOf="@id/avatar"
android:layout_toStartOf="@id/action_btn_wrap"
android:layout_alignParentTop="true"
android:layout_marginTop="14dp"
android:layout_marginEnd="16dp"
android:gravity="center_vertical"
android:singleLine="true"
android:ellipsize="end"
android:textAppearance="@style/m3_title_medium"
android:textColor="?colorM3OnSurface"
tools:text="User Name"/>
<TextView
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_toEndOf="@id/avatar"
android:layout_below="@id/name"
android:layout_toStartOf="@id/action_btn_wrap"
android:layout_marginEnd="16dp"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:textAppearance="@style/m3_title_small"
android:textColor="?colorM3OnSurfaceVariant"
tools:text="\@username@server.social"/>
<TextView
android:id="@+id/bio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/avatar"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="12dp"
android:textAppearance="@style/m3_body_medium"
android:textColor="?colorM3OnSurface"
tools:text="Description"/>
</RelativeLayout>

View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="56dp"
android:paddingStart="16dp"
android:paddingEnd="8dp"
android:clipToPadding="false"
android:background="?colorM3Background">
<ImageView
android:id="@+id/dragger_thingy"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_alignParentEnd="true"
android:scaleType="center"
android:tint="?colorM3OnSurface"
android:src="@drawable/ic_drag_handle_24px"/>
<EditText
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_marginTop="6dp"
android:layout_toStartOf="@id/dragger_thingy"
android:background="@null"
android:padding="0dp"
android:textAppearance="@style/m3_body_large"
android:textColor="?colorM3OnSurfaceVariant"
android:textColorHint="?colorM3OnSurfaceVariant"
android:inputType="textCapSentences"
android:hint="@string/field_content"
android:saveEnabled="false"
android:singleLine="true"/>
<EditText
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_toStartOf="@id/dragger_thingy"
android:layout_below="@id/content"
android:background="@null"
android:padding="0dp"
android:textAppearance="@style/m3_body_medium"
android:textColor="?colorM3OnSurfaceVariant"
android:textColorHint="?colorM3OnSurfaceVariant"
android:inputType="textCapSentences"
android:hint="@string/field_label"
android:saveEnabled="false"
android:singleLine="true"/>
</RelativeLayout>

View File

@@ -432,4 +432,10 @@
<string name="privacy_policy_explanation">TL;DR: We don\'t collect or process anything.</string>
<!-- %s is server domain -->
<string name="server_policy_disagree">Disagree with %s</string>
<string name="profile_bio">Bio</string>
<!-- Shown in a progress dialog when you tap "follow all" -->
<string name="sending_follows">Following users…</string>
<!-- %1$s is server domain, %2$s is email domain. You can reorder these placeholders to fit your language better. -->
<string name="signup_email_domain_blocked">%1$s doesn\'t allow signups from %2$s. Try a different one or &lt;a>pick a different server&lt;/a>.</string>
<string name="signup_username_taken">This username is taken.</string>
</resources>

View File

@@ -312,6 +312,13 @@
<item name="android:paddingRight">24dp</item>
</style>
<style name="Widget.Mastodon.M3.Button.Tonal">
<item name="android:background">@drawable/bg_button_m3_tonal</item>
<item name="android:textColor">@color/button_text_m3_text</item>
<item name="android:paddingLeft">24dp</item>
<item name="android:paddingRight">24dp</item>
</style>
<style name="alert_title">
<item name="android:textColor">?android:textColorPrimary</item>
<item name="android:textSize">24dp</item>