Skip to content

Commit b7be88f

Browse files
authored
[beta] ✨ Added landscape support #218
App is now completely usable in landscape orientation and larger screens
1 parent 7eed0d2 commit b7be88f

File tree

15 files changed

+1126
-642
lines changed

15 files changed

+1126
-642
lines changed

app/src/main/java/com/shub39/rush/app/App.kt

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import androidx.compose.animation.fadeIn
44
import androidx.compose.animation.fadeOut
55
import androidx.compose.foundation.background
66
import androidx.compose.foundation.layout.fillMaxSize
7-
import androidx.compose.foundation.layout.widthIn
87
import androidx.compose.material3.ExperimentalMaterial3Api
98
import androidx.compose.material3.MaterialTheme
109
import androidx.compose.material3.rememberModalBottomSheetState
@@ -14,7 +13,6 @@ import androidx.compose.runtime.LaunchedEffect
1413
import androidx.compose.runtime.getValue
1514
import androidx.compose.ui.Modifier
1615
import androidx.compose.ui.platform.LocalContext
17-
import androidx.compose.ui.unit.dp
1816
import androidx.lifecycle.compose.collectAsStateWithLifecycle
1917
import androidx.navigation.compose.NavHost
2018
import androidx.navigation.compose.composable
@@ -107,7 +105,6 @@ fun App() {
107105
onAction = savedVM::onAction,
108106
onNavigateToLyrics = { navController.navigate(Route.LyricsGraph) },
109107
onNavigateToSettings = { navController.navigate(Route.SettingsGraph) },
110-
modifier = Modifier.widthIn(max = 700.dp)
111108
)
112109
}
113110

app/src/main/java/com/shub39/rush/presentation/components/ColorPickerDialog.kt

Lines changed: 92 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ package com.shub39.rush.presentation.components
22

