@@ -18,20 +18,24 @@ import androidx.compose.foundation.layout.fillMaxSize
18
18
import androidx.compose.foundation.layout.fillMaxWidth
19
19
import androidx.compose.foundation.layout.padding
20
20
import androidx.compose.foundation.lazy.LazyColumn
21
- import androidx.compose.material.Button
22
- import androidx.compose.material.ExperimentalMaterialApi
23
- import androidx.compose.material.MaterialTheme
24
- import androidx.compose.material.Scaffold
25
- import androidx.compose.material.Text
26
- import androidx.compose.material.pullrefresh.PullRefreshIndicator
27
- import androidx.compose.material.pullrefresh.pullRefresh
28
- import androidx.compose.material.pullrefresh.rememberPullRefreshState
21
+ import androidx.compose.material.icons.Icons
22
+ import androidx.compose.material.icons.automirrored.filled.ArrowBack
23
+ import androidx.compose.material3.Button
29
24
import androidx.compose.material3.CircularProgressIndicator
25
+ import androidx.compose.material3.ExperimentalMaterial3Api
26
+ import androidx.compose.material3.Icon
27
+ import androidx.compose.material3.IconButton
28
+ import androidx.compose.material3.MaterialTheme
29
+ import androidx.compose.material3.PrimaryTabRow
30
+ import androidx.compose.material3.Scaffold
30
31
import androidx.compose.material3.Surface
31
32
import androidx.compose.material3.Tab
32
- import androidx.compose.material3.TabRow
33
33
import androidx.compose.material3.TabRowDefaults
34
- import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
34
+ import androidx.compose.material3.Text
35
+ import androidx.compose.material3.TopAppBar
36
+ import androidx.compose.material3.pulltorefresh.PullToRefreshBox
37
+ import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
38
+ import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
35
39
import androidx.compose.runtime.Composable
36
40
import androidx.compose.runtime.LaunchedEffect
37
41
import androidx.compose.runtime.getValue
@@ -41,6 +45,7 @@ import androidx.compose.runtime.setValue
41
45
import androidx.compose.ui.Alignment
42
46
import androidx.compose.ui.Modifier
43
47
import androidx.compose.ui.res.stringResource
48
+ import androidx.compose.ui.text.font.FontWeight
44
49
import androidx.compose.ui.text.style.TextAlign
45
50
import androidx.compose.ui.text.style.TextOverflow
46
51
import androidx.compose.ui.unit.dp
@@ -51,9 +56,7 @@ import org.wordpress.android.R
51
56
import org.wordpress.android.WordPress
52
57
import org.wordpress.android.fluxc.model.SiteModel
53
58
import org.wordpress.android.ui.WPWebViewActivity
54
- import org.wordpress.android.ui.compose.components.MainTopAppBar
55
- import org.wordpress.android.ui.compose.components.NavigationIcons
56
- import org.wordpress.android.ui.compose.theme.AppThemeM2
59
+ import org.wordpress.android.ui.compose.theme.AppThemeM3
57
60
import org.wordpress.android.ui.compose.utils.uiStringText
58
61
import org.wordpress.android.util.extensions.getSerializableExtraCompat
59
62
import javax.inject.Inject
@@ -114,8 +117,9 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
114
117
siteMonitorParentViewModel.start(getSite())
115
118
currentSelectItemId = getInitialTab()
116
119
}
120
+
117
121
setContent {
118
- AppThemeM2 {
122
+ AppThemeM3 {
119
123
Surface (
120
124
modifier = Modifier .fillMaxSize(),
121
125
) {
@@ -145,64 +149,65 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
145
149
}
146
150
}
147
151
148
- companion object {
149
- const val ARG_SITE_MONITOR_TYPE_KEY = " ARG_SITE_MONITOR_TYPE_KEY"
150
- const val SAVED_STATE_CONTAINER_KEY = " ContainerKey"
151
- const val SAVED_STATE_CURRENT_TAB_KEY = " CurrentTabKey"
152
- }
153
-
152
+ @OptIn(ExperimentalMaterial3Api ::class )
154
153
@Composable
155
- @SuppressLint(" UnusedMaterialScaffoldPaddingParameter" )
156
- fun SiteMonitorScreen (initialTab : Int , modifier : Modifier = Modifier ) {
154
+ fun SiteMonitorScreen (initialTab : Int ) {
157
155
Scaffold (
158
156
topBar = {
159
- MainTopAppBar (
160
- title = stringResource(id = R .string.site_monitoring),
161
- navigationIcon = NavigationIcons .BackIcon ,
162
- onNavigationIconClick = onBackPressedDispatcher::onBackPressed,
157
+ TopAppBar (
158
+ title = {
159
+ Text (
160
+ text = stringResource(id = R .string.site_monitoring)
161
+ )
162
+ },
163
+ navigationIcon = {
164
+ IconButton (onClick = onBackPressedDispatcher::onBackPressed) {
165
+ Icon (
166
+ Icons .AutoMirrored .Filled .ArrowBack ,
167
+ stringResource(R .string.back)
168
+ )
169
+ }
170
+ },
163
171
)
164
172
},
165
- content = {
166
- SiteMonitorHeader (initialTab, modifier = modifier)
167
- }
168
- )
173
+ ) { contentPadding ->
174
+ SiteMonitorHeader (initialTab, modifier = Modifier .padding(contentPadding))
175
+ }
169
176
}
170
177
178
+ @OptIn(ExperimentalMaterial3Api ::class )
171
179
@Composable
172
180
@SuppressLint(" UnusedMaterialScaffoldPaddingParameter" )
173
181
fun SiteMonitorHeader (initialTab : Int , modifier : Modifier = Modifier ) {
174
182
var tabIndex by remember { mutableIntStateOf(initialTab) }
175
-
176
183
val tabs = SiteMonitorTabItem .entries
177
184
178
185
LaunchedEffect (true ) {
179
186
siteMonitorUtils.trackTabLoaded(tabs[initialTab].siteMonitorType)
180
187
}
181
188
182
189
Column (modifier = modifier.fillMaxWidth()) {
183
- TabRow (
190
+ PrimaryTabRow (
184
191
selectedTabIndex = tabIndex,
185
- containerColor = MaterialTheme .colors.surface,
186
- contentColor = MaterialTheme .colors.onSurface,
187
- indicator = { tabPositions ->
188
- // Customizing the indicator color and style
192
+ containerColor = MaterialTheme .colorScheme.surface,
193
+ contentColor = MaterialTheme .colorScheme.onSurface,
194
+ indicator = {
189
195
TabRowDefaults .SecondaryIndicator (
190
- Modifier .tabIndicatorOffset(tabPositions[tabIndex]) ,
191
- color = MaterialTheme .colors.onSurface ,
192
- height = 2.0 .dp
196
+ color = MaterialTheme .colorScheme.onSurface ,
197
+ height = 2.0 .dp ,
198
+ modifier = Modifier .tabIndicatorOffset(tabIndex)
193
199
)
194
200
}
195
201
) {
196
202
tabs.forEachIndexed { index, item ->
197
203
Tab (
198
204
text = {
199
- Column (horizontalAlignment = Alignment .CenterHorizontally ) {
200
- Text (
201
- text = stringResource(item.title).uppercase(),
202
- maxLines = 1 ,
203
- overflow = TextOverflow .Ellipsis
204
- )
205
- }
205
+ Text (
206
+ text = stringResource(item.title).uppercase(),
207
+ maxLines = 1 ,
208
+ overflow = TextOverflow .Ellipsis ,
209
+ fontWeight = FontWeight .Normal
210
+ )
206
211
},
207
212
selected = tabIndex == index,
208
213
onClick = {
@@ -226,11 +231,14 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
226
231
siteMonitorParentViewModel.getUiState(tabType)
227
232
}
228
233
when (uiState) {
229
- is SiteMonitorUiState .Preparing -> LoadingState (modifier)
234
+ is SiteMonitorUiState .Preparing ->
235
+ LoadingState (modifier)
236
+
230
237
is SiteMonitorUiState .Prepared , is SiteMonitorUiState .Loaded ->
231
238
SiteMonitorWebViewContent (uiState, tabType, modifier)
232
239
233
- is SiteMonitorUiState .Error -> SiteMonitorError (uiState as SiteMonitorUiState .Error , modifier)
240
+ is SiteMonitorUiState .Error ->
241
+ SiteMonitorError (uiState as SiteMonitorUiState .Error , modifier)
234
242
}
235
243
}
236
244
@@ -241,7 +249,7 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
241
249
modifier = modifier.fillMaxSize()
242
250
) {
243
251
CircularProgressIndicator (
244
- color = MaterialTheme .colors .onSurface
252
+ color = MaterialTheme .colorScheme .onSurface
245
253
)
246
254
}
247
255
}
@@ -256,14 +264,14 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
256
264
.fillMaxWidth()
257
265
.fillMaxHeight(),
258
266
) {
259
- androidx.compose.material. Text (
267
+ Text (
260
268
text = uiStringText(uiString = error.title),
261
- style = androidx.compose.material. MaterialTheme .typography.h5 ,
269
+ style = MaterialTheme .typography.headlineSmall ,
262
270
textAlign = TextAlign .Center
263
271
)
264
- androidx.compose.material. Text (
272
+ Text (
265
273
text = uiStringText(uiString = error.description),
266
- style = androidx.compose.material. MaterialTheme .typography.body1 ,
274
+ style = MaterialTheme .typography.bodyLarge ,
267
275
textAlign = TextAlign .Center ,
268
276
modifier = Modifier .padding(top = 8 .dp)
269
277
)
@@ -285,43 +293,54 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
285
293
tabType : SiteMonitorType ,
286
294
modifier : Modifier = Modifier
287
295
) {
288
- // retrieve the webview from the actvity
289
296
val webView = when (tabType) {
290
297
SiteMonitorType .METRICS -> metricsWebView
291
298
SiteMonitorType .PHP_LOGS -> phpLogsWebView
292
299
SiteMonitorType .WEB_SERVER_LOGS -> webServerLogsWebView
293
300
}
294
301
295
- when (uiState) {
302
+ when (uiState) {
296
303
is SiteMonitorUiState .Prepared -> {
297
304
webView.postUrl(WPWebViewActivity .WPCOM_LOGIN_URL , uiState.model.addressToLoad.toByteArray())
298
305
LoadingState ()
299
306
}
307
+
300
308
is SiteMonitorUiState .Loaded -> {
301
309
SiteMonitorWebView (webView, tabType, modifier)
302
310
}
311
+
303
312
else -> {}
304
313
}
305
314
}
306
315
307
- @OptIn(ExperimentalMaterialApi ::class )
316
+ @OptIn(ExperimentalMaterial3Api ::class )
308
317
@Composable
309
- private fun SiteMonitorWebView (tabWebView : WebView , tabType : SiteMonitorType , modifier : Modifier = Modifier ) {
318
+ private fun SiteMonitorWebView (
319
+ tabWebView : WebView ,
320
+ tabType : SiteMonitorType ,
321
+ modifier : Modifier = Modifier
322
+ ) {
310
323
// the webview is retrieved from the activity, so we need to use a mutable variable
311
324
// to assign to android view
312
325
var webView = tabWebView
313
326
314
327
val refreshState = siteMonitorParentViewModel.getRefreshState(tabType)
328
+ val pullToRefreshState = rememberPullToRefreshState()
315
329
316
- val pullRefreshState = rememberPullRefreshState(
317
- refreshing = refreshState.value,
318
- onRefresh = { siteMonitorParentViewModel.refreshData(tabType) }
319
- )
320
-
321
- Box (
330
+ PullToRefreshBox (
322
331
modifier = modifier
323
- .fillMaxSize()
324
- .pullRefresh(pullRefreshState)
332
+ .fillMaxSize(),
333
+ isRefreshing = refreshState.value,
334
+ state = pullToRefreshState,
335
+ onRefresh = { siteMonitorParentViewModel.refreshData(tabType) },
336
+ indicator = {
337
+ PullToRefreshDefaults .Indicator (
338
+ state = pullToRefreshState,
339
+ isRefreshing = refreshState.value,
340
+ color = MaterialTheme .colorScheme.secondary,
341
+ modifier = Modifier .align(Alignment .TopCenter ),
342
+ )
343
+ }
325
344
) {
326
345
LazyColumn (modifier = Modifier .fillMaxHeight()) {
327
346
item {
@@ -332,12 +351,6 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
332
351
)
333
352
}
334
353
}
335
- PullRefreshIndicator (
336
- refreshing = refreshState.value,
337
- state = pullRefreshState,
338
- modifier = Modifier .align(Alignment .TopCenter ),
339
- contentColor = MaterialTheme .colors.primaryVariant,
340
- )
341
354
}
342
355
}
343
356
@@ -355,4 +368,10 @@ class SiteMonitorParentActivity : AppCompatActivity(), SiteMonitorWebViewClient.
355
368
siteMonitorParentViewModel.onWebViewError(tabType)
356
369
siteMonitorUtils.trackTabLoadingError(tabType)
357
370
}
371
+
372
+ companion object {
373
+ const val ARG_SITE_MONITOR_TYPE_KEY = " ARG_SITE_MONITOR_TYPE_KEY"
374
+ const val SAVED_STATE_CONTAINER_KEY = " ContainerKey"
375
+ const val SAVED_STATE_CURRENT_TAB_KEY = " CurrentTabKey"
376
+ }
358
377
}
0 commit comments