Skip to content

fix(UX-1242): Fixed extended app bar alignment #189

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

Merged
merged 8 commits into from
Oct 17, 2024
Merged

fix(UX-1242): Fixed extended app bar alignment #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a3dfd3c
removed extended search appbar, changed behaviour to close search
mikecoomber Oct 15, 2024
da23afa
fix widgetbook
mikecoomber Oct 15, 2024
56053ac
app bar tests
mikecoomber Oct 16, 2024
1e7e0cd
optimized test helper
mikecoomber Oct 16, 2024
5ad47ec
chore(automated): Lint commit and format
invalid-email-address Oct 16, 2024
fd6026f
added widgetbook for extended appbar back
mikecoomber Oct 17, 2024
4d6edc4
Merge branch 'UX-1242' of https://github.com/ZebraDevs/zeta_flutter i…
mikecoomber Oct 17, 2024
65c1e3c
ci: changed pull request code coverage pass score
mikecoomber Oct 17, 2024
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
36 changes: 17 additions & 19 deletions .github/workflows/pull-request.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
name: CI - Pull Request
on:
pull_request_target:

# Pull Request Runs on the same branch will be cancelled
concurrency:
group: ${{ github.head_ref }}
cancel-in-progress: true


jobs:
code-quality:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
repository: ${{github.event.pull_request.head.repo.full_name}}
ref: ${{ github.head_ref }}
fetch-depth: 0
- uses: subosito/flutter-action@v2
with:
cache: true
- run: dart run build_runner build --delete-conflicting-outputs
- uses: ZebraDevs/flutter-code-quality@main
with:
token: ${{secrets.GITHUB_TOKEN}}
coverage-pass-score: '90'


runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
repository: ${{github.event.pull_request.head.repo.full_name}}
ref: ${{ github.head_ref }}
fetch-depth: 0
- uses: subosito/flutter-action@v2
with:
cache: true
- run: dart run build_runner build --delete-conflicting-outputs
- uses: ZebraDevs/flutter-code-quality@main
with:
token: ${{secrets.GITHUB_TOKEN}}
coverage-pass-score: "80"

check-secret:
runs-on: ubuntu-latest
outputs:
Expand Down
78 changes: 9 additions & 69 deletions example/lib/pages/components/top_app_bar_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,7 @@ class TopAppBarExample extends StatefulWidget {
}

class _TopAppBarExampleState extends State<TopAppBarExample> {
final _searchControllerExtended = ZetaSearchController();
final _searchControllerRegular = ZetaSearchController();

void _showHideSearchExtended() {
_searchControllerExtended.isEnabled
? _searchControllerExtended.closeSearch()
: _searchControllerExtended.startSearch();
}

void _showHideSearchRegular() {
_searchControllerRegular.isEnabled
? _searchControllerRegular.closeSearch()
: _searchControllerRegular.startSearch();
}
final _searchController = ZetaSearchController();

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -78,8 +65,7 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
Text('Centered', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
ZetaTopAppBar.centered(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.menu),
Expand Down Expand Up @@ -119,24 +105,20 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
Text('Search', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
leading: BackButton(),
ZetaTopAppBar.search(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.menu),
),
title: Text("Title"),
actions: [
IconButton(
onPressed: _showHideSearchRegular,
icon: ZetaIcon(ZetaIcons.search),
)
],
searchController: _searchControllerRegular,
searchController: _searchController,
onSearch: (text) => debugPrint('search text: $text'),
onSearchMicrophoneIconPressed: () async {
var sampleTexts = ['This is a sample text', 'Another sample', 'Speech recognition text', 'Example'];

var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];

_searchControllerRegular.text = generatedText;
_searchController.text = generatedText;
},
),
Text('Extended', style: ZetaTextStyles.titleLarge),
Expand Down Expand Up @@ -188,48 +170,6 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
),
Text('Extended Search', style: ZetaTextStyles.titleLarge),
SizedBox(
width: 800,
height: 200,
child: CustomScrollView(
slivers: [
ZetaTopAppBar.extended(
leading: BackButton(),
title: Text("Title"),
actions: [
IconButton(
onPressed: _showHideSearchExtended,
icon: ZetaIcon(ZetaIcons.search),
)
],
searchController: _searchControllerExtended,
onSearch: (text) => debugPrint('search text: $text'),
onSearchMicrophoneIconPressed: () async {
var sampleTexts = [
'This is a sample text',
'Another sample',
'Speech recognition text',
'Example'
];
var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
_searchControllerExtended.text = generatedText;
},
),
SliverToBoxAdapter(
child: Container(
width: 800,
height: 800,
color: Zeta.of(context).colors.surfaceSelectedHover,
child: CustomPaint(
painter: Painter(context: context),
size: Size(800, 800),
),
),
),
],
),
),
].gap(20),
),
),
Expand Down
86 changes: 24 additions & 62 deletions example/widgetbook/pages/components/top_app_bar_widgetbook.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Widget defaultTopAppBarUseCase(BuildContext context) {
label: "Title Alignment",
options: [
ZetaTopAppBarType.defaultAppBar,
ZetaTopAppBarType.centeredTitle,
ZetaTopAppBarType.centered,
],
initialOption: ZetaTopAppBarType.defaultAppBar,
labelBuilder: (option) {
Expand Down Expand Up @@ -53,7 +53,7 @@ Widget defaultTopAppBarUseCase(BuildContext context) {
icon: ZetaIcon(ZetaIcons.more_vertical),
)
]
: null,
: [],
),
],
));
Expand Down Expand Up @@ -84,7 +84,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
label: "Title Alignment",
options: [
ZetaTopAppBarType.defaultAppBar,
ZetaTopAppBarType.centeredTitle,
ZetaTopAppBarType.centered,
],
initialOption: ZetaTopAppBarType.defaultAppBar,
labelBuilder: (option) {
Expand All @@ -101,7 +101,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
initialValue: false,
);

