Closes #932 - Home Page UI polish

This commit is contained in:
Emily Kager 2019-03-20 17:26:13 -07:00 committed by Colin Lee
parent 92d4a11e14
commit bb3ebbdbe2
10 changed files with 214 additions and 145 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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" />
<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"/>
<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: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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 -->

View File

@ -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>