Skip to content

Commit

Permalink
Closes mozilla-mobile#932 - Home Page UI polish
Browse files Browse the repository at this point in the history
  • Loading branch information
@ekager
ekager committed Mar 21, 2019
1 parent 5e96b20 commit 8c93b91
Show file tree
Hide file tree
Showing 10 changed files with 214 additions and 145 deletions.
6 changes: 4 additions & 2 deletions app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand Down
16 changes: 16 additions & 0 deletions app/src/main/res/drawable/ic_share.xml
View file
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions app/src/main/res/drawable/session_sheet_background.xml
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 38 additions & 36 deletions app/src/main/res/layout/component_tabs.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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 changes: 101 additions & 81 deletions app/src/main/res/layout/session_bottom_sheet.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading

0 comments on commit 8c93b91

Please sign in to comment.