Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NavigationView updates #569

Merged
merged 4 commits into from
Oct 13, 2022
Merged

NavigationView updates #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8cfabe
Added `NavigationView.minimalPaneOpen`
bdlukaa Oct 11, 2022
7bf8069
Update `NavigationView` compact mode transition
bdlukaa Oct 11, 2022
72397a4
Assign an index to pane item expanders
bdlukaa Oct 12, 2022
8580773
clean up example app
bdlukaa Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@

- Add `NavigationView.paneBodyBuilder` for customization of widget built for body of pane. ([#548](/~https://github.com/bdlukaa/fluent_ui/issues/548))
- Fixed `NavigationAppBar` unnecessary leading icon when no pane is provided in `NavigationView` ([#551](/~https://github.com/bdlukaa/fluent_ui/pull/551))
- Added `NavigationView.minimalPaneOpen` and, with it, the possibility to open minimal pane programatically ([#564](/~https://github.com/bdlukaa/fluent_ui/issues/564))
- Assign an index to pane item expanders ([#566](/~https://github.com/bdlukaa/fluent_ui/issues/566))
- Update `NavigationView` compact mode transition
- `TreeView` updates ([#555](/~https://github.com/bdlukaa/fluent_ui/issues/555)):
- **BREAKING** Added `TreeViewItemInvokeReason` parameter to `TreeView.onItemInvoked` and `TreeViewItem.onInvoked`.
- Fix clearing out selection state on initial state build in certain cases for a single selection mode tree view.
Expand Down
19 changes: 13 additions & 6 deletions lib/src/controls/navigation/navigation_view/pane_items.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -614,19 +614,20 @@ class __PaneItemExpanderState extends State<_PaneItemExpander>
}

late bool _open;
late AnimationController controller = AnimationController(
late final AnimationController controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 100),
);

@override
void initState() {
super.initState();
void didChangeDependencies() {
super.didChangeDependencies();
_open = PageStorage.of(context)?.readState(
context,
identifier: 'paneItemExpanderOpen',
identifier: 'paneItemExpanderOpen$index',
) as bool? ??
false;

if (_open) {
controller.value = 1;
}
Expand All @@ -639,13 +640,19 @@ class __PaneItemExpanderState extends State<_PaneItemExpander>
super.dispose();
}

int get index {
final body = InheritedNavigationView.of(context);

return body.pane?.effectiveIndexOf(widget.item) ?? 0;
}

void toggleOpen() {
setState(() => _open = !_open);

PageStorage.of(context)?.writeState(
context,
_open,
identifier: 'paneItemExpanderOpen',
identifier: 'paneItemExpanderOpen$index',
);
if (useFlyout) {
flyoutController.toggle();
Expand All @@ -665,7 +672,7 @@ class __PaneItemExpanderState extends State<_PaneItemExpander>

_open = PageStorage.of(context)?.readState(
context,
identifier: 'paneItemExpanderOpen',
identifier: 'paneItemExpanderOpen$index',
) as bool? ??
_open;

Expand Down
108 changes: 72 additions & 36 deletions lib/src/controls/navigation/navigation_view/view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,19 @@ class NavigationViewState extends State<NavigationView> {
final Map<int, GlobalKey> _itemKeys = {};

bool _minimalPaneOpen = false;

/// Whether the minimal pane is open
///
/// Always false if the current display mode is not minimal.
bool get minimalPaneOpen => _minimalPaneOpen;
set minimalPaneOpen(bool open) {
if (displayMode == PaneDisplayMode.minimal) {
setState(() => _minimalPaneOpen = open);
} else {
setState(() => _minimalPaneOpen = false);
}
}

late bool _compactOverlayOpen;

int _oldIndex = 0;
Expand Down Expand Up @@ -276,7 +289,7 @@ class NavigationViewState extends State<NavigationView> {
Widget? paneNavigationButton() {
final minimalLeading = PaneItem(
title: Text(
!_minimalPaneOpen
!minimalPaneOpen
? localizations.openNavigationTooltip
: localizations.closeNavigationTooltip,
),
Expand All @@ -286,7 +299,7 @@ class NavigationViewState extends State<NavigationView> {
context,
false,
() async {
setState(() => _minimalPaneOpen = !_minimalPaneOpen);
minimalPaneOpen = !minimalPaneOpen;
},
displayMode: PaneDisplayMode.compact,
);
Expand Down Expand Up @@ -438,6 +451,7 @@ class NavigationViewState extends State<NavigationView> {
double openSize =
pane.size?.openPaneWidth ?? kOpenNavigationPaneWidth;

final bool noOverlayRequired = consts.maxWidth / 2.5 > openSize;
final bool openedWithoutOverlay =
_compactOverlayOpen && consts.maxWidth / 2.5 > openSize;

Expand All @@ -447,7 +461,7 @@ class NavigationViewState extends State<NavigationView> {
// identifier: 'compactOverlayOpen',
// )}');

if (openedWithoutOverlay || !_compactOverlayOpen) {
if (noOverlayRequired) {
paneResult = Column(children: [
appBar,
Expanded(
Expand Down Expand Up @@ -493,7 +507,7 @@ class NavigationViewState extends State<NavigationView> {
paneResult = Stack(children: [
Padding(
padding: EdgeInsetsDirectional.only(
top: widget.appBar?.finalHeight(context) ?? 0.0,
top: appBarPadding.resolve(direction).top,
start: pane.size?.compactWidth ??
kCompactNavigationPaneWidth,
),
Expand All @@ -514,30 +528,56 @@ class NavigationViewState extends State<NavigationView> {
),
),
PaneScrollConfiguration(
child: Mica(
key: _overlayKey,
backgroundColor: overlayBackgroundColor(),
elevation: 10.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFF6c6c6c),
width: 0.15,
child: () {
if (_compactOverlayOpen) {
return ClipRect(
child: Mica(
key: _overlayKey,
backgroundColor: overlayBackgroundColor(),
elevation: 10.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFF6c6c6c),
width: 0.15,
),
borderRadius: BorderRadius.circular(8.0),
),
margin: const EdgeInsets.symmetric(
vertical: 1.0,
),
padding: appBarPadding,
child: _OpenNavigationPane(
theme: theme,
pane: pane,
paneKey: _panelKey,
listKey: _listKey,
onToggle: toggleCompactOpenMode,
onItemSelected: toggleCompactOpenMode,
),
),
),
borderRadius: BorderRadius.circular(8.0),
),
margin: const EdgeInsets.symmetric(vertical: 1.0),
padding: appBarPadding,
child: _OpenNavigationPane(
theme: theme,
pane: pane,
paneKey: _panelKey,
listKey: _listKey,
onToggle: toggleCompactOpenMode,
onItemSelected: toggleCompactOpenMode,
),
),
),
);
} else {
return Mica(
key: _overlayKey,
backgroundColor: overlayBackgroundColor(),
elevation: 10.0,
child: Padding(
padding: EdgeInsets.only(
top: appBarPadding.resolve(direction).top,
),
child: _CompactNavigationPane(
pane: pane,
paneKey: _panelKey,
listKey: _listKey,
onToggle: toggleCompactOpenMode,
onOpenSearch: widget.onOpenSearch,
),
),
);
}
}(),
),
appBar,
]);
Expand Down Expand Up @@ -575,12 +615,10 @@ class NavigationViewState extends State<NavigationView> {
bottom: 0.0,
child: content,
),
if (_minimalPaneOpen)
if (minimalPaneOpen)
Positioned.fill(
child: GestureDetector(
onTap: () {
setState(() => _minimalPaneOpen = false);
},
onTap: () => minimalPaneOpen = false,
child: AbsorbPointer(
child: Semantics(
label: localizations.modalBarrierDismissLabel,
Expand All @@ -593,7 +631,7 @@ class NavigationViewState extends State<NavigationView> {
key: _overlayKey,
duration: theme.animationDuration ?? Duration.zero,
curve: theme.animationCurve ?? Curves.linear,
start: _minimalPaneOpen ? 0.0 : -kOpenNavigationPaneWidth,
start: minimalPaneOpen ? 0.0 : -kOpenNavigationPaneWidth,
width: kOpenNavigationPaneWidth,
height: mediaQuery.size.height,
child: PaneScrollConfiguration(
Expand All @@ -617,9 +655,7 @@ class NavigationViewState extends State<NavigationView> {
pane: pane,
paneKey: _panelKey,
listKey: _listKey,
onItemSelected: () {
setState(() => _minimalPaneOpen = false);
},
onItemSelected: () => minimalPaneOpen = false,
),
),
),
Expand All @@ -645,7 +681,7 @@ class NavigationViewState extends State<NavigationView> {
backgroundColor: theme.backgroundColor,
child: InheritedNavigationView(
displayMode: _compactOverlayOpen ? PaneDisplayMode.open : displayMode,
minimalPaneOpen: _minimalPaneOpen,
minimalPaneOpen: minimalPaneOpen,
pane: widget.pane,
oldIndex: _oldIndex,
child: PaneItemKeys(keys: _itemKeys, child: paneResult),
Expand Down