From ff1c6bc34c45a2054e0c24ca804a6eebef678d74 Mon Sep 17 00:00:00 2001 From: ThatNerdSquared <72814106+ThatNerdSquared@users.noreply.github.com> Date: Wed, 17 Jan 2024 13:28:28 -0800 Subject: [PATCH] feat: higher info density in entry cards, fix tag parsing, spacing --- lib/format_utils.dart | 2 +- lib/widgets/peregrine_app_bar.dart | 20 ++- lib/widgets/peregrine_entry_card.dart | 203 ++++++++++++-------------- 3 files changed, 107 insertions(+), 118 deletions(-) diff --git a/lib/format_utils.dart b/lib/format_utils.dart index e3af949..b33a4c5 100644 --- a/lib/format_utils.dart +++ b/lib/format_utils.dart @@ -31,7 +31,7 @@ List findContacts(String input) { } String stripTagOnlyLines(String input) { - var items = input.split('\n'); + var items = input.trim().split('\n'); if (items.last.replaceAll(RegExp(r'#[^\s]+'), '').replaceAll(' ', '') == '') { items.removeLast(); return items.join('\n'); diff --git a/lib/widgets/peregrine_app_bar.dart b/lib/widgets/peregrine_app_bar.dart index 4639efe..99f1949 100644 --- a/lib/widgets/peregrine_app_bar.dart +++ b/lib/widgets/peregrine_app_bar.dart @@ -39,7 +39,8 @@ class PeregrineAppBar extends ConsumerWidget { size: 20, ), const Padding( - padding: EdgeInsets.only(right: PretConfig.thinElementSpacing)), + padding: EdgeInsets.only(right: PretConfig.thinElementSpacing), + ), Expanded( flex: 2, child: Text( @@ -48,9 +49,10 @@ class PeregrineAppBar extends ConsumerWidget { )), IconButton.filled( style: IconButton.styleFrom( - iconSize: 20, - minimumSize: const Size(36, 36), - maximumSize: const Size(36, 36), + iconSize: 18, + padding: const EdgeInsets.all(PretConfig.minElementSpacing), + minimumSize: const Size(30, 30), + maximumSize: const Size(30, 30), backgroundColor: const Color(0xffdac6b0), shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(PretConfig.thinBorderRounding), @@ -62,12 +64,14 @@ class PeregrineAppBar extends ConsumerWidget { ), ), const Padding( - padding: EdgeInsets.only(right: PretConfig.thinElementSpacing)), + padding: EdgeInsets.only(right: PretConfig.minElementSpacing), + ), IconButton.filled( style: IconButton.styleFrom( - iconSize: 20, - minimumSize: const Size(36, 36), - maximumSize: const Size(36, 36), + iconSize: 18, + minimumSize: const Size(30, 30), + maximumSize: const Size(30, 30), + padding: const EdgeInsets.all(PretConfig.minElementSpacing), backgroundColor: const Color(0xffdac6b0), shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(PretConfig.thinBorderRounding), diff --git a/lib/widgets/peregrine_entry_card.dart b/lib/widgets/peregrine_entry_card.dart index 100c7be..c1b498a 100644 --- a/lib/widgets/peregrine_entry_card.dart +++ b/lib/widgets/peregrine_entry_card.dart @@ -27,120 +27,105 @@ class PeregrineEntryCard extends ConsumerWidget { right: PretConfig.preserveShadowSpacing, ), child: PretCard( - padding: const EdgeInsets.only( + padding: EdgeInsets.only( + top: PretConfig.thinElementSpacing, left: PretConfig.defaultElementSpacing, right: PretConfig.defaultElementSpacing, - bottom: PretConfig.defaultElementSpacing, + bottom: entry.isEncrypted && ref.watch(isLocked) + ? PretConfig.thinElementSpacing + : PretConfig.defaultElementSpacing, ), - child: Padding( - padding: const EdgeInsets.only(top: PretConfig.thinElementSpacing), - // this row is useless, but taking it out gives a box drawing error, - // i think i'm doing something wrong - child: Row( - children: [ - Expanded( - child: entry.isEncrypted && ref.watch(isLocked) - ? const Text.rich(TextSpan(text: '🔒', children: [ - TextSpan( - text: - 'This entry is encrypted. Unlock the app to view.', + child: entry.isEncrypted && ref.watch(isLocked) + ? const Text.rich(TextSpan(text: '🔒', children: [ + TextSpan( + text: 'This entry is encrypted. Unlock the app to view.', + style: TextStyle( + color: Colors.grey, + fontSize: 16, + fontStyle: FontStyle.italic, + ), + ) + ])) + : Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Row( + children: [ + Text('${formatDate(entry.date)} '), + Text(formatTime(entry.date)), + ], + ), + const Padding( + padding: + EdgeInsets.all(PretConfig.minElementSpacing), + ), + Expanded( + child: Wrap( + spacing: PretConfig.minElementSpacing, + runSpacing: PretConfig.minElementSpacing, + alignment: WrapAlignment.end, + children: entry.tags + .map((tag) => OutlinedButton( + style: const ButtonStyle( + minimumSize: + MaterialStatePropertyAll( + Size(32, 32), + ), + visualDensity: + VisualDensity.compact, + shape: MaterialStatePropertyAll( + RoundedRectangleBorder( + borderRadius: + PretConfig.thinBorderRadius, + ), + ), + padding: MaterialStatePropertyAll( + EdgeInsets.all( + //PretConfig.minElementSpacing / 2, + PretConfig.minElementSpacing), + )), + onPressed: () => ref + .read(entryFilterProvider.notifier) + .setTagFilter(tag), + child: Text( + '#$tag', + ))) + .toList()), + ), + ], + ), + const Padding( + padding: + EdgeInsets.only(top: PretConfig.minElementSpacing), + ), + ...MarkdownGenerator( + generators: [latexGenerator], + inlineSyntaxList: [LatexSyntax()], + linesMargin: const EdgeInsets.all(0), + ).buildWidgets( + stripTagOnlyLines(entry.input), + config: MarkdownConfig(configs: [ + ImgConfig(builder: (url, attributes) { + if (url.contains(r'data:image/png;base64,')) { + return Image.memory(base64Decode(url.replaceAll( + 'data:image/png;base64,', ''))); + } else { + return Image.network(url); + } + }), + const CodeConfig( style: TextStyle( - color: Colors.grey, - fontSize: 16, - fontStyle: FontStyle.italic, + fontFamily: 'Menlo', + backgroundColor: Color(0xffeff1f3), ), - ) - ])) - : Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Row( - children: [ - Text('${formatDate(entry.date)} '), - Text(formatTime(entry.date)), - ], - ), - const Padding( - padding: EdgeInsets.all( - PretConfig.minElementSpacing)), - Expanded( - child: Wrap( - spacing: PretConfig.minElementSpacing, - runSpacing: - PretConfig.minElementSpacing, - alignment: WrapAlignment.end, - children: entry.tags - .map((tag) => OutlinedButton( - // color: Colors.pink[100]!, - style: const ButtonStyle( - visualDensity: - VisualDensity.compact, - shape: - MaterialStatePropertyAll( - RoundedRectangleBorder( - borderRadius: PretConfig - .thinBorderRadius, - ), - ), - padding: - MaterialStatePropertyAll( - EdgeInsets.all( - PretConfig - .minElementSpacing / - 2, - ), - )), - onPressed: () => ref - .read(entryFilterProvider - .notifier) - .setTagFilter(tag), - child: Text( - '#$tag', - ))) - .toList()), - ), - ], - ), - const Divider(), - ...MarkdownGenerator( - generators: [latexGenerator], - inlineSyntaxList: [LatexSyntax()], - linesMargin: const EdgeInsets.all(0), - ).buildWidgets( - stripTagOnlyLines(entry.input), - config: MarkdownConfig(configs: [ - ImgConfig(builder: (url, attributes) { - if (url - .contains(r'data:image/png;base64,')) { - return Image.memory(base64Decode( - url.replaceAll( - 'data:image/png;base64,', ''))); - } else { - return Image.network(url); - } - }), - const CodeConfig( - style: TextStyle( - fontFamily: 'Menlo', - backgroundColor: Color(0xffeff1f3), - ), - ), - ]), - ), - const Padding( - padding: EdgeInsets.only( - top: PretConfig.minElementSpacing, - ), - ), - ]), - ), - ], - ), - ), + ), + ]), + ), + ]), )); } }