From 27f00e466318b0763cce8da87f6f8116fc7afef6 Mon Sep 17 00:00:00 2001 From: Chace Daniels Date: Thu, 17 Oct 2024 09:19:36 -0700 Subject: [PATCH] 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 --- CHANGELOG.md | 5 ++ pom.xml | 2 +- .../barcode/view/OSBARCScannerActivity.kt | 49 +++++++++++-------- 3 files changed, 34 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45fa819..2496b57 100644 --- 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 index efbe475..96be72f 100644 --- a/pom.xml +++ b/pom.xml @@ -7,5 +7,5 @@ 4.0.0 com.github.outsystems osbarcode-android - 1.1.3 + 1.1.4 diff --git a/src/main/kotlin/com/outsystems/plugins/barcode/view/OSBARCScannerActivity.kt b/src/main/kotlin/com/outsystems/plugins/barcode/view/OSBARCScannerActivity.kt index 99d707d..ae61fea 100644 --- 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