Skip to content

Commit 67e367d

Browse files
Jankin-WuJankin-Wu
committed
refactor(dialog): Refactor the common dialog component structure
1 parent 33ac64a commit 67e367d

1 file changed

Lines changed: 144 additions & 99 deletions

File tree

  • composeApp/src/commonMain/kotlin/com/jankinwu/fntv/client/ui/component/common/dialog

‎composeApp/src/commonMain/kotlin/com/jankinwu/fntv/client/ui/component/common/dialog/Dialog.kt‎

Lines changed: 144 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -301,116 +301,161 @@ fun CustomContentDialog(
301301
// .background(FluentTheme.colors.background.layer.alt)
302302
.padding(24.dp)
303303
) {
304-
Row(verticalAlignment = Alignment.CenterVertically) {
305-
if (isWarning) {
306-
Icon(
307-
imageVector = Warning,
308-
contentDescription = null,
309-
tint = Colors.DangerDefaultColor,
310-
modifier = Modifier
311-
.size(32.dp)
312-
.padding(end = 8.dp)
304+
CustomContentDialogHeader(title = title, isWarning = isWarning)
305+
Spacer(Modifier.height(12.dp))
306+
CustomContentDialogBody(isWarning = isWarning, content = content)
307+
}
308+
CustomContentDialogActions(
309+
primaryButtonText = primaryButtonText,
310+
secondaryButtonText = secondaryButtonText,
311+
tertiaryButtonText = tertiaryButtonText,
312+
isWarning = isWarning,
313+
onPrimaryClick = { onButtonClick(ContentDialogButton.Primary) },
314+
onSecondaryClick = { onButtonClick(ContentDialogButton.Secondary) },
315+
onTertiaryClick = onTertiaryClick
316+
)
317+
}
318+
}
319+
}
320+
321+
@Composable
322+
private fun CustomContentDialogHeader(
323+
title: String,
324+
isWarning: Boolean
325+
) {
326+
Row(verticalAlignment = Alignment.CenterVertically) {
327+
if (isWarning) {
328+
Icon(
329+
imageVector = Warning,
330+
contentDescription = null,
331+
tint = Colors.DangerDefaultColor,
332+
modifier = Modifier
333+
.size(32.dp)
334+
.padding(end = 8.dp)
335+
)
336+
}
337+
Text(
338+
style = FluentTheme.typography.subtitle,
339+
fontSize = 18.sp,
340+
text = title,
341+
)
342+
}
343+
}
344+
345+
@Composable
346+
private fun CustomContentDialogBody(
347+
isWarning: Boolean,
348+
content: @Composable () -> Unit
349+
) {
350+
CompositionLocalProvider(
351+
LocalTextStyle provides FluentTheme.typography.body,
352+
LocalContentColor provides FluentTheme.colors.text.text.primary
353+
) {
354+
Box(
355+
Modifier
356+
.padding(start = if (isWarning) 32.dp else 0.dp)
357+
) {
358+
content()
359+
}
360+
}
361+
}
362+
363+
@Composable
364+
private fun CustomContentDialogActions(
365+
primaryButtonText: String,
366+
secondaryButtonText: String?,
367+
tertiaryButtonText: String?,
368+
isWarning: Boolean,
369+
onPrimaryClick: () -> Unit,
370+
onSecondaryClick: () -> Unit,
371+
onTertiaryClick: () -> Unit
372+
) {
373+
val actionTextStyle = LocalTypography.current.bodyStrong
374+
val actionTextColor = FluentTheme.colors.text.text.primary
375+
val hoverModifier = Modifier.pointerHoverIcon(PointerIcon.Hand)
376+
val primaryButtonColors = if (isWarning) customDangerButtonColors() else customAccentButtonColors()
377+
378+
Box(
379+
Modifier
380+
.height(50.dp)
381+
.fillMaxWidth()
382+
.padding(horizontal = 25.dp, vertical = 8.dp),
383+
Alignment.CenterEnd
384+
) {
385+
if (tertiaryButtonText != null) {
386+
Row(
387+
verticalAlignment = Alignment.CenterVertically,
388+
modifier = Modifier.fillMaxWidth()
389+
) {
390+
if (secondaryButtonText != null) {
391+
Button(
392+
modifier = hoverModifier,
393+
onClick = onSecondaryClick,
394+
) {
395+
Text(
396+
secondaryButtonText,
397+
style = actionTextStyle,
398+
color = actionTextColor
313399
)
314400
}
315-
Text(
316-
style = FluentTheme.typography.subtitle,
317-
fontSize = 18.sp,
318-
text = title,
319-
)
320401
}
321-
Spacer(Modifier.height(12.dp))
322-
CompositionLocalProvider(
323-
LocalTextStyle provides FluentTheme.typography.body,
324-
LocalContentColor provides FluentTheme.colors.text.text.primary
402+
Spacer(Modifier.weight(1f))
403+
Row(
404+
horizontalArrangement = Arrangement.spacedBy(8.dp),
405+
verticalAlignment = Alignment.CenterVertically
325406
) {
326-
Box(
327-
Modifier
328-
.padding(start = if (isWarning) 32.dp else 0.dp)
407+
Button(
408+
modifier = hoverModifier,
409+
onClick = onTertiaryClick,
410+
) {
411+
Text(
412+
tertiaryButtonText,
413+
style = actionTextStyle,
414+
color = actionTextColor
415+
)
416+
}
417+
AccentButton(
418+
modifier = hoverModifier,
419+
onClick = onPrimaryClick,
420+
buttonColors = primaryButtonColors
329421
) {
330-
content()
422+
Text(
423+
primaryButtonText,
424+
style = actionTextStyle,
425+
color = actionTextColor
426+
)
331427
}
332428
}
333429
}
334-
Box(
335-
Modifier
336-
.height(50.dp)
337-
.fillMaxWidth()
338-
.padding(horizontal = 25.dp, vertical = 8.dp),
339-
Alignment.CenterEnd
430+
} else {
431+
Row(
432+
horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.End),
433+
verticalAlignment = Alignment.CenterVertically,
434+
modifier = Modifier.fillMaxWidth()
340435
) {
341-
if (tertiaryButtonText != null) {
342-
Row(
343-
horizontalArrangement = Arrangement.SpaceBetween,
344-
verticalAlignment = Alignment.CenterVertically,
345-
modifier = Modifier.fillMaxWidth()
346-
) {
347-
if (secondaryButtonText != null) Button(
348-
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
349-
onClick = { onButtonClick(ContentDialogButton.Secondary) },
350-
) {
351-
Text(
352-
secondaryButtonText,
353-
style = LocalTypography.current.bodyStrong,
354-
color = FluentTheme.colors.text.text.primary
355-
)
356-
}
357-
Row(
358-
horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.End),
359-
verticalAlignment = Alignment.CenterVertically,
360-
modifier = Modifier.fillMaxWidth()
361-
) {
362-
Button(
363-
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
364-
onClick = { onButtonClick(ContentDialogButton.Secondary) },
365-
) {
366-
Text(
367-
tertiaryButtonText,
368-
style = LocalTypography.current.bodyStrong,
369-
color = FluentTheme.colors.text.text.primary
370-
)
371-
}
372-
AccentButton(
373-
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
374-
onClick = { onButtonClick(ContentDialogButton.Primary) },
375-
buttonColors = if (isWarning) customDangerButtonColors() else customAccentButtonColors()
376-
) {
377-
Text(
378-
primaryButtonText,
379-
style = LocalTypography.current.bodyStrong,
380-
color = FluentTheme.colors.text.text.primary
381-
)
382-
}
383-
}
384-
}
385-
} else {
386-
Row(
387-
horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.End),
388-
verticalAlignment = Alignment.CenterVertically,
389-
modifier = Modifier.fillMaxWidth()
436+
if (secondaryButtonText != null) {
437+
Button(
438+
modifier = hoverModifier,
439+
onClick = onSecondaryClick,
390440
) {
391-
if (secondaryButtonText != null) Button(
392-
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
393-
onClick = { onButtonClick(ContentDialogButton.Secondary) },
394-
) {
395-
Text(
396-
secondaryButtonText,
397-
style = LocalTypography.current.bodyStrong,
398-
color = FluentTheme.colors.text.text.primary
399-
)
400-
}
401-
AccentButton(
402-
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
403-
onClick = { onButtonClick(ContentDialogButton.Primary) },
404-
buttonColors = if (isWarning) customDangerButtonColors() else customAccentButtonColors()
405-
) {
406-
Text(
407-
primaryButtonText,
408-
style = LocalTypography.current.bodyStrong,
409-
color = FluentTheme.colors.text.text.primary
410-
)
411-
}
441+
Text(
442+
secondaryButtonText,
443+
style = actionTextStyle,
444+
color = actionTextColor
445+
)
412446
}
413447
}
448+
AccentButton(
449+
modifier = hoverModifier,
450+
onClick = onPrimaryClick,
451+
buttonColors = primaryButtonColors
452+
) {
453+
Text(
454+
primaryButtonText,
455+
style = actionTextStyle,
456+
color = actionTextColor
457+
)
458+
}
414459
}
415460
}
416461
}
@@ -449,7 +494,7 @@ fun SslTrustDialogHost(
449494
onAllow?.invoke(host)
450495
},
451496
content = {
452-
Text("「$host」的证书校验不通过，可能是证书过期、域名不匹配或自签名证书。继续连接将绕过安全保护，是否继续访问？")
497+
Text("「$host」的证书校验不通过，可能是证书过期、域名不匹配或自签名证书。继续访问将绕过安全保护，是否继续访问？")
453498
}
454499
)
455500
}

0 commit comments

Comments
 (0)