Skip to content

Commit d10582b

Browse files
hossain-khanhossain-khan
authored
Merge pull request #58 from usetrmnl/fix-overlay-size
[FIXED] overlay settings cut off issue
2 parents 21cabb7 + 5b9340d commit d10582b

File tree

3 files changed

+252
-165
lines changed

3 files changed

+252
-165
lines changed

‎app/src/main/java/ink/trmnl/android/ui/display/OverlayDisplaySettingsView.kt‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
package ink.trmnl.android.ui.display
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.padding
6+
import androidx.compose.foundation.layout.size
7+
import androidx.compose.foundation.rememberScrollState
8+
import androidx.compose.foundation.verticalScroll
9+
import androidx.compose.material.icons.Icons
10+
import androidx.compose.material.icons.automirrored.filled.ArrowForward
11+
import androidx.compose.material.icons.automirrored.filled.List
12+
import androidx.compose.material.icons.filled.Refresh
13+
import androidx.compose.material.icons.filled.Settings
14+
import androidx.compose.material3.Card
15+
import androidx.compose.material3.CardDefaults
16+
import androidx.compose.material3.ExtendedFloatingActionButton
17+
import androidx.compose.material3.Icon
18+
import androidx.compose.material3.MaterialTheme
19+
import androidx.compose.material3.Surface
20+
import androidx.compose.material3.Text
21+
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
22+
import androidx.compose.runtime.Composable
23+
import androidx.compose.ui.Alignment
24+
import androidx.compose.ui.Modifier
25+
import androidx.compose.ui.text.font.FontWeight
26+
import androidx.compose.ui.tooling.preview.Preview
27+
import androidx.compose.ui.unit.dp
28+
import androidx.window.core.layout.WindowSizeClass
29+
import androidx.window.core.layout.WindowSizeClass.Companion.WIDTH_DP_EXPANDED_LOWER_BOUND
30+
import androidx.window.core.layout.WindowSizeClass.Companion.WIDTH_DP_MEDIUM_LOWER_BOUND
31+
32+
/**
33+
* Displays a set of configuration and control actions for the TRMNL mirror display.
34+
*
35+
* This composable provides quick access to device configuration, manual image refresh,
36+
* playlist navigation, and viewing refresh logs. It adapts its layout and button sizes
37+
* based on the current window size class, making it suitable for both phones and tablets.
38+
*
39+
* @param state The current state of the TRMNL mirror display, including refresh info and event sink.
40+
* @param windowSizeClass The current window size class, used to adapt the UI for different screen sizes.
41+
*/
42+
@Composable
43+
internal fun OverlaySettingsView(
44+
state: TrmnlMirrorDisplayScreen.State,
45+
windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass,
46+
) {
47+
// Shows larger button on tablets
48+
// https://developer.android.com/develop/ui/compose/layouts/adaptive/support-different-display-sizes
49+
// https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes
50+
val isExpandedWidth =
51+
windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND) ||
52+
windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)
53+
54+
// Choose text style based on window width
55+
val fabTextStyle =
56+
if (isExpandedWidth) {
57+
MaterialTheme.typography.titleLarge
58+
} else {
59+
MaterialTheme.typography.bodyLarge
60+
}
61+
62+
val infoTextStyle =
63+
if (isExpandedWidth) {
64+
MaterialTheme.typography.titleLarge
65+
} else {
66+
MaterialTheme.typography.bodyLarge.copy(fontWeight = FontWeight.Bold)
67+
}
68+
69+
Card(
70+
modifier =
71+
Modifier
72+
.padding(16.dp),
73+
elevation =
74+
CardDefaults.cardElevation(
75+
defaultElevation = 4.dp,
76+
),
77+
colors =
78+
CardDefaults.cardColors(
79+
containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.8f),
80+
),
81+
) {
82+
Column(
83+
modifier =
84+
Modifier
85+
.padding(16.dp)
86+
.verticalScroll(rememberScrollState()),
87+
verticalArrangement = Arrangement.spacedBy(12.dp),
88+
horizontalAlignment = Alignment.CenterHorizontally,
89+
) {
90+
Text(
91+
text = "Display Configurations",
92+
style = MaterialTheme.typography.displaySmall,
93+
fontWeight = FontWeight.Bold,
94+
modifier = Modifier.padding(bottom = 8.dp),
95+
)
96+
97+
Text("Display image will refresh: ${state.nextImageRefreshIn}", style = infoTextStyle)
98+
99+
ExtendedFloatingActionButton(
100+
onClick = {
101+
state.eventSink(TrmnlMirrorDisplayScreen.Event.ConfigureRequested)
102+
},
103+
icon = {
104+
Icon(
105+
imageVector = Icons.Default.Settings,
106+
contentDescription = null,
107+
modifier = if (isExpandedWidth) Modifier.size(32.dp) else Modifier,
108+
)
109+
},
110+
text = {
111+
Text(
112+
"Configure Mirror Device",
113+
style = fabTextStyle,
114+
fontWeight = FontWeight.Bold,
115+
)
116+
},
117+
)
118+
119+
ExtendedFloatingActionButton(
120+
onClick = {
121+
state.eventSink(TrmnlMirrorDisplayScreen.Event.RefreshCurrentPlaylistItemRequested)
122+
},
123+
icon = {
124+
Icon(
125+
imageVector = Icons.Default.Refresh,
126+
contentDescription = null,
127+
modifier = if (isExpandedWidth) Modifier.size(32.dp) else Modifier,
128+
)
129+
},
130+
text = {
131+
Text(
132+
"Refresh Current Playlist Image",
133+
style = fabTextStyle,
134+
fontWeight = FontWeight.Bold,
135+
)
136+
},
137+
)
138+
139+
ExtendedFloatingActionButton(
140+
onClick = {
141+
state.eventSink(TrmnlMirrorDisplayScreen.Event.LoadNextPlaylistItemImage)
142+
},
143+
icon = {
144+
Icon(
145+
imageVector = Icons.AutoMirrored.Filled.ArrowForward,
146+
contentDescription = null,
147+
modifier = if (isExpandedWidth) Modifier.size(32.dp) else Modifier,
148+
)
149+
},
150+
text = {
151+
Text(
152+
"Load Next Playlist Image",
153+
style = fabTextStyle,
154+
fontWeight = FontWeight.Bold,
155+
)
156+
},
157+
)
158+
159+
ExtendedFloatingActionButton(
160+
onClick = {
161+
state.eventSink(TrmnlMirrorDisplayScreen.Event.ViewLogsRequested)
162+
},
163+
icon = {
164+
Icon(
165+
imageVector = Icons.AutoMirrored.Filled.List,
166+
contentDescription = null,
167+
modifier = if (isExpandedWidth) Modifier.size(32.dp) else Modifier,
168+
)
169+
},
170+
text = {
171+
Text(
172+
"View Image Refresh Logs",
173+
style = fabTextStyle,
174+
fontWeight = FontWeight.Bold,
175+
)
176+
},
177+
)
178+
}
179+
}
180+
}
181+
182+
@Preview(name = "Overlay Settings Preview")
183+
@Composable
184+
fun PreviewOverlaySettingsView() {
185+
Surface {
186+
OverlaySettingsView(
187+
state =
188+
TrmnlMirrorDisplayScreen.State(
189+
imageUrl = null,
190+
overlayControlsVisible = true,
191+
nextImageRefreshIn = "5 minutes",
192+
isLoading = false,
193+
errorMessage = null,
194+
eventSink = {},
195+
),
196+
)
197+
}
198+
}

0 commit comments

Comments
 (0)