Skip to content

Commit 2b55e9e

Browse files
pithuenepithuene
committed
refactor(ui): Use styled_widget
1 parent 60ceaa8 commit 2b55e9e

File tree

16 files changed

+234
-278
lines changed

16 files changed

+234
-278
lines changed

‎packages/memex_ui/lib/border.dart‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import 'package:memex_ui/memex_ui.dart';
2+
3+
class MemexBorder {
4+
static const BorderSide side = BorderSide(
5+
color: MemexColor.grid,
6+
strokeAlign: BorderSide.strokeAlignOutside,
7+
width: 1,
8+
);
9+
10+
static const Border all = Border.fromBorderSide(side);
11+
}

‎packages/memex_ui/lib/filepicker/filepicker.dart‎

Lines changed: 44 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import 'dart:io';
44
import 'package:flutter/material.dart';
55
import 'package:flutter/services.dart';
66

7-
import 'package:fast_immutable_collections/fast_immutable_collections.dart';
7+
import 'package:memex_ui/memex_ui.dart';
88
import 'package:memex_ui/miller_columns/directory_explorer.dart';
99
import 'package:memex_ui/overlay.dart';
1010

@@ -13,28 +13,24 @@ Future<File?> openFilepicker(BuildContext context) async {
1313

1414
openOverlay(
1515
context,
16-
(context, entry) => Padding(
17-
padding: const EdgeInsets.symmetric(vertical: 80, horizontal: 80),
18-
child: Container(
19-
decoration: BoxDecoration(
16+
(context, entry) => DirectoryExplorer(
17+
onKey: (key, state) {
18+
if (key.logicalKey == LogicalKeyboardKey.escape) {
19+
completer.complete(null);
20+
entry.remove();
21+
}
22+
},
23+
onSelect: (file) {
24+
completer.complete(file);
25+
entry.remove();
26+
},
27+
)
28+
.decorated(
2029
color: const Color(0xFFFFFFFF),
2130
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
2231
border: Border.all(color: Colors.black.withOpacity(0.6)),
23-
),
24-
child: DirectoryExporer(
25-
onKey: (key, state) {
26-
if (key.logicalKey == LogicalKeyboardKey.escape) {
27-
completer.complete(null);
28-
entry.remove();
29-
}
30-
},
31-
onSelect: (file) {
32-
completer.complete(file);
33-
entry.remove();
34-
},
35-
),
36-
),
37-
),
32+
)
33+
.padding(all: 80),
3834
);
3935

4036
return completer.future;
@@ -198,46 +194,34 @@ class _FilepickerState extends State<Filepicker> {
198194
}
199195
}
200196
},
201-
child: Padding(
202-
padding: EdgeInsets.all(50),
203-
child: ColoredBox(
204-
color: Color(0xFFFFFFFF),
205-
child: Row(
206-
children: [
207-
Expanded(
208-
child: ListView(
209-
children: columnWidgets(
210-
context,
211-
null,
212-
leftColumn,
213-
current.parent.path,
214-
),
215-
),
216-
),
217-
Expanded(
218-
child: ListView(
219-
children: columnWidgets(
220-
context,
221-
centerFocusedKey,
222-
centerColumn,
223-
current.path,
224-
),
225-
),
226-
),
227-
Expanded(
228-
child: ListView(
229-
children: columnWidgets(
230-
context,
231-
null,
232-
rightColumn,
233-
"",
234-
),
235-
),
236-
),
237-
],
238-
),
239-
),
240-
),
197+
child: Row(
198+
children: [
199+
ListView(
200+
children: columnWidgets(
201+
context,
202+
null,
203+
leftColumn,
204+
current.parent.path,
205+
),
206+
).expanded(),
207+
ListView(
208+
children: columnWidgets(
209+
context,
210+
centerFocusedKey,
211+
centerColumn,
212+
current.path,
213+
),
214+
).expanded(),
215+
ListView(
216+
children: columnWidgets(
217+
context,
218+
null,
219+
rightColumn,
220+
"",
221+
),
222+
).expanded(),
223+
],
224+
).backgroundColor(MemexColor.white).padding(all: 50),
241225
);
242226
}
243227
}

‎packages/memex_ui/lib/memex_ui.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export 'package:flutter/src/cupertino/icons.dart';
77
export 'state/state.dart';
88
export 'memex_app.dart';
99
export 'color.dart';
10+
export 'border.dart';
1011
export 'typography.dart';
1112
export 'icon.dart';
1213
export 'switch.dart';
@@ -38,3 +39,5 @@ export 'package:macos_ui/src/buttons/push_button.dart';
3839
export 'package:macos_ui/src/buttons/pulldown_button.dart';
3940
export 'package:macos_ui/src/dialogs/macos_alert_dialog.dart';
4041
export 'package:macos_ui/src/enums/control_size.dart';
42+
43+
export 'package:styled_widget/styled_widget.dart';

‎packages/memex_ui/lib/miller_columns/directory_explorer.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import 'dart:io';
55
import 'package:memex_ui/memex_ui.dart';
66
import 'package:memex_ui/miller_columns/miller_columns.dart';
77

8-
class DirectoryExporer extends StatelessWidget {
8+
class DirectoryExplorer extends StatelessWidget {
99
final void Function(
1010
RawKeyEvent, MillerColumnsState<String, FileSystemEntity>)? onKey;
1111

1212
final void Function(File)? onSelect;
1313

1414
final bool showHidden;
1515

16-
const DirectoryExporer({
16+
const DirectoryExplorer({
1717
Key? key,
1818
this.onKey,
1919
this.onSelect,

‎packages/memex_ui/lib/miller_columns/miller_columns.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ class MillerColumnsState<Key, Node> extends State<MillerColumns<Key, Node>> {
284284
showHeader: false,
285285
fullWidthHighlight: true,
286286
showEvenRowHighlight: false,
287-
isActive: Prop(isLast),
287+
isActive: Const(isLast),
288288
),
289289
),
290290
),

‎packages/memex_ui/lib/overlay.dart‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,20 @@
1-
import 'dart:ui';
2-
31
import 'package:flutter/material.dart';
4-
import 'package:flutter/widgets.dart';
52
import 'package:memex_ui/memex_ui.dart';
63

74
void openOverlay(
85
BuildContext context,
96
Widget Function(BuildContext, OverlayEntry) builder,
107
) {
11-
OverlayState overlayState = Overlay.of(context)!;
8+
OverlayState overlayState = Overlay.of(context);
129
OverlayEntry? overlayEntry;
1310
overlayEntry = OverlayEntry(
1411
builder: (context) => JumpFocusController(
1512
focusNode: FocusNode()..requestFocus(),
16-
// Capture all click events so that the overlay can be closed when the user clicks outside of it.
17-
child: Container(
18-
color: Colors.transparent,
19-
child: Center(
20-
child: Container(
21-
decoration: const BoxDecoration(boxShadow: [
22-
BoxShadow(
23-
blurRadius: 90,
24-
spreadRadius: 30,
25-
offset: Offset(0, 20),
26-
color: Color(0x88000000),
27-
)
28-
]),
29-
child: builder(context, overlayEntry!),
30-
),
31-
),
32-
),
13+
child: builder(context, overlayEntry!)
14+
.elevation(30.0)
15+
.center()
16+
// Capture all click events so that the overlay can be closed when the user clicks outside of it.
17+
.backgroundColor(Colors.transparent),
3318
),
3419
);
3520
overlayState.insert(overlayEntry);

‎packages/memex_ui/lib/table/table_header.dart‎

Lines changed: 33 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -29,60 +29,50 @@ class TableHeader<T> extends StatelessWidget {
2929
TableRow(
3030
children: [
3131
const SizedBox.shrink(),
32-
...colDefs.asMap().keys.map((labelIndex) {
33-
final colDef = colDefs[labelIndex];
32+
...colDefs.mapIndexedAndLast((index, colDef, _) {
3433
final bool isOrderedByThisColumn =
3534
colDef.label == order?.column.label;
36-
TextStyle labelStyle = MacosTheme.of(context).typography.headline;
37-
if (isOrderedByThisColumn) {
38-
labelStyle = labelStyle.copyWith(fontWeight: FontWeight.w600);
39-
}
4035

41-
Widget orderDirectionArrow = const SizedBox.shrink();
42-
if (isOrderedByThisColumn) {
43-
orderDirectionArrow = CustomPaint(
44-
size: const Size.square(16),
45-
painter: _SortDirectionCaretPainter(
46-
color: MemexColor.grid,
47-
up: order?.direction == TableOrderDirection.ascending,
48-
),
49-
);
50-
}
36+
final TextStyle labelStyle = isOrderedByThisColumn
37+
? MacosTheme.of(context)
38+
.typography
39+
.headline
40+
.copyWith(fontWeight: FontWeight.w600)
41+
: MacosTheme.of(context).typography.headline;
42+
43+
final Widget orderDirectionArrow = isOrderedByThisColumn
44+
? CustomPaint(
45+
size: const Size.square(16),
46+
painter: _SortDirectionCaretPainter(
47+
color: MemexColor.grid,
48+
up: order?.direction == TableOrderDirection.ascending,
49+
),
50+
)
51+
: const SizedBox.shrink();
5152

5253
return GestureDetector(
5354
onTap: () {
5455
if (columnHeaderClicked != null) {
5556
columnHeaderClicked!(colDef);
5657
}
5758
},
58-
child: Padding(
59-
padding: const EdgeInsets.symmetric(vertical: 5),
60-
child: Container(
61-
decoration: BoxDecoration(
62-
border: Border(
63-
right: (labelIndex == colDefs.length - 1)
64-
? BorderSide.none
65-
: const BorderSide(color: MemexColor.grid),
66-
),
67-
),
68-
child: Padding(
69-
padding: const EdgeInsets.symmetric(
70-
horizontal: 10,
71-
vertical: 3,
72-
),
73-
child: Row(
74-
children: [
75-
const Spacer(),
76-
Text(colDef.label, style: labelStyle),
77-
const Spacer(),
78-
orderDirectionArrow,
79-
],
80-
),
81-
),
82-
),
83-
),
59+
child: [
60+
const Spacer(),
61+
Text(colDef.label, style: labelStyle),
62+
const Spacer(),
63+
orderDirectionArrow,
64+
]
65+
.toRow()
66+
.padding(horizontal: 10, vertical: 3)
67+
.border(
68+
right: 1.0,
69+
color: (index == colDefs.length - 1)
70+
? MemexColor.transparent
71+
: MemexColor.grid,
72+
)
73+
.padding(vertical: 5),
8474
);
85-
}).toList(),
75+
}),
8676
const SizedBox.shrink(),
8777
],
8878
decoration: const BoxDecoration(

‎packages/memex_ui/lib/table/table_row.dart‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class TableViewRow<T> extends StatelessWidget {
3131
final bool fullWidthHighlight;
3232

3333
/// When the table is not active, the selection color is grey.
34-
final Prop<bool>? isActive;
34+
final ReactiveValue<bool>? isActive;
3535

3636
@override
3737
Widget build(BuildContext context) {
@@ -68,24 +68,19 @@ class TableViewRow<T> extends StatelessWidget {
6868
isSelected: isSelected,
6969
isActive: isActive,
7070
columnWidths: columnWidths,
71-
childrenBuilder: (context) => colDefs.map((colDef) {
72-
final AlignmentGeometry alignmentGeometry =
73-
(colDef.alignment == ColumnAlignment.start)
74-
? Alignment.centerLeft
75-
: (colDef.alignment == ColumnAlignment.center)
76-
? Alignment.center
77-
: Alignment.centerRight;
78-
return Padding(
79-
padding: const EdgeInsets.symmetric(horizontal: 10),
80-
child: SizedBox.fromSize(
81-
size: Size(0, rowHeight),
82-
child: Align(
83-
alignment: alignmentGeometry,
84-
child: colDef.cellBuilder(context, row.value),
85-
),
86-
),
87-
);
88-
}).toList(),
71+
childrenBuilder: (context) => colDefs
72+
.map(
73+
(colDef) => colDef
74+
.cellBuilder(context, row.value)
75+
.alignment(switch (colDef.alignment) {
76+
ColumnAlignment.start => Alignment.centerLeft,
77+
ColumnAlignment.center => Alignment.center,
78+
ColumnAlignment.end => Alignment.centerRight,
79+
})
80+
.height(rowHeight)
81+
.padding(horizontal: 10),
82+
)
83+
.toList(),
8984
);
9085
},
9186
),
@@ -109,7 +104,7 @@ class _RowHighlight extends ReactiveWidget {
109104
final bool fullWidthHighlight;
110105

111106
/// When the table is not active, the selection color is grey.
112-
final Prop<bool>? isActive;
107+
final ReactiveValue<bool>? isActive;
113108

114109
final bool isSelected;
115110
final Map<int, TableColumnWidth> columnWidths;

0 commit comments

Comments
 (0)