Skip to content

Commit 1b2f948

Browse files
RawaRawa
committed
Center map pin on progressbar
1 parent 3feacd2 commit 1b2f948

File tree

2 files changed

+62
-66
lines changed

2 files changed

+62
-66
lines changed

‎android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt

+20-17
Original file line numberDiff line numberDiff line change
@@ -95,24 +95,27 @@ fun NotificationBanner(
9595
onClickShowAccount: () -> Unit,
9696
onClickDismissNewDevice: () -> Unit
9797
) {
98-
// Fix for animating to invisible state
99-
val previous = rememberPrevious(current = notification, shouldUpdate = { _, _ -> true })
100-
AnimatedVisibility(
101-
visible = notification != null,
102-
enter = slideInVertically(initialOffsetY = { -it }),
103-
exit = slideOutVertically(targetOffsetY = { -it }),
104-
modifier = Modifier.animateContentSize()
105-
) {
106-
val visibleNotification = notification ?: previous
107-
if (visibleNotification != null)
108-
Notification(
109-
visibleNotification.toNotificationData(
110-
isPlayBuild = isPlayBuild,
111-
onClickUpdateVersion,
112-
onClickShowAccount,
113-
onClickDismissNewDevice
98+
99+
// Hack to make sure view expands and contracts when AnimatedVisiblity is used
100+
Box(modifier = Modifier.animateContentSize()) {
101+
// Fix for animating to invisible state
102+
val previous = rememberPrevious(current = notification, shouldUpdate = { _, _ -> true })
103+
AnimatedVisibility(
104+
visible = notification != null,
105+
enter = slideInVertically(initialOffsetY = { -it }),
106+
exit = slideOutVertically(targetOffsetY = { -it }),
107+
) {
108+
val visibleNotification = notification ?: previous
109+
if (visibleNotification != null)
110+
Notification(
111+
visibleNotification.toNotificationData(
112+
isPlayBuild = isPlayBuild,
113+
onClickUpdateVersion,
114+
onClickShowAccount,
115+
onClickDismissNewDevice
116+
)
114117
)
115-
)
118+
}
116119
}
117120
}
118121

‎android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt

+42-49
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,18 @@ package net.mullvad.mullvadvpn.compose.screen
22

33
import android.content.Intent
44
import android.net.Uri
5-
import androidx.compose.foundation.background
5+
import androidx.compose.animation.animateContentSize
66
import androidx.compose.foundation.layout.Arrangement
77
import androidx.compose.foundation.layout.Column
88
import androidx.compose.foundation.layout.Spacer
9+
import androidx.compose.foundation.layout.defaultMinSize
910
import androidx.compose.foundation.layout.fillMaxHeight
10-
import androidx.compose.foundation.layout.fillMaxSize
1111
import androidx.compose.foundation.layout.fillMaxWidth
1212
import androidx.compose.foundation.layout.height
1313
import androidx.compose.foundation.layout.padding
1414
import androidx.compose.foundation.rememberScrollState
1515
import androidx.compose.foundation.verticalScroll
16-
import androidx.compose.material3.Divider
1716
import androidx.compose.material3.MaterialTheme
18-
import androidx.compose.material3.Slider
1917
import androidx.compose.material3.Text
2018
import androidx.compose.runtime.Composable
2119
import androidx.compose.runtime.LaunchedEffect
@@ -29,13 +27,13 @@ import androidx.compose.runtime.saveable.rememberSaveable
2927
import androidx.compose.runtime.setValue
3028
import androidx.compose.ui.Alignment
3129
import androidx.compose.ui.Modifier
32-
import androidx.compose.ui.graphics.Color
30+
import androidx.compose.ui.draw.alpha
31+
import androidx.compose.ui.layout.onGloballyPositioned
32+
import androidx.compose.ui.layout.positionInParent
3333
import androidx.compose.ui.platform.LocalContext
3434
import androidx.compose.ui.platform.testTag
3535
import androidx.compose.ui.res.stringResource
3636
import androidx.compose.ui.tooling.preview.Preview
37-
import androidx.compose.ui.unit.dp
38-
import androidx.constraintlayout.compose.ConstraintLayout
3937
import com.ramcosta.composedestinations.annotation.Destination
4038
import com.ramcosta.composedestinations.navigation.DestinationsNavigator
4139
import com.ramcosta.composedestinations.navigation.popUpTo
@@ -193,40 +191,28 @@ fun ConnectScreen(
193191
deviceName = uiState.deviceName,
194192
timeLeft = uiState.daysLeftUntilExpiry
195193
) {
196-
var bias by remember { mutableFloatStateOf(0.5f) }
194+
var progressIndicatorBias by remember { mutableFloatStateOf(0f) }
195+
197196
Map(
198197
modifier = Modifier.padding(top = it.calculateTopPadding()),
199198
uiState.animateMap,
200199
uiState.location?.toLatLong() ?: gothenburgLatLong,
201200
marker = uiState.tunnelRealState.toMarker(uiState.location),
202-
bias,
201+
progressIndicatorBias,
203202
)
204-
ConstraintLayout(
205-
modifier = Modifier.padding(top = it.calculateTopPadding()).fillMaxSize()
206-
) {
207-
val (divider) = createRefs()
208-
Divider(
209-
modifier =
210-
Modifier.background(Color.Cyan).constrainAs(divider) {
211-
start.linkTo(parent.start)
212-
end.linkTo(parent.end)
213-
top.linkTo(parent.top)
214-
centerVerticallyTo(parent, bias)
215-
}
216-
)
217-
}
203+
218204
Column(
219205
verticalArrangement = Arrangement.Bottom,
220206
horizontalAlignment = Alignment.Start,
221207
modifier =
222-
Modifier.padding(it)
208+
Modifier.animateContentSize()
209+
.padding(top = it.calculateTopPadding())
223210
.fillMaxHeight()
224211
.drawVerticalScrollbar(
225212
scrollState,
226213
color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaScrollbar)
227214
)
228215
.verticalScroll(scrollState)
229-
.padding(bottom = Dimens.screenVerticalMargin)
230216
.testTag(SCROLLABLE_COLUMN_TEST_TAG)
231217
) {
232218
NotificationBanner(
@@ -236,31 +222,34 @@ fun ConnectScreen(
236222
onClickShowAccount = onManageAccountClick,
237223
onClickDismissNewDevice = onDismissNewDeviceClick,
238224
)
239-
Slider(
240-
modifier = Modifier.padding(16.dp),
241-
value = bias,
242-
onValueChange = { bias = it },
243-
valueRange = 0f..1f,
244-
)
245-
Text(text = "Bias: $bias")
225+
246226
Spacer(modifier = Modifier.weight(1f))
247-
if (
248-
uiState.tunnelRealState is TunnelState.Connecting ||
249-
uiState.tunnelRealState is TunnelState.Disconnecting
250-
) {
251-
MullvadCircularProgressIndicatorLarge(
252-
color = MaterialTheme.colorScheme.onPrimary,
253-
modifier =
254-
Modifier.padding(
255-
start = Dimens.sideMargin,
256-
end = Dimens.sideMargin,
257-
top = Dimens.mediumPadding
227+
MullvadCircularProgressIndicatorLarge(
228+
color = MaterialTheme.colorScheme.onPrimary,
229+
modifier =
230+
Modifier.animateContentSize()
231+
.padding(
232+
start = Dimens.sideMargin,
233+
end = Dimens.sideMargin,
234+
top = Dimens.mediumPadding
235+
)
236+
.alpha(
237+
if (
238+
uiState.tunnelRealState is TunnelState.Connecting ||
239+
uiState.tunnelRealState is TunnelState.Disconnecting
258240
)
259-
.align(Alignment.CenterHorizontally)
260-
.testTag(CIRCULAR_PROGRESS_INDICATOR)
261-
)
262-
}
263-
Spacer(modifier = Modifier.height(Dimens.mediumPadding))
241+
1f
242+
else 0f
243+
)
244+
.align(Alignment.CenterHorizontally)
245+
.testTag(CIRCULAR_PROGRESS_INDICATOR)
246+
.onGloballyPositioned {
247+
val offsetY = it.positionInParent().y + it.size.height / 2
248+
progressIndicatorBias =
249+
offsetY / it.parentLayoutCoordinates?.size?.height?.toFloat()!!
250+
}
251+
)
252+
Spacer(modifier = Modifier.defaultMinSize(minHeight = Dimens.mediumPadding).weight(1f))
264253
ConnectionStatusText(
265254
state = uiState.tunnelRealState,
266255
modifier = Modifier.padding(horizontal = Dimens.sideMargin)
@@ -319,6 +308,9 @@ fun ConnectScreen(
319308
connectClick = { handleThrottledAction(onConnectClick) },
320309
reconnectButtonTestTag = RECONNECT_BUTTON_TEST_TAG
321310
)
311+
// We need to manually add this padding so we align size with the map
312+
// component and marker with the progress indicator.
313+
Spacer(modifier = Modifier.height(it.calculateBottomPadding()))
322314
}
323315
}
324316
}
@@ -342,6 +334,7 @@ fun TunnelState.toMarker(location: GeoIpLocation?): net.mullvad.mullvadvpn.lib.m
342334
}
343335
}
344336

345-
fun GeoIpLocation.toLatLong() = LatLong(Latitude(latitude.toFloat()), Longitude(longitude.toFloat()))
337+
fun GeoIpLocation.toLatLong() =
338+
LatLong(Latitude(latitude.toFloat()), Longitude(longitude.toFloat()))
346339

347340
val gothenburgLatLong = LatLong(Latitude(57.7065f), Longitude(11.967f))

0 commit comments

Comments
 (0)