adding carousel content, images are temporary
@ -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>
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 92 KiB |
After Width: | Height: | Size: 97 KiB |
BIN
vector/src/main/res/drawable-hdpi/onboarding_carousel_ems.png
Normal file
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 125 KiB |
After Width: | Height: | Size: 312 KiB |
After Width: | Height: | Size: 326 KiB |
BIN
vector/src/main/res/drawable-xhdpi/onboarding_carousel_ems.png
Normal file
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 428 KiB |
@ -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"
|
||||
|
@ -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">
|
||||
|
||||
<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">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/carousel_item_image"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_weight="1"
|
||||
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>
|
||||
|
@ -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>
|
||||
|