Skip to content

Commit a9ff347

Browse files
EmogurovAntonEmogurovAnton
committed
feature: about app screen redesign
1 parent 1d1b974 commit a9ff347

2 files changed

Lines changed: 84 additions & 71 deletions

File tree

‎plugins/plugin-about-app/src/main/kotlin/com/redmadrobot/debug/plugin/aboutapp/ui/AboutAppScreen.kt‎

Lines changed: 81 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,125 @@
11
package com.redmadrobot.debug.plugin.aboutapp.ui
22

3+
import android.content.ClipData
4+
import androidx.compose.foundation.clickable
35
import androidx.compose.foundation.layout.Arrangement
4-
import androidx.compose.foundation.layout.Column
56
import androidx.compose.foundation.layout.PaddingValues
6-
import androidx.compose.foundation.layout.defaultMinSize
7+
import androidx.compose.foundation.layout.Row
78
import androidx.compose.foundation.layout.fillMaxSize
89
import androidx.compose.foundation.layout.fillMaxWidth
910
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.layout.systemBarsPadding
1012
import androidx.compose.foundation.lazy.LazyColumn
1113
import androidx.compose.foundation.lazy.items
12-
import androidx.compose.material.Card
13-
import androidx.compose.material.MaterialTheme
14-
import androidx.compose.material.Text
14+
import androidx.compose.material3.Scaffold
15+
import androidx.compose.material3.SnackbarHost
16+
import androidx.compose.material3.SnackbarHostState
17+
import androidx.compose.material3.Text
1518
import androidx.compose.runtime.Composable
1619
import androidx.compose.runtime.collectAsState
1720
import androidx.compose.runtime.getValue
1821
import androidx.compose.runtime.remember
22+
import androidx.compose.runtime.rememberCoroutineScope
23+
import androidx.compose.ui.Alignment
1924
import androidx.compose.ui.Modifier
20-
import androidx.compose.ui.text.font.FontWeight
25+
import androidx.compose.ui.draw.clip
26+
import androidx.compose.ui.platform.ClipEntry
27+
import androidx.compose.ui.platform.Clipboard
28+
import androidx.compose.ui.platform.LocalClipboard
29+
import androidx.compose.ui.res.stringResource
2130
import androidx.compose.ui.text.style.TextOverflow
22-
import androidx.compose.ui.tooling.preview.Preview
2331
import androidx.compose.ui.unit.dp
2432
import com.redmadrobot.debug.core.extension.getPlugin
2533
import com.redmadrobot.debug.core.extension.provideViewModel
2634
import com.redmadrobot.debug.plugin.aboutapp.AboutAppPlugin
2735
import com.redmadrobot.debug.plugin.aboutapp.AboutAppPluginContainer
36+
import com.redmadrobot.debug.plugin.aboutapp.R
2837
import com.redmadrobot.debug.plugin.aboutapp.model.AboutAppInfo
38+
import com.redmadrobot.debug.uikit.theme.DebugPanelShapes
39+
import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
40+
import kotlinx.coroutines.launch
2941

