Merge pull request #152 from enrique-lozano/feat/unify-category-icons

Unification of the style of category icons.
enrique-lozano · May 1, 2024 · ae91b04 · ae91b04
2 parents 852197c + f8807b3
commit ae91b04
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 41 deletions.
diff --git a/lib/app/categories/category_selector.dart b/lib/app/categories/category_selector.dart
@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/core/models/category/category.dart';
 import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
 import 'package:monekin/core/presentation/app_colors.dart';
-import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/i18n/translations.g.dart';
 
 import '../../core/presentation/widgets/icon_displayer_widgets.dart';
@@ -91,6 +91,7 @@ class _CategorySelectorState extends State<CategorySelector> {
         icon: Icons.select_all,
         size: widget.params.iconSize,
         padding: widget.params.iconPadding,
+        borderRadius: 99999,
         isOutline: selectedCategories == null,
         secondaryColor: AppColors.of(context).background.darken(
               Theme.of(context).brightness == Brightness.dark ? 0.6 : 0.1,

diff --git a/lib/app/stats/widgets/movements_distribution/category_stats_modal.dart b/lib/app/stats/widgets/movements_distribution/category_stats_modal.dart
@@ -3,14 +3,14 @@ import 'package:flutter/material.dart';
 import 'package:monekin/app/stats/widgets/movements_distribution/chart_by_categories.dart';
 import 'package:monekin/app/transactions/transactions.page.dart';
 import 'package:monekin/core/database/services/exchange-rate/exchange_rate_service.dart';
+import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/core/models/category/category.dart';
 import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
 import 'package:monekin/core/models/supported-icon/supported_icon.dart';
 import 'package:monekin/core/presentation/widgets/animated_progress_bar.dart';
 import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart';
 import 'package:monekin/core/presentation/widgets/transaction_filter/transaction_filters.dart';
 import 'package:monekin/core/routes/route_utils.dart';
-import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/i18n/translations.g.dart';
 
 class SubcategoryModalItem {
@@ -158,9 +158,13 @@ class CategoryStatsModal extends StatelessWidget {
                   final subcategoryData = subcategories[index];
 
                   return ListTile(
-                    leading: IconDisplayer(
-                      supportedIcon: subcategoryData.icon,
-                      mainColor: ColorHex.get(categoryData.category.color),
+                    leading: IconDisplayer.fromCategory(
+                      context,
+                      category: Category.fromDB(
+                        categoryData.category
+                            .copyWith(iconId: subcategoryData.icon.id),
+                        categoryData.category,
+                      ),
                     ),
                     title: Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,

diff --git a/lib/app/transactions/form/transaction_form.page.dart b/lib/app/transactions/form/transaction_form.page.dart
@@ -816,6 +816,7 @@ class _TransactionFormPageState extends State<TransactionFormPage> {
                               icon: Icons.question_mark_rounded,
                               mainColor: AppColors.of(context).primary,
                               size: 24,
+                              borderRadius: 99999,
                             ),
                       onClick: () => selectCategory(),
                     ),

diff --git a/lib/app/transactions/transaction_details.page.dart b/lib/app/transactions/transaction_details.page.dart
@@ -7,7 +7,6 @@ import 'package:monekin/core/database/services/exchange-rate/exchange_rate_servi
 import 'package:monekin/core/database/services/transaction/transaction_service.dart';
 import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/core/extensions/string.extension.dart';
-import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
 import 'package:monekin/core/models/supported-icon/supported_icon.dart';
 import 'package:monekin/core/models/tags/tag.dart';
 import 'package:monekin/core/models/transaction/transaction.dart';
@@ -883,21 +882,10 @@ class _TransactionDetailHeader extends SliverPersistentHeaderDelegate {
           const SizedBox(width: 24),
           Hero(
             tag: heroTag ?? UniqueKey(),
-            child: transaction.isIncomeOrExpense
-                ? IconDisplayer.fromCategory(
-                    context,
-                    category: transaction.category!,
-                    size: 42 - shrinkPercent * 16,
-                    isOutline: true,
-                    borderRadius: 18,
-                  )
-                : IconDisplayer(
-                    mainColor: transaction.color(context),
-                    icon: TransactionType.transfer.icon,
-                    size: 42 - shrinkPercent * 16,
-                    isOutline: true,
-                    borderRadius: 18,
-                  ),
+            child: transaction.getDisplayIcon(
+              context,
+              size: 42 - shrinkPercent * 16,
+            ),
           ),
         ],
       ),

diff --git a/lib/app/transactions/widgets/transaction_list_tile.dart b/lib/app/transactions/widgets/transaction_list_tile.dart
@@ -3,15 +3,13 @@ import 'package:intl/intl.dart';
 import 'package:monekin/app/transactions/transaction_details.page.dart';
 import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/core/models/date-utils/periodicity.dart';
-import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
 import 'package:monekin/core/models/transaction/transaction.dart';
 import 'package:monekin/core/models/transaction/transaction_status.enum.dart';
 import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart';
 import 'package:monekin/core/presentation/widgets/number_ui_formatters/ui_number_formatter.dart';
 import 'package:monekin/core/routes/route_utils.dart';
 import 'package:monekin/core/services/view-actions/transaction_view_actions_service.dart';
 
-import '../../../core/models/transaction/transaction_type.enum.dart';
 import '../../../core/presentation/app_colors.dart';
 
 class TransactionListTile extends StatelessWidget {
@@ -211,19 +209,7 @@ class TransactionListTile extends StatelessWidget {
       ),
       leading: Hero(
         tag: heroTag ?? UniqueKey(),
-        child: transaction.isIncomeOrExpense
-            ? IconDisplayer.fromCategory(
-                context,
-                category: transaction.category!,
-                size: 28,
-                padding: 6,
-              )
-            : IconDisplayer(
-                icon: TransactionType.transfer.icon,
-                mainColor: TransactionType.transfer.color(context),
-                size: 28,
-                padding: 6,
-              ),
+        child: transaction.getDisplayIcon(context, size: 28, padding: 6),
       ),
       onTap: () {
         RouteUtils.pushRoute(

diff --git a/lib/core/models/category/category.dart b/lib/core/models/category/category.dart
@@ -23,6 +23,7 @@ enum CategoryType {
 class Category extends CategoryInDB {
   String? _color;
   CategoryType? _type;
+  final Category? parentCategory;
 
   @override
   String get color => _color ?? parentCategory!.color;
@@ -60,8 +61,6 @@ class Category extends CategoryInDB {
             parentCategory != null ? fromDB(parentCategory, null) : null,
         super(parentCategoryID: parentCategory?.id);
 
-  Category? parentCategory;
-
   /// Returns whether the category is a main (or root) category or not
   bool get isMainCategory => parentCategoryID == null;
 

diff --git a/lib/core/models/supported-icon/icon_displayer.dart b/lib/core/models/supported-icon/icon_displayer.dart
@@ -40,7 +40,7 @@ class IconDisplayer extends StatelessWidget {
     required Category category,
     double size = 22,
     double? padding,
-    double borderRadius = 12,
+    double borderRadius = 99999,
     bool isOutline = false,
     IconDisplayMode displayMode = IconDisplayMode.decoratedBox,
     void Function()? onDoubleTap,

diff --git a/lib/core/models/transaction/transaction.dart b/lib/core/models/transaction/transaction.dart
@@ -4,6 +4,7 @@ import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/core/models/account/account.dart';
 import 'package:monekin/core/models/category/category.dart';
 import 'package:monekin/core/models/date-utils/periodicity.dart';
+import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
 import 'package:monekin/core/models/tags/tag.dart';
 import 'package:monekin/core/models/transaction/recurrency_data.dart';
 import 'package:monekin/core/models/transaction/rule_recurrent_limit.dart';
@@ -95,6 +96,27 @@ class MoneyTransaction extends TransactionInDB {
           ? TransactionType.expense
           : TransactionType.income;
 
+  IconDisplayer getDisplayIcon(
+    BuildContext context, {
+    double size = 22,
+    double? padding,
+  }) =>
+      isIncomeOrExpense
+          ? IconDisplayer.fromCategory(
+              context,
+              category: category!,
+              size: size,
+              padding: padding,
+              borderRadius: 999999,
+            )
+          : IconDisplayer(
+              mainColor: color(context),
+              icon: TransactionType.transfer.icon,
+              size: size,
+              padding: padding,
+              borderRadius: 999999,
+            );
+
   NextPayStatus? get nextPayStatus {
     if (recurrentInfo.isNoRecurrent && status != TransactionStatus.pending) {
       return null;

diff --git a/lib/core/presentation/widgets/icon_displayer_widgets.dart b/lib/core/presentation/widgets/icon_displayer_widgets.dart
@@ -12,8 +12,8 @@ class IconDisplayerSelectorData<T extends Object> {
     required this.availableItems,
     this.extraHeaderButtons,
     this.multiSelection = true,
-    this.iconSize = 48,
-    this.iconPadding = 8,
+    this.iconSize = 40,
+    this.iconPadding = 10,
   });
 
   final List<T>? selectedItems;