blallo
/
fenix
1
0
Fork 0
Code Releases Activity

Closes #932 - Home Page UI polish

master
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt
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 {

16
app/src/main/res/drawable/ic_share.xml 100644
View File

File diff suppressed because one or more lines are too long

11
app/src/main/res/drawable/session_sheet_background.xml 100644
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>

74
app/src/main/res/layout/component_tabs.xml
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>

182
app/src/main/res/layout/session_bottom_sheet.xml
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>

3
app/src/main/res/layout/session_list_header.xml
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>

26
app/src/main/res/layout/tab_list_row.xml
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>

9
app/src/main/res/values/colors.xml
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>

6
app/src/main/res/values/strings.xml
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 -->

26
app/src/main/res/values/styles.xml
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>