fix: font size for Numbers property value on calendar. (#2435)

* fix: font size for Numbers property value on calendar.

* fix: card style

---------

Co-authored-by: nathan <[email protected]>

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart

@@ -3,8 +3,11 @@ import 'package:appflowy/plugins/database_view/application/row/row_data_controll
 import 'package:appflowy/plugins/database_view/widgets/card/card.dart';
 import 'package:appflowy/plugins/database_view/widgets/card/card_cell_builder.dart';
 import 'package:appflowy/plugins/database_view/widgets/card/cells/card_cell.dart';
+import 'package:appflowy/plugins/database_view/widgets/card/cells/number_card_cell.dart';
+import 'package:appflowy/plugins/database_view/widgets/card/cells/url_card_cell.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_detail.dart';
+import 'package:appflowy_backend/protobuf/flowy-database/field_entities.pbenum.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/size.dart';
@@ -100,11 +103,19 @@ class CalendarDayCard extends StatelessWidget {
   }
 
   GestureDetector _buildCard(BuildContext context, CalendarDayEvent event) {
-    final cellBuilder = CardCellBuilder<String>(_rowCache.cellCache);
-    final rowInfo = _rowCache.getRow(event.eventId);
+    final styles = <FieldType, CardCellStyle>{
+      FieldType.Number: NumberCardCellStyle(10),
+      FieldType.URL: URLCardCellStyle(10),
+    };
+
+    final cellBuilder = CardCellBuilder<String>(
+      _rowCache.cellCache,
+      styles: styles,
+    );
 
+    final rowInfo = _rowCache.getRow(event.eventId);
     final renderHook = RowCardRenderHook<String>();
-    renderHook.addTextFieldHook((cellData, primaryFieldId, _) {
+    renderHook.addTextCellHook((cellData, primaryFieldId, _) {
       if (cellData.isEmpty) {
         return const SizedBox();
       }
@@ -119,7 +130,7 @@ class CalendarDayCard extends StatelessWidget {
       );
     });
 
-    renderHook.addDateFieldHook((cellData, cardData, _) {
+    renderHook.addDateCellHook((cellData, cardData, _) {
       return Align(
         alignment: Alignment.centerLeft,
         child: Padding(

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card_cell_builder.dart

@@ -15,15 +15,15 @@ import 'cells/url_card_cell.dart';
 // T represents as the Generic card data
 class CardCellBuilder<CustomCardData> {
   final CellCache cellCache;
+  final Map<FieldType, CardCellStyle>? styles;
 
-  CardCellBuilder(this.cellCache);
+  CardCellBuilder(this.cellCache, {this.styles});
 
   Widget buildCell({
     CustomCardData? cardData,
     required CellIdentifier cellId,
     EditableCardNotifier? cellNotifier,
     RowCardRenderHook<CustomCardData>? renderHook,
-    Map<FieldType, CardCellStyle>? styles,
   }) {
     final cellControllerBuilder = CellControllerBuilder(
       cellId: cellId,
@@ -65,7 +65,9 @@ class CardCellBuilder<CustomCardData> {
           key: key,
         );
       case FieldType.Number:
-        return NumberCardCell(
+        return NumberCardCell<CustomCardData>(
+          renderHook: renderHook?.renderHook[FieldType.Number],
+          style: isStyleOrNull<NumberCardCellStyle>(style),
           cellControllerBuilder: cellControllerBuilder,
           key: key,
         );
@@ -79,7 +81,8 @@ class CardCellBuilder<CustomCardData> {
           key: key,
         );
       case FieldType.URL:
-        return URLCardCell(
+        return URLCardCell<CustomCardData>(
+          style: isStyleOrNull<URLCardCellStyle>(style),
           cellControllerBuilder: cellControllerBuilder,
           key: key,
         );

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/cells/card_cell.dart

@@ -29,14 +29,21 @@ class RowCardRenderHook<CustomCardData> {
   }
 
   /// Add a render hook for the [FieldType.RichText]
-  void addTextFieldHook(
+  void addTextCellHook(
     CellRenderHook<String, CustomCardData?> hook,
   ) {
     renderHook[FieldType.RichText] = _typeSafeHook<String>(hook);
   }
 
+  /// Add a render hook for the [FieldType.Number]
+  void addNumberCellHook(
+    CellRenderHook<String, CustomCardData?> hook,
+  ) {
+    renderHook[FieldType.Number] = _typeSafeHook<String>(hook);
+  }
+
   /// Add a render hook for the [FieldType.Date]
-  void addDateFieldHook(
+  void addDateCellHook(
     CellRenderHook<DateCellDataPB, CustomCardData?> hook,
   ) {
     renderHook[FieldType.DateTime] = _typeSafeHook<DateCellDataPB>(hook);

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/cells/number_card_cell.dart

@@ -7,13 +7,24 @@ import '../bloc/number_card_cell_bloc.dart';
 import '../define.dart';
 import 'card_cell.dart';
 
-class NumberCardCell extends CardCell {
+class NumberCardCellStyle extends CardCellStyle {
+  final double fontSize;
+
+  NumberCardCellStyle(this.fontSize);
+}
+
+class NumberCardCell<CustomCardData>
+    extends CardCell<CustomCardData, NumberCardCellStyle> {
+  final CellRenderHook<String, CustomCardData>? renderHook;
   final CellControllerBuilder cellControllerBuilder;
 
   const NumberCardCell({
     required this.cellControllerBuilder,
+    CustomCardData? cardData,
+    NumberCardCellStyle? style,
+    this.renderHook,
     Key? key,
-  }) : super(key: key);
+  }) : super(key: key, style: style, cardData: cardData);
 
   @override
   State<NumberCardCell> createState() => _NumberCardCellState();
@@ -42,6 +53,15 @@ class _NumberCardCellState extends State<NumberCardCell> {
           if (state.content.isEmpty) {
             return const SizedBox();
           } else {
+            Widget? custom = widget.renderHook?.call(
+              state.content,
+              widget.cardData,
+              context,
+            );
+            if (custom != null) {
+              return custom;
+            }
+
             return Align(
               alignment: Alignment.centerLeft,
               child: Padding(
@@ -50,7 +70,7 @@ class _NumberCardCellState extends State<NumberCardCell> {
                 ),
                 child: FlowyText.medium(
                   state.content,
-                  fontSize: 14,
+                  fontSize: widget.style?.fontSize ?? 14,
                 ),
               ),
             );

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/cells/url_card_cell.dart

@@ -8,13 +8,21 @@ import '../bloc/url_card_cell_bloc.dart';
 import '../define.dart';
 import 'card_cell.dart';
 
-class URLCardCell extends CardCell {
+class URLCardCellStyle extends CardCellStyle {
+  final double fontSize;
+
+  URLCardCellStyle(this.fontSize);
+}
+
+class URLCardCell<CustomCardData>
+    extends CardCell<CustomCardData, URLCardCellStyle> {
   final CellControllerBuilder cellControllerBuilder;
 
   const URLCardCell({
     required this.cellControllerBuilder,
+    URLCardCellStyle? style,
     Key? key,
-  }) : super(key: key);
+  }) : super(key: key, style: style);
 
   @override
   State<URLCardCell> createState() => _URLCardCellState();
@@ -55,7 +63,7 @@ class _URLCardCellState extends State<URLCardCell> {
                     style: Theme.of(context)
                         .textTheme
                         .bodyMedium!
-                        .size(FontSizes.s14)
+                        .size(widget.style?.fontSize ?? FontSizes.s14)
                         .textColor(Theme.of(context).colorScheme.primary)
                         .underline,
                   ),

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/cell_editor.dart

@@ -1,6 +1,4 @@
-import 'package:appflowy/core/helpers/helpers.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_controller_builder.dart';
-import 'package:flowy_infra_ui/style_widget/snap_bar.dart';
 import 'package:flutter/material.dart';
 import 'dart:async';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -75,18 +73,7 @@ class _URLCellEditorState extends State<URLCellEditor> {
     if (mounted) {
       if (_cellBloc.isClosed == false &&
           _controller.text != _cellBloc.state.content) {
-        final parseResult = parseValidUrl(_controller.text);
-
-        parseResult.fold(
-          (_) {
-            showSnapBar(
-              context,
-              "Enter a valid URL",
-              Theme.of(context).colorScheme.error,
-            );
-          },
-          (_) => _cellBloc.add(URLCellEditorEvent.updateText(_controller.text)),
-        );
+        _cellBloc.add(URLCellEditorEvent.updateText(_controller.text));
       }
     }
   }