Diagnostics Inspector

Shows over an app what its theme's diagnostics have found: a button with the number of findings, and on its press a sheet that lists them, each with its check, where it was found and what puts it right. A finding chosen in the list is outlined where its node stands, until the screen is next pressed. While nothing has been found, nothing is shown.

import com.pantrixui.components.overlay.inspector.PantrixDiagnosticsInspector

• It wraps the app. PantrixDiagnosticsInspector(findings) { App() }: the content is laid out as it would be without it, and gets every press.
• Unseen while nothing is found. The button comes with the first finding and goes when the list is cleared.
• Outline. The node of the finding chosen in the list is outlined until the screen is next pressed; a finding without a node says that it is not on the screen.
• Where it stands. alignment chooses the button's corner; the default is the bottom of the end edge.

Examples

Over a screen

A screen with two findings: a button in a pale colour and an icon button with a blank name. Press the button at the bottom right, and choose a finding in the list: its node is outlined.

val findings = remember { PantrixFindings() }
PantrixTheme(diagnostics = findings) {
    PantrixDiagnosticsInspector(findings, modifier = Modifier.height(240.dp), tagKey = "orders") {
        Screen(tagKey = "orders")
    }
}

@Composable
private fun Screen(tagKey: String) {
    PantrixCard(modifier = Modifier.fillMaxSize(), variant = CardVariant.Outlined) {
        Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
            PantrixText(text = "Orders", style = PantrixTheme.typography.headline)
            PantrixText(text = "Three orders are waiting to be sent.")
            PantrixButton(
                text = "Send",
                onClick = {},
                modifier = Modifier.fillMaxWidth(),
                colors = ButtonColors(container = Color(0xFFFFE082), content = Color.White),
                tagKey = "${tagKey}_send"
            )
            PantrixIconButton(
                imageVector = PantrixIcons.MoreHorizontal,
                contentDescription = "",
                onClick = {},
                tagKey = "${tagKey}_more"
            )
        }
    }
}

Its button at the top

The button at the top, where it can stand beside a bar's actions.

val findings = remember { PantrixFindings() }
PantrixTheme(diagnostics = findings) {
    PantrixDiagnosticsInspector(
        findings,
        modifier = Modifier.height(240.dp),
        alignment = Alignment.TopEnd,
        tagKey = "orders_top"
    ) {
        Screen(tagKey = "orders_top")
    }
}

@Composable
private fun Screen(tagKey: String) {
    PantrixCard(modifier = Modifier.fillMaxSize(), variant = CardVariant.Outlined) {
        Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
            PantrixText(text = "Orders", style = PantrixTheme.typography.headline)
            PantrixText(text = "Three orders are waiting to be sent.")
            PantrixButton(
                text = "Send",
                onClick = {},
                modifier = Modifier.fillMaxWidth(),
                colors = ButtonColors(container = Color(0xFFFFE082), content = Color.White),
                tagKey = "${tagKey}_send"
            )
            PantrixIconButton(
                imageVector = PantrixIcons.MoreHorizontal,
                contentDescription = "",
                onClick = {},
                tagKey = "${tagKey}_more"
            )
        }
    }
}

API

findings

Shows over an app what its theme's diagnostics have found: a button with the number of findings, and on its press a sheet that lists them, each with its check, where it was found and what puts it right. A finding chosen in the list is outlined where its node stands, until the screen is next pressed. While nothing has been found, nothing is shown.