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:
@@ -39,6 +39,10 @@ class _PmTableViewState extends State<PmTableView> {
|
||||
bool _showLeftShadow = 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
|
||||
void dispose() {
|
||||
_scroll.dispose();
|
||||
@@ -83,15 +87,24 @@ class _PmTableViewState extends State<PmTableView> {
|
||||
|
||||
return ValueListenableBuilder<PmTableMode>(
|
||||
valueListenable: pmTableMode,
|
||||
builder: (context, mode, _) => Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_Toolbar(mode: mode),
|
||||
const SizedBox(height: AppSpacing.xs),
|
||||
_body(context, mode, rows.length, columnCount, placements),
|
||||
],
|
||||
),
|
||||
builder: (context, mode, _) {
|
||||
// When the table already fits, the mode is moot: render the natural
|
||||
// grid (which shows identically and won't scroll) and hide the toggle,
|
||||
// exactly like the web ticker. The scroll layout keeps measuring the
|
||||
// overflow so the toggle reappears if the width or content changes.
|
||||
final effectiveMode = _overflows ? mode : PmTableMode.scroll;
|
||||
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 showLeft = canScroll && pos.pixels > 0.5;
|
||||
final showRight = canScroll && pos.pixels < pos.maxScrollExtent - 0.5;
|
||||
if (showLeft != _showLeftShadow || showRight != _showRightShadow) {
|
||||
if (canScroll != _overflows ||
|
||||
showLeft != _showLeftShadow ||
|
||||
showRight != _showRightShadow) {
|
||||
setState(() {
|
||||
_overflows = canScroll;
|
||||
_showLeftShadow = showLeft;
|
||||
_showRightShadow = showRight;
|
||||
});
|
||||
@@ -235,8 +251,8 @@ class _PmTableViewState extends State<PmTableView> {
|
||||
}
|
||||
}
|
||||
|
||||
/// Compact segmented control that toggles [pmTableMode]. Always visible so the
|
||||
/// modes are discoverable; a tap switches every table on screen at once.
|
||||
/// Compact segmented control that toggles [pmTableMode]. Only shown for tables
|
||||
/// wide enough to need it; a tap switches every table on screen at once.
|
||||
class _Toolbar extends StatelessWidget {
|
||||
final PmTableMode mode;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user