Skip to content

Commit

Permalink
Various changes of Sync Page design on Android
Browse files Browse the repository at this point in the history 
- #2 padding of title
- #3 text colors
- #6 line-hight issue

The initial Sync page on Android is now broken due to changed styles - wip.
  • Loading branch information
@AlexeyBarabash
AlexeyBarabash committed Jun 7, 2024
1 parent 1364253 commit 5043cf6
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 103 deletions.
75 changes: 4 additions & 71 deletions android/java/org/chromium/chrome/browser/settings/BraveSyncScreensPreference.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
import android.text.TextUtils;
import android.text.TextWatcher;
import android.text.style.AlignmentSpan;
import android.text.style.ForegroundColorSpan;
import android.text.style.RelativeSizeSpan;
import android.text.style.StyleSpan;
import android.util.DisplayMetrics;
Expand Down Expand Up @@ -133,10 +132,6 @@ public class BraveSyncScreensPreference extends BravePreferenceFragment
// Brave Sync message text view
private TextView mBraveSyncTextViewInitial;
private TextView mBraveSyncTextViewSyncChainCode;
private TextView mBraveSyncTextViewAddMobileDevice;
private TextView mBraveSyncTextViewAddLaptop;
private TextView mBraveSyncWarningTextViewAddMobileDevice;
private TextView mBraveSyncWarningTextViewAddLaptop;
private TextView mBraveSyncTextDevicesTitle;
private TextView mBraveSyncWordCountTitle;
private TextView mBraveSyncAddDeviceCodeWords;
Expand Down Expand Up @@ -445,20 +440,12 @@ public void onActivityCreated(Bundle savedInstanceState) {
mBraveSyncTextViewInitial = getView().findViewById(R.id.brave_sync_text_initial);
mBraveSyncTextViewSyncChainCode =
getView().findViewById(R.id.brave_sync_text_sync_chain_code);
mBraveSyncTextViewAddMobileDevice =
getView().findViewById(R.id.brave_sync_text_add_mobile_device);
mBraveSyncTextViewAddLaptop = getView().findViewById(R.id.brave_sync_text_add_laptop);
mBraveSyncWarningTextViewAddMobileDevice =
getView().findViewById(R.id.brave_sync_warning_text_add_mobile_device);
mBraveSyncWarningTextViewAddLaptop =
getView().findViewById(R.id.brave_sync_warning_text_add_laptop);
mBraveSyncTextDevicesTitle = getView().findViewById(R.id.brave_sync_devices_title);
mBraveSyncWordCountTitle = getView().findViewById(R.id.brave_sync_text_word_count);
mBraveSyncWordCountTitle.setText(getString(R.string.brave_sync_word_count_text, 0));
mBraveSyncAddDeviceCodeWords =
getView().findViewById(R.id.brave_sync_add_device_code_words);

setMainSyncText();
mCameraSourcePreview = getView().findViewById(R.id.preview);

mAddDeviceButton = getView().findViewById(R.id.brave_sync_btn_add_device);
Expand Down Expand Up @@ -568,15 +555,10 @@ private void setAppropriateView() {
setSyncDoneLayout();
}

private void setMainSyncText() {
setSyncText(getResources().getString(R.string.brave_sync_official),
getResources().getString(R.string.brave_sync_description_page_1_part_1) + "\n\n"
+ getResources().getString(R.string.brave_sync_description_page_1_part_2),
mBraveSyncTextViewInitial);
}

private void setQRCodeText() {
setSyncText("", getResources().getString(R.string.brave_sync_qrcode_message_v2),
setSyncText(
"",
getResources().getString(R.string.brave_sync_qrcode_message_v2),
mBraveSyncTextViewSyncChainCode);
}

Expand Down Expand Up @@ -978,7 +960,6 @@ private void showMainSyncScrypt() {
if (null != mScrollViewEnterCodeWords) {
mScrollViewEnterCodeWords.setVisibility(View.GONE);
}
setMainSyncText();
}

// Handles the requesting of the camera permission.
Expand Down Expand Up @@ -1489,19 +1470,7 @@ public void invalidateCodephrase() {

private void setAddMobileDeviceLayout() {
getActivity().setTitle(R.string.brave_sync_btn_mobile);
if (null != mBraveSyncTextViewAddMobileDevice) {
setSyncText(
getResources().getString(R.string.brave_sync_scan_sync_code),
getResources().getString(R.string.brave_sync_add_mobile_device_text_part_1)
+ "\n\n"
+ getResources()
.getString(R.string.brave_sync_add_mobile_device_text_part_2)
+ "\n",
mBraveSyncTextViewAddMobileDevice);
}
if (null != mBraveSyncWarningTextViewAddMobileDevice) {
mBraveSyncWarningTextViewAddMobileDevice.setText(getWarningRedBold());
}

if (null != mScrollViewSyncInitial) {
mScrollViewSyncInitial.setVisibility(View.GONE);
}
Expand Down Expand Up @@ -1544,20 +1513,6 @@ private void fillQrCode(String qrDataFinal) {

private void setAddLaptopLayout() {
getActivity().setTitle(R.string.brave_sync_btn_laptop);
if (null != mBraveSyncTextViewAddLaptop) {
setSyncText(
getResources().getString(R.string.brave_sync_add_laptop_text_title),
getResources().getString(R.string.brave_sync_add_laptop_text_part_1)
+ "\n\n"
+ getResources()
.getString(R.string.brave_sync_add_laptop_text_part_2_new)
+ "\n",
mBraveSyncTextViewAddLaptop);
}

if (null != mBraveSyncWarningTextViewAddLaptop) {
mBraveSyncWarningTextViewAddLaptop.setText(getWarningRedBold());
}

if (null != mScrollViewSyncInitial) {
mScrollViewSyncInitial.setVisibility(View.GONE);
Expand All @@ -1581,28 +1536,6 @@ private void setAddLaptopLayout() {
generateNewCodeWords();
}

private SpannableString getWarningRedBold() {
String braveSyncCodeWarning = getResources().getString(R.string.brave_sync_code_warning);
SpannableString braveSyncCodeWarningSpanned = new SpannableString(braveSyncCodeWarning);

ForegroundColorSpan foregroundSpan =
new ForegroundColorSpan(getContext().getColor(R.color.default_red));
braveSyncCodeWarningSpanned.setSpan(
foregroundSpan, 0, braveSyncCodeWarningSpanned.length() - 1, 0);
braveSyncCodeWarningSpanned.setSpan(
new StyleSpan(Typeface.BOLD),
0,
braveSyncCodeWarning.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
braveSyncCodeWarningSpanned.setSpan(
new AlignmentSpan.Standard(Layout.Alignment.ALIGN_NORMAL),
0,
braveSyncCodeWarning.length(),
Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

return braveSyncCodeWarningSpanned;
}

private void setWordsCountDown(LocalDateTime notAfterTime) {
FragmentContainerView containerView =
(FragmentContainerView)
Expand Down
37 changes: 29 additions & 8 deletions android/java/res/layout/brave_sync_add_laptop.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@
android:id="@+id/view_add_laptop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
android:fillViewport="true"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="20dp" >

<LinearLayout android:orientation="vertical"
android:layout_height="wrap_content"
Expand All @@ -27,29 +31,42 @@
android:paddingEnd="15dip"
android:paddingBottom="15dip">

<TextView android:id="@+id/brave_sync_text_add_laptop"
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
android:text="@string/brave_sync_add_laptop_text_title"
style="@style/BraveSyncTitleText"
android:gravity="top" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/brave_sync_add_laptop_text"
android:gravity="top"
android:layout_marginTop="20dp"
style="@style/BraveSyncDescriptionText" />

<TextView android:id="@+id/brave_sync_warning_text_add_laptop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
style="@style/BraveSyncRedWarningText"
android:text="@string/brave_sync_code_warning"
android:layout_marginTop="20dp" />

</LinearLayout>

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="15dip"
android:paddingEnd="15dip" >
android:paddingEnd="15dip"
android:layout_marginTop="20dp" >

<TextView android:id="@+id/brave_sync_add_device_code_words"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start|top"
android:textSize="18sp"
android:textSize="12sp"
android:background="@drawable/brave_sync_top_rounded"
android:padding="16dip"
android:fontFamily="@font/roboto_mono_regular" />
Expand All @@ -58,10 +75,12 @@
<androidx.fragment.app.FragmentContainerView
android:id="@+id/brave_sync_count_down_code_words"
android:name="org.chromium.chrome.browser.settings.BraveSyncCodeCountdownFragment"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="15dp" />
android:layout_marginTop="20dp" />

<LinearLayout
android:orientation="vertical"
Expand All @@ -75,7 +94,8 @@
android:text="@string/brave_sync_copy_button_text"
style="@style/BraveSyncBottomButton"
android:background="@android:color/transparent"
android:textColor="@color/brave_sync_copy_words_text_color" />
android:textColor="@color/brave_sync_copy_words_text_color"
android:textSize="14sp" />

<android.widget.Button android:id="@+id/brave_sync_btn_add_laptop_new_code"
android:visibility="gone"
Expand All @@ -88,6 +108,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/brave_sync_btn_done"
android:textSize="14sp"
style="@style/BraveSyncButton"/>
</LinearLayout>
</LinearLayout>
Expand Down
31 changes: 22 additions & 9 deletions android/java/res/layout/brave_sync_add_mobile.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@
android:id="@+id/view_add_mobile_device"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
android:fillViewport="true"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="20dp" >

<LinearLayout android:orientation="vertical"
android:layout_height="wrap_content"
Expand All @@ -27,16 +31,27 @@
android:paddingEnd="15dip"
android:paddingBottom="15dip">

<TextView android:id="@+id/brave_sync_text_add_mobile_device"
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
android:text="@string/brave_sync_scan_sync_code"
style="@style/BraveSyncTitleText"
android:gravity="top" />

<TextView android:id="@+id/brave_sync_warning_text_add_mobile_device"
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
android:text="@string/brave_sync_add_mobile_device_text"
android:gravity="top"
style="@style/BraveSyncDescriptionText"
android:layout_marginTop="20dp" />

<TextView android:id="@+id/brave_sync_warning_text_add_mobile_device"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/BraveSyncRedWarningText"
android:text="@string/brave_sync_code_warning"
android:layout_marginTop="20dp" />
</LinearLayout>

<LinearLayout android:id="@+id/brave_sync_qr_containter"
Expand All @@ -61,8 +76,8 @@
android:paddingEnd="5dip" >

<ImageView android:id="@+id/brave_sync_qr_code_image"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:contentDescription="@string/brave_sync_btn_laptop" />
</LinearLayout>
Expand All @@ -88,8 +103,6 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/brave_sync_generate_new_code_button"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="HardcodedText"
style="@style/BraveSyncButtonTransparent"/>

<android.widget.Button android:id="@+id/brave_sync_btn_done"
Expand Down
21 changes: 20 additions & 1 deletion android/java/res/layout/brave_sync_layout.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,26 @@
android:layout_weight="1.4"
android:gravity="center"
android:paddingStart="15dip"
android:paddingEnd="15dip" />
android:paddingEnd="15dip"
android:text="@string/brave_sync_official" />

<TextView
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1.4"
android:gravity="center"
android:paddingStart="15dip"
android:paddingEnd="15dip"
android:text="@string/brave_sync_description_page_1_part_1" />

<TextView
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1.4"
android:gravity="center"
android:paddingStart="15dip"
android:paddingEnd="15dip"
android:text="@string/brave_sync_description_page_1_part_2" />

<android.widget.Button android:id="@+id/brave_sync_btn_scan_chain_code"
android:layout_width="match_parent"
Expand Down
4 changes: 2 additions & 2 deletions android/java/res/layout/fragment_sync_code_countdown.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
android:layout_margin="8dp"
android:textColor="@color/brave_sync_count_down_text_color"
android:gravity="center_vertical"
android:textSize="16sp"
android:textSize="14sp"
app:drawableTint="@android:color/white" />
</LinearLayout>

Expand Down Expand Up @@ -61,7 +61,7 @@
android:text="@string/brave_sync_code_expired_block_text"
android:textColor="@color/brave_sync_expired_block_text_color"
android:gravity="center_vertical"
android:textSize="16sp"
android:textSize="14sp"
app:drawableTint="@android:color/white" />
</LinearLayout>
</LinearLayout>
29 changes: 27 additions & 2 deletions android/java/res/values/brave_styles.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@
<item name="android:layout_marginEnd">15dp</item>
<item name="android:layout_marginBottom">15dp</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">16sp</item>
<item name="android:textSize">14sp</item>
</style>

<style name="BraveSyncTabsTextAppearance" parent="TextAppearance.Design.Tab">
Expand All @@ -181,13 +181,38 @@
<item name="android:layout_marginEnd">15dp</item>
<item name="android:layout_marginBottom">15dp</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">16sp</item>
<item name="android:textSize">14sp</item>
</style>

<style name="BraveSyncBottomButton">
<item name="android:layout_marginBottom">15dp</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">14sp</item>
</style>

<style name="BraveSyncRedWarningText">
<item name="android:lineSpacingExtra">2sp</item>
<item name="android:translationY">-0.97sp</item>
<item name="android:gravity">top</item>
<item name="android:textSize">12sp</item>
<item name="android:textColor">#B3002A</item>
<item name="android:textStyle">bold</item>
</style>

<style name="BraveSyncTitleText">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#0D1214</item>
<item name="android:textStyle">bold</item>
<item name="android:lineSpacingExtra">5sp</item>
<item name="android:translationY">-2.62sp</item>
</style>

<style name="BraveSyncDescriptionText">
<item name="android:lineSpacingExtra">4sp</item>
<item name="android:translationY">-1.8sp</item>
<item name="android:textSize">14sp</item>
<item name="android:letterSpacing">-0.01</item>
<item name="android:textColor">#0D1214</item>
</style>

<style name="BookmarkTabPopupMenu" parent="Theme.AppCompat.DayNight">
Expand Down
Loading

0 comments on commit 5043cf6

Please sign in to comment.