3042
@Composable
3143
internal fun AboutAppScreen(
3244
viewModel: AboutAppViewModel = provideViewModel {
3345
getPlugin<AboutAppPlugin>()
3446
.getContainer<AboutAppPluginContainer>()
3547
.createAboutAppViewModel()
36-
}
48+
},
3749
) {
3850
val state by viewModel.state.collectAsState()
51+
val snackbarHostState = remember { SnackbarHostState() }
52+
val scope = rememberCoroutineScope()
53+
val clipboard = LocalClipboard.current
3954

40-
AboutAppLayout(state = state)
41-
}
42-
43-
@Composable
44-
private fun AboutAppLayout(state: AboutAppViewState) {
45-
LazyColumn(
46-
modifier = Modifier.fillMaxSize(),
47-
verticalArrangement = Arrangement.spacedBy(space = 8.dp),
48-
contentPadding = PaddingValues(all = 16.dp),
49-
) {
50-
items(items = state.appInfoList, key = { it.id }) { item ->
51-
AboutAppItem(item = item)
55+
Scaffold(
56+
containerColor = DebugPanelTheme.colors.background.primary,
57+
snackbarHost = {
58+
SnackbarHost(
59+
modifier = Modifier.systemBarsPadding(),
60+
hostState = snackbarHostState
61+
)
62+
},
63+
) { paddingValues ->
64+
LazyColumn(
65+
modifier = Modifier
66+
.fillMaxSize()
67+
.padding(paddingValues = paddingValues),
68+
contentPadding = PaddingValues(vertical = 8.dp),
69+
) {
70+
items(items = state.appInfoList, key = { it.id }) { item ->
71+
InfoRow(
72+
label = item.title,
73+
value = item.value,
74+
onClick = { message ->
75+
scope.launch {
76+
copyToClipboard(clipboard = clipboard, item = item)
77+
val message = message.format(item.title)
78+
snackbarHostState.showSnackbar(message = message)
79+
}
80+
},
81+
)
82+
}
5283
}
5384
}
5485
}
5586

5687
@Composable
57-
private fun AboutAppItem(item: AboutAppInfo, modifier: Modifier = Modifier) {
58-
Card(
88+
private fun InfoRow(
89+
label: String,
90+
value: String,
91+
onClick: (String) -> Unit,
92+
modifier: Modifier = Modifier
93+
) {
94+
val copiedMessage = stringResource(id = R.string.about_app_copied)
95+
96+
Row(
5997
modifier = modifier
6098
.fillMaxWidth()
61-
.defaultMinSize(minHeight = 56.dp),
62-
elevation = 4.dp
99+
.clip(shape = DebugPanelShapes.medium)
100+
.clickable(onClick = { onClick.invoke(copiedMessage) })
101+
.padding(horizontal = 12.dp, vertical = 8.dp),
102+
verticalAlignment = Alignment.Top,
103+
horizontalArrangement = Arrangement.Center
63104
) {
64-
Column(
65-
modifier = Modifier
66-
.fillMaxWidth()
67-
.padding(all = 16.dp),
68-
verticalArrangement = Arrangement.spacedBy(space = 4.dp),
69-
) {
70-
Text(
71-
text = item.title,
72-
style = MaterialTheme.typography.caption,
73-
fontWeight = FontWeight.SemiBold,
74-
color = MaterialTheme.colors.primary,
75-
)
76-
Text(
77-
text = item.value,
78-
style = MaterialTheme.typography.body1,
79-
color = MaterialTheme.colors.onSurface,
80-
maxLines = 2,
81-
overflow = TextOverflow.Ellipsis,
82-
)
83-
}
105+
Text(
106+
text = label.uppercase(),
107+
style = DebugPanelTheme.typography.labelMedium,
108+
color = DebugPanelTheme.colors.content.tertiary,
109+
modifier = Modifier.padding(end = 12.dp),
110+
)
111+
Text(
112+
text = value,
113+
style = DebugPanelTheme.typography.bodySmall,
114+
color = DebugPanelTheme.colors.content.primary,
115+
modifier = Modifier.weight(weight = 1f),
116+
overflow = TextOverflow.Ellipsis,
117+
)
84118
}
85119
}
86120

87-
@Preview(showBackground = true)
88-
@Composable
89-
private fun Preview() {
90-
val previewTitle = "Версия"
91-
val previewValue = "3,14"
92-
val state = remember {
93-
AboutAppViewState(
94-
appInfoList = listOf(
95-
AboutAppInfo(title = previewTitle, value = previewValue),
96-
AboutAppInfo(
97-
title = "Номер билда",
98-
value = "fgkdfjgkdfgjdfkgjdfkjgkdfjgkdfjgkdfjgkdjgskdjgkdgfjdsfgjdsfgdsfgjdsfgdskjfgdsjkfgdjfgdsfg"
99-
),
100-
AboutAppInfo(title = previewTitle, value = previewValue),
101-
AboutAppInfo(title = previewTitle, value = previewValue),
102-
AboutAppInfo(title = previewTitle, value = previewValue),
103-
AboutAppInfo(title = previewTitle, value = previewValue),
104-
AboutAppInfo(title = previewTitle, value = previewValue),
105-
AboutAppInfo(title = previewTitle, value = previewValue),
106-
AboutAppInfo(title = previewTitle, value = previewValue),
107-
)
108-
)
109-
}
121+
private suspend fun copyToClipboard(clipboard: Clipboard, item: AboutAppInfo) {
122+
val clipData = ClipData.newPlainText(item.title, item.value)
110123

111-
MaterialTheme {
112-
AboutAppLayout(state = state)
113-
}
124+
clipboard.setClipEntry(clipEntry = ClipEntry(clipData))
114125
}

‎plugins/plugin-about-app/src/main/res/values/strings.xml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<resources />
2+
<resources>
3+
<string name="about_app_copied">«%s» is copied</string>
4+
</resources>

0 commit comments

Comments
 (0)