Skip to content

Commit

Permalink
Fix sync connect for small screens (#4365)
Browse files Browse the repository at this point in the history 
Task/Issue URL:
https://app.asana.com/0/1201493110486074/1206542898886222/f

### Description
Fix layout for sync connect screen in smaller devices

### Steps to test this PR
- [ ] Go to Settings
- [ ] Open Sync & Backup
- [ ] Click on Sync with Another Device
- [ ] Verify that UI is correct

Results: https://app.asana.com/0/0/1206948358341237/f
  • Loading branch information
@karlenDimla
karlenDimla authored Apr 3, 2024
1 parent feac848 commit 002f64c
Showing 1 changed file with 113 additions and 108 deletions.
221 changes: 113 additions & 108 deletions sync/sync-impl/src/main/res/layout/activity_connect_sync.xml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
<?xml version="1.0" encoding="utf-8"?><!--
~ Copyright (c) 2023 DuckDuckGo
~
~ Licensed under the Apache License, Version 2.0 (the "License");
Expand All @@ -14,119 +13,125 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/daxColorSurface"
android:orientation="vertical">
android:layout_height="match_parent"
android:orientation="vertical">

<include
android:id="@+id/includeToolbar"
layout="@layout/include_default_toolbar"/>
layout="@layout/include_default_toolbar" />

<androidx.constraintlayout.widget.ConstraintLayout
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/connect_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/keyline_4"
android:text="@string/connect_screen_scan_qr_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none">

<com.duckduckgo.sync.impl.ui.qrcode.SyncBarcodeView
android:id="@+id/qrCodeReader"
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="@dimen/qrBarcodeSize"
android:layout_marginTop="@dimen/keyline_4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/connect_hint" />

</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"

android:background="?attr/daxColorBackground">

<ImageView
android:id="@+id/qrCodeImageView"
android:layout_width="@dimen/qrSizeMedium"
android:layout_height="@dimen/qrSizeMedium"
android:layout_gravity="center"
android:layout_marginStart="@dimen/keyline_5"
android:layout_marginTop="@dimen/keyline_5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/qrCodeHintTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginTop="@dimen/keyline_4"
android:layout_marginEnd="@dimen/keyline_4"
app:typography="h5"
android:text="@string/connect_screen_connect_qr_hint_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
app:layout_constraintTop_toTopOf="parent" />

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/qrCodeHintContent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginEnd="@dimen/keyline_4"
android:text="@string/connect_screen_connect_qr_hint_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
app:layout_constraintTop_toBottomOf="@+id/qrCodeHintTitle"
app:typography="caption"
app:textType="secondary"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

<com.duckduckgo.common.ui.view.divider.HorizontalDivider
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@+id/copyCodeButton"/>

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/copyCodeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_arrow_circle_right_12"
android:drawablePadding="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_4"
app:textType="secondary"
android:textAlignment="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="@string/login_screen_cant_scan"/>

</androidx.constraintlayout.widget.ConstraintLayout>
android:layout_height="wrap_content">

<LinearLayout
android:id="@+id/readerContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/daxColorSurface"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@+id/qrcodeContainer"
app:layout_constraintTop_toTopOf="parent">

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/connect_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/keyline_4"
android:text="@string/connect_screen_scan_qr_hint" />

<com.duckduckgo.sync.impl.ui.qrcode.SyncBarcodeView
android:id="@+id/qrCodeReader"
android:layout_width="match_parent"
android:layout_height="@dimen/qrBarcodeSize" />
</LinearLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/qrcodeContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="?attr/daxColorBackground"
app:layout_constraintBottom_toTopOf="@+id/copyCodeDivider"
app:layout_constraintHeight_min="185dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@+id/readerContainer"
app:layout_constraintVertical_chainStyle="spread">

<ImageView
android:id="@+id/qrCodeImageView"
android:layout_width="@dimen/qrSizeMedium"
android:layout_height="@dimen/qrSizeMedium"
android:layout_gravity="center"
android:layout_marginStart="@dimen/keyline_5"
android:layout_marginTop="@dimen/keyline_5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/qrCodeHintTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginTop="@dimen/keyline_4"
android:layout_marginEnd="@dimen/keyline_4"
android:text="@string/connect_screen_connect_qr_hint_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
app:layout_constraintTop_toTopOf="parent"
app:typography="h5" />

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/qrCodeHintContent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginEnd="@dimen/keyline_4"
android:text="@string/connect_screen_connect_qr_hint_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
app:layout_constraintTop_toBottomOf="@+id/qrCodeHintTitle"
app:textType="secondary"
app:typography="caption" />

</androidx.constraintlayout.widget.ConstraintLayout>


<com.duckduckgo.common.ui.view.divider.HorizontalDivider
android:id="@+id/copyCodeDivider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/copyCodeButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/qrcodeContainer" />

<com.duckduckgo.common.ui.view.text.DaxTextView
android:id="@+id/copyCodeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/keyline_4"
android:drawableEnd="@drawable/ic_arrow_circle_right_12"
android:drawablePadding="@dimen/keyline_2"
android:text="@string/login_screen_cant_scan"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/copyCodeDivider"
app:textType="secondary" />

</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</LinearLayout>

0 comments on commit 002f64c

Please sign in to comment.