Re-Updated: Location of icons used in qr-code-scanner screen

This commit is contained in:
Muhammed Ayimen 2023-11-08 22:21:10 +09:00
parent 2d56c656cc
commit cd817f6df9
7 changed files with 114 additions and 113 deletions

View file

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.16998 14.8299L14.83 9.16992" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.83 14.8299L9.16998 9.16992" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 536 B

View file

@ -0,0 +1,20 @@
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_884_3193)">
<rect x="15" y="14" width="32" height="32" rx="15" fill="white"/>
</g>
<path d="M40.7558 20.2363C40.4408 19.9212 39.9262 19.9212 39.6112 20.2363L20.2363 39.6217C19.9212 39.9367 19.9212 40.4513 20.2363 40.7663C20.3938 40.9133 20.5933 40.9973 20.8033 40.9973C21.0134 40.9973 21.2129 40.9133 21.3704 40.7558L40.7558 21.3704C41.0814 21.0554 41.0814 20.5513 40.7558 20.2363Z" fill="#292D32"/>
<path d="M33.4575 21.5971V27.5408L27.5347 33.4636V31.8464H24.2898C22.8196 31.8464 22.4101 30.9433 23.3867 29.8407L30.4961 21.7546L31.3362 20.799C32.5018 19.4759 33.4575 19.8329 33.4575 21.5971Z" fill="#292D32"/>
<path d="M37.6039 31.1619L30.4946 39.2479L29.6545 40.2035C28.4888 41.5267 27.5332 41.1696 27.5332 39.4054V36.6121L34.9891 29.1562H36.7008C38.171 29.1562 38.5806 30.0593 37.6039 31.1619Z" fill="#292D32"/>
<defs>
<filter id="filter0_d_884_3193" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="5" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_884_3193"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_884_3193"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_884_3193" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,18 @@
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_5498_6943)">
<rect x="15" y="14" width="32" height="32" rx="15" fill="white"/>
</g>
<path d="M36.844 29.1561H33.5997V21.5968C33.5997 19.8329 32.6443 19.476 31.4789 20.7988L30.639 21.7543L23.5311 29.8386C22.5547 30.941 22.9642 31.8439 24.4341 31.8439H27.6783V39.4032C27.6783 41.1671 28.6337 41.524 29.7991 40.2012L30.639 39.2457L37.7469 31.1615C38.7233 30.0591 38.3138 29.1561 36.844 29.1561Z" fill="#292D32"/>
<defs>
<filter id="filter0_d_5498_6943" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="5" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_5498_6943"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5498_6943"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5498_6943" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,18 @@
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_884_3200)">
<rect x="15" y="14" width="32" height="32" rx="15" fill="white"/>
</g>
<path d="M35.19 20H26.81C23.17 20 21 22.17 21 25.81V34.19C21 35.28 21.19 36.23 21.56 37.03C22.42 38.93 24.26 40 26.81 40H35.19C38.83 40 41 37.83 41 34.19V31.9V25.81C41 22.17 38.83 20 35.19 20ZM39.37 30.5C38.59 29.83 37.33 29.83 36.55 30.5L32.39 34.07C31.61 34.74 30.35 34.74 29.57 34.07L29.23 33.79C28.52 33.17 27.39 33.11 26.59 33.65L22.85 36.16C22.63 35.6 22.5 34.95 22.5 34.19V25.81C22.5 22.99 23.99 21.5 26.81 21.5H35.19C38.01 21.5 39.5 22.99 39.5 25.81V30.61L39.37 30.5Z" fill="#292D32"/>
<defs>
<filter id="filter0_d_884_3200" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="5" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_884_3200"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_884_3200"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_884_3200" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -141,11 +141,11 @@ class _QrScannerState extends State<QrScanner> {
switch (state) {
case TorchState.on:
return SvgPicture.asset(
'assets/simple-icons/flash_on.svg',
'assets/scanner-icons/flash_on.svg',
);
case TorchState.off:
return SvgPicture.asset(
'assets/simple-icons/flash_off.svg',
'assets/scanner-icons/flash_off.svg',
);
}
},
@ -157,13 +157,13 @@ class _QrScannerState extends State<QrScanner> {
// Gallery button
IconButton(
icon: SvgPicture.asset(
'assets/simple-icons/gallery.svg',
'assets/scanner-icons/gallery.svg',
),
iconSize: 60,
onPressed: () async {
final result = await showDialogWidget(
context: context,
title: 'Google Authenticator (saved image)',
title: l10n.importFromApp("Google Authenticator (saved image)"),
body:
'Please turn off all photo cloud sync from all apps, including iCloud, Google Photo, OneDrive, etc. \nAlso if you have a second smartphone, it is safer to import by scanning QR code.',
buttons: [
@ -277,7 +277,7 @@ class _QrScannerState extends State<QrScanner> {
Navigator.pop(context);
},
child: SvgPicture.asset(
'assets/simple-icons/cross.svg',
'assets/scanner-icons/cross.svg',
colorFilter:
const ColorFilter.mode(Colors.white, BlendMode.srcATop),
height: 30,

View file

@ -1,67 +0,0 @@
import 'dart:async';
import 'dart:io';
import 'package:ente_auth/l10n/l10n.dart';
import 'package:ente_auth/ui/components/buttons/button_widget.dart';
import 'package:ente_auth/ui/components/dialog_widget.dart';
import 'package:ente_auth/ui/components/models/button_type.dart';
import 'package:ente_auth/utils/toast_util.dart';
import 'package:flutter/material.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
const kGoogleAuthExportPrefix = 'otpauth-migration://offline?data=';
Future<void> showGoogleAuthImageInstruction(BuildContext context) async {
MobileScannerController scannerController = MobileScannerController(
detectionSpeed: DetectionSpeed.normal,
);
final l10n = context.l10n;
final result = await showDialogWidget(
context: context,
title: 'Google Authenticator (saved image)',
body:
'Please turn off all photo cloud sync from all apps, including iCloud, Google Photo, OneDrive, etc. \nAlso if you have a second smartphone, it is safer to import by scanning QR code.',
buttons: [
const ButtonWidget(
buttonType: ButtonType.primary,
labelText: 'Import from image',
isInAlert: true,
buttonSize: ButtonSize.large,
buttonAction: ButtonAction.first,
),
ButtonWidget(
buttonType: ButtonType.secondary,
labelText: context.l10n.cancel,
buttonSize: ButtonSize.large,
isInAlert: true,
buttonAction: ButtonAction.second,
),
],
);
if (result?.action != null && result!.action != ButtonAction.cancel) {
if (result.action == ButtonAction.first) {
List<AssetEntity>? assets = await AssetPicker.pickAssets(
context,
pickerConfig: const AssetPickerConfig(
maxAssets: 1,
),
);
if (assets != null && assets.isNotEmpty) {
AssetEntity asset = assets.first;
File? file = await asset.file;
String path = file!.path;
if (await scannerController.analyzeImage(path)) {
final barcode = await scannerController.barcodes.first;
showToast(context, "$barcode");
} else {
showToast(context, "Failed to scan image");
}
} else {
showToast(context, "Image not selected");
}
}
}
}

View file

@ -1,5 +1,3 @@
import 'package:flutter/material.dart';
class QRScannerOverlay extends StatelessWidget {
@ -13,41 +11,45 @@ class QRScannerOverlay extends StatelessWidget {
MediaQuery.of(context).size.height < 400)
? 200.0
: 330.0;
return Stack(children: [
ColorFiltered(
colorFilter:
ColorFilter.mode(Colors.black.withOpacity(0.9), BlendMode.srcOut),
child: Stack(
children: [
Container(
decoration: const BoxDecoration(
color: Colors.red, backgroundBlendMode: BlendMode.dstOut,),
),
Align(
alignment: Alignment.center,
child: Container(
height: scanArea,
width: scanArea,
decoration: BoxDecoration(
return Stack(
children: [
ColorFiltered(
colorFilter:
ColorFilter.mode(Colors.black.withOpacity(0.9), BlendMode.srcOut),
child: Stack(
children: [
Container(
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(20),
backgroundBlendMode: BlendMode.dstOut,
),
),
),
],
),
),
Align(
alignment: Alignment.center,
child: CustomPaint(
foregroundPainter: BorderPainter(),
child: SizedBox(
width: scanArea + 25,
height: scanArea + 25,
Align(
alignment: Alignment.center,
child: Container(
height: scanArea,
width: scanArea,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(20),
),
),
),
],
),
),
),
],);
Align(
alignment: Alignment.center,
child: CustomPaint(
foregroundPainter: BorderPainter(),
child: SizedBox(
width: scanArea + 25,
height: scanArea + 25,
),
),
),
],
);
}
}
@ -122,15 +124,20 @@ class OverlayWithHolePainter extends CustomPainter {
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = Colors.black54;
canvas.drawPath(
Path.combine(
PathOperation.difference,
Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height)),
Path()
..addOval(Rect.fromCircle(
center: Offset(size.width - 44, size.height - 44), radius: 40,),)
..close(),
),
paint,);
Path.combine(
PathOperation.difference,
Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height)),
Path()
..addOval(
Rect.fromCircle(
center: Offset(size.width - 44, size.height - 44),
radius: 40,
),
)
..close(),
),
paint,
);
}
@override