Merge pull request #1010 from nextcloud/loginTextfieldDesign

Login Textfield design
This commit is contained in:
Marcel Hibbe 2021-02-24 09:55:57 +01:00 committed by GitHub
commit 12154fffdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 160 additions and 75 deletions

View File

@ -24,7 +24,7 @@ package com.nextcloud.talk.newarch.features.account.serverentry
import android.os.Bundle import android.os.Bundle
import android.view.* import android.view.*
import androidx.core.view.isVisible import androidx.core.view.isInvisible
import androidx.core.widget.doOnTextChanged import androidx.core.widget.doOnTextChanged
import androidx.lifecycle.Observer import androidx.lifecycle.Observer
import com.bluelinelabs.conductor.RouterTransaction import com.bluelinelabs.conductor.RouterTransaction
@ -55,20 +55,21 @@ class ServerEntryView : BaseView() {
viewModel = viewModelProvider(factory).get(ServerEntryViewModel::class.java) viewModel = viewModelProvider(factory).get(ServerEntryViewModel::class.java)
val view = super.onCreateView(inflater, container) val view = super.onCreateView(inflater, container)
view.serverEntryTextInputEditText.setCompoundDrawablesWithIntrinsicBounds(null, null, resources?.getDrawable(R.drawable.ic_arrow_forward_white_24px), null) view.serverEntryTextInputLayout.endIconDrawable?.alpha = 99
view.serverEntryTextInputEditText.compoundDrawables[2].alpha = 99 view.host_url_input_helper_text.setText(String.format(resources!!.getString(R.string.nc_server_helper_text), resources?.getString(R.string.nc_server_product_name)))
viewModel.apply { viewModel.apply {
checkState.observe(this@ServerEntryView, Observer { checkState.observe(this@ServerEntryView, Observer {
when (it.checkState) { when (it.checkState) {
ServerEntryCapabilitiesCheckState.WAITING_FOR_INPUT -> { ServerEntryCapabilitiesCheckState.WAITING_FOR_INPUT -> {
view.serverEntryTextInputLayout.isEnabled = true view.serverEntryTextInputLayout.isEnabled = true
view.serverEntryProgressBar.isVisible = false view.serverEntryProgressBar.isInvisible = true
} }
ServerEntryCapabilitiesCheckState.CHECKING -> { ServerEntryCapabilitiesCheckState.CHECKING -> {
view.serverEntryTextInputLayout.isEnabled = false view.serverEntryTextInputLayout.isEnabled = false
view.serverEntryTextInputEditText.compoundDrawables[2].alpha = 0 view.serverEntryTextInputEditText.compoundDrawables[2].alpha = 0
view.serverEntryProgressBar.isVisible = true view.serverEntryProgressBar.isInvisible = false
view.error_text.isInvisible = true
} }
ServerEntryCapabilitiesCheckState.SERVER_SUPPORTED -> { ServerEntryCapabilitiesCheckState.SERVER_SUPPORTED -> {
val bundle = Bundle() val bundle = Bundle()
@ -79,9 +80,9 @@ class ServerEntryView : BaseView() {
// Unsupported // Unsupported
else -> { else -> {
view.serverEntryTextInputLayout.isEnabled = true view.serverEntryTextInputLayout.isEnabled = true
view.serverEntryProgressBar.isVisible = false view.serverEntryProgressBar.isInvisible = true
view.serverEntryTextInputLayout.error = resources?.getString(R.string.nc_server_unsupported) view.error_text.isInvisible = false
view.serverEntryTextInputEditText.compoundDrawables[2].alpha = 99 view.serverEntryTextInputLayout.endIconDrawable?.alpha = 99
} }
} }
}) })
@ -91,34 +92,21 @@ class ServerEntryView : BaseView() {
view.serverEntryTextInputLayout.error = null view.serverEntryTextInputLayout.error = null
if (text.isNullOrBlank()) { if (text.isNullOrBlank()) {
view.serverEntryTextInputEditText.compoundDrawables[2].alpha = 99 view.serverEntryTextInputLayout.endIconDrawable?.alpha = 99
} else { } else {
view.serverEntryTextInputEditText.compoundDrawables[2].alpha = 255 view.serverEntryTextInputLayout.endIconDrawable?.alpha = 255
} }
} }
view.serverEntryTextInputEditText.setOnTouchListener { v, event -> view.serverEntryTextInputLayout.setEndIconOnClickListener {
val drawableLeft = 0 view.serverEntryTextInputEditText?.text?.let { serverUrl ->
val drawableTop = 1 var baseUrl = serverUrl.toString()
val drawableRight = 2 if (!serverUrl.startsWith("http://") && !serverUrl.startsWith("https://")) {
val drawableBottom = 3 baseUrl = "https://$serverUrl"
if (event.action == MotionEvent.ACTION_UP) {
if (event.rawX >= (view.serverEntryTextInputEditText.right - view.serverEntryTextInputEditText.compoundDrawables[drawableRight].bounds.width())) {
if (view.serverEntryTextInputEditText.compoundDrawables[drawableRight].alpha == 255) {
view.serverEntryTextInputEditText?.text?.let { serverUrl ->
var baseUrl = serverUrl.toString()
if (!serverUrl.startsWith("http://") && !serverUrl.startsWith("https://")) {
baseUrl = "https://$serverUrl"
}
viewModel.fetchCapabilities(baseUrl)
true
}
}
} }
viewModel.fetchCapabilities(baseUrl)
true
} }
false
} }
return view return view
@ -134,4 +122,4 @@ class ServerEntryView : BaseView() {
DisplayUtils.applyColorToStatusBar(activity!!, resources!!.getColor(R.color.colorPrimary)) DisplayUtils.applyColorToStatusBar(activity!!, resources!!.getColor(R.color.colorPrimary))
DisplayUtils.applyColorToNavgiationBar(activity!!.window, resources!!.getColor(R.color.colorPrimary)) DisplayUtils.applyColorToNavgiationBar(activity!!.window, resources!!.getColor(R.color.colorPrimary))
} }
} }

View File

@ -1,4 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- <?xml version="1.0" encoding="utf-8"?>
<!--
~ /* ~ /*
~ * Nextcloud Talk application ~ * Nextcloud Talk application
~ * ~ *
@ -20,58 +21,117 @@
~ */ ~ */
--> -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/scroll"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:background="@color/colorPrimary"> android:layout_gravity="center"
android:background="@color/colorPrimary"
android:fillViewport="true"
android:orientation="vertical">
<ImageView <LinearLayout
android:id="@+id/image_logo"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_above="@+id/serverEntryTextInputLayout"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:scaleType="fitXY"
app:srcCompat="@drawable/ic_logo" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/serverEntryTextInputLayout"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_centerInParent="true" android:gravity="center"
android:layout_margin="16dp" android:orientation="vertical"
app:errorTextColor="@color/white"> android:padding="16dp">
<FrameLayout <ImageView
android:layout_width="match_parent" android:id="@+id/image_logo"
android:layout_height="wrap_content"> android:layout_width="96dp"
android:layout_height="96dp"
android:layout_marginBottom="16dp"
android:contentDescription="@string/app_name"
android:scaleType="fitXY"
app:srcCompat="@drawable/ic_logo" />
<com.google.android.material.textfield.TextInputEditText <com.google.android.material.textfield.TextInputLayout
android:id="@+id/serverEntryTextInputLayout"
style="@style/Widget.App.Login.TextInputLayout"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:id="@+id/serverEntryTextInputEditText"
android:hint="@string/nc_server_url" android:hint="@string/nc_server_url"
android:imeOptions="actionDone" android:theme="@style/TextInputLayoutLogin"
android:inputType="textUri" app:endIconContentDescription="@string/nc_server_connect"
android:paddingTop="20dp" app:endIconDrawable="@drawable/ic_arrow_forward_white_24px"
android:paddingBottom="20dp" app:endIconMode="custom"
android:singleLine="true" app:endIconTint="@color/white">
android:textColor="@color/fg_inverse"
android:textCursorDrawable="@null" />
<ProgressBar <com.google.android.material.textfield.TextInputEditText
android:layout_width="24dp" android:id="@+id/serverEntryTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:importantForAutofill="no"
android:inputType="textUri|textNoSuggestions"
android:lines="1"
android:minLines="1"
android:paddingStart="16dp"
android:paddingEnd="55dp"
android:scrollbars="vertical"
android:textColor="@color/white"
android:textColorHint="#80FFFFFF">
<requestFocus />
</com.google.android.material.textfield.TextInputEditText>
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="@+id/host_url_input_helper_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:id="@+id/serverEntryProgressBar" android:lineSpacingMultiplier="1.2"
android:visibility="gone" android:paddingStart="16dp"
android:indeterminateTint="@color/white" android:paddingTop="4dp"
android:layout_gravity="end|center_vertical" android:paddingEnd="8dp"
android:layout_marginHorizontal="8dp" android:paddingBottom="2dp"
/> android:text="@string/nc_server_helper_text"
android:textColor="#B3FFFFFF" />
</FrameLayout> <LinearLayout
</com.google.android.material.textfield.TextInputLayout> android:id="@+id/serverEntryProgressBar"
</RelativeLayout> android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingTop="2dp"
android:paddingEnd="2dp"
android:paddingBottom="2dp"
android:orientation="horizontal"
android:visibility="invisible">
<ProgressBar
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end|center_vertical"
android:indeterminateTint="@color/white"
android:visibility="visible" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="5dp"
android:paddingEnd="0dp"
android:text="@string/nc_server_testing_connection"
android:textColor="@color/white" />
</LinearLayout>
<TextView
android:id="@+id/error_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingTop="2dp"
android:paddingEnd="2dp"
android:paddingBottom="2dp"
android:text="@string/nc_server_unsupported"
android:textColor="@color/white"
app:drawableStartCompat="@android:drawable/stat_sys_warning"
android:visibility="invisible" />
</LinearLayout>
</ScrollView>

View File

@ -23,7 +23,10 @@
<string name="nc_settings">Settings</string> <string name="nc_settings">Settings</string>
<!-- Server selection --> <!-- Server selection -->
<string name="nc_server_url">Server address</string> <string name="nc_server_url">Server address https://…</string>
<string name="nc_server_connect">Test server connection</string>
<string name="nc_server_helper_text">The link to your %1$s web interface when you open it in the browser.</string>
<string name="nc_server_testing_connection">Testing connection</string>
<string name="nc_server_not_installed">Please finish your %1$s installation</string> <string name="nc_server_not_installed">Please finish your %1$s installation</string>
<string name="nc_server_db_upgrade_needed">Please upgrade your %1$s database</string> <string name="nc_server_db_upgrade_needed">Please upgrade your %1$s database</string>
<string name="nc_server_maintenance">Please bring your %1$s out of maintenance</string> <string name="nc_server_maintenance">Please bring your %1$s out of maintenance</string>

View File

@ -81,4 +81,38 @@
<item name="helperTextTextColor">@color/fg_default</item> <item name="helperTextTextColor">@color/fg_default</item>
<item name="boxStrokeColor">@color/fg_default</item> <item name="boxStrokeColor">@color/fg_default</item>
</style> </style>
<style name="Widget.App.Login.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="colorControlActivated">@color/white</item>
<item name="colorControlHighlight">@color/white</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.App.Login.TextInputLayout</item>
<item name="shapeAppearance">@style/ShapeAppearance.MaterialComponents.SmallComponent</item>
<item name="hintTextColor">@color/white</item>
<item name="helperTextTextColor">@color/white</item>
</style>
<style name="ThemeOverlay.App.Login.TextInputLayout" parent="">
<item name="colorPrimary">@color/white</item>
<item name="colorOnSurface">@color/white</item>
<item name="colorError">@color/nc_darkRed</item>
<item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item>
<item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item>
<item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>
<style name="TextInputLayoutLogin" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">@color/white</item>
<item name="boxStrokeErrorColor">@color/white</item>
<item name="hintTextAppearance">@style/HintTextLogin</item>
<item name="errorTextAppearance">@style/HintTextLogin</item>
<item name="android:colorPrimary">@color/white</item>
<!-- Theme attributes -->
<item name="android:textColorHint">#80FFFFFF</item>
<item name="colorControlNormal">@color/white</item>
<item name="colorControlActivated">@color/white</item>
</style>
<style name="HintTextLogin" parent="TextAppearance.AppCompat">
<item name="android:textColor">@color/white</item>
</style>
</resources> </resources>

View File

@ -1,2 +1,2 @@
DO NOT TOUCH; GENERATED BY DRONE DO NOT TOUCH; GENERATED BY DRONE
<span class="mdl-layout-title">Lint Report: 11 errors and 569 warnings</span> <span class="mdl-layout-title">Lint Report: 11 errors and 566 warnings</span>