33
import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Row
56
import androidx.compose.foundation.layout.fillMaxWidth
67
import androidx.compose.foundation.layout.height
78
import androidx.compose.foundation.layout.padding
@@ -11,6 +12,7 @@ import androidx.compose.foundation.layout.wrapContentSize
1112
import androidx.compose.foundation.shape.RoundedCornerShape
1213
import androidx.compose.material3.Button
1314
import androidx.compose.material3.Text
15+
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
1416
import androidx.compose.runtime.Composable
1517
import androidx.compose.ui.Alignment
1618
import androidx.compose.ui.Modifier
@@ -19,6 +21,7 @@ import androidx.compose.ui.graphics.Color
1921
import androidx.compose.ui.res.stringResource
2022
import androidx.compose.ui.text.style.TextAlign
2123
import androidx.compose.ui.unit.dp
24+
import androidx.compose.ui.window.DialogProperties
2225
import com.github.skydoves.colorpicker.compose.AlphaTile
2326
import com.github.skydoves.colorpicker.compose.BrightnessSlider
2427
import com.github.skydoves.colorpicker.compose.HsvColorPicker
@@ -44,55 +47,107 @@ fun ColorPickerDialog(
4447
onDismiss: () -> Unit,
4548
modifier: Modifier = Modifier
4649
) {
50+
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
4751
val controller = rememberColorPickerController()
4852

4953
RushDialog(
5054
onDismissRequest = onDismiss,
51-
modifier = modifier
55+
properties = DialogProperties(usePlatformDefaultWidth = false),
56+
modifier = modifier.padding(horizontal = 32.dp)
5257
) {
53-
Column(
54-
modifier = Modifier
55-
.wrapContentSize()
56-
.padding(16.dp),
57-
horizontalAlignment = Alignment.CenterHorizontally,
58-
verticalArrangement = Arrangement.Center
59-
) {
60-
HsvColorPicker(
58+
if (!windowSizeClass.isWidthAtLeastBreakpoint(840)) {
59+
Column(
6160
modifier = Modifier
62-
.width(350.dp)
63-
.height(300.dp)
64-
.padding(top = 10.dp),
65-
initialColor = initialColor,
66-
controller = controller
67-
)
61+
.wrapContentSize()
62+
.padding(16.dp),
63+
horizontalAlignment = Alignment.CenterHorizontally,
64+
verticalArrangement = Arrangement.Center
65+
) {
66+
HsvColorPicker(
67+
modifier = Modifier
68+
.width(350.dp)
69+
.height(300.dp)
70+
.padding(top = 10.dp),
71+
initialColor = initialColor,
72+
controller = controller
73+
)
6874

69-
BrightnessSlider(
70-
modifier = Modifier
71-
.padding(top = 10.dp)
72-
.height(35.dp),
73-
initialColor = initialColor,
74-
controller = controller
75-
)
75+
BrightnessSlider(
76+
modifier = Modifier
77+
.padding(top = 10.dp)
78+
.height(35.dp),
79+
initialColor = initialColor,
80+
controller = controller
81+
)
7682

77-
AlphaTile(
78-
modifier = Modifier
79-
.size(80.dp)
80-
.padding(vertical = 10.dp)
81-
.clip(RoundedCornerShape(6.dp)),
82-
controller = controller
83-
)
83+
AlphaTile(
84+
modifier = Modifier
85+
.size(80.dp)
86+
.padding(vertical = 10.dp)
87+
.clip(RoundedCornerShape(6.dp)),
88+
controller = controller
89+
)
8490

85-
Button(
86-
onClick = {
87-
onSelect(controller.selectedColor.value)
88-
onDismiss()
91+
Button(
92+
onClick = {
93+
onSelect(controller.selectedColor.value)
94+
onDismiss()
95+
}
96+
) {
97+
Text(
98+
text = stringResource(R.string.done),
99+
modifier = Modifier.fillMaxWidth(),
100+
textAlign = TextAlign.Center
101+
)
89102
}
103+
}
104+
} else {
105+
// landscape ui
106+
Row(
107+
modifier = Modifier
108+
.wrapContentSize()
109+
.padding(16.dp),
110+
horizontalArrangement = Arrangement.spacedBy(16.dp),
111+
verticalAlignment = Alignment.CenterVertically
90112
) {
91-
Text(
92-
text = stringResource(R.string.done),
93-
modifier = Modifier.fillMaxWidth(),
94-
textAlign = TextAlign.Center
113+
HsvColorPicker(
114+
modifier = Modifier
115+
.width(250.dp)
116+
.height(200.dp),
117+
initialColor = initialColor,
118+
controller = controller
95119
)
120+
121+
Column(
122+
horizontalAlignment = Alignment.CenterHorizontally,
123+
verticalArrangement = Arrangement.spacedBy(10.dp)
124+
) {
125+
BrightnessSlider(
126+
modifier = Modifier.height(35.dp),
127+
initialColor = initialColor,
128+
controller = controller
129+
)
130+
131+
AlphaTile(
132+
modifier = Modifier
133+
.size(80.dp)
134+
.clip(RoundedCornerShape(6.dp)),
135+
controller = controller
136+
)
137+
138+
Button(
139+
onClick = {
140+
onSelect(controller.selectedColor.value)
141+
onDismiss()
142+
}
143+
) {
144+
Text(
145+
text = stringResource(R.string.done),
146+
modifier = Modifier.fillMaxWidth(),
147+
textAlign = TextAlign.Center
148+
)
149+
}
150+
}
96151
}
97152
}
98153
}

app/src/main/java/com/shub39/rush/presentation/components/RushDialog.kt

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import androidx.compose.ui.Alignment
1313
import androidx.compose.ui.Modifier
1414
import androidx.compose.ui.unit.Dp
1515
import androidx.compose.ui.unit.dp
16+
import androidx.compose.ui.window.DialogProperties
1617

1718
/**
1819
* A generic, customizable dialog composable used throughout the app.
@@ -30,11 +31,13 @@ fun RushDialog(
3031
onDismissRequest: () -> Unit,
3132
modifier: Modifier = Modifier,
3233
padding: Dp = 16.dp,
34+
properties: DialogProperties = DialogProperties(),
3335
content: @Composable (ColumnScope.() -> Unit)
3436
) {
3537
BasicAlertDialog(
3638
onDismissRequest = onDismissRequest,
37-
modifier = modifier
39+
modifier = modifier,
40+
properties = properties
3841
) {
3942
Card(
4043
shape = MaterialTheme.shapes.extraLarge

app/src/main/java/com/shub39/rush/presentation/lyrics/component/Actions.kt

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -208,39 +208,39 @@ fun Actions(
208208
}
209209

210210
AnimatedVisibility(visible = state.selectedLines.isNotEmpty()) {
211-
Row {
212-
IconButton(
213-
onClick = {
214-
if (state.lyricsState is LyricsState.Loaded) {
215-
action(
216-
LyricsPageAction.OnUpdateShareLines(
217-
songDetails = SongDetails(
218-
title = state.lyricsState.song.title,
219-
artist = state.lyricsState.song.artists,
220-
album = state.lyricsState.song.album,
221-
artUrl = state.lyricsState.song.artUrl ?: ""
222-
)
211+
IconButton(
212+
onClick = {
213+
if (state.lyricsState is LyricsState.Loaded) {
214+
action(
215+
LyricsPageAction.OnUpdateShareLines(
216+
songDetails = SongDetails(
217+
title = state.lyricsState.song.title,
218+
artist = state.lyricsState.song.artists,
219+
album = state.lyricsState.song.album,
220+
artUrl = state.lyricsState.song.artUrl ?: ""
223221
)
224222
)
223+
)
225224

226-
onShare()
227-
}
225+
onShare()
228226
}
229-
) {
230-
Icon(
231-
painter = painterResource(R.drawable.share),
232-
contentDescription = "Share"
233-
)
234227
}
228+
) {
229+
Icon(
230+
painter = painterResource(R.drawable.share),
231+
contentDescription = "Share"
232+
)
233+
}
234+
}
235235

236-
IconButton(
237-
onClick = { action(LyricsPageAction.OnChangeSelectedLines(emptyMap())) }
238-
) {
239-
Icon(
240-
painter = painterResource(R.drawable.close),
241-
contentDescription = null
242-
)
243-
}
236+
AnimatedVisibility(visible = state.selectedLines.isNotEmpty()) {
237+
IconButton(
238+
onClick = { action(LyricsPageAction.OnChangeSelectedLines(emptyMap())) }
239+
) {
240+
Icon(
241+
painter = painterResource(R.drawable.close),
242+
contentDescription = null
243+
)
244244
}
245245
}
246246
}

app/src/main/java/com/shub39/rush/presentation/lyrics/component/LrcCorrectSheet.kt

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ package com.shub39.rush.presentation.lyrics.component
22

33
import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.PaddingValues
56
import androidx.compose.foundation.layout.Row
67
import androidx.compose.foundation.layout.fillMaxWidth
78
import androidx.compose.foundation.layout.heightIn
@@ -14,6 +15,7 @@ import androidx.compose.material3.Card
1415
import androidx.compose.material3.CardDefaults
1516
import androidx.compose.material3.CircularProgressIndicator
1617
import androidx.compose.material3.ExperimentalMaterial3Api
18+
import androidx.compose.material3.HorizontalDivider
1719
import androidx.compose.material3.Icon
1820
import androidx.compose.material3.MaterialTheme
1921
import androidx.compose.material3.ModalBottomSheet
@@ -53,20 +55,20 @@ fun LrcCorrectSheet(
5355
modifier = Modifier.heightIn(max = 900.dp)
5456
) {
5557
Column(
56-
modifier = Modifier
57-
.fillMaxWidth()
58-
.padding(horizontal = 16.dp),
58+
modifier = Modifier.fillMaxWidth(),
5959
horizontalAlignment = Alignment.CenterHorizontally,
6060
verticalArrangement = Arrangement.spacedBy(8.dp)
6161
) {
6262
Text(
6363
text = stringResource(R.string.correct_lyrics),
6464
style = MaterialTheme.typography.titleLarge,
65-
fontWeight = FontWeight.Bold
65+
fontWeight = FontWeight.Bold,
66+
modifier = Modifier.padding(horizontal = 16.dp)
6667
)
6768

6869
Column(
69-
verticalArrangement = Arrangement.spacedBy(4.dp)
70+
verticalArrangement = Arrangement.spacedBy(4.dp),
71+
modifier = Modifier.padding(horizontal = 16.dp)
7072
) {
7173
OutlinedTextField(
7274
value = track,
@@ -93,7 +95,9 @@ fun LrcCorrectSheet(
9395
},
9496
enabled = track.isNotBlank() && !state.lrcCorrect.searching,
9597
shape = MaterialTheme.shapes.extraLarge,
96-
modifier = Modifier.fillMaxWidth()
98+
modifier = Modifier
99+
.fillMaxWidth()
100+
.padding(horizontal = 16.dp)
97101
) {
98102
if (!state.lrcCorrect.searching) {
99103
Icon(
@@ -109,8 +113,10 @@ fun LrcCorrectSheet(
109113
}
110114
}
111115

116+
HorizontalDivider()
112117
LazyColumn(
113-
verticalArrangement = Arrangement.spacedBy(4.dp)
118+
verticalArrangement = Arrangement.spacedBy(4.dp),
119+
contentPadding = PaddingValues(16.dp)
114120
) {
115121
items(state.lrcCorrect.searchResults, key = { it.id }) {
116122
Card(
@@ -170,6 +176,7 @@ fun LrcCorrectSheet(
170176
}
171177
}
172178
}
179+
HorizontalDivider()
173180
}
174181
}
175182
}

0 commit comments

Comments
 (0)