Closes #932 - Home Page UI polish

nightly-build-test
Emily Kager 5 years ago committed by Colin Lee
parent 92d4a11e14
commit bb3ebbdbe2

@ -52,7 +52,7 @@ import org.mozilla.fenix.settings.SupportUtils
import kotlin.coroutines.CoroutineContext
import kotlin.math.roundToInt
@SuppressWarnings("TooManyFunctions")
@SuppressWarnings("TooManyFunctions", "LargeClass")
class HomeFragment : Fragment(), CoroutineScope {
private val bus = ActionBusFactory.get(this)
private var sessionObserver: SessionManager.Observer? = null
@ -125,7 +125,9 @@ class HomeFragment : Fragment(), CoroutineScope {
orientation = BrowserMenu.Orientation.DOWN)
}
view.toolbar.setCompoundDrawablesWithIntrinsicBounds(searchIcon, null, null, null)
val iconSize = resources.getDimension(R.dimen.preference_icon_drawable_size).toInt()
searchIcon.setBounds(0, 0, iconSize, iconSize)
view.toolbar.setCompoundDrawables(searchIcon, null, null, null)
val roundToInt = (toolbarPaddingDp * Resources.getSystem().displayMetrics.density).roundToInt()
view.toolbar.compoundDrawablePadding = roundToInt
view.toolbar.setOnClickListener {

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M8.92,14.7338C8.1902,15.5131 7.1519,16 6,16C3.7909,16 2,14.2091 2,12C2,9.7909 3.7909,8 6,8C7.0609,8 8.0783,8.4214 8.8284,9.1716C8.86,9.2031 8.8909,9.2351 8.9213,9.2676L13.1206,6.9785C13.0418,6.6654 13,6.3376 13,6C13,3.7909 14.7909,2 17,2C19.2091,2 21,3.7909 21,6C21,8.2091 19.2091,10 17,10C15.8481,10 14.8098,9.5131 14.08,8.7338L9.879,11.0237C9.9587,11.3403 10,11.668 10,12C10,12.3376 9.9582,12.6654 9.8794,12.9785L14.0787,15.2675C14.8087,14.4875 15.8474,14 17,14C19.2091,14 21,15.7909 21,18C21,20.2091 19.2091,22 17,22C14.7909,22 13,20.2091 13,18C13,17.6631 13.0417,17.3358 13.1201,17.0232L8.92,14.7338ZM17,4C15.8954,4 15,4.8954 15,6C15,7.1046 15.8954,8 17,8C18.1046,8 19,7.1046 19,6C19,4.8954 18.1046,4 17,4ZM6,10C4.8954,10 4,10.8954 4,12C4,13.1046 4.8954,14 6,14C7.1046,14 8,13.1046 8,12C8,10.8954 7.1046,10 6,10ZM17,16C15.8954,16 15,16.8954 15,18C15,19.1046 15.8954,20 17,20C18.1046,20 19,19.1046 19,18C19,16.8954 18.1046,16 17,16Z"
android:strokeWidth="1"
android:fillColor="?attr/iconColor"
android:fillType="nonZero"
android:strokeColor="#00000000"/>
</vector>

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#393473"
android:endColor="#20123A"
android:type="linear" />
</shape>

@ -2,15 +2,15 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/tabs_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:visibility="gone">
@ -19,8 +19,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/tabs_header_title"
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
android:textColor="?attr/toolbarTextColor"
android:textAppearance="@style/headerText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
@ -30,9 +29,9 @@
android:layout_width="@dimen/glyph_button_width"
android:layout_height="@dimen/glyph_button_height"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/add_tab"
android:src="@drawable/ic_new"
android:tint="?attr/toolbarTextColor"
android:contentDescription="@string/add_tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/tabs_overflow_button"
app:layout_constraintTop_toTopOf="parent" />
@ -42,72 +41,75 @@
android:layout_width="@dimen/glyph_button_width"
android:layout_height="@dimen/glyph_button_height"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_menu"
android:tint="?attr/toolbarTextColor"
android:contentDescription="@string/tab_menu"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabs_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:clipToPadding="false"/>
android:clipToPadding="false"
android:padding="12dp"/>
<FrameLayout
android:id="@+id/save_session_button"
android:foreground="?android:attr/selectableItemBackground"
android:background="@drawable/button_background"
android:backgroundTint="@color/photonInk70"
android:layout_width="match_parent"
android:layout_height="36dp"
android:layout_margin="16dp"
android:padding="6dp"
android:background="@drawable/button_background"
android:backgroundTint="@color/save_session_button_color"
android:clickable="true"
android:focusable="true"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:foreground="?android:attr/selectableItemBackground"
android:padding="6dp"
android:visibility="gone">
<TextView
android:id="@+id/save_session_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/session_save"
android:textColor="@color/photonWhite"
android:layout_gravity="center"
android:clickable="false"
android:drawableStart="@drawable/ic_archive"
android:drawablePadding="8dp"
android:textSize="16sp"
android:gravity="center"
android:clickable="false"
android:focusable="false"
android:layout_gravity="center" />
android:gravity="center"
android:textStyle="bold"
android:text="@string/session_save"
android:textColor="@color/photonWhite" />
</FrameLayout>
<FrameLayout
android:id="@+id/delete_session_button"
android:foreground="?android:attr/selectableItemBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="@drawable/button_background"
android:backgroundTint="@color/delete_session_button_background"
android:layout_margin="16dp"
android:padding="6dp"
android:clickable="true"
android:focusable="true"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:foreground="?android:attr/selectableItemBackground"
android:padding="6dp"
android:visibility="gone">
<TextView
android:id="@+id/delete_session_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/session_delete"
android:textColor="@color/color_primary_dark"
android:layout_gravity="center"
android:clickable="false"
android:drawableStart="@drawable/ic_delete"
android:drawablePadding="8dp"
android:textSize="16sp"
android:gravity="center"
android:clickable="false"
android:focusable="false"
android:layout_gravity="center" />
android:textStyle="bold"
android:gravity="center"
android:text="@string/session_delete"
android:textColor="@color/color_primary_dark"
android:textSize="16sp" />
</FrameLayout>
</merge>

@ -2,101 +2,121 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<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"
app:layout_behavior="@string/bottom_sheet_behavior"
<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:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/bottom_sheet_behavior">
<androidx.cardview.widget.CardView
android:id="@+id/current_session_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="10dp"
android:padding="10dp"
android:elevation="5dp"
android:background="?android:attr/colorBackground"
>
android:id="@+id/current_session_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="?android:attr/colorBackground"
android:elevation="5dp"
android:padding="10dp"
app:cardCornerRadius="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/current_session_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:paddingBottom="20dp"
android:src="@drawable/ic_session_thumbnail_placeholder_blue"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:contentDescription="@string/current_session_image"/>
android:id="@+id/current_session_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:contentDescription="@string/current_session_image"
android:paddingBottom="20dp"
android:src="@drawable/ic_session_thumbnail_placeholder_blue"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/current_session_card_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="@string/tabs_header_title"
android:textSize="18sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@id/current_session_image"
/>
android:id="@+id/current_session_card_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="8dp"
android:text="@string/tabs_header_title"
android:textAppearance="@style/headerText"
app:layout_constraintStart_toEndOf="@id/current_session_image"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/current_session_card_tab_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@id/current_session_card_title"
app:layout_constraintStart_toEndOf="@id/current_session_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0"
android:requiresFadingEdge="vertical"
android:fadingEdgeLength="48dp"
tools:text="@tools:sample/lorem/random"
/>
android:id="@+id/current_session_card_tab_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:fadingEdgeLength="48dp"
android:requiresFadingEdge="vertical"
android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="@id/current_session_image"
app:layout_constraintTop_toBottomOf="@id/current_session_card_title"
app:layout_constraintVertical_bias="0"
tools:text="@tools:sample/lorem/random" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/delete_session_button"
android:padding="12dp"
android:text="@string/current_session_delete"
android:textSize="18sp"
android:textColor="@color/photonRed60"
android:background="?android:attr/colorBackground"
android:drawableStart="@drawable/ic_delete"
android:drawablePadding="10dp"
android:drawableTint="@color/photonRed60" tools:targetApi="m"/>
<TextView
android:id="@+id/delete_session_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorBackground"
android:drawableStart="@drawable/ic_delete"
android:drawablePadding="14dp"
android:drawableTint="@color/photonRed60"
android:paddingStart="20dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:text="@string/current_session_delete"
android:textColor="@color/photonRed60"
android:textSize="16sp"
tools:targetApi="m" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/photonGrey30" />
<TextView
android:id="@+id/archive_session_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorBackground"
android:drawableStart="@drawable/ic_archive"
android:drawablePadding="14dp"
android:paddingStart="20dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:text="@string/current_session_save"
android:textColor="@color/light_mode_bottom_sheet_text_color"
android:textSize="16sp" />
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/archive_session_button"
android:padding="12dp"
android:text="@string/current_session_archive"
android:textSize="18sp"
android:background="?android:attr/colorBackground"
android:drawableStart="@drawable/ic_archive"
android:drawablePadding="10dp"/>
<TextView
android:id="@+id/send_and_share_session_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorBackground"
android:drawableStart="@drawable/ic_share"
android:drawablePadding="14dp"
android:drawableTint="@color/icons_light_mode"
android:paddingStart="20dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:text="@string/current_session_share"
android:textColor="@color/light_mode_bottom_sheet_text_color"
android:textSize="16sp" />
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/send_and_share_session_button"
android:padding="12dp"
android:text="@string/current_session_send_and_share"
android:textSize="18sp"
android:background="?android:attr/colorBackground"
android:drawableStart="@drawable/ic_send"
android:drawablePadding="10dp"/>
</LinearLayout>

@ -5,8 +5,7 @@
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/header_text"
android:layout_marginBottom="8dp"
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
android:textColor="?attr/toolbarTextColor"
android:textAppearance="@style/headerText"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>

@ -21,8 +21,8 @@
android:id="@+id/favicon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/favicon_content_description"
android:layout_margin="10dp"
android:contentDescription="@string/favicon_content_description"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
@ -30,12 +30,13 @@
android:id="@+id/text_url"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="?attr/toolbarTextColor"
android:textSize="18sp"
android:layout_marginStart="12dp"
android:layout_marginTop="4dp"
android:layout_marginStart="10dp"
android:ellipsize="none"
android:requiresFadingEdge="horizontal"
android:singleLine="true"
android:textColor="?attr/toolbarTextColor"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="@id/close_tab_button"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="@id/favicon_image"
@ -45,21 +46,22 @@
android:id="@+id/close_tab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:contentDescription="@string/close_tab"
android:paddingStart="12dp"
android:paddingEnd="10dp"
android:src="@drawable/ic_close"
android:layout_marginTop="1dp"
app:layout_constraintTop_toTopOf="@id/text_url"
app:layout_constraintBottom_toBottomOf="@id/text_url"
app:layout_constraintEnd_toEndOf="parent" />
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/text_url" />
<ImageView
android:id="@+id/tab_background"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:focusable="false"
android:adjustViewBounds="false"
android:focusable="false"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
@ -71,9 +73,9 @@
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/session_border"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

@ -8,6 +8,7 @@
<color name="color_accent">#D81B60</color>
<color name="history_delete_button_background">#F2F2F5</color>
<color name="light_mode_text_color">#20123A</color>
<color name="awesome_bar_title_color">#212121</color>
<color name="awesome_bar_description_color">#6b6b6b</color>
@ -22,9 +23,11 @@
<color name="search_text">#0C0C0D</color>
<color name="off_white">#f9f9fa</color>
<color name="url_box_view">#E9E9ED</color>
<color name="session_border_color">@color/photonInk70</color>
<color name="session_border_color">#592ACB</color>
<color name="save_session_button_color">#352F65</color>
<color name="light_mode_bottom_sheet_text_color">#232749</color>
<color name="icons_light_mode">#20233E</color>
<color name="icons_light_mode">#20123A</color>
<color name="disabled_icons_light_mode">#8020233E</color>
<color name="icons_dark_mode">@color/off_white</color>
@ -67,7 +70,7 @@
<color name="library_key_icon">#C13905</color>
<color name="history_header_light_theme">#696A6A</color>
<color name="history_title_light_theme">#000000</color>
<color name="history_title_light_theme">@color/light_mode_text_color</color>
<color name="history_url_light_theme">#696A6A</color>
<color name="history_header_private_theme">@color/photonGrey40</color>

@ -192,10 +192,10 @@
<string name="favicon_content_description">Bookmark</string>
<!-- Button in the current session menu. Deletes the session when pressed -->
<string name="current_session_delete">Delete</string>
<!-- Button in the current session menu. Archives the session when pressed -->
<string name="current_session_archive">Archive</string>
<!-- Button in the current session menu. Saves the session when pressed -->
<string name="current_session_save">Save</string>
<!-- Button in the current session menu. Opens the share menu when pressed -->
<string name="current_session_send_and_share">Send and Share</string>
<string name="current_session_share">Share</string>
<!-- Content description (not visible, for screen readers etc.): Title icon for current session menu -->
<string name="current_session_image">Current session image</string>
<!-- Text for the button to save a session -->

@ -5,7 +5,7 @@
<resources>
<style name="LightThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">@android:color/black</item>
<item name="android:statusBarColor">@color/off_white</item>
<item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
<item name="android:colorPrimary">@color/off_white</item>
<item name="android:windowBackground">@color/off_white</item>
@ -33,9 +33,9 @@
<item name="privateBrowsingButtonBackground">?android:attr/selectableItemBackgroundBorderless</item>
<item name="privateBrowsingButtonTint">@color/off_white</item>
<item name="fenixLogo">@drawable/ic_logo_wordmark</item>
<item name="menuButtonTint">@android:color/black</item>
<item name="menuButtonTint">@color/light_mode_text_color</item>
<item name="toolbarWrapperBackground">@drawable/home_search_background_light</item>
<item name="toolbarTextColor">@color/search_text</item>
<item name="toolbarTextColor">@color/light_mode_text_color</item>
<item name="homeDividerColor">@color/photonGrey30</item>
<item name="sessionBackgroundColor">@color/photonWhite</item>
<item name="sessionBorderColor">@color/session_border_color</item>
@ -141,12 +141,26 @@
<item name="android:background">@drawable/search_pill_background</item>
</style>
<style name="CurrentSessionBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<style name="CurrentSessionBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CurrentSessionBottomSheetStyle</item>
<item name="android:textColor">@color/light_mode_text_color</item>
<!-- This doesn't seem to work see https://issuetracker.google.com/issues/120426520 -->
<item name="scrimBackground">@drawable/session_sheet_background</item>
</style>
<style name="CurrentSessionBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<style name="CurrentSessionBottomSheetStyle" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="android:background">@android:color/transparent</item>
<item name="android:textColor">@android:color/black</item>
<item name="android:textColor">@color/light_mode_text_color</item>
<!-- This doesn't seem to work see https://issuetracker.google.com/issues/120426520 -->
<item name="scrimBackground">@drawable/session_sheet_background</item>
</style>
<style name="headerText" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="android:textSize">18sp</item>
<item name="android:textColor">?attr/toolbarTextColor</item>
<item name="android:textStyle">bold</item>
<item name="android:letterSpacing">0.03</item>
</style>
</resources>

Loading…
Cancel
Save