Skip to content

Commit 0228c3a

Browse files
TlasterTlaster
authored
Merge pull request #263 from DimensionDev/bugfix/ui-persona
Bugfix/UI persona
2 parents 456a270 + 0d98227 commit 0228c3a

8 files changed

Lines changed: 146 additions & 102 deletions

File tree

‎common/src/androidMain/kotlin/com/dimension/maskbook/common/ui/widget/MaskListItem.kt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,22 @@ import androidx.compose.foundation.layout.Column
2525
import androidx.compose.foundation.layout.PaddingValues
2626
import androidx.compose.foundation.layout.Row
2727
import androidx.compose.foundation.layout.Spacer
28+
import androidx.compose.foundation.layout.height
2829
import androidx.compose.foundation.layout.padding
2930
import androidx.compose.foundation.layout.width
3031
import androidx.compose.material.MaterialTheme
3132
import androidx.compose.runtime.Composable
3233
import androidx.compose.ui.Alignment
3334
import androidx.compose.ui.Modifier
35+
import androidx.compose.ui.unit.Dp
3436
import androidx.compose.ui.unit.dp
3537
import com.dimension.maskbook.common.ext.applyTextStyle
3638

3739
@Composable
3840
fun MaskListItem(
3941
modifier: Modifier = Modifier,
4042
contentPadding: PaddingValues = PaddingValues(12.dp),
43+
textPadding: Dp = 0.dp,
4144
icon: @Composable (() -> Unit)? = null,
4245
secondaryText: @Composable (() -> Unit)? = null,
4346
overlineText: @Composable (() -> Unit)? = null,
@@ -62,12 +65,14 @@ fun MaskListItem(
6265
styledSecondaryText != null -> {
6366
Column(Modifier.weight(1f)) {
6467
styledText.invoke()
68+
Spacer(Modifier.height(textPadding))
6569
styledSecondaryText()
6670
}
6771
}
6872
styledOverlineText != null -> {
6973
Column(Modifier.weight(1f)) {
7074
styledOverlineText()
75+
Spacer(Modifier.height(textPadding))
7176
styledText.invoke()
7277
}
7378
}

‎localization/src/androidMain/res/drawable/ic_empty_contact.png‎

312 KB
Loading

‎localization/src/androidMain/res/drawable/ic_mask_logo_small.xml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="17dp"
3+
android:height="17dp"
4+
android:viewportWidth="17"
5+
android:viewportHeight="17">
6+
<path
7+
android:pathData="M16.675,8.314C16.675,12.594 13.207,16.064 8.929,16.064C4.651,16.064 1.183,12.594 1.183,8.314C1.183,4.034 4.651,0.564 8.929,0.564C13.207,0.564 16.675,4.034 16.675,8.314Z"
8+
android:strokeWidth="0.5"
9+
android:fillColor="#00000000"
10+
android:strokeColor="#ffffff"/>
11+
<path
12+
android:pathData="M13.755,6.347V9.004H5.661L5.313,9.004C5.681,10.616 7.144,11.82 8.893,11.82C10.338,11.82 11.588,10.997 12.186,9.801L13.755,9.801V12.033C13.755,12.561 13.32,12.989 12.784,12.989H5.014C4.477,12.989 4.042,12.561 4.042,12.033V6.347H13.755ZM11.255,9.801C10.74,10.543 9.874,11.029 8.893,11.029C7.911,11.029 7.045,10.543 6.53,9.801H11.255ZM6.821,6.985C6.06,6.985 5.43,7.539 5.326,8.26L6.154,8.26C6.245,7.983 6.509,7.782 6.821,7.782C7.133,7.782 7.398,7.983 7.489,8.26L8.317,8.26C8.212,7.539 7.582,6.985 6.821,6.985ZM10.976,6.985C10.215,6.985 9.585,7.539 9.481,8.26L10.309,8.26C10.4,7.983 10.664,7.782 10.976,7.782C11.288,7.782 11.553,7.983 11.644,8.26L12.472,8.26C12.367,7.539 11.737,6.985 10.976,6.985ZM12.784,3.425C13.32,3.425 13.755,3.853 13.755,4.381V5.55H4.042V4.381C4.042,3.853 4.477,3.425 5.014,3.425H12.784Z"
13+
android:fillColor="#ffffff"
14+
android:fillType="evenOdd"/>
15+
</vector>

‎persona/src/androidMain/kotlin/com/dimension/maskbook/persona/ui/scenes/EmptySocialScene.kt‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import androidx.compose.runtime.Composable
3535
import androidx.compose.ui.Modifier
3636
import androidx.compose.ui.res.painterResource
3737
import androidx.compose.ui.res.stringResource
38+
import androidx.compose.ui.text.font.FontWeight
3839
import androidx.compose.ui.unit.dp
3940
import com.dimension.maskbook.common.ui.widget.HorizontalScenePadding
4041
import com.dimension.maskbook.common.ui.widget.SingleLineText
@@ -88,7 +89,10 @@ fun EmptySocialScene(
8889
item {
8990
Text(
9091
text = stringResource(R.string.scene_persona_empty_message_tips),
91-
style = MaterialTheme.typography.subtitle2,
92+
style = MaterialTheme.typography.h5.copy(
93+
fontWeight = FontWeight.W400,
94+
color = MaterialTheme.typography.body1.color
95+
),
9296
)
9397
}
9498
item {

‎persona/src/androidMain/kotlin/com/dimension/maskbook/persona/ui/scenes/PersonaInfoScene.kt‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ import androidx.compose.foundation.background
2727
import androidx.compose.foundation.layout.Box
2828
import androidx.compose.foundation.layout.Column
2929
import androidx.compose.foundation.layout.PaddingValues
30+
import androidx.compose.foundation.layout.Row
3031
import androidx.compose.foundation.layout.Spacer
3132
import androidx.compose.foundation.layout.fillMaxSize
3233
import androidx.compose.foundation.layout.fillMaxWidth
3334
import androidx.compose.foundation.layout.padding
3435
import androidx.compose.foundation.layout.size
36+
import androidx.compose.foundation.layout.width
3537
import androidx.compose.foundation.shape.CircleShape
3638
import androidx.compose.foundation.shape.RoundedCornerShape
3739
import androidx.compose.material.Icon
@@ -60,10 +62,12 @@ import androidx.compose.ui.platform.LocalContext
6062
import androidx.compose.ui.platform.LocalFocusManager
6163
import androidx.compose.ui.res.painterResource
6264
import androidx.compose.ui.res.stringResource
65+
import androidx.compose.ui.text.font.FontWeight
6366
import androidx.compose.ui.unit.dp
6467
import androidx.compose.ui.util.lerp
6568
import androidx.compose.ui.zIndex
6669
import coil.compose.rememberImagePainter
70+
import com.dimension.maskbook.common.ui.theme.moreTypography
6771
import com.dimension.maskbook.common.ui.widget.HorizontalScenePadding
6872
import com.dimension.maskbook.common.ui.widget.MaskAnimatedVisibility
6973
import com.dimension.maskbook.common.ui.widget.MaskCard
@@ -208,7 +212,14 @@ fun PersonaInfoScene(
208212
items.forEach { data ->
209213
Tab(
210214
selected = data == selectedScene,
211-
text = { Text(data.title) },
215+
text = {
216+
Text(
217+
data.title,
218+
style = MaterialTheme.typography.h5.copy(
219+
fontWeight = if (data == selectedScene) FontWeight.Bold else FontWeight.Normal
220+
)
221+
)
222+
},
212223
onClick = {
213224
selectedScene = data
214225
},
@@ -317,21 +328,36 @@ private fun PersonaHeader(
317328
backgroundColor = MaterialTheme.colors.primary,
318329
elevation = 0.dp,
319330
contentColor = Color.White,
331+
shape = RoundedCornerShape(20.dp),
320332
) {
321333
val item = personaList.getOrNull(page)
322334
MaskListItem(
323335
contentPadding = PaddingValues(horizontal = 12.dp, vertical = 16.dp),
324336
text = {
325-
Text(text = item?.name ?: "", style = MaterialTheme.typography.button)
326-
},
327-
secondaryText = {
328337
Text(
329-
text = item?.identifier?.substringAfter("/") ?: "",
330-
style = MaterialTheme.typography.body2,
331-
maxLines = 2,
338+
text = item?.name ?: "",
339+
style = MaterialTheme.typography.h5,
332340
color = Color.White,
333341
)
334342
},
343+
textPadding = 4.dp,
344+
secondaryText = {
345+
Row {
346+
Icon(
347+
painter = painterResource(R.drawable.ic_mask_logo_small),
348+
modifier = Modifier.size(16.dp),
349+
tint = Color.White,
350+
contentDescription = null
351+
)
352+
Spacer(modifier = Modifier.width(4.dp))
353+
Text(
354+
text = item?.identifier?.substringAfter("/") ?: "",
355+
style = MaterialTheme.moreTypography.h10,
356+
maxLines = 2,
357+
color = Color.White,
358+
)
359+
}
360+
},
335361
icon = {
336362
MaskTransparentButton(onClick = onAvatarClick) {
337363
if (item == null || item.avatar.isNullOrEmpty()) {
@@ -354,7 +380,7 @@ private fun PersonaHeader(
354380
}
355381
},
356382
trailing = {
357-
MaskIconButton(onClick = onPersonaNameClick) {
383+
MaskIconButton(onClick = onPersonaNameClick, size = 32.dp) {
358384
Icon(Icons.Default.MoreHoriz, contentDescription = null)
359385
}
360386
}

‎persona/src/androidMain/kotlin/com/dimension/maskbook/persona/ui/scenes/PersonaMenuScene.kt‎

Lines changed: 68 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import androidx.compose.foundation.layout.Spacer
2929
import androidx.compose.foundation.layout.fillMaxWidth
3030
import androidx.compose.foundation.layout.height
3131
import androidx.compose.foundation.layout.padding
32+
import androidx.compose.foundation.layout.size
3233
import androidx.compose.foundation.layout.width
3334
import androidx.compose.foundation.rememberScrollState
3435
import androidx.compose.foundation.verticalScroll
@@ -54,6 +55,7 @@ import com.dimension.maskbook.common.route.navigationComposeAnimComposable
5455
import com.dimension.maskbook.common.route.navigationComposeAnimComposablePackage
5556
import com.dimension.maskbook.common.routeProcessor.annotations.Back
5657
import com.dimension.maskbook.common.routeProcessor.annotations.NavGraphDestination
58+
import com.dimension.maskbook.common.ui.theme.moreColor
5759
import com.dimension.maskbook.common.ui.widget.MaskCard
5860
import com.dimension.maskbook.common.ui.widget.MaskScaffold
5961
import com.dimension.maskbook.common.ui.widget.MaskScene
@@ -104,78 +106,38 @@ fun PersonaMenuScene(
104106
.padding(ScaffoldPadding),
105107
horizontalAlignment = Alignment.CenterHorizontally,
106108
) {
107-
MaskCard(
108-
modifier = Modifier.fillMaxWidth(),
109-
elevation = 0.dp,
109+
MenuItem(
110110
onClick = {
111111
navController.navigate(PersonaRoute.SwitchPersona)
112-
}
113-
) {
114-
Row(
115-
modifier = Modifier.padding(16.dp),
116-
verticalAlignment = Alignment.CenterVertically,
117-
) {
118-
Image(
119-
painterResource(id = R.drawable.ic_profile),
120-
contentDescription = null
121-
)
122-
Spacer(modifier = Modifier.width(8.dp))
123-
Text(text = stringResource(R.string.scene_personas_action_change_add_persona))
124-
}
125-
}
112+
},
113+
icon = R.drawable.ic_profile,
114+
title = stringResource(R.string.scene_personas_action_change_add_persona)
115+
)
126116
Spacer(modifier = Modifier.height(16.dp))
127-
MaskCard(
128-
modifier = Modifier.fillMaxWidth(),
129-
elevation = 0.dp,
117+
MenuItem(
130118
onClick = {
131119
currentPersona?.let {
132120
navController.navigate(PersonaRoute.RenamePersona(it.identifier))
133121
}
134-
}
135-
) {
136-
Row(
137-
modifier = Modifier.padding(16.dp),
138-
verticalAlignment = Alignment.CenterVertically,
139-
) {
140-
Image(
141-
painterResource(id = R.drawable.ic_edit),
142-
contentDescription = null
143-
)
144-
Spacer(modifier = Modifier.width(8.dp))
145-
Text(text = stringResource(R.string.scene_personas_action_rename))
146-
}
147-
}
122+
},
123+
icon = R.drawable.ic_edit,
124+
title = stringResource(R.string.scene_personas_action_rename)
125+
)
148126
Spacer(modifier = Modifier.height(16.dp))
149-
MaskCard(
150-
modifier = Modifier.fillMaxWidth(),
151-
elevation = 0.dp,
127+
MenuItem(
152128
onClick = {
153-
// first check if it has backup password
154129
if (backupPassword.isEmpty()) {
155130
navController.navigateUri(Uri.parse(Deeplinks.Setting.SetupPasswordDialog(BackupActions.ExportPrivateKey.name)))
156131
} else {
157132
navController.navigate(Uri.parse(Deeplinks.Persona.BackUpPassword(PersonaRoute.ExportPrivateKey)))
158133
}
159-
}
160-
) {
161-
Row(
162-
modifier = Modifier.padding(16.dp),
163-
verticalAlignment = Alignment.CenterVertically,
164-
) {
165-
Image(
166-
painterResource(id = R.drawable.ic_password),
167-
contentDescription = null
168-
)
169-
Spacer(modifier = Modifier.width(8.dp))
170-
Text(text = stringResource(R.string.scene_persona_export_private_key_title))
171-
}
172-
}
134+
},
135+
icon = R.drawable.ic_password,
136+
title = stringResource(R.string.scene_persona_export_private_key_title)
137+
)
173138
Spacer(modifier = Modifier.height(16.dp))
174-
MaskCard(
175-
modifier = Modifier.fillMaxWidth(),
176-
elevation = 0.dp,
139+
MenuItem(
177140
onClick = {
178-
// first check if it has backup password
179141
if (backupPassword.isEmpty()) {
180142
navController.navigateUri(Uri.parse(Deeplinks.Setting.SetupPasswordDialog(BackupActions.DownloadQrCode.name)))
181143
} else {
@@ -192,44 +154,22 @@ fun PersonaMenuScene(
192154
)
193155
}
194156
}
195-
}
196-
) {
197-
Row(
198-
modifier = Modifier.padding(16.dp),
199-
verticalAlignment = Alignment.CenterVertically,
200-
) {
201-
Image(
202-
painterResource(id = R.drawable.ic_download),
203-
contentDescription = null
204-
)
205-
Spacer(modifier = Modifier.width(8.dp))
206-
Text(text = stringResource(R.string.scene_persona_download_qr_code_title))
207-
}
208-
}
157+
},
158+
icon = R.drawable.ic_download,
159+
title = stringResource(R.string.scene_persona_download_qr_code_title)
160+
)
209161
Spacer(modifier = Modifier.height(16.dp))
210-
MaskCard(
211-
modifier = Modifier.fillMaxWidth(),
212-
elevation = 0.dp,
162+
MenuItem(
213163
onClick = {
214164
if (backupPassword.isEmpty()) {
215165
navController.navigateUri(Uri.parse(Deeplinks.Setting.SetupPasswordDialog(BackupActions.BackUp.name)))
216166
} else {
217167
navController.navigateUri(Uri.parse(Deeplinks.Setting.BackupData.BackupSelection))
218168
}
219-
}
220-
) {
221-
Row(
222-
modifier = Modifier.padding(16.dp),
223-
verticalAlignment = Alignment.CenterVertically,
224-
) {
225-
Image(
226-
painterResource(id = R.drawable.ic_paper_plus),
227-
contentDescription = null
228-
)
229-
Spacer(modifier = Modifier.width(8.dp))
230-
Text(text = stringResource(R.string.common_controls_back_up))
231-
}
232-
}
169+
},
170+
icon = R.drawable.ic_paper_plus,
171+
title = stringResource(R.string.common_controls_back_up)
172+
)
233173
Spacer(modifier = Modifier.height(16.dp))
234174
MaskCard(
235175
modifier = Modifier.fillMaxWidth(),
@@ -252,11 +192,51 @@ fun PersonaMenuScene(
252192
tint = Color.Red,
253193
)
254194
Spacer(modifier = Modifier.width(8.dp))
255-
Text(text = stringResource(R.string.scene_setting_profile_log_out), color = Color.Red)
195+
Text(text = stringResource(R.string.scene_setting_profile_log_out), color = Color.Red, modifier = Modifier.weight(1f))
196+
Icon(
197+
painterResource(id = R.drawable.ic_arrow_right),
198+
contentDescription = null,
199+
tint = Color.Red,
200+
modifier = Modifier.size(6.dp, 11.dp)
201+
)
202+
Spacer(modifier = Modifier.width(8.dp))
256203
}
257204
}
258205
}
259206
}
260207
}
261208
}
262209
}
210+
211+
@Composable
212+
private fun MenuItem(
213+
onClick: () -> Unit,
214+
icon: Int,
215+
title: String,
216+
) {
217+
MaskCard(
218+
modifier = Modifier.fillMaxWidth(),
219+
elevation = 0.dp,
220+
onClick = onClick
221+
) {
222+
Row(
223+
modifier = Modifier.padding(16.dp),
224+
verticalAlignment = Alignment.CenterVertically,
225+
) {
226+
Image(
227+
painterResource(id = icon),
228+
contentDescription = null,
229+
modifier = Modifier.size(32.dp)
230+
)
231+
Spacer(modifier = Modifier.width(8.dp))
232+
Text(text = title, style = MaterialTheme.typography.h5, modifier = Modifier.weight(1f))
233+
Icon(
234+
painterResource(id = R.drawable.ic_arrow_right),
235+
contentDescription = null,
236+
tint = MaterialTheme.moreColor.onCaption,
237+
modifier = Modifier.size(6.dp, 11.dp)
238+
)
239+
Spacer(modifier = Modifier.width(8.dp))
240+
}
241+
}
242+
}

0 commit comments

Comments
 (0)