updated the ProseMirror table view to conditionally hide the mode toggle toolbar when content fits within the available width, ensuring the toggle is only visible for overflowing tables.

This commit is contained in:
2026-07-16 21:43:52 +02:00
parent e349d667d4
commit e5f7cf0176
+28 -12
View File
@@ -39,6 +39,10 @@ class _PmTableViewState extends State<PmTableView> {
bool _showLeftShadow = false; bool _showLeftShadow = false;
bool _showRightShadow = false; bool _showRightShadow = false;
/// Whether the table is too wide to fit and therefore needs the mode toggle.
/// Measured from the natural (scroll) layout's overflow — see [_updateShadows].
bool _overflows = false;
@override @override
void dispose() { void dispose() {
_scroll.dispose(); _scroll.dispose();
@@ -83,15 +87,24 @@ class _PmTableViewState extends State<PmTableView> {
return ValueListenableBuilder<PmTableMode>( return ValueListenableBuilder<PmTableMode>(
valueListenable: pmTableMode, valueListenable: pmTableMode,
builder: (context, mode, _) => Column( builder: (context, mode, _) {
crossAxisAlignment: CrossAxisAlignment.stretch, // When the table already fits, the mode is moot: render the natural
mainAxisSize: MainAxisSize.min, // grid (which shows identically and won't scroll) and hide the toggle,
children: [ // exactly like the web ticker. The scroll layout keeps measuring the
_Toolbar(mode: mode), // overflow so the toggle reappears if the width or content changes.
const SizedBox(height: AppSpacing.xs), final effectiveMode = _overflows ? mode : PmTableMode.scroll;
_body(context, mode, rows.length, columnCount, placements), return Column(
], crossAxisAlignment: CrossAxisAlignment.stretch,
), mainAxisSize: MainAxisSize.min,
children: [
if (_overflows) ...[
_Toolbar(mode: mode),
const SizedBox(height: AppSpacing.xs),
],
_body(context, effectiveMode, rows.length, columnCount, placements),
],
);
},
); );
} }
@@ -166,8 +179,11 @@ class _PmTableViewState extends State<PmTableView> {
final canScroll = pos.maxScrollExtent > 0.5; final canScroll = pos.maxScrollExtent > 0.5;
final showLeft = canScroll && pos.pixels > 0.5; final showLeft = canScroll && pos.pixels > 0.5;
final showRight = canScroll && pos.pixels < pos.maxScrollExtent - 0.5; final showRight = canScroll && pos.pixels < pos.maxScrollExtent - 0.5;
if (showLeft != _showLeftShadow || showRight != _showRightShadow) { if (canScroll != _overflows ||
showLeft != _showLeftShadow ||
showRight != _showRightShadow) {
setState(() { setState(() {
_overflows = canScroll;
_showLeftShadow = showLeft; _showLeftShadow = showLeft;
_showRightShadow = showRight; _showRightShadow = showRight;
}); });
@@ -235,8 +251,8 @@ class _PmTableViewState extends State<PmTableView> {
} }
} }
/// Compact segmented control that toggles [pmTableMode]. Always visible so the /// Compact segmented control that toggles [pmTableMode]. Only shown for tables
/// modes are discoverable; a tap switches every table on screen at once. /// wide enough to need it; a tap switches every table on screen at once.
class _Toolbar extends StatelessWidget { class _Toolbar extends StatelessWidget {
final PmTableMode mode; final PmTableMode mode;