diff --git a/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt b/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt
index 86d24cc..ebb4cc4 100644
--- a/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt
@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.ButtonGroup
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.CircularWavyProgressIndicator
+import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.FilledIconToggleButton
@@ -48,6 +49,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@@ -228,30 +230,29 @@ fun TimerScreen(
}
val interactionSources = remember { List(2) { MutableInteractionSource() } }
ButtonGroup(
- overflowIndicator = {},
+ overflowIndicator = { state ->
+ FilledTonalIconButton(
+ onClick = {
+ if (state.isExpanded) {
+ state.dismiss()
+ } else {
+ state.show()
+ }
+ },
+ colors = IconButtonDefaults.filledTonalIconButtonColors(
+ containerColor = colorContainer
+ ),
+ shapes = IconButtonDefaults.shapes(),
+ modifier = Modifier.size(64.dp, 96.dp)
+ ) {
+ Icon(
+ painterResource(R.drawable.more_vert_large),
+ contentDescription = "More"
+ )
+ }
+ },
modifier = Modifier.padding(16.dp)
) {
- customItem(
- {
- FilledTonalIconButton(
- onClick = resetTimer,
- colors = IconButtonDefaults.filledTonalIconButtonColors(
- containerColor = colorContainer
- ),
- shapes = IconButtonDefaults.shapes(),
- interactionSource = interactionSources[0],
- modifier = Modifier
- .size(96.dp)
- .animateWidth(interactionSources[0])
- ) {
- Icon(
- painterResource(R.drawable.restart_large),
- contentDescription = "Restart"
- )
- }
- },
- {}
- )
customItem(
{
FilledIconToggleButton(
@@ -270,17 +271,76 @@ fun TimerScreen(
if (uiState.timerRunning) {
Icon(
painterResource(R.drawable.pause_large),
- contentDescription = "Pause"
+ contentDescription = "Pause",
+ modifier = Modifier.size(32.dp)
)
} else {
Icon(
painterResource(R.drawable.play_large),
- contentDescription = "Play"
+ contentDescription = "Play",
+ modifier = Modifier.size(32.dp)
)
}
}
},
- {}
+ { state ->
+ DropdownMenuItem(
+ leadingIcon = {
+ if (uiState.timerRunning) {
+ Icon(
+ painterResource(R.drawable.pause),
+ contentDescription = "Pause"
+ )
+ } else {
+ Icon(
+ painterResource(R.drawable.play),
+ contentDescription = "Play"
+ )
+ }
+ },
+ text = { Text(if (uiState.timerRunning) "Pause" else "Play") },
+ onClick = {
+ toggleTimer()
+ state.dismiss()
+ }
+ )
+ }
+ )
+ customItem(
+ {
+ FilledTonalIconButton(
+ onClick = resetTimer,
+ colors = IconButtonDefaults.filledTonalIconButtonColors(
+ containerColor = colorContainer
+ ),
+ shapes = IconButtonDefaults.shapes(),
+ interactionSource = interactionSources[0],
+ modifier = Modifier
+ .size(96.dp)
+ .animateWidth(interactionSources[0])
+ ) {
+ Icon(
+ painterResource(R.drawable.restart_large),
+ contentDescription = "Restart",
+ modifier = Modifier.size(32.dp)
+ )
+ }
+ },
+ { state ->
+ DropdownMenuItem(
+ leadingIcon = {
+ Icon(
+ painterResource(R.drawable.restart),
+ "Restart"
+ )
+ },
+ text = { Text("Restart") },
+ onClick = {
+ resetTimer()
+ state.dismiss()
+ }
+ )
+ }
)
}
}
@@ -313,16 +373,16 @@ fun TimerScreen(
}
@Preview(
- widthDp = 384,
- heightDp = 832,
- showSystemUi = true
+ showSystemUi = true,
+ device = Devices.PIXEL_9_PRO,
+// widthDp = 200
)
@Composable
fun TimerScreenPreview() {
val uiState = UiState(
- timeStr = "03:34", nextTimeStr = "5:00", timerMode = TimerMode.SHORT_BREAK
+ timeStr = "03:34", nextTimeStr = "5:00", timerMode = TimerMode.FOCUS, timerRunning = true
)
TomatoTheme {
- TimerScreen(uiState, false,{ 0.3f }, {}, {})
+ TimerScreen(uiState, false, { 0.3f }, {}, {})
}
}
diff --git a/app/src/main/res/drawable/more_vert_large.xml b/app/src/main/res/drawable/more_vert_large.xml
new file mode 100644
index 0000000..9524445
--- /dev/null
+++ b/app/src/main/res/drawable/more_vert_large.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/pause.xml b/app/src/main/res/drawable/pause.xml
new file mode 100644
index 0000000..5da02a5
--- /dev/null
+++ b/app/src/main/res/drawable/pause.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/play.xml b/app/src/main/res/drawable/play.xml
new file mode 100644
index 0000000..bbfd530
--- /dev/null
+++ b/app/src/main/res/drawable/play.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/restart.xml b/app/src/main/res/drawable/restart.xml
new file mode 100644
index 0000000..3f88556
--- /dev/null
+++ b/app/src/main/res/drawable/restart.xml
@@ -0,0 +1,13 @@
+
+
+
+
+