Skip to content

Commit

Permalink
feat/context-menu (#130)
Browse files Browse the repository at this point in the history
  • Loading branch information
nank1ro committed Sep 3, 2024
1 parent 2dd8ae8 commit 4eef6cd
Show file tree
Hide file tree
Showing 38 changed files with 2,478 additions and 574 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
## 0.9.0

- New `ShadContextMenu` component.
- Add `groupId` to `ShadPopover`, to determine if the tap is inside the popover or not.
- Add `onFocusChange` to `ShadFocusable` and `ShadButton`.
- Add `onSecondaryTap` to `ShadButton`.

## 0.8.1

- Fix `ShadTabs` not updating the controller when the value changes.
Expand All @@ -6,6 +13,7 @@

- **BREAKING CHANGE**: Refactor `ShadResizablePanelGroup` in order to react to window resize correctly. The sizes have been normalized. You don't need to provide anymore a pixel size, but a value between 0 and 1 which indicates the percentage of the available space.
- Add `onChanged` to `ShadTabs`.
- Add `onSecondaryTap` to `ShadGestureDetector` and `ShadButton`.
- Fix `maxWidth` missing in `ShadSelectForlField`.

## 0.7.3
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ See the [documentation](https://mariuti.com/shadcn-ui/) to interact with the com
- [ ] Collapsible
- [x] [Combobox](https://mariuti.com/shadcn-ui/components/select/#with-search)
- [ ] Command
- [ ] Context Menu
- [x] [Context Menu](https://mariuti.com/shadcn-ui/components/context-menu/)
- [ ] Data Table
- [ ] Date Picker
- [ ] Drawer
- [ ] Dropdown Menu
- [x] <strike>Dropdown Menu</strike> Use Context Menu instead
- [x] [Form](https://mariuti.com/shadcn-ui/components/form/)
- [x] <strike>Hover Card</strike> Use Popover instead
- [x] [Image](https://mariuti.com/shadcn-ui/components/image/)
Expand Down
6 changes: 4 additions & 2 deletions example/lib/common/base_scaffold.dart
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class BaseScaffold extends StatelessWidget {
this.wrapChildrenInScrollable = true,
this.wrapSingleChildInColumn = true,
this.alignment,
this.gap = 8,
});

final List<Widget> children;
Expand All @@ -22,6 +23,7 @@ class BaseScaffold extends StatelessWidget {
final bool wrapChildrenInScrollable;
final bool wrapSingleChildInColumn;
final Alignment? alignment;
final double gap;

@override
Widget build(BuildContext context) {
Expand All @@ -34,7 +36,7 @@ class BaseScaffold extends StatelessWidget {
? children[0]
: Column(
crossAxisAlignment: crossAxisAlignment,
children: children.separatedBy(const SizedBox(height: 8)),
children: children.separatedBy(SizedBox(height: gap)),
),
);

Expand All @@ -52,7 +54,7 @@ class BaseScaffold extends StatelessWidget {
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: editable!.separatedBy(const SizedBox(height: 8)),
children: editable!.separatedBy(SizedBox(height: gap)),
),
),
);
Expand Down
4 changes: 3 additions & 1 deletion example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import 'package:example/pages/button.dart';
import 'package:example/pages/card.dart';
import 'package:example/pages/checkbox.dart';
import 'package:example/pages/checkbox_form_field.dart';
import 'package:example/pages/context_menu.dart';
import 'package:example/pages/dialog.dart';
import 'package:example/pages/image.dart';
import 'package:example/pages/input.dart';
Expand Down Expand Up @@ -47,6 +48,7 @@ final routes = <String, WidgetBuilder>{
'/card': (_) => const CardPage(),
'/checkbox': (_) => const CheckboxPage(),
'/checkbox-form-field': (_) => const CheckboxFormFieldPage(),
'/context-menu': (_) => const ContextMenuPage(),
'/dialog': (_) => const DialogPage(),
'/image': (_) => const ImagePage(),
'/input': (_) => const InputPage(),
Expand All @@ -62,8 +64,8 @@ final routes = <String, WidgetBuilder>{
'/slider': (_) => const SliderPage(),
'/switch': (_) => const SwitchPage(),
'/switch-form-field': (_) => const SwitchFormFieldPage(),
'/tabs': (_) => const TabsPage(),
'/table': (_) => const TablePage(),
'/tabs': (_) => const TabsPage(),
'/toast': (_) => const ToastPage(),
'/tooltip': (_) => const TooltipPage(),
'/typography': (_) => const TypographyPage(),
Expand Down
93 changes: 93 additions & 0 deletions example/lib/pages/context_menu.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import 'package:example/common/base_scaffold.dart';
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

class ContextMenuPage extends StatelessWidget {
const ContextMenuPage({super.key});

@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return BaseScaffold(
appBarTitle: 'ContextMenu',
children: [
ShadContextMenuRegion(
constraints: const BoxConstraints(minWidth: 300),
child: Container(
width: 300,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: theme.colorScheme.border),
borderRadius: BorderRadius.circular(8),
),
child: const Text('Right click here'),
),
children: [
const ShadContextMenuItem.inset(
child: Text('Back'),
),
const ShadContextMenuItem.inset(
enabled: false,
child: Text('Forward'),
),
const ShadContextMenuItem.inset(
child: Text('Reload'),
),
const ShadContextMenuItem.inset(
child: Text('More Tools'),
trailing: ShadImage.square(
LucideIcons.chevronRight,
size: 16,
),
children: [
ShadContextMenuItem(
child: Text('Save Page As...'),
),
ShadContextMenuItem(
child: Text('Create Shortcut...'),
),
ShadContextMenuItem(
child: Text('Name Window...'),
),
Divider(height: 8),
ShadContextMenuItem(
child: Text('Developer Tools'),
),
],
),
const Divider(height: 8),
const ShadContextMenuItem(
leading: ShadImage.square(LucideIcons.check, size: 16),
child: Text('Show Bookmarks Bar'),
),
const ShadContextMenuItem.inset(child: Text('Show Full URLs')),
const Divider(height: 8),
Padding(
padding: const EdgeInsets.fromLTRB(36, 8, 8, 8),
child: Text('People', style: theme.textTheme.small),
),
const Divider(height: 8),
ShadContextMenuItem(
leading: SizedBox.square(
dimension: 16,
child: Center(
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: theme.colorScheme.foreground,
shape: BoxShape.circle,
),
),
),
),
child: const Text('Pedro Duarte'),
),
const ShadContextMenuItem.inset(child: Text('Colm Tuite')),
],
),
],
);
}
}
1 change: 1 addition & 0 deletions example/lib/pages/select.dart
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@ class _SelectPageState extends State<SelectPage> {
enabled: enabled,
focusNode: focusNodes[2],
minWidth: 180,
maxWidth: 300,
placeholder: const Text('Select framework...'),
onSearchChanged: (value) => setState(() => searchValue = value),
searchPlaceholder: const Text('Search framework'),
Expand Down
21 changes: 12 additions & 9 deletions lib/shadcn_ui.dart
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export 'src/components/badge.dart';
export 'src/components/button.dart';
export 'src/components/card.dart';
export 'src/components/checkbox.dart';
export 'src/components/context_menu.dart';
export 'src/components/dialog.dart';
export 'src/components/form/field.dart';
export 'src/components/form/fields/checkbox.dart';
Expand All @@ -29,8 +30,8 @@ export 'src/components/select.dart';
export 'src/components/sheet.dart';
export 'src/components/slider.dart';
export 'src/components/switch.dart';
export 'src/components/tabs.dart';
export 'src/components/table.dart';
export 'src/components/tabs.dart';
export 'src/components/toast.dart';
export 'src/components/tooltip.dart';

Expand Down Expand Up @@ -65,35 +66,37 @@ export 'src/theme/components/badge.dart';
export 'src/theme/components/button.dart';
export 'src/theme/components/card.dart';
export 'src/theme/components/checkbox.dart';
export 'src/theme/components/context_menu.dart';
export 'src/theme/components/decorator.dart';
export 'src/theme/components/dialog.dart';
export 'src/theme/components/input.dart';
export 'src/theme/components/input_decorator.dart';
export 'src/theme/components/option.dart';
export 'src/theme/components/popover.dart';
export 'src/theme/components/progress.dart';
export 'src/theme/components/radio.dart';
export 'src/theme/components/resizable.dart';
export 'src/theme/components/select.dart';
export 'src/theme/components/sheet.dart';
export 'src/theme/components/slider.dart';
export 'src/theme/components/switch.dart';
export 'src/theme/components/table.dart';
export 'src/theme/components/tabs.dart';
export 'src/theme/components/toast.dart';
export 'src/theme/components/tooltip.dart';
export 'src/theme/text_theme/text_styles_default.dart';
export 'src/theme/text_theme/theme.dart';
export 'src/theme/components/resizable.dart';
export 'src/theme/components/tabs.dart';
export 'src/theme/components/input_decorator.dart';

// Utils
export 'src/utils/position.dart';
export 'src/utils/responsive.dart';
export 'src/utils/states_controller.dart';
export 'src/utils/animation_builder.dart';
export 'src/utils/effects.dart';
export 'src/utils/extensions.dart';
export 'src/utils/provider.dart' hide ProviderReadExt, ProviderWatchExt;
export 'src/utils/gesture_detector.dart';
export 'src/utils/effects.dart';
export 'src/utils/position.dart';
export 'src/utils/provider.dart' hide ProviderReadExt, ProviderWatchExt;
export 'src/utils/responsive.dart';
export 'src/utils/states_controller.dart';
export 'src/utils/mouse_area.dart';

// External libraries
export 'package:flutter_animate/flutter_animate.dart' hide Effect;
Expand Down
7 changes: 5 additions & 2 deletions lib/src/app.dart
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import 'package:shadcn_ui/src/components/toast.dart';
import 'package:shadcn_ui/src/theme/color_scheme/slate.dart';
import 'package:shadcn_ui/src/theme/data.dart';
import 'package:shadcn_ui/src/theme/theme.dart';
import 'package:shadcn_ui/src/utils/mouse_area.dart';
import 'package:shadcn_ui/src/utils/mouse_cursor_provider.dart';

enum ShadAppType {
Expand Down Expand Up @@ -568,8 +569,10 @@ class _ShadAppState extends State<ShadApp> {
child: ShadAnimatedTheme(
data: theme(context),
curve: widget.themeCurve,
child: ShadMouseCursorProvider(
child: _buildApp(context),
child: ShadMouseAreaSurface(
child: ShadMouseCursorProvider(
child: _buildApp(context),
),
),
),
),
Expand Down
Loading

0 comments on commit 4eef6cd

Please sign in to comment.