adding carousel content, images are temporary

This commit is contained in:
Adam Brown 2021-12-15 10:39:25 +00:00
parent 955fb03532
commit a2f780bef4
13 changed files with 109 additions and 39 deletions

View file

@ -47,4 +47,7 @@
<dimen name="composer_min_height">56dp</dimen>
<dimen name="composer_attachment_size">52dp</dimen>
<dimen name="composer_attachment_margin">1dp</dimen>
<!-- Onboarding -->
<dimen name="ftue_auth_gutter">16dp</dimen>
</resources>

View file

@ -16,7 +16,6 @@
package im.vector.app.features.onboarding.ftueauth
import android.annotation.SuppressLint
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
@ -36,6 +35,7 @@ import im.vector.app.BuildConfig
import im.vector.app.R
import im.vector.app.core.epoxy.VectorEpoxyHolder
import im.vector.app.core.epoxy.VectorEpoxyModel
import im.vector.app.core.resources.StringProvider
import im.vector.app.databinding.FragmentFtueSplashCarouselBinding
import im.vector.app.features.VectorFeatures
import im.vector.app.features.onboarding.OnboardingAction
@ -51,6 +51,7 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
@Inject lateinit var vectorPreferences: VectorPreferences
@Inject lateinit var vectorFeatures: VectorFeatures
@Inject lateinit var carouselController: SplashCarouselController
@Inject lateinit var stringProvider: StringProvider
override fun getBinding(inflater: LayoutInflater, container: ViewGroup?): FragmentFtueSplashCarouselBinding {
return FragmentFtueSplashCarouselBinding.inflate(inflater, container, false)
@ -64,27 +65,29 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
private fun setupViews() {
views.splashCarousel.adapter = carouselController.adapter
TabLayoutMediator(views.carouselIndicator, views.splashCarousel) { _, _ -> }.attach()
carouselController.setData(SplashCarouselState(
items = listOf(
SplashCarouselState.Item(
"hello world",
R.drawable.element_logo_green
stringProvider.getString(R.string.ftue_auth_carousel_1_title),
stringProvider.getString(R.string.ftue_auth_carousel_1_body),
R.drawable.onboarding_carousel_conversations
),
SplashCarouselState.Item(
"2",
R.drawable.element_logo_green
stringProvider.getString(R.string.ftue_auth_carousel_2_title),
stringProvider.getString(R.string.ftue_auth_carousel_2_body),
R.drawable.onboarding_carousel_ems
),
SplashCarouselState.Item(
"3",
R.drawable.element_logo_green
stringProvider.getString(R.string.ftue_auth_carousel_3_title),
stringProvider.getString(R.string.ftue_auth_carousel_3_body),
R.drawable.onboarding_carousel_connect
),
SplashCarouselState.Item(
"4",
R.drawable.element_logo_green
stringProvider.getString(R.string.ftue_auth_carousel_4_title),
stringProvider.getString(R.string.ftue_auth_carousel_4_body),
R.drawable.onboarding_carousel_universal
)
),
currentPage = 0
)
))
views.loginSplashSubmit.debouncedClicks { getStarted() }
@ -94,12 +97,12 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
}
if (BuildConfig.DEBUG || vectorPreferences.developerMode()) {
views.loginSplashVersion.isVisible = true
@SuppressLint("SetTextI18n")
views.loginSplashVersion.text = "Version : ${BuildConfig.VERSION_NAME}\n" +
"Branch: ${BuildConfig.GIT_BRANCH_NAME}\n" +
"Build: ${BuildConfig.BUILD_NUMBER}"
views.loginSplashVersion.debouncedClicks { navigator.openDebug(requireContext()) }
// views.loginSplashVersion.isVisible = true
// @SuppressLint("SetTextI18n")
// views.loginSplashVersion.text = "Version : ${BuildConfig.VERSION_NAME}\n" +
// "Branch: ${BuildConfig.GIT_BRANCH_NAME}\n" +
// "Build: ${BuildConfig.BUILD_NUMBER}"
// views.loginSplashVersion.debouncedClicks { navigator.openDebug(requireContext()) }
}
}
@ -137,10 +140,13 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
}
data class SplashCarouselState(
val items: List<Item>,
val currentPage: Int
val items: List<Item>
) {
data class Item(val body: String, @DrawableRes val image: Int)
data class Item(
val title: String,
val body: String,
@DrawableRes val image: Int
)
}
class SplashCarouselController @Inject constructor() : TypedEpoxyController<SplashCarouselState>() {
@ -162,11 +168,13 @@ abstract class SplashCarouselItem : VectorEpoxyModel<SplashCarouselItem.Holder>(
override fun bind(holder: Holder) {
holder.image.setImageResource(item.image)
holder.title.text = item.title
holder.body.text = item.body
}
class Holder : VectorEpoxyHolder() {
val image by bind<ImageView>(im.vector.app.R.id.carousel_item_image)
val title by bind<TextView>(im.vector.app.R.id.carousel_item_title)
val body by bind<TextView>(im.vector.app.R.id.carousel_item_body)
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 428 KiB

View file

@ -13,16 +13,18 @@
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/loginSplashSubmit"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintHeight_percent="0.65"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/carouselIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
app:layout_constraintBottom_toTopOf="@id/loginSplashSubmit"
app:layout_constraintBottom_toTopOf="@id/loginSplashButtonsSpace"
app:layout_constraintTop_toBottomOf="@id/splashCarousel"
app:layout_constraintVertical_chainStyle="spread"
app:tabBackground="@drawable/indicator_onboarding_carousel_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
@ -34,14 +36,24 @@
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_begin="36dp" />
app:layout_constraintGuide_begin="@dimen/ftue_auth_gutter" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/splashCarouselGutterEnd"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_end="36dp" />
app:layout_constraintGuide_end="@dimen/ftue_auth_gutter" />
<Space
android:id="@+id/loginSplashButtonsSpace"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/loginSplashSubmit"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.01"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/carouselIndicator" />
<Button
android:id="@+id/loginSplashSubmit"
@ -54,7 +66,7 @@
app:layout_constraintBottom_toTopOf="@id/loginSplashAlreadyHaveAccount"
app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
app:layout_constraintTop_toBottomOf="@id/carouselIndicator" />
app:layout_constraintTop_toBottomOf="@id/loginSplashButtonsSpace" />
<TextView
android:id="@+id/loginSplashAlreadyHaveAccount"
@ -64,11 +76,21 @@
android:text="@string/login_splash_already_have_account"
android:textAllCaps="true"
android:transitionName="loginSubmitTransition"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="@id/loginSplashBottomSpace"
app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
app:layout_constraintTop_toBottomOf="@id/loginSplashSubmit" />
<Space
android:id="@+id/loginSplashBottomSpace"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/loginSplashAlreadyHaveAccount" />
<TextView
android:id="@+id/loginSplashVersion"
style="@style/Widget.Vector.TextView.Caption"

View file

@ -3,26 +3,53 @@
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
android:orientation="vertical"
android:paddingStart="@dimen/ftue_auth_gutter"
android:paddingEnd="@dimen/ftue_auth_gutter">
<ImageView
android:id="@+id/carousel_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:contentDescription="@null" />
android:layout_gravity="center">
<ImageView
android:id="@+id/carousel_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:contentDescription="@null" />
</FrameLayout>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.05" />
<TextView
android:id="@+id/carousel_item_body"
android:id="@+id/carousel_item_title"
style="@style/Widget.Vector.TextView.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="?vctr_content_primary"
tools:text="Login version" />
<TextView
android:id="@+id/carousel_item_body"
style="@style/Widget.Vector.TextView.Subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:textColor="?vctr_content_secondary"
tools:text="Login version" />
</LinearLayout>

View file

@ -2516,6 +2516,16 @@
<string name="direct_room_join_rules_invite_by_you">You made this invite only.</string>
<string name="timeline_unread_messages">Unread messages</string>
<!-- Onboarding -->
<string name="ftue_auth_carousel_1_title">Own your conversions.</string>
<string name="ftue_auth_carousel_1_body">End-to-end encrypted messaging for secure and independent communication, connected via Matrix.</string>
<string name="ftue_auth_carousel_2_title">You\'re in control.</string>
<string name="ftue_auth_carousel_2_body">Element lets you choose where you messages are stored, keeping you in control of your data.</string>
<string name="ftue_auth_carousel_3_title">Connect with anyone.</string>
<string name="ftue_auth_carousel_3_body">Element works with all Matrix-based apps and can even bridge into proprietary messengers.</string>
<string name="ftue_auth_carousel_4_title">Cut the slack from teams.</string>
<string name="ftue_auth_carousel_4_body">As universal as email, Element is a completely new type of collaboration.</string>
<string name="login_splash_title">It\'s your conversation. Own it.</string>
<string name="login_splash_text1">Chat with people directly or in groups</string>
<string name="login_splash_text2">Keep conversations private with encryption</string>