0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: complete pinned design

Browse source
This commit is contained in:
Prateek Sunal 2024-04-29 14:48:40 +05:30
parent 17ad0a97d3
commit 12635be0d2
2 changed files with 56 additions and 5 deletions
auth
assets/svg
pin-card.svg
lib/ui
code_widget.dart

13
auth/assets/svg/pin-card.svg
View file

@ -1,4 +1,11 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.04883 6.76107L5.21549 7.92773L8.13216 10.8444L8.7155 10.2611L9.29883 7.92773L10.4655 6.17773L12.2155 5.5944V5.01107L9.88216 2.67773L8.7155 3.8444L6.9655 6.17773H5.21549L4.04883 6.76107Z" fill="#9610D6"/>
<path d="M9.53883 1.42694L9.50096 1.39064L9.46463 1.42849L9.14963 1.75661L9.14961 1.7566L9.14865 1.75766C8.6866 2.26613 8.46566 2.90678 8.41223 3.54662L6.66759 5.29126C5.5792 5.10581 4.41145 5.41502 3.57269 6.25378L3.25769 6.56878L3.21966 6.60681L3.2586 6.64392L3.57314 6.9436L5.42243 8.79289L1.82233 12.3783L1.80687 12.3937V12.4155V13.031V13.0835H1.85938H2.4745H2.4963L2.51169 13.0681L6.09794 9.46842L7.90534 11.2767L7.90612 11.2775L8.20634 11.5908L8.2435 11.6296L8.28142 11.5915L8.59548 11.2766C9.51905 10.3539 9.78567 9.08854 9.51881 7.94834L11.0389 6.42778C11.8045 6.51256 12.5871 6.28835 13.1481 5.72734L13.149 5.72649L13.45 5.41149L13.4846 5.37525L13.45 5.33898L13.1494 5.02398L13.1494 5.02397L13.1486 5.0231L9.86731 1.74185L9.86732 1.74184L9.86652 1.74107L9.53883 1.42694ZM10.7051 5.40641L10.6757 5.3983L10.6541 5.41991L10.4764 5.59753L10.5136 5.63466L10.4764 5.59754L8.64506 7.42935L8.64498 7.42943L8.45336 7.62193L8.4309 7.64449L8.44052 7.67483L8.52277 7.93427L8.52276 7.93427L8.523 7.935C8.76838 8.67154 8.66363 9.50084 8.19633 10.1885L4.70307 6.69523C5.31927 6.28902 6.04728 6.10931 6.72609 6.28725L6.95726 6.35486L6.98704 6.36357L7.00903 6.34168L7.18753 6.16406L7.18763 6.16396L9.21106 4.14009L9.21106 4.14009L9.33356 4.01759L9.34894 4.00221V3.98047V3.80197C9.34894 3.48577 9.4571 3.18284 9.61062 2.89147L11.9994 5.28066C11.6616 5.46132 11.3077 5.56337 10.9509 5.47407C10.9507 5.47402 10.9505 5.47397 10.9503 5.47392L10.7051 5.40641Z" fill="#9610D6" stroke="#9610D6" stroke-width="0.105"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_25342_9412)">
<path d="M3 5.5L4 6.5L6.5 9L7 8.5L7.5 6.5L8.5 5L10 4.5L10 4L8 2L7 3L5.5 5L4 5L3 5.5Z" fill="#9610D6"/>
<path d="M7.67655 0.960601L7.70697 0.928785L7.98822 1.19766L7.98895 1.19836L7.98894 1.19837L10.8014 4.01087L10.8022 4.01161L10.8022 4.01162L11.0598 4.28162L11.0895 4.31271L11.0598 4.34378L10.8018 4.61378L10.8011 4.61451C10.3202 5.09537 9.64942 5.28755 8.9932 5.21488L7.69023 6.51822C7.91896 7.49551 7.69045 8.58009 6.89886 9.37096L7.67655 0.960601ZM7.67655 0.960601L7.64442 0.929125L7.64405 0.9295L7.61152 0.962044L7.61219 0.962686L7.37379 1.21102L7.37377 1.21101L7.37295 1.21192C6.97691 1.64775 6.78753 2.19688 6.74173 2.74532M7.67655 0.960601L6.74173 2.74532M6.74173 2.74532L5.24633 4.24072C4.31342 4.08177 3.31249 4.34681 2.59355 5.06574L2.32356 5.33574L2.29096 5.36834L2.32433 5.40014L2.59394 5.65702L4.17904 7.24212L1.09325 10.3153L1.08 10.3285L1.08 10.3472L1.08 10.8748L1.08 10.9198L1.125 10.9198L1.65225 10.9198L1.67094 10.9198L1.68413 10.9066L4.75805 7.82114L6.30726 9.37107L6.30792 9.37175L6.56526 9.64032L6.59711 9.67356L6.62961 9.64096L6.8988 9.37102L6.74173 2.74532ZM8.70707 4.33943L8.68182 4.33248L8.6633 4.35099L8.51105 4.50324L8.51105 4.50325L6.9413 6.07337L6.94123 6.07344L6.77698 6.23844L6.75773 6.25778L6.76598 6.28379L6.83648 6.50616L6.83647 6.50616L6.83668 6.50679C7.047 7.13811 6.95722 7.84894 6.55667 8.43835L3.56245 5.44413C4.09062 5.09595 4.71463 4.94191 5.29647 5.09443L5.49462 5.15238L5.52014 5.15984L5.53899 5.14109L5.69199 4.98884L5.69207 4.98875L7.42644 3.25401L7.42645 3.254L7.53144 3.14901L7.54462 3.13583L7.54462 3.11719L7.54462 2.96419C7.54462 2.69316 7.63733 2.4335 7.76892 2.18376L9.81644 4.23163C9.52687 4.38649 9.22356 4.47396 8.91769 4.39741L8.70707 4.33943Z" fill="#9610D6" stroke="#9610D6" stroke-width="0.09"/>
</g>
<defs>
<clipPath id="clip0_25342_9412">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>

