Skip to content

Change stage indicator to rhombus #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
825i wants to merge 2 commits into from
Closed

Change stage indicator to rhombus #57

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7744d56
Change stage indicator to rhombus
825i Jan 20, 2026
146e719
Change indentation from spaces to tabs
825i Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 37 additions & 25 deletions app/src/main/java/com/darkrockstudios/apps/fasttrack/screens/fasting/TimeLine.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Fill
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp
import com.darkrockstudios.apps.fasttrack.data.Phase
Expand All @@ -36,10 +39,11 @@ fun TimeLine(
onPhaseClick: (Phase) -> Unit = {}
) {
val padding = 16.dp
val spacing = 18.dp
val spacing = 4.dp // Reduced spacing since rhombuses connect
val barSize = 16.dp
val needleSize = 3.dp
val needleRadius = 4.dp
val slantOffset = 8.dp // How much the rhombus leans to the right

val outlineColor = MaterialTheme.colorScheme.onBackground

Expand Down Expand Up @@ -77,49 +81,57 @@ fun TimeLine(

val curPhase = Stages.getCurrentPhase(elapsedHours.hours)

// Draw the bubbles (phases)
val slantOffsetPx = slantOffset.toPx()
val barSizePx = barSize.toPx()

// Draw the rhombuses (phases)
Stages.phases.forEachIndexed { index, phase ->
val startX = (index * phaseWidth) + (index * spacing.toPx()) + padding.toPx()
val startY = padding.toPx()

// Current phase, thicket orange outline
// Create rhombus path (parallelogram leaning right)
val rhombusPath = Path().apply {
// Top left
moveTo(startX + slantOffsetPx, startY - barSizePx / 2)
// Top right
lineTo(startX + phaseWidth + slantOffsetPx, startY - barSizePx / 2)
// Bottom right
lineTo(startX + phaseWidth, startY + barSizePx / 2)
// Bottom left
lineTo(startX, startY + barSizePx / 2)
close()
}

// Current phase, thicker orange outline
if (curPhase == phase) {
// Outline
drawLine(
drawPath(
path = rhombusPath,
color = Color(0xFFE67E22),
start = Offset(startX, startY),
end = Offset(startX + phaseWidth, startY),
strokeWidth = barSize.toPx(),
cap = StrokeCap.Round
style = Stroke(width = 3.dp.toPx())
)

// Current phase - filled
drawLine(
drawPath(
path = rhombusPath,
color = gaugeColors[index],
start = Offset(startX, startY),
end = Offset(startX + phaseWidth, startY),
strokeWidth = barSize.toPx() * 0.7f,
cap = StrokeCap.Round
style = Fill
)
} else {
// Other phases - thinner "onBackground" outline

// Thinner outline
drawLine(
// Outline
drawPath(
path = rhombusPath,
color = outlineColor,
start = Offset(startX, startY),
end = Offset(startX + phaseWidth, startY),
strokeWidth = barSize.toPx(),
cap = StrokeCap.Round
style = Stroke(width = 2.dp.toPx())
)

// Phase color
drawLine(
drawPath(
path = rhombusPath,
color = gaugeColors[index],
start = Offset(startX, startY),
end = Offset(startX + phaseWidth, startY),
strokeWidth = barSize.toPx() * 0.8f, // Slightly thinner
cap = StrokeCap.Round
style = Fill
)
}
}
Expand Down Expand Up @@ -160,4 +172,4 @@ fun TimeLine(
)
}
}
}
}