Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix part #44: Full UI profile pin/password screen. #597

Merged
merged 16 commits into from
Feb 5, 2020
Merged

Fix part #44: Full UI profile pin/password screen. #597

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ed9835a
done ui corrections
veena14cs Jan 9, 2020
2210928
fixed issues.
veena14cs Jan 9, 2020
4430c7f
Update pin_password_activity.xml
veena14cs Jan 9, 2020
7b31f3a
updated color
veena14cs Jan 9, 2020
8f3b521
updated icon
veena14cs Jan 10, 2020
beb122a
updated pinview shadow
veena14cs Jan 13, 2020
112d31c
updated icon color
veena14cs Jan 13, 2020
5e508c9
changed shadow
veena14cs Jan 13, 2020
2bccd24
updated mock color
veena14cs Jan 13, 2020
ea6c82b
fix
veena14cs Jan 16, 2020
9f05fca
Update pin_password_activity.xml
veena14cs Jan 17, 2020
924012a
updated nit change.
veena14cs Jan 17, 2020
f77cde4
Update pin_password_activity.xml
veena14cs Jan 20, 2020
a9548b2
removed fixed width
veena14cs Jan 20, 2020
78a2b62
fixed dimen file changes
veena14cs Jan 20, 2020
0af5cfc
Update dimens.xml
veena14cs Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 70 additions & 50 deletions app/src/main/res/layout/pin_password_activity.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,133 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data>
<import type="android.text.InputType"/>

<import type="android.text.InputType" />

<variable
name="viewModel"
type="org.oppia.app.profile.PinPasswordViewModel" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/pinPasswordBackground">
android:background="@color/oppiaLightGreen">

veena14cs marked this conversation as resolved.
Show resolved Hide resolved
<TextView
android:id="@+id/hello_text"
android:id="@+id/hello_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="1"
android:layout_marginStart="28dp"
android:layout_marginTop="96dp"
android:layout_marginEnd="28dp"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:lines="1"
android:text="@{String.format(@string/pin_password_hello, viewModel.profile.name)}"
android:textColor="@color/black"
android:textSize="28sp"
android:layout_marginTop="40dp"
app:layout_constraintTop_toTopOf="parent"
android:textColor="@color/oppiaPrimaryText"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/enter_text"
android:id="@+id/enter_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="60dp"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:text="@{viewModel.profile.isAdmin ? @string/pin_password_admin_enter : @string/pin_password_user_enter}"
android:textColor="@color/black"
android:textSize="24sp"
android:layout_marginTop="12dp"
android:paddingBottom="12dp"
app:layout_constraintTop_toBottomOf="@+id/hello_text"
android:textColor="@color/oppiaPrimaryText"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toBottomOf="@+id/hello_text_view" />

<TextView
android:id="@+id/error_text"
android:id="@+id/error_text_view"
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_height="wrap_content"
android:text="@{viewModel.showError ? @string/pin_password_incorrect_pin : null}"
android:textColor="@color/red"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="@+id/enter_text"
android:textColor="@color/oppiaBrown"
android:textSize="16sp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toBottomOf="@+id/enter_text_view" />

<com.chaos.view.PinView
android:id="@+id/input_pin"
style="@style/PinWidget.PinView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cursorVisible="true"
android:inputType="@{viewModel.showPassword ? InputType.TYPE_CLASS_NUMBER : (InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_VARIATION_PASSWORD)}"
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
android:padding="10dp"
android:itemBackground="@color/white"
android:textColor="@color/black"
android:padding="4dp"
android:layout_marginTop="4dp"
android:textColor="@color/oppiaPrimaryText"
android:textSize="22sp"
android:textStyle="bold"
android:layout_marginTop="10dp"
app:cursorColor="@color/black"
app:cursorColor="@color/oppiaPrimaryText"
app:cursorWidth="2dp"
app:hideLineWhenFilled="false"
app:itemCount="@{viewModel.profile.pin.length()}"
app:itemHeight="48dp"
app:itemRadius="4dp"
app:itemRadius="2dp"
app:itemSpacing="8dp"
app:itemWidth="28dp"
app:lineColor="@color/grey"
app:lineWidth="1dp"
app:viewType="rectangle"
app:layout_constraintTop_toBottomOf="@+id/error_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toBottomOf="@+id/error_text_view"
app:layout_goneMarginTop="28dp"
app:lineColor="@color/grey_shade_100"
app:lineWidth="1dp"
app:viewType="rectangle" />

<TextView
android:id="@+id/forgot_pin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_height="48dp"
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
android:layout_marginTop="12dp"
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
android:fontFamily="sans-serif"
android:text="@string/pin_password_forgot_pin"
android:textAllCaps="true"
android:textColor="@color/colorPrimary"
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="@+id/input_pin"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toBottomOf="@+id/input_pin" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="10dp"
android:gravity="center"
android:id="@+id/show_pin"
app:layout_constraintTop_toTopOf="@+id/input_pin"
android:layout_width="48dp"
android:layout_height="48dp"
android:orientation="vertical"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="@+id/input_pin"
app:layout_constraintStart_toEndOf="@+id/input_pin">
app:layout_constraintStart_toEndOf="@+id/input_pin"
app:layout_constraintTop_toTopOf="@+id/input_pin">

<ImageView
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
android:layout_width="36dp"
android:layout_height="36dp"
android:src="@{viewModel.showPassword ? @drawable/ic_hide_eye_icon : @drawable/ic_show_eye_icon}"/>
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@{viewModel.showPassword ? @drawable/ic_hide_eye_icon : @drawable/ic_show_eye_icon}" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-2dp"
android:fontFamily="sans-serif"
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
android:text="@{viewModel.showPassword ? @string/pin_password_hide : @string/pin_password_show}"
android:textAllCaps="true"
android:textSize="12sp"
android:textColor="@color/colorPrimary"/>
android:textColor="@color/oppiaDarkGreen"
android:textSize="12sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
2 changes: 2 additions & 0 deletions app/src/main/res/values/colors.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<color name="oppiaPrimaryText30">#4D333333</color>
<color name="oppiaPrimaryDark">#00645C</color>
<color name="oppiaSecondaryText">#666666</color>
<color name="oppiaDarkGreen">#008098</color>
veena14cs marked this conversation as resolved.
Show resolved Hide resolved
<color name="oppiaLightGreen">#F0FFFF</color>
<color name="oppiaLightBlue">#4DA5D3EC</color>
<color name="oppiaLightYellow">#FFFFF0</color>
Expand Down Expand Up @@ -64,6 +65,7 @@
<color name="grey_shade_20">#D6D6D6</color>
<color name="grey_shade_30">#5CBABABA</color>
<color name="grey_shade_40">#0000003D</color>
<color name="grey_shade_100">#00000029</color>
<color name="blue_shade_100">#0F0086FB</color>
<color name="blue_shade_200">#6B0086FB</color>
<color name="chapterCardShadow">#AAFFFFFF</color>
Expand Down
6 changes: 3 additions & 3 deletions app/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,9 @@
<string name="add_profile_error_pin_confirm_wrong">Please make sure that both PINs match.</string>
<!-- PinPasswordActivity -->
<string name="pin_password_hello">Hi, %s!</string>
<string name="pin_password_admin_enter">Please enter your \nAdministrator PIN</string>
<string name="pin_password_user_enter">Please enter your PIN</string>
<string name="pin_password_forgot_pin">I forgot my pin</string>
<string name="pin_password_admin_enter">Please enter your \nAdministrator PIN.</string>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure if this \n should be used as it means that even on landscape mode it will contain 2 lines. Can you just confirm with @mschanteltc regarding this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mschanteltc do we have this text Please enter your Administrator PIN in 2 lines in landscape mock or its a single line text in landscape. Please confirm.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In landscape mode, the text will be one line. So the text in portrait mode should be bounded by a text box size. My mocks have it so that is is 240px wide.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mschanteltc made textbox size as 240px wide.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To avoid giving fixed width. Created dimens file for different screen size, to have double line text in portrait mode and single line in landscape.

<string name="pin_password_user_enter">Please enter your PIN.</string>
<string name="pin_password_forgot_pin">I forgot my pin.</string>
<string name="pin_password_incorrect_pin">Incorrect PIN.</string>
<string name="pin_password_show">show</string>
<string name="pin_password_hide">hide</string>
Expand Down