Side by side Swipe Overlay

Before

(image error) Size: 1.8 KiB

After

(image error) Size: 2 KiB

48
auth/lib/ui/code_widget.dart
View file

@ -6,7 +6,6 @@ import 'package:ente_auth/core/configuration.dart';
import 'package:ente_auth/ente_theme_data.dart';
import 'package:ente_auth/l10n/l10n.dart';
import 'package:ente_auth/models/code.dart';
import 'package:ente_auth/models/code_display.dart';
import 'package:ente_auth/onboarding/view/setup_enter_secret_key_page.dart';
import 'package:ente_auth/onboarding/view/view_qr_page.dart';
import 'package:ente_auth/services/local_authentication_service.dart';
@ -272,6 +271,14 @@ class _CodeWidgetState extends State<CodeWidget> {
Widget _getCardContents(AppLocalizations l10n) {
return Stack(
children: [
if (widget.code.isPinned)
Align(
alignment: Alignment.topRight,
child: CustomPaint(
painter: PinBgPainter(strokeColor: const Color(0xFFF9ECFF)),
size: const Size(39, 39),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -521,7 +528,7 @@ class _CodeWidgetState extends State<CodeWidget> {
Future<void> _onPinPressed(_) async {
bool currentlyPinned = widget.code.isPinned;
final display = widget.code.display ?? CodeDisplay();
final display = widget.code.display;
final Code code = widget.code.copyWith(
display: display.copyWith(pinned: !currentlyPinned),
);
@ -587,3 +594,40 @@ class _CodeWidgetState extends State<CodeWidget> {
return code;
}
}
class PinBgPainter extends CustomPainter {
final Color strokeColor;
final PaintingStyle paintingStyle;
final double strokeWidth;
PinBgPainter({
this.strokeColor = Colors.black,
this.strokeWidth = 3,
this.paintingStyle = PaintingStyle.fill,
});
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = strokeColor
..strokeWidth = strokeWidth
..style = paintingStyle;
canvas.drawPath(getTrianglePath(size.width, size.height), paint);
}
Path getTrianglePath(double x, double y) {
return Path()
..moveTo(0, 0)
..lineTo(x, 0)
..lineTo(x, y)
..lineTo(0, 0);
}
@override
bool shouldRepaint(PinBgPainter oldDelegate) {
return oldDelegate.strokeColor != strokeColor ||
oldDelegate.paintingStyle != paintingStyle ||
oldDelegate.strokeWidth != strokeWidth;
}
}