RMET-3682 ::: Make Scanner View Wider

* fix: make scanning view wider in landscape and on tablets * chore: update pom and changelog * match figma design * fix line thickness * reduce padding * fix tablet potrait mode rect height * remove code duplication
OutSystems · Oct 17, 2024 · 27f00e4 · 27f00e4
1 parent 27511c9
commit 27f00e4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 The changes documented here do not include those from the original repository.
 
+## [1.1.4]
+
+### 08-10-2024
+- Fix: Make Scanner view wider on landscape and on tablets (https://outsystemsrd.atlassian.net/browse/RMET-3682).
+
 ## [1.1.3]
 
 ### 22-08-2024

diff --git a/pom.xml b/pom.xml
@@ -7,5 +7,5 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>com.github.outsystems</groupId>
     <artifactId>osbarcode-android</artifactId>
-    <version>1.1.3</version>
+    <version>1.1.4</version>
 </project>
diff --git a/src/main/kotlin/com/outsystems/plugins/barcode/view/OSBARCScannerActivity.kt b/src/main/kotlin/com/outsystems/plugins/barcode/view/OSBARCScannerActivity.kt
@@ -45,6 +45,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -76,8 +77,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.graphics.drawscope.clipPath
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
@@ -390,20 +393,15 @@ class OSBARCScannerActivity : ComponentActivity() {
 
                 // rectangle size is determined by removing the padding from the border of the screen
                 // and the padding to the corners of the rectangle
-                var rectWidth: Float
-                var rectHeight: Float
+                var rectWidth: Float = canvasWidth - (ScannerAimRectCornerPadding.toPx() * 2)
+                var rectHeight: Float = canvasHeight - (verticalPadding.toPx() * 2) - (ScannerAimRectCornerPadding.toPx() * 2)
 
                 if (isPhone) { // for phones
-                    rectWidth = canvasWidth - (horizontalPadding.toPx() * 2) - (ScannerAimRectCornerPadding.toPx() * 2)
-                    rectHeight = canvasHeight - (verticalPadding.toPx() * 2) - (ScannerAimRectCornerPadding.toPx() * 2)
-                } else { // for tablets
                     if (isPortrait) {
-                        rectWidth = (canvasWidth) - (horizontalPadding.toPx() * 2) - (ScannerAimRectCornerPadding.toPx() * 2)
-                        rectHeight = rectWidth
-                    } else {
                         rectWidth = canvasWidth - (horizontalPadding.toPx() * 2) - (ScannerAimRectCornerPadding.toPx() * 2)
-                        rectHeight = canvasHeight - (ScannerAimRectCornerPadding.toPx() * 2)
                     }
+                } else { // for tablets
+                    rectHeight = minOf(rectWidth, canvasHeight - (ScannerAimRectCornerPadding.toPx() * 2))
                 }
 
                 val rectLeft = (canvasWidth - rectWidth) / 2
@@ -423,10 +421,13 @@ class OSBARCScannerActivity : ComponentActivity() {
                     drawRect(color = ScannerBackgroundBlack)
                 }
 
-                val aimTop = rectTop - ScannerAimRectCornerPadding.toPx()
-                val aimLeft = rectLeft - ScannerAimRectCornerPadding.toPx()
-                val aimRight = aimLeft + rectWidth + (ScannerAimRectCornerPadding * 2).toPx()
-                val aimBottom = aimTop + rectHeight + (ScannerAimRectCornerPadding * 2).toPx()
+                val strokeWidth = ScannerAimStrokeWidth
+                val halfStroke = strokeWidth / 2
+
+                val aimTop = rectTop - ScannerAimRectCornerPadding.toPx() + halfStroke
+                val aimLeft = rectLeft - ScannerAimRectCornerPadding.toPx() + halfStroke
+                val aimRight = aimLeft + rectWidth + (ScannerAimRectCornerPadding * 2).toPx() - strokeWidth
+                val aimBottom = aimTop + rectHeight + (ScannerAimRectCornerPadding * 2).toPx() - strokeWidth
                 val aimLength = ScannerAimCornerLength.toPx()
 
                 val aimPath = Path()
@@ -466,7 +467,7 @@ class OSBARCScannerActivity : ComponentActivity() {
                     Point(aimRight - radius, aimTop),
                     Point(aimRight - aimLength, aimTop)
                 )
-                drawPath(aimPath, color = ScanAimWhite, style = Stroke(width = ScannerAimStrokeWidth))
+                drawPath(aimPath, color = ScanAimWhite, style = Stroke(width = strokeWidth))
             }
         )
     }
@@ -591,23 +592,27 @@ class OSBARCScannerActivity : ComponentActivity() {
                               textToRectPadding: Dp,
                               isPhone: Boolean,
                               isPortrait: Boolean) {
+        var rightButtonsWidth by remember { mutableStateOf(0.dp) }
+        val density = LocalDensity.current
+
         Row(
             modifier = Modifier
                 .fillMaxSize(),
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
-
-            Box(
+            // Left spacer to maintain horizontal conformance
+            Spacer(
                 modifier = Modifier
                     .fillMaxHeight()
-                    .weight(1f, fill = true)
+                    .width(rightButtonsWidth)
                     .background(ScannerBackgroundBlack)
             )
 
+            // Center column with scanning area
             Column(
                 modifier = Modifier
                     .fillMaxHeight()
-                    .weight(2f, fill = true),
+                    .weight(1f),
                 verticalArrangement = Arrangement.Center
             ) {
 
@@ -636,13 +641,15 @@ class OSBARCScannerActivity : ComponentActivity() {
                         .weight(1f, fill = true)
                         .background(ScannerBackgroundBlack)
                 )
-
             }
 
+            // Right column with buttons
             Box(
                 modifier = Modifier
                     .fillMaxHeight()
-                    .weight(1f, fill = true)
+                    .onGloballyPositioned { coordinates ->
+                        rightButtonsWidth = with(density) { coordinates.size.width.toDp() }
+                    }
                     .background(ScannerBackgroundBlack)
             ) {
 
@@ -654,7 +661,7 @@ class OSBARCScannerActivity : ComponentActivity() {
 
                 Column(
                     modifier = Modifier
-                        .padding(end = ScannerBorderPadding)
+                        .padding(start = 12.dp, end = ScannerBorderPadding)
                         .align(Alignment.CenterEnd),
                     verticalArrangement = Arrangement.Center,
                     horizontalAlignment = Alignment.End