fix: add toasts for pin, update card ui, add pin svgs
This commit is contained in:
Prateek Sunal
parent
e26c817e18
commit
a22f38ca3b
7 changed files with 118 additions and 71 deletions
4
auth/assets/svg/pin-active.svg
Normal file
4
auth/assets/svg/pin-active.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.67969 9.13704L7.30255 10.7599L11.3597 14.817L12.1711 14.0056L12.9825 10.7599L14.6054 8.32561L17.0397 7.51418V6.70275L13.794 3.45703L12.1711 5.07989L9.73683 8.32561H7.30255L5.67969 9.13704Z" fill="black"/>
|
||||
<path d="M13.3183 1.71931L13.269 1.77093L13.2168 1.71985L13.2162 1.72046L13.1634 1.77327L13.1645 1.77432L12.7776 2.17734L12.7776 2.17732L12.7762 2.1788C12.1335 2.88609 11.8262 3.77724 11.7519 4.66728L9.32505 7.09411C7.81108 6.83615 6.18671 7.26627 5.01998 8.433L4.5818 8.87117L4.5289 8.92408L4.58307 8.97568L5.0206 9.39255L7.593 11.965L2.58519 16.9523L2.56369 16.9737V17.004V17.8603V17.9333H2.63672H3.49237H3.5227L3.54411 17.9118L8.53265 12.9046L11.0473 15.4205L11.4655 15.8569L11.5172 15.9108L11.5699 15.8579L12.0068 15.4199C12.0068 15.4198 12.0068 15.4198 12.0069 15.4198C13.2915 14.1363 13.6624 12.3762 13.2912 10.7902L15.4057 8.67503C16.4706 8.79297 17.5592 8.48109 18.3396 7.70071L18.3408 7.69952L18.7595 7.26135L18.8076 7.21094L18.7595 7.16049L18.3414 6.72231L18.3414 6.7223L18.3402 6.72109L13.7759 2.1568L13.7759 2.15679L13.7748 2.15565L13.3183 1.71931ZM14.9413 7.25429L14.9004 7.24301L14.8703 7.27306L14.6232 7.52014L14.6232 7.52015L12.0758 10.0682L12.0756 10.0684L11.8091 10.3361L11.7778 10.3675L11.7912 10.4097L11.9056 10.7706L11.906 10.7716C12.2473 11.7962 12.1016 12.9497 11.4516 13.9063L6.59236 9.04707C7.44951 8.48202 8.46219 8.23203 9.40643 8.47956L9.72799 8.5736L9.76941 8.58571L9.8 8.55527L10.0483 8.30819L10.0484 8.30806L12.8631 5.49281L12.8631 5.49281L13.0335 5.32241L13.0549 5.30102V5.27077V5.02248C13.0549 4.58263 13.2053 4.16125 13.4189 3.75595L16.7417 7.07936C16.2718 7.33067 15.7795 7.47262 15.2832 7.3484L14.9413 7.25429Z" fill="black" stroke="black" stroke-width="0.146057"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
4
auth/assets/svg/pin-card.svg
Normal file
4
auth/assets/svg/pin-card.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
3
auth/assets/svg/pin-inactive.svg
Normal file
3
auth/assets/svg/pin-inactive.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.1853 2.04353L13.136 2.09515L13.0839 2.04407L13.0832 2.04468L13.0304 2.09748L13.0315 2.09854L12.6447 2.50148L12.6447 2.50146L12.6434 2.50294C12.0008 3.21009 11.6935 4.10106 11.6192 4.99092L9.19285 7.41726C7.67919 7.15935 6.05514 7.58939 4.88864 8.75589L4.45056 9.19397L4.39766 9.24686L4.45182 9.29846L4.88926 9.71525L7.46115 12.2871L2.45434 17.2735L2.43285 17.2949V17.3252V18.1813V18.2543H2.50586H3.36134H3.39166L3.41307 18.2328L8.40061 13.2266L10.9148 15.742L11.3329 16.1783L11.3845 16.2322L11.4373 16.1793L11.8741 15.7413C11.8741 15.7413 11.8741 15.7413 11.8741 15.7413C13.1585 14.4581 13.5293 12.6983 13.1582 11.1126L15.2723 8.99787C16.337 9.11579 17.4254 8.80396 18.2056 8.02374L18.2068 8.02256L18.6254 7.58447L18.6735 7.53407L18.6254 7.48363L18.2074 7.04554L18.2074 7.04553L18.2062 7.04432L13.6428 2.48094L13.6429 2.48093L13.6417 2.47979L13.1853 2.04353ZM14.808 7.57742L14.7671 7.56614L14.737 7.59618L14.49 7.84321L14.49 7.84322L11.943 10.3908L11.9429 10.3909L11.6764 10.6586L11.6452 10.69L11.6585 10.7322L11.7729 11.093L11.7729 11.093L11.7733 11.094C12.1145 12.1184 11.9688 13.2717 11.3189 14.2281L6.46071 9.36983C7.31768 8.8049 8.33015 8.55496 9.2742 8.80243L9.59571 8.89646L9.63712 8.90857L9.66771 8.87813L9.91596 8.6311L9.91609 8.63097L12.7302 5.81628L12.9005 5.64592L12.9219 5.62453V5.59429V5.34604C12.9219 4.90629 13.0723 4.48499 13.2858 4.07977L16.608 7.40252C16.1382 7.65378 15.6461 7.7957 15.1498 7.6715L14.808 7.57742Z" fill="black" stroke="black" stroke-width="0.146028"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -424,5 +424,7 @@
|
|||
"endpointUpdatedMessage": "Endpoint updated successfully",
|
||||
"customEndpoint": "Connected to {endpoint}",
|
||||
"pinText": "Pin",
|
||||
"unpinText": "Unpin"
|
||||
"unpinText": "Unpin",
|
||||
"pinnedCodeMessage": "{code} has been pinned",
|
||||
"unpinnedCodeMessage": "{code} has been unpinned"
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@ class _CodeTimerProgressState extends State<CodeTimerProgress>
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LinearProgressWidget(
|
||||
color: _progress > 0.4 ? Colors.green : Colors.orange,
|
||||
color: _progress > 0.4 ? const Color(0xFF9610D6) : Colors.orange,
|
||||
fractionOfStorage: _progress,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ import 'package:ente_auth/utils/totp_util.dart';
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_context_menu/flutter_context_menu.dart';
|
||||
import 'package:flutter_slidable/flutter_slidable.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:fluttertoast/fluttertoast.dart';
|
||||
import 'package:logging/logging.dart';
|
||||
import 'package:move_to_background/move_to_background.dart';
|
||||
|
||||
|
|
@ -127,16 +129,16 @@ class _CodeWidgetState extends State<CodeWidget> {
|
|||
return Slidable(
|
||||
key: ValueKey(widget.code.hashCode),
|
||||
endActionPane: ActionPane(
|
||||
extentRatio: 0.60,
|
||||
extentRatio: 0.90,
|
||||
motion: const ScrollMotion(),
|
||||
children: [
|
||||
const SizedBox(
|
||||
width: 4,
|
||||
width: 14,
|
||||
),
|
||||
SlidableAction(
|
||||
onPressed: _onShowQrPressed,
|
||||
backgroundColor: Colors.grey.withOpacity(0.1),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
foregroundColor:
|
||||
Theme.of(context).colorScheme.inverseBackgroundColor,
|
||||
icon: Icons.qr_code_2_outlined,
|
||||
|
|
@ -145,28 +147,36 @@ class _CodeWidgetState extends State<CodeWidget> {
|
|||
spacing: 8,
|
||||
),
|
||||
const SizedBox(
|
||||
width: 4,
|
||||
width: 14,
|
||||
),
|
||||
SlidableAction(
|
||||
CustomSlidableAction(
|
||||
onPressed: _onPinPressed,
|
||||
backgroundColor: Colors.grey.withOpacity(0.1),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
foregroundColor:
|
||||
Theme.of(context).colorScheme.inverseBackgroundColor,
|
||||
icon: widget.code.isPinned
|
||||
? Icons.push_pin
|
||||
: Icons.push_pin_outlined,
|
||||
label: widget.code.isPinned ? l10n.unpinText : l10n.pinText,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
if (widget.code.isPinned)
|
||||
SvgPicture.asset("assets/svg/pin-active.svg")
|
||||
else
|
||||
SvgPicture.asset("assets/svg/pin-inactive.svg"),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
widget.code.isPinned ? l10n.unpinText : l10n.pinText,
|
||||
),
|
||||
],
|
||||
),
|
||||
padding: const EdgeInsets.only(left: 4, right: 0),
|
||||
spacing: 8,
|
||||
),
|
||||
const SizedBox(
|
||||
width: 4,
|
||||
width: 14,
|
||||
),
|
||||
SlidableAction(
|
||||
onPressed: _onEditPressed,
|
||||
backgroundColor: Colors.grey.withOpacity(0.1),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
foregroundColor:
|
||||
Theme.of(context).colorScheme.inverseBackgroundColor,
|
||||
icon: Icons.edit_outlined,
|
||||
|
|
@ -175,12 +185,12 @@ class _CodeWidgetState extends State<CodeWidget> {
|
|||
spacing: 8,
|
||||
),
|
||||
const SizedBox(
|
||||
width: 4,
|
||||
width: 14,
|
||||
),
|
||||
SlidableAction(
|
||||
onPressed: _onDeletePressed,
|
||||
backgroundColor: Colors.grey.withOpacity(0.1),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
foregroundColor: const Color(0xFFFE4A49),
|
||||
icon: Icons.delete,
|
||||
label: l10n.delete,
|
||||
|
|
@ -199,19 +209,38 @@ class _CodeWidgetState extends State<CodeWidget> {
|
|||
}
|
||||
|
||||
Widget _clippedCard(AppLocalizations l10n) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.codeCardBackgroundColor,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Theme.of(context).colorScheme.shadow,
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
return Container(
|
||||
height: 132,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context).colorScheme.codeCardBackgroundColor,
|
||||
boxShadow: widget.code.isPinned
|
||||
? [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF000000).withOpacity(0.03),
|
||||
blurRadius: 2,
|
||||
offset: const Offset(0, 7),
|
||||
),
|
||||
BoxShadow(
|
||||
color: const Color(0xFF000000).withOpacity(0.09),
|
||||
blurRadius: 2,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
BoxShadow(
|
||||
color: const Color(0xFF000000).withOpacity(0.16),
|
||||
blurRadius: 1,
|
||||
offset: const Offset(0, 1),
|
||||
),
|
||||
BoxShadow(
|
||||
color: const Color(0xFF000000).withOpacity(0.18),
|
||||
blurRadius: 1,
|
||||
offset: const Offset(0, 0),
|
||||
),
|
||||
]
|
||||
: [],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
|
|
@ -241,50 +270,46 @@ class _CodeWidgetState extends State<CodeWidget> {
|
|||
}
|
||||
|
||||
Widget _getCardContents(AppLocalizations l10n) {
|
||||
return SizedBox(
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
if (widget.code.type == Type.totp)
|
||||
CodeTimerProgress(
|
||||
period: widget.code.period,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 16,
|
||||
return Stack(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
if (widget.code.type == Type.totp)
|
||||
CodeTimerProgress(
|
||||
period: widget.code.period,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
_shouldShowLargeIcon ? _getIcon() : const SizedBox.shrink(),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
_getTopRow(),
|
||||
const SizedBox(height: 4),
|
||||
_getBottomRow(l10n),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
_shouldShowLargeIcon ? _getIcon() : const SizedBox.shrink(),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
_getTopRow(),
|
||||
const SizedBox(height: 4),
|
||||
_getBottomRow(l10n),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
],
|
||||
),
|
||||
if (widget.code.isPinned)
|
||||
const Positioned(
|
||||
right: 4,
|
||||
top: 4,
|
||||
child: Icon(
|
||||
Icons.push_pin,
|
||||
size: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
],
|
||||
),
|
||||
if (widget.code.isPinned) ...[
|
||||
Align(
|
||||
alignment: Alignment.topRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 6, top: 6),
|
||||
child: SvgPicture.asset("assets/svg/pin-card.svg"),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -500,7 +525,15 @@ class _CodeWidgetState extends State<CodeWidget> {
|
|||
final Code code = widget.code.copyWith(
|
||||
display: display.copyWith(pinned: !currentlyPinned),
|
||||
);
|
||||
unawaited(CodeStore.instance.addCode(code));
|
||||
unawaited(
|
||||
CodeStore.instance.addCode(code).then(
|
||||
(value) => Fluttertoast.showToast(
|
||||
msg: !currentlyPinned
|
||||
? context.l10n.pinnedCodeMessage(widget.code.issuer)
|
||||
: context.l10n.unpinnedCodeMessage(widget.code.issuer),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _onDeletePressed(_) async {
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@ flutter:
|
|||
- assets/simple-icons/_data/
|
||||
- assets/custom-icons/icons/
|
||||
- assets/custom-icons/_data/
|
||||
- assets/svg/
|
||||
|
||||
fonts:
|
||||
- family: Inter
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue