Skip to content

Commit 12712a1

Browse files
Copilotbdlukaa
Copilot
and
bdlukaa
authored
fix: Tab draggable from full area including padding (#1315)
* Initial plan * fix: Tab is now draggable from its entire area including padding Co-authored-by: bdlukaa <45696119+bdlukaa@users.noreply.github.com> Agent-Logs-Url: https://github.com/bdlukaa/fluent_ui/sessions/3c521cc5-1017-4438-9903-74874398ed0e * chore: update changelog --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: bdlukaa <45696119+bdlukaa@users.noreply.github.com> Co-authored-by: Bruno D'Luka <brunodlukaa@gmail.com>
1 parent b4f2adf commit 12712a1

2 files changed

Lines changed: 117 additions & 118 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
- fix: `NavigationView` auto display mode no longer shows a brief overlay when resizing from minimal to compact mode ([#1316](https://github.com/bdlukaa/fluent_ui/pull/1316))
44
- fix: `MenuFlyout` sub-item tree now correctly expands to the left and shows a `chevron_left` icon when right-to-left directionality is enabled ([#1342](https://github.com/bdlukaa/fluent_ui/issues/1342))
55
- fix: `NavigationView` compact pane `PaneItemExpander` flyout is now correctly placed in right-to-left directionality; Flyout `leftTop` and `rightTop` placement modes now correctly align with the top of the target element when the flyout is taller than the available space above the target ([#1289](https://github.com/bdlukaa/fluent_ui/issues/1289))
6+
- fix: `Tab` in `TabView` is now draggable from its entire area, including the padding ([#1356](https://github.com/bdlukaa/fluent_ui/issues/1356))
67

78
## 4.15.0
89

‎lib/src/controls/navigation/tab_view/tab.dart‎

Lines changed: 116 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -367,132 +367,130 @@ class TabState extends State<Tab>
367367
}).resolve(states);
368368

369369
const borderRadius = BorderRadius.vertical(top: Radius.circular(6));
370-
Widget child = FocusBorder(
371-
focused: states.isFocused,
372-
renderOutside: false,
373-
style: const FocusThemeData(borderRadius: borderRadius),
374-
child: Container(
375-
key: widget._tabKey,
376-
height: _kTileHeight,
377-
constraints: tab.tabWidthBehavior == TabWidthBehavior.sizeToContent
378-
? const BoxConstraints(minHeight: 28)
379-
: const BoxConstraints(maxWidth: _kMaxTileWidth, minHeight: 28),
380-
padding: tab.selected
381-
? const EdgeInsetsDirectional.only(
382-
start: 9,
383-
top: 3,
384-
end: 5,
385-
bottom: 4,
386-
)
387-
: const EdgeInsetsDirectional.only(
388-
start: 8,
389-
top: 3,
390-
end: 4,
391-
bottom: 3,
392-
),
393-
decoration: BoxDecoration(
394-
borderRadius: borderRadius,
395-
// if selected, the background is painted by _TabPainter
396-
color:
397-
(tab.selected
398-
? widget.selectedBackgroundColor
399-
: widget.backgroundColor)
400-
?.resolve(states) ??
401-
backgroundColor,
402-
),
403-
child: () {
404-
final result = ClipRect(
405-
child: DefaultTextStyle.merge(
406-
style: (theme.typography.body ?? const TextStyle()).copyWith(
407-
fontSize: 12,
408-
fontWeight: tab.selected ? FontWeight.w600 : null,
409-
color:
410-
(tab.selected
411-
? widget.selectedForegroundColor
412-
: widget.foregroundColor)
413-
?.resolve(states) ??
414-
foregroundColor,
415-
),
416-
child: IconTheme.merge(
417-
data: IconThemeData(
418-
color:
419-
(tab.selected
420-
? widget.selectedForegroundColor
421-
: widget.foregroundColor)
422-
?.resolve(states) ??
423-
foregroundColor,
424-
size: 16,
425-
),
426-
child: Row(
427-
mainAxisSize: MainAxisSize.min,
428-
children: [
429-
if (widget.icon != null)
430-
Padding(
431-
padding: const EdgeInsetsDirectional.only(end: 10),
432-
child: widget.icon,
433-
),
434-
if (tab.tabWidthBehavior != TabWidthBehavior.compact ||
435-
(tab.tabWidthBehavior == TabWidthBehavior.compact &&
436-
tab.selected))
437-
Flexible(
438-
fit: tab.tabWidthBehavior == TabWidthBehavior.equal
439-
? FlexFit.tight
440-
: FlexFit.loose,
441-
child: Padding(
442-
padding: const EdgeInsetsDirectional.only(end: 4),
443-
child: DefaultTextStyle.merge(
444-
softWrap: false,
445-
maxLines: 1,
446-
overflow: TextOverflow.clip,
447-
style: const TextStyle(fontSize: 12),
448-
child: widget.text,
449-
),
450-
),
370+
Widget tabContainer = Container(
371+
key: widget._tabKey,
372+
height: _kTileHeight,
373+
constraints: tab.tabWidthBehavior == TabWidthBehavior.sizeToContent
374+
? const BoxConstraints(minHeight: 28)
375+
: const BoxConstraints(maxWidth: _kMaxTileWidth, minHeight: 28),
376+
padding: tab.selected
377+
? const EdgeInsetsDirectional.only(
378+
start: 9,
379+
top: 3,
380+
end: 5,
381+
bottom: 4,
382+
)
383+
: const EdgeInsetsDirectional.only(
384+
start: 8,
385+
top: 3,
386+
end: 4,
387+
bottom: 3,
388+
),
389+
decoration: BoxDecoration(
390+
borderRadius: borderRadius,
391+
// if selected, the background is painted by _TabPainter
392+
color:
393+
(tab.selected
394+
? widget.selectedBackgroundColor
395+
: widget.backgroundColor)
396+
?.resolve(states) ??
397+
backgroundColor,
398+
),
399+
child: ClipRect(
400+
child: DefaultTextStyle.merge(
401+
style: (theme.typography.body ?? const TextStyle()).copyWith(
402+
fontSize: 12,
403+
fontWeight: tab.selected ? FontWeight.w600 : null,
404+
color:
405+
(tab.selected
406+
? widget.selectedForegroundColor
407+
: widget.foregroundColor)
408+
?.resolve(states) ??
409+
foregroundColor,
410+
),
411+
child: IconTheme.merge(
412+
data: IconThemeData(
413+
color:
414+
(tab.selected
415+
? widget.selectedForegroundColor
416+
: widget.foregroundColor)
417+
?.resolve(states) ??
418+
foregroundColor,
419+
size: 16,
420+
),
421+
child: Row(
422+
mainAxisSize: MainAxisSize.min,
423+
children: [
424+
if (widget.icon != null)
425+
Padding(
426+
padding: const EdgeInsetsDirectional.only(end: 10),
427+
child: widget.icon,
428+
),
429+
if (tab.tabWidthBehavior != TabWidthBehavior.compact ||
430+
(tab.tabWidthBehavior == TabWidthBehavior.compact &&
431+
tab.selected))
432+
Flexible(
433+
fit: tab.tabWidthBehavior == TabWidthBehavior.equal
434+
? FlexFit.tight
435+
: FlexFit.loose,
436+
child: Padding(
437+
padding: const EdgeInsetsDirectional.only(end: 4),
438+
child: DefaultTextStyle.merge(
439+
softWrap: false,
440+
maxLines: 1,
441+
overflow: TextOverflow.clip,
442+
style: const TextStyle(fontSize: 12),
443+
child: widget.text,
451444
),
452-
if (widget.onClosed != null &&
453-
widget.closeIcon != null &&
445+
),
446+
),
447+
if (widget.onClosed != null &&
448+
widget.closeIcon != null &&
449+
(tab.visibilityMode ==
450+
CloseButtonVisibilityMode.always ||
454451
(tab.visibilityMode ==
455-
CloseButtonVisibilityMode.always ||
456-
(tab.visibilityMode ==
457-
CloseButtonVisibilityMode.onHover &&
458-
states.isHovered)))
459-
Padding(
460-
padding: const EdgeInsetsDirectional.only(start: 4),
461-
child: FocusTheme(
462-
data: const FocusThemeData(
463-
primaryBorder: BorderSide.none,
464-
secondaryBorder: BorderSide.none,
465-
),
466-
child: Tooltip(
467-
message: localizations.closeTabLabel,
468-
child: SizedBox(
469-
height: 24,
470-
width: 32,
471-
child: IconButton(
472-
icon: widget.closeIcon!,
473-
onPressed: tab.onClose,
474-
focusable: false,
475-
),
476-
),
452+
CloseButtonVisibilityMode.onHover &&
453+
states.isHovered)))
454+
Padding(
455+
padding: const EdgeInsetsDirectional.only(start: 4),
456+
child: FocusTheme(
457+
data: const FocusThemeData(
458+
primaryBorder: BorderSide.none,
459+
secondaryBorder: BorderSide.none,
460+
),
461+
child: Tooltip(
462+
message: localizations.closeTabLabel,
463+
child: SizedBox(
464+
height: 24,
465+
width: 32,
466+
child: IconButton(
467+
icon: widget.closeIcon!,
468+
onPressed: tab.onClose,
469+
focusable: false,
477470
),
478471
),
479472
),
480-
],
481-
),
482-
),
473+
),
474+
),
475+
],
483476
),
484-
);
485-
if (tab.reorderIndex != null) {
486-
return ReorderableDragStartListener(
487-
index: tab.reorderIndex!,
488-
enabled: !widget.disabled,
489-
child: result,
490-
);
491-
}
492-
return result;
493-
}(),
477+
),
478+
),
494479
),
495480
);
481+
if (tab.reorderIndex != null) {
482+
tabContainer = ReorderableDragStartListener(
483+
index: tab.reorderIndex!,
484+
enabled: !widget.disabled,
485+
child: tabContainer,
486+
);
487+
}
488+
Widget child = FocusBorder(
489+
focused: states.isFocused,
490+
renderOutside: false,
491+
style: const FocusThemeData(borderRadius: borderRadius),
492+
child: tabContainer,
493+
);
496494
if (text != null) {
497495
child = Tooltip(
498496
message: text,

0 commit comments

Comments
 (0)