Skip to content
This repository was archived by the owner on Apr 4, 2023. It is now read-only.

Commit c6b7d03

Browse files
shiv19shiv19
committed
chore(UI): Fix ML Kit UI on iOS. And Button alignment on home page.
1 parent 327744a commit c6b7d03

6 files changed

Lines changed: 25 additions & 20 deletions

File tree

‎demo-ng/app/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ label {
2929

3030
button {
3131
background-color: #6494AA;
32-
padding: 8 10;
32+
padding: 6 8;
3333
margin: 4 8;
3434
font-size: 13;
3535
border-radius: 4;

‎demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44

55
<GridLayout>
66
<MLKitBarcodeScanner
7+
width="100%" height="100%"
78
formats="QR_CODE, EAN_8, EAN_13"
8-
processEveryNthFrame="5"
9+
android:processEveryNthFrame="5"
10+
ios:processEveryNthFrame="10"
911
(scanResult)="onBarcodeScanResult($event)">
1012
</MLKitBarcodeScanner>
1113

@@ -32,8 +34,8 @@
3234
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3335
</StackLayout>
3436
</GridLayout>
35-
<Label row="0" col="1" class="text-center" textWrap="true" color="white" verticalAlignment="center" text="The scanner has been configured to detect QR codes, EAN 8 and EAN 13. It processes every 5th frame (default 10). These settings can be tweaked in your usage of the plugin."></Label>
36-
<ListView row="2" col="0" colSpan="3" [items]="barcodes" class="m-t-20">
37+
<Label row="0" col="1" class="text-center c-white" textWrap="true" verticalAlignment="center" text="The scanner has been configured to detect QR codes, EAN 8 and EAN 13. It processes every 5th frame (default 10). These settings can be tweaked in your usage of the plugin."></Label>
38+
<ListView row="2" col="0" colSpan="3" [items]="barcodes" class="m-t-20" backgroundColor="transparent">
3739
<ng-template let-item="item">
3840
<GridLayout columns="2*, 3*">
3941
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.format"></Label>

‎demo-ng/app/tabs/mlkit/facedetection/facedetection.component.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
<GridLayout rows="6/8*, 2/8*">
66
<GridLayout row="0">
77
<MLKitFaceDetection
8+
width="100%" height="100%"
89
processEveryNthFrame="30"
910
(scanResult)="onFaceDetectionResult($event)">
1011
</MLKitFaceDetection>
1112

12-
<GridLayout rows="*, 320, *" columns="*, 5/6*, *">
13+
<GridLayout rows="*, 250, *" columns="*, 5/6*, *">
1314
<Label class="mask" row="0" col="0" colSpan="3"></Label>
1415
<Label class="mask" row="2" col="0" colSpan="3"></Label>
1516
<Label class="mask" row="1" col="0"></Label>
@@ -32,23 +33,23 @@
3233
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3334
</StackLayout>
3435
</GridLayout>
35-
<Label row="0" col="1" class="text-center" textWrap="true" color="white" verticalAlignment="center" text="The scanner has been configured to detect faces every 30th frame (default is 10). You can tweak this in your usage of the plugin."></Label>
36+
<Label row="0" col="1" class="text-center c-white" textWrap="true" color="white" verticalAlignment="center" text="The scanner has been configured to detect faces every 30th frame (default is 10). You can tweak this in your usage of the plugin."></Label>
3637
<StackLayout row="2" col="0" colSpan="3">
3738
<Label [text]="mlKitAllOK" textWrap="true" class="m-t-5 c-purple"></Label>
38-
<GridLayout columns="*, *, *" class="m-t-5">
39-
<Label col="0" class="mlkit-result font-weight-bold" textWrap="true" text="Smiling"></Label>
40-
<Label col="1" class="mlkit-result font-weight-bold" textWrap="true" text="Left 👁 open"></Label>
41-
<Label col="2" class="mlkit-result font-weight-bold" textWrap="true" text="Right 👁 open"></Label>
39+
<GridLayout row="auto" columns="*, *, *" class="m-t-5">
40+
<Label row="0" col="0" class="mlkit-result font-weight-bold" textWrap="true" text="Smiling"></Label>
41+
<Label row="0" col="1" class="mlkit-result font-weight-bold" textWrap="true" text="Left 👁 open"></Label>
42+
<Label row="0" col="2" class="mlkit-result font-weight-bold" textWrap="true" text="Right 👁 open"></Label>
4243
</GridLayout>
4344
</StackLayout>
4445
</GridLayout>
4546
</GridLayout>
4647
<ListView backgroundColor="black" row="1" [items]="faces">
4748
<ng-template let-item="item">
4849
<GridLayout columns="*, *, *">
49-
<Label col="0" class="mlkit-result" [class.c-purple]="item.smilingProbability > 0.7" [text]="item.smilingProbability | number" textWrap="true"></Label>
50-
<Label col="1" class="mlkit-result" [class.c-purple]="item.leftEyeOpenProbability > 0.7" [text]="item.leftEyeOpenProbability | number" textWrap="true"></Label>
51-
<Label col="2" class="mlkit-result" [class.c-purple]="item.rightEyeOpenProbability > 0.7" [text]="item.rightEyeOpenProbability | number" textWrap="true"></Label>
50+
<Label col="0" class="mlkit-result c-black" [class.c-purple]="item.smilingProbability > 0.7" [text]="item.smilingProbability | number" textWrap="true"></Label>
51+
<Label col="1" class="mlkit-result c-black" [class.c-purple]="item.leftEyeOpenProbability > 0.7" [text]="item.leftEyeOpenProbability | number" textWrap="true"></Label>
52+
<Label col="2" class="mlkit-result c-black" [class.c-purple]="item.rightEyeOpenProbability > 0.7" [text]="item.rightEyeOpenProbability | number" textWrap="true"></Label>
5253
</GridLayout>
5354
</ng-template>
5455
</ListView>

‎demo-ng/app/tabs/mlkit/imagelabeling/imagelabeling.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<GridLayout>
66
<MLKitImageLabeling
7+
width="100%" height="100%"
78
confidenceThreshold="0.6"
89
(scanResult)="onImageLabelingResult($event)">
910
</MLKitImageLabeling>
@@ -31,7 +32,7 @@
3132
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3233
</StackLayout>
3334
</GridLayout>
34-
<ListView row="0" rowSpan="3" col="0" colSpan="3" [items]="labels" class="m-t-20">
35+
<ListView separatorColor="transparent" row="0" rowSpan="3" col="0" colSpan="3" [items]="labels" class="m-t-20" backgroundColor="transparent">
3536
<ng-template let-item="item">
3637
<GridLayout columns="3*, 2*">
3738
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.text"></Label>

‎demo-ng/app/tabs/mlkit/mlkit.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
<Label row="0" text="Pick the image processing source:" textWrap="true"></Label>
44

5-
<StackLayout row="1" orientation="horizontal" horizontalAlignment="center">
6-
<Button text="Cameraroll" (tap)="fromCameraroll()" class="button"></Button>
5+
<FlexboxLayout row="1" flexDirection="row" justifyContent="space-around">
6+
<Button text="Cameraroll" textWrap="true" (tap)="fromCameraroll()" class="button"></Button>
77
<!-- the image may require rotation on Android, and permission may be required - not feeling like exposing this for now -->
88
<iOS>
9-
<Button text="Cam picture" (tap)="fromCameraPicture()" class="button"></Button>
9+
<Button text="Cam picture" textWrap="true" (tap)="fromCameraPicture()" class="button"></Button>
1010
</iOS>
11-
<Button text="Cam feed" (tap)="fromCameraFeed()" class="button"></Button>
12-
</StackLayout>
11+
<Button text="Cam feed" textWrap="true" (tap)="fromCameraFeed()" class="button"></Button>
12+
</FlexboxLayout>
1313

1414
<Image row="2" [src]="pickedImage" width="240" horizontalAlignment="center" (tap)="reusePickedImage()"></Image>
1515

‎demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<GridLayout>
66
<MLKitTextRecognition
7+
width="100%" height="100%"
78
(scanResult)="onTextRecognitionResult($event)">
89
</MLKitTextRecognition>
910

@@ -30,7 +31,7 @@
3031
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3132
</StackLayout>
3233
</GridLayout>
33-
<ListView row="0" rowSpan="3" col="0" colSpan="3" [items]="blocks" class="m-t-20">
34+
<ListView separatorColor="transparent" row="0" rowSpan="3" col="0" colSpan="3" [items]="blocks" class="m-t-20" backgroundColor="transparent">
3435
<ng-template let-item="item">
3536
<Label class="mlkit-result" textWrap="true" [text]="item.text"></Label>
3637
</ng-template>

0 commit comments

Comments
 (0)