Skip to content

Commit 0f0895a

Browse files
fmasalhaboek
fmasalha
authored and
boek
committed
Bug 2021398 - Refined s2s gradient r=boek
Pull request: #100
1 parent 0b32832 commit 0f0895a

5 files changed

Lines changed: 119 additions & 284 deletions

File tree

‎mobile/android/android-components/components/feature/summarize/src/main/java/mozilla/components/feature/summarize/SummarizationScreen.kt‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ import androidx.compose.ui.draw.clip
3131
import androidx.compose.ui.graphics.Color
3232
import androidx.compose.ui.input.nestedscroll.nestedScroll
3333
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
34-
import androidx.compose.ui.tooling.preview.Preview
3534
import androidx.compose.ui.tooling.preview.PreviewParameter
3635
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
3736
import androidx.compose.ui.unit.dp
3837
import androidx.lifecycle.compose.collectAsStateWithLifecycle
38+
import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
3939
import mozilla.components.compose.base.modifier.thenConditional
4040
import mozilla.components.compose.base.theme.AcornTheme
4141
import mozilla.components.feature.summarize.ui.DownloadError
@@ -111,7 +111,9 @@ private fun SummarizationScreen(
111111
},
112112
)
113113
}
114-
is SummarizationState.Summarizing -> SummarizingContent()
114+
is SummarizationState.Summarizing -> SummarizingContent(
115+
modifier = Modifier.height(252.dp),
116+
)
115117
is SummarizationState.Summarized -> SummarizedContent(
116118
text = state.text,
117119
modifier = Modifier.verticalScroll(rememberScrollState())
@@ -194,16 +196,18 @@ private class SummarizationStatePreviewProvider : PreviewParameterProvider<Summa
194196
)
195197
}
196198

197-
@Preview
199+
@FlexibleWindowLightDarkPreview
198200
@Composable
199201
private fun SummarizationScreenPreview(
200202
@PreviewParameter(SummarizationStatePreviewProvider::class) state: SummarizationState,
201203
) {
202-
SummarizationScreen(
203-
store = SummarizationStore(
204-
initialState = state,
205-
reducer = ::summarizationReducer,
206-
middleware = listOf(),
207-
),
208-
)
204+
AcornTheme {
205+
SummarizationScreen(
206+
store = SummarizationStore(
207+
initialState = state,
208+
reducer = ::summarizationReducer,
209+
middleware = listOf(),
210+
),
211+
)
212+
}
209213
}

‎mobile/android/android-components/components/feature/summarize/src/main/java/mozilla/components/feature/summarize/ui/SummarizingContent.kt‎

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,68 +5,115 @@
55
package mozilla.components.feature.summarize.ui
66

77
import androidx.compose.foundation.background
8+
import androidx.compose.foundation.isSystemInDarkTheme
9+
import androidx.compose.foundation.layout.Arrangement
810
import androidx.compose.foundation.layout.Box
11+
import androidx.compose.foundation.layout.Column
912
import androidx.compose.foundation.layout.fillMaxSize
1013
import androidx.compose.foundation.layout.fillMaxWidth
1114
import androidx.compose.foundation.layout.height
1215
import androidx.compose.foundation.layout.padding
16+
import androidx.compose.foundation.layout.requiredHeight
17+
import androidx.compose.foundation.layout.requiredSize
18+
import androidx.compose.foundation.layout.size
1319
import androidx.compose.foundation.shape.RoundedCornerShape
20+
import androidx.compose.material3.Icon
1421
import androidx.compose.material3.MaterialTheme
1522
import androidx.compose.material3.Surface
1623
import androidx.compose.material3.Text
1724
import androidx.compose.runtime.Composable
1825
import androidx.compose.ui.Alignment
1926
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.res.painterResource
2028
import androidx.compose.ui.res.stringResource
2129
import androidx.compose.ui.text.font.FontWeight
2230
import androidx.compose.ui.text.style.TextAlign
23-
import androidx.compose.ui.tooling.preview.Preview
2431
import androidx.compose.ui.unit.dp
2532
import androidx.compose.ui.unit.sp
33+
import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
34+
import mozilla.components.compose.base.theme.AcornTheme
2635
import mozilla.components.feature.summarize.R
36+
import mozilla.components.feature.summarize.ui.gradient.summaryLoadingGradient
37+
import mozilla.components.ui.icons.R as iconsR
38+
39+
private const val DRAG_HANDLE_CORNER_RATIO = 50
2740

2841
/**
2942
* Content shown while a page summary is being generated.
30-
* Displays the animated gradient background with centered loading text.
43+
* Displays a Firefox logo icon and loading text over the animated gradient background.
3144
*/
3245
@Composable
3346
internal fun SummarizingContent(
47+
modifier: Modifier = Modifier,
3448
title: String = stringResource(R.string.mozac_feature_summarize_loading_title),
3549
) {
36-
Box(
37-
contentAlignment = Alignment.Center,
50+
Column(
51+
modifier = modifier
52+
.fillMaxWidth()
53+
.padding(top = 80.dp),
54+
horizontalAlignment = Alignment.CenterHorizontally,
55+
verticalArrangement = Arrangement.spacedBy(10.dp),
3856
) {
57+
val contentColor = if (isSystemInDarkTheme()) {
58+
MaterialTheme.colorScheme.onSurface
59+
} else {
60+
MaterialTheme.colorScheme.onPrimary
61+
}
62+
63+
Icon(
64+
painter = painterResource(id = iconsR.drawable.mozac_ic_logo_firefox_24),
65+
contentDescription = null,
66+
modifier = Modifier.size(48.dp),
67+
tint = contentColor,
68+
)
69+
3970
Text(
4071
text = title,
41-
modifier = Modifier
42-
.fillMaxWidth()
43-
.padding(horizontal = 16.dp),
4472
textAlign = TextAlign.Center,
45-
color = MaterialTheme.colorScheme.onSurface,
46-
fontSize = 20.sp,
47-
fontWeight = FontWeight.Medium,
48-
lineHeight = 24.sp,
49-
letterSpacing = 0.15.sp,
73+
color = contentColor.copy(alpha = 0.5f),
74+
fontSize = 16.sp,
75+
fontWeight = FontWeight.SemiBold,
76+
lineHeight = 21.sp,
77+
letterSpacing = (-0.31).sp,
5078
)
5179
}
5280
}
5381

54-
@Preview(showBackground = true, heightDp = 800)
82+
@FlexibleWindowLightDarkPreview
5583
@Composable
5684
private fun SummarizingContentPreview() {
57-
Box(
58-
modifier = Modifier
59-
.fillMaxSize()
60-
.background(MaterialTheme.colorScheme.surfaceVariant),
61-
contentAlignment = Alignment.BottomCenter,
62-
) {
63-
Surface(
85+
AcornTheme {
86+
Box(
6487
modifier = Modifier
65-
.fillMaxWidth()
66-
.height(400.dp),
67-
shape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
88+
.fillMaxSize()
89+
.background(MaterialTheme.colorScheme.surfaceVariant),
90+
contentAlignment = Alignment.BottomCenter,
6891
) {
69-
SummarizingContent()
92+
Surface(
93+
modifier = Modifier
94+
.fillMaxWidth()
95+
.height(336.dp),
96+
shape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
97+
) {
98+
Box(modifier = Modifier.fillMaxSize().summaryLoadingGradient()) {
99+
Column(modifier = Modifier.fillMaxWidth()) {
100+
Box(
101+
modifier = Modifier.fillMaxWidth().requiredHeight(36.dp),
102+
contentAlignment = Alignment.Center,
103+
) {
104+
Box(
105+
modifier = Modifier
106+
.requiredSize(width = 32.dp, height = 4.dp)
107+
.background(
108+
color = MaterialTheme.colorScheme.outline,
109+
shape = RoundedCornerShape(DRAG_HANDLE_CORNER_RATIO),
110+
),
111+
)
112+
}
113+
SummarizingContent()
114+
}
115+
}
116+
}
70117
}
71118
}
72119
}

0 commit comments

Comments
 (0)