Pārlūkot izejas kodu

Merge pull request #1317 from alemoreau/grid-incomplete_display_of_the_property_names

fix: add overflow ellipsis in FieldCellButton
Lucas.Xu 2 gadi atpakaļ
vecāks
revīzija
31ed88364a

+ 8 - 1
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart

@@ -161,15 +161,22 @@ class FieldCellButton extends StatelessWidget {
   @override
   @override
   Widget build(BuildContext context) {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     final theme = context.watch<AppTheme>();
+
+    // Using this technique to have proper text ellipsis
+    // https://github.com/flutter/flutter/issues/18761#issuecomment-812390920
+    final text = Characters(field.name)
+        .replaceAll(Characters(''), Characters('\u{200B}'))
+        .toString();
     return FlowyButton(
     return FlowyButton(
       radius: BorderRadius.zero,
       radius: BorderRadius.zero,
       hoverColor: theme.shader6,
       hoverColor: theme.shader6,
       onTap: onTap,
       onTap: onTap,
       leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
       leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
       text: FlowyText.medium(
       text: FlowyText.medium(
-        field.name,
+        text,
         fontSize: 12,
         fontSize: 12,
         maxLines: maxLines,
         maxLines: maxLines,
+        overflow: TextOverflow.ellipsis,
       ),
       ),
       margin: GridSize.cellContentInsets,
       margin: GridSize.cellContentInsets,
     );
     );