fixup! [android] Modify UI/UX (30553369) · Commits · The Tor Project / Applications / Tor Browser

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

+17 −11

Original line number	Diff line number	Diff line
		@@ -173,6 +173,9 @@ import org.mozilla.fenix.utils.showAddSearchWidgetPromptIfSupported
		import org.mozilla.fenix.wallpapers.Wallpaper
		import java.lang.ref.WeakReference

		import org.mozilla.fenix.components.toolbar.ToolbarPosition
		import org.mozilla.fenix.tor.TorHomePage

		@Suppress("TooManyFunctions", "LargeClass")
		class HomeFragment : Fragment() {
		private val args by navArgs<HomeFragmentArgs>()
		@@ -309,16 +312,6 @@ class HomeFragment : Fragment() {
		orientation = requireContext().resources.configuration.orientation,
		)

		// Splits by full stops or commas and puts the parts in different lines.
		// Ignoring separators at the end of the string, it is expected
		// that there are at most two parts (e.g. "Explore. Privately.").
		val localBinding = binding
		binding.exploreprivately.text = localBinding
		.exploreprivately
		.text
		?.replace(" ([.,。।]) ".toRegex(), "$1\n")
		?.trim()

		lifecycleScope.launch(IO) {
		val settings = requireContext().settings()
		val showStories = settings.showPocketRecommendationsFeature
		@@ -594,7 +587,9 @@ class HomeFragment : Fragment() {
		listenForMicrosurveyMessage(requireContext())
		}

		initComposeHomepage()
		binding.torHomepageView.setContent {
		initComposeTorHomePageView()
		}

		disableAppBarDragging()

		@@ -966,6 +961,17 @@ class HomeFragment : Fragment() {
		)
		}

		private fun initComposeTorHomePageView() {
		binding.torHomepageView.apply {
		setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
		setContent {
		TorHomePage(
		toolBarAtTop = settings().toolbarPosition == ToolbarPosition.TOP
		)
		}
		}
		}

		private fun initComposeHomepage() {
		binding.homeAppBarContent.isVisible = false

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tor/TorHomePage.kt

0 → 100644

+111 −0

Original line number	Diff line number	Diff line
		package org.mozilla.fenix.tor

		import androidx.compose.foundation.Image
		import androidx.compose.foundation.layout.Column
		import androidx.compose.foundation.layout.Row
		import androidx.compose.foundation.layout.Spacer
		import androidx.compose.foundation.layout.fillMaxSize
		import androidx.compose.foundation.layout.fillMaxWidth
		import androidx.compose.foundation.layout.padding
		import androidx.compose.foundation.layout.size
		import androidx.compose.foundation.rememberScrollState
		import androidx.compose.foundation.verticalScroll
		import androidx.compose.material.Text
		import androidx.compose.runtime.Composable
		import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.draw.paint
		import androidx.compose.ui.geometry.Offset
		import androidx.compose.ui.graphics.Brush
		import androidx.compose.ui.graphics.Color
		import androidx.compose.ui.graphics.painter.BrushPainter
		import androidx.compose.ui.res.colorResource
		import androidx.compose.ui.res.dimensionResource
		import androidx.compose.ui.res.painterResource
		import androidx.compose.ui.res.stringResource
		import androidx.compose.ui.text.TextStyle
		import androidx.compose.ui.text.font.FontWeight
		import androidx.compose.ui.text.style.TextAlign
		import androidx.compose.ui.unit.dp
		import androidx.compose.ui.unit.sp
		import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
		import org.mozilla.fenix.R

		@Composable
		@FlexibleWindowLightDarkPreview
		fun TorHomePage(
		toolBarAtTop: Boolean = true,
		) {
		Column(
		modifier = Modifier
		.fillMaxSize()
		.padding(
		top = if (toolBarAtTop) dimensionResource(R.dimen.tab_strip_height) else 0.dp,
		bottom = if (!toolBarAtTop) dimensionResource(R.dimen.tab_strip_height) else 0.dp,
		)
		.paint(
		BrushPainter(
		Brush.linearGradient(
		colors = listOf(
		colorResource(R.color.tor_homepage_gradient_start),
		colorResource(R.color.tor_homepage_gradient_middle),
		colorResource(R.color.tor_homepage_gradient_end),
		),
		start = Offset(0f, Float.POSITIVE_INFINITY),
		end = Offset(Float.POSITIVE_INFINITY, 0f),
		),
		),
		)
		.padding(
		start = 19.dp,
		end = 19.dp,
		)
		.verticalScroll(rememberScrollState()),
		) {
		Spacer(modifier = Modifier.size(17.dp))
		Row(
		modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically,
		) {
		Image(
		painter = painterResource(R.drawable.tor_browser_app_icon),
		contentDescription = null,
		Modifier.size(35.dp),
		)
		Spacer(modifier = Modifier.size(6.dp))
		Text(
		text = stringResource(R.string.app_name),
		style = TextStyle(
		fontSize = 20.sp,
		color = Color(0xDEFFFFFF),
		fontWeight = FontWeight.Bold,
		),
		)
		}
		Spacer(Modifier.weight(1f))
		Text(
		// Moved from the commit 5bb3cc6b93346dabd8d46677fae7f86a8f8a4fc2
		// "[android] Modify UI/UX", and the file HomeFragment.
		// Splits by full stops or commas and puts the parts in different lines.
		// Ignoring separators at the end of the string, it is expected
		// that there are at most two parts (e.g. "Explore. Privately.").
		text = stringResource(R.string.tor_explore_privately).replace(
		" ([.,。।]) ".toRegex(),
		"$1\n",
		).trim(),
		style = TextStyle(
		color = Color(color = 0xDEFFFFFF),
		fontSize = 40.sp,
		textAlign = TextAlign.Start,
		),
		modifier = Modifier.align(Alignment.CenterHorizontally),
		)
		Spacer(Modifier.weight(1f))
		Image(
		painter = painterResource(
		id = R.drawable.ic_onion_pattern,
		),
		contentDescription = null, Modifier.fillMaxWidth(),
		)
		}
		Spacer(modifier = Modifier.size(17.dp))
		}

mobile/android/fenix/app/src/main/res/layout/fragment_home.xml

+3 −87

Original line number	Diff line number	Diff line
		@@ -34,86 +34,8 @@
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		app:layout_scrollFlags="scroll">

		<androidx.constraintlayout.widget.ConstraintLayout
		android:id="@+id/wordmark"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginStart="16dp"
		android:layout_marginTop="18dp"
		android:layout_marginBottom="32dp"
		android:clickable="false"
		android:focusable="false"
		android:orientation="horizontal"
		app:srcCompat="@mipmap/ic_launcher_foreground"
		app:layout_collapseMode="parallax"
		android:contentDescription="@string/app_name"
		app:layout_collapseParallaxMultiplier=".1">

		<ImageView
		android:id="@+id/wordmarkLogo"
		android:layout_width="wrap_content"
		android:layout_height="match_parent"
		android:layout_marginEnd="10.dp"
		android:adjustViewBounds="true"
		app:srcCompat="?fenixWordmarkLogo"
		android:contentDescription="@null"
		tools:ignore="ImageContrastCheck" />

		<!--
		tor-browser#42590
		<ImageView
		android:id="@+id/wordmarkText"
		android:layout_width="wrap_content"
		android:layout_height="@dimen/wordmark_text_height"
		android:adjustViewBounds="true"
		android:contentDescription="@null"
		android:layout_marginTop="@dimen/wordmark_text_margin_top"
		app:srcCompat="?fenixWordmarkText" />
		-->

		<TextView
		android:id="@+id/app_name"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:clickable="false"
		android:focusable="false"
		android:fontFamily="Roboto-Medium"
		android:gravity="start"
		android:importantForAccessibility="no"
		android:maxLines="2"
		android:paddingStart="16dp"
		android:paddingEnd="16dp"
		android:text="@string/app_name"
		android:textColor="#DEFFFFFF"
		android:textSize="20sp"
		app:layout_constrainedWidth="true"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toEndOf="@id/wordmarkLogo"
		app:layout_constraintTop_toTopOf="parent" />

		</androidx.constraintlayout.widget.ConstraintLayout>

		</com.google.android.material.appbar.CollapsingToolbarLayout>

		<TextView
		android:id="@+id/exploreprivately"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center\|center_vertical"
		android:gravity="center_horizontal"
		android:clickable="false"
		android:ellipsize="end"
		android:focusable="false"
		android:importantForAccessibility="no"
		android:text="@string/tor_explore_privately"
		android:fontFamily="Roboto-Medium"
		android:textColor="#DEFFFFFF"
		android:textSize="40sp"
		android:lineSpacingMultiplier="1.1"
		app:layout_scrollFlags="scroll" />

		</com.google.android.material.appbar.AppBarLayout>

		<androidx.compose.ui.platform.ComposeView
		@@ -122,16 +44,10 @@
		android:layout_height="match_parent"
		app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

		<ImageView
		android:id="@+id/onion_pattern_image"
		<androidx.compose.ui.platform.ComposeView
		android:id="@+id/torHomepageView"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_gravity="bottom"
		app:srcCompat="@drawable/ic_onion_pattern"
		tools:ignore="ContentDescription"
		app:layout_constraintBottom_toTopOf="@id/toolbarLayout"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent" />
		android:layout_height="match_parent" />

		<ViewStub
		android:id="@+id/toolbarLayoutStub"

mobile/android/fenix/app/src/main/res/values/colors.xml

+5 −0

Original line number	Diff line number	Diff line
		@@ -477,6 +477,11 @@
		<!-- Private Mode mask icon circle fill colors -->
		<color name="mozac_ui_private_mode_circle_fill" tools:ignore="UnusedResources">@color/photonPurple60</color>

		<!-- TorHomepage gradient colors -->
		<color name="tor_homepage_gradient_start">#7529A7</color>
		<color name="tor_homepage_gradient_middle">#492E85</color>
		<color name="tor_homepage_gradient_end">#383372</color>

		<!-- Account Sync Avatar fill colors -->
		<color name="mozac_ui_avatar_warning_bg_fill_critical" tools:ignore="UnusedResources">@color/fx_mobile_icon_color_secondary</color>
		<color name="mozac_ui_avatar_warning_fill_critical" tools:ignore="UnusedResources">@color/fx_mobile_icon_color_critical</color>