return ZetaTopAppBar(
return ZetaTopAppBar.search(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(leadingIcon),
Expand All @@ -118,43 +118,26 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
searchController.text = generatedText;
}
: null,
actions: [
IconButton(
onPressed: () {
searchController.isEnabled ? searchController.closeSearch() : searchController.startSearch();
},
icon: ZetaIcon(ZetaIcons.search)),
],
);
}
}

Widget extendedTopAppBarUseCase(BuildContext context) => ExtendedSearch();
Widget extendedTopAppBarUseCase(BuildContext context) => ExtendedTopAppBar();

class ExtendedSearch extends StatefulWidget {
const ExtendedSearch({super.key});
class ExtendedTopAppBar extends StatefulWidget {
const ExtendedTopAppBar({super.key});

@override
State<ExtendedSearch> createState() => _ExtendedSearchState();
State<ExtendedTopAppBar> createState() => _ExtendedTopAppBarState();
}

class _ExtendedSearchState extends State<ExtendedSearch> {
final _searchControllerExtended = ZetaSearchController();

void _showHideSearchExtended() {
_searchControllerExtended.isEnabled
? _searchControllerExtended.closeSearch()
: _searchControllerExtended.startSearch();
}

class _ExtendedTopAppBarState extends State<ExtendedTopAppBar> {
@override
Widget build(BuildContext context) {
final title = context.knobs.string(label: "Title", initialValue: "Title");

final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu);

final showSearch = context.knobs.boolean(label: 'Search variant', initialValue: false);

return WidgetbookScaffold(
removeBody: true,
builder: (context, constraints) => SafeArea(
Expand All @@ -166,41 +149,20 @@ class _ExtendedSearchState extends State<ExtendedSearch> {
ZetaTopAppBar.extended(
leading: IconButton(icon: ZetaIcon(leadingIcon), onPressed: () {}),
title: Text(title),
actions: showSearch
? [
IconButton(
onPressed: _showHideSearchExtended,
icon: ZetaIcon(ZetaIcons.search),
)
]
: [
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.language),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.favorite),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(ZetaIcons.more_vertical),
)
],
searchController: showSearch ? _searchControllerExtended : null,
onSearch: showSearch ? (text) => debugPrint('search text: $text') : null,
onSearchMicrophoneIconPressed: showSearch
? () async {
var sampleTexts = [
'This is a sample text',
'Another sample',
'Speech recognition text',
'Example'
];
var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
_searchControllerExtended.text = generatedText;
}
: null,
actions: [
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.language),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.favorite),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(ZetaIcons.more_vertical),
)
],
),
SliverToBoxAdapter(
child: Container(
Expand Down Expand Up @@ -232,7 +194,7 @@ class Painter extends CustomPainter {
var p1 = Offset(i, -10);
var p2 = Offset(constraints.maxHeight + i, constraints.maxHeight * 4);
var paint = Paint()
..color = Zeta.of(context).colors.primary
..color = Zeta.of(context).colors.surfacePrimarySubtle
..strokeWidth = Zeta.of(context).spacing.minimum;
canvas.drawLine(p1, p2, paint);
}
Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/screen_header_bar/screen_header_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class ZetaScreenHeaderBar extends ZetaStatelessWidget {
title: title,
titleTextStyle: ZetaTextStyles.titleLarge,
actions: actionButtonLabel == null
? null
? []
: [
ZetaButton(
label: actionButtonLabel!,
Expand Down
Loading