stack location name vertically.

Author: Ginder-Singh

mobile/src/main/java/com/windscribe/mobile/ui/common/LocationImage.kt

@@ -60,7 +60,8 @@ fun LocationImage(connectionViewmodel: ConnectionViewmodel, homeViewmodel: HomeV
     val locationBackground =
         (connectionState.locationInfo as? LocationInfoState.Success)?.locationInfo?.locationBackground
     val resource = locationBackground?.resource ?: com.windscribe.vpn.R.drawable.dummy_flag
-    val imageDimen = calculateImageDimensions()
+    val isSingleLineLocationName by connectionViewmodel.isSingleLineLocationName.collectAsState()
+    val imageDimen = calculateImageDimensions(isSingleLineLocationName)
     Box {
         AnimatedContent(
             targetState = resource,

mobile/src/main/java/com/windscribe/mobile/ui/common/Utils.kt

@@ -3,7 +3,10 @@ package com.windscribe.mobile.ui.common
 import android.content.Context
 import android.content.Intent
 import android.net.Uri
+import android.text.TextPaint
 import android.widget.Toast
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.sp
 import com.windscribe.mobile.R
 import com.windscribe.mobile.ui.serverlist.ServerListItem
 import com.windscribe.vpn.constants.NetworkKeyConstants
@@ -60,4 +63,13 @@ fun Context.openUrl(path: String) {
     } else {
         Toast.makeText(this, "No browser found", Toast.LENGTH_SHORT).show()
     }
+}
+
+fun fitsInOneLine(text: String, fontSizeSp: Float, maxWidthPx: Float, density: Density): Boolean {
+    val paint = TextPaint().apply {
+        isAntiAlias = true
+        textSize = with(density) { fontSizeSp.sp.toPx() }
+    }
+    val textWidth = paint.measureText(text)
+    return textWidth <= maxWidthPx
 }

mobile/src/main/java/com/windscribe/mobile/ui/connection/ConnectionViewmodel.kt

@@ -143,9 +143,11 @@ abstract class ConnectionViewmodel : ViewModel() {
     abstract fun onFavouriteIpClick()
     abstract fun setContextMenuState(state: Boolean)
     abstract val toastMessage: StateFlow<ToastMessage>
+    abstract val isSingleLineLocationName: StateFlow<Boolean>
     abstract fun clearToast()
     abstract fun onProtocolChangeClick()
     abstract fun onGoToHandled()
+    abstract fun setIsSingleLineLocationName(singleLine: Boolean)
 }
 
 class ConnectionViewmodelImpl @Inject constructor(
@@ -190,6 +192,8 @@ class ConnectionViewmodelImpl @Inject constructor(
     private var networkListener: NetworkInfoListener? = null
     private val _aspectRatio = MutableStateFlow(1)
     override val aspectRatio: StateFlow<Int> = _aspectRatio
+    private val _isSingleLineLocationName = MutableStateFlow(true)
+    override val isSingleLineLocationName: StateFlow<Boolean> = _isSingleLineLocationName
     private var mediaPlayer: MediaPlayer? = null
     private val logger = LoggerFactory.getLogger("ConnectionViewmodel")
 
@@ -761,6 +765,12 @@ class ConnectionViewmodelImpl @Inject constructor(
         }
     }
 
+    override fun setIsSingleLineLocationName(singleLine: Boolean) {
+        viewModelScope.launch {
+            _isSingleLineLocationName.emit(singleLine)
+        }
+    }
+
     override fun onCleared() {
         networkInfoManager.removeNetworkInfoListener(networkListener!!)
         preferences.removeObserver(preferenceChangeListener!!)

mobile/src/main/java/com/windscribe/mobile/ui/helper/ImageHelper.kt

@@ -22,15 +22,17 @@ fun getHeaderHeight(): Dp {
     return getStatusBarHeight() + 60.dp
 }
 @Composable
-fun calculateImageDimensions(): ImageDimensions {
+fun calculateImageDimensions(isSingleLineLocationName: Boolean): ImageDimensions {
     val config = LocalConfiguration.current
     val screenWidthDp = config.screenWidthDp
     val screenHeightDp = config.screenHeightDp
-
     val screenWidth = screenWidthDp.dp
     val screenHeight = screenHeightDp.dp
-
-    val minHeight = 233.dp + getStatusBarHeight()
+    var minImageHeight = 233.dp
+    if (!isSingleLineLocationName) {
+        minImageHeight = 275.dp
+    }
+    val minHeight = minImageHeight + getStatusBarHeight()
     val maxHeight = screenHeight * 0.45f
 
     // Determine dynamic height

mobile/src/main/java/com/windscribe/mobile/ui/home/HomeScreen.kt

@@ -2,6 +2,7 @@ package com.windscribe.mobile.ui.home
 
 import NetworkNameSheet
 import ServerListScreen
+import android.R.attr.maxWidth
 import android.annotation.SuppressLint
 import android.util.Log
 import android.widget.Toast
@@ -58,7 +59,9 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
@@ -67,12 +70,14 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import androidx.navigation.NavController
 import com.windscribe.mobile.R
 import com.windscribe.mobile.ui.AppStartActivity
 import com.windscribe.mobile.ui.common.AppConnectButton
 import com.windscribe.mobile.ui.common.LocationImage
+import com.windscribe.mobile.ui.common.fitsInOneLine
 import com.windscribe.mobile.ui.connection.ConnectionUIState
 import com.windscribe.mobile.ui.connection.ConnectionViewmodel
 import com.windscribe.mobile.ui.connection.LocationInfoState
@@ -363,21 +368,46 @@ private fun LocationName(connectionViewmodel: ConnectionViewmodel) {
     val locationInfo = (state.locationInfo as? LocationInfoState.Success)?.locationInfo
     val nodeName = locationInfo?.nodeName ?: ""
     val nickname = locationInfo?.nickName ?: ""
-    Row {
-        Text(
-            text = nodeName,
-            style = font26,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-            modifier = Modifier.padding(start = 12.dp)
-        )
-        Text(
-            text = " $nickname",
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-            style = font26.copy(fontWeight = FontWeight.Normal),
-            modifier = Modifier.padding(end = 12.dp)
-        )
+    val density = LocalDensity.current
+    val configuration = LocalConfiguration.current
+    val screenWidthDp = configuration.screenWidthDp
+    val maxWidthPx = with(density) { screenWidthDp.dp.toPx() }
+    val isSingleLine = fitsInOneLine("$nodeName $nickname", 26.0f, maxWidthPx, density)
+    connectionViewmodel.setIsSingleLineLocationName(isSingleLine)
+    if (isSingleLine) {
+        Row {
+            Text(
+                text = nodeName,
+                style = font26.copy(textAlign = TextAlign.Start),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.padding(start = 12.dp)
+            )
+            Text(
+                text = " $nickname",
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                style = font26.copy(fontWeight = FontWeight.Normal, textAlign = TextAlign.Start),
+                modifier = Modifier.padding(end = 12.dp)
+            )
+        }
+    } else {
+        Column {
+            Text(
+                text = nodeName,
+                style = font26.copy(textAlign = TextAlign.Start),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.padding(start = 12.dp, end = 12.dp)
+            )
+            Text(
+                text = nickname,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                style = font26.copy(fontWeight = FontWeight.Normal, textAlign = TextAlign.Start),
+                modifier = Modifier.padding(start = 12.dp, end = 12.dp)
+            )
+        }
     }
 }
 

mobile/src/main/java/com/windscribe/mobile/ui/serverlist/ConfigServerList.kt

@@ -138,7 +138,7 @@ private fun SuccessView(
                     onRefresh = {
                         viewModel.refresh(ServerListType.Config)
                     },
-                    modifier = Modifier.fillMaxSize()
+                    modifier = Modifier.weight(1.0f)
                 ) {
                     LazyColumn(state = lazyListState, modifier = Modifier.fillMaxSize()) {
                         items(list, key = { it.id }) { item ->