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

update from internal #59

Merged
merged 7 commits into from
May 2, 2024
Merged

update from internal #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1011782
feat: Select input (#35)
atanasyordanov21 Apr 26, 2024
51b3552
feat: Filter Selection (#36)
atanasyordanov21 Apr 29, 2024
bb6d5de
feat: ZetaScreenHeaderBar (#39)
atanasyordanov21 Apr 29, 2024
cfaf08e
fix: Avatar update (#30)
ahmed-osman3 Apr 30, 2024
5414fca
main: Contact List (#40)
sd-athlon Apr 30, 2024
80c81d6
feat: Chat Item (#37)
sd-athlon Apr 30, 2024
7872fb8
fix: Update banners (#41)
atanasyordanov21 Apr 30, 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
10 changes: 10 additions & 0 deletions example/lib/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,22 @@ import 'package:zeta_example/pages/components/banner_example.dart';
import 'package:zeta_example/pages/components/bottom_sheet_example.dart';
import 'package:zeta_example/pages/components/breadcrumbs_example.dart';
import 'package:zeta_example/pages/components/button_example.dart';
import 'package:zeta_example/pages/components/chat_item_example.dart';
import 'package:zeta_example/pages/components/checkbox_example.dart';
import 'package:zeta_example/pages/components/chip_example.dart';
import 'package:zeta_example/pages/components/contact_item_example.dart';
import 'package:zeta_example/pages/components/date_input_example.dart';
import 'package:zeta_example/pages/components/dialog_example.dart';
import 'package:zeta_example/pages/components/dialpad_example.dart';
import 'package:zeta_example/pages/components/dropdown_example.dart';
import 'package:zeta_example/pages/components/filter_selection_example.dart';
import 'package:zeta_example/pages/components/list_item_example.dart';
import 'package:zeta_example/pages/components/navigation_bar_example.dart';
import 'package:zeta_example/pages/components/navigation_rail_example.dart';
import 'package:zeta_example/pages/components/phone_input_example.dart';
import 'package:zeta_example/pages/components/radio_example.dart';
import 'package:zeta_example/pages/components/screen_header_bar_example.dart';
import 'package:zeta_example/pages/components/select_input_example.dart';
import 'package:zeta_example/pages/components/search_bar_example.dart';
import 'package:zeta_example/pages/components/segmented_control_example.dart';
import 'package:zeta_example/pages/components/stepper_example.dart';
Expand Down Expand Up @@ -53,8 +58,10 @@ final List<Component> components = [
Component(BottomSheetExample.name, (context) => const BottomSheetExample()),
Component(BreadCrumbsExample.name, (context) => const BreadCrumbsExample()),
Component(ButtonExample.name, (context) => const ButtonExample()),
Component(ChatItemExample.name, (context) => const ChatItemExample()),
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
Component(ChipExample.name, (context) => const ChipExample()),
Component(ContactItemExample.name, (context) => const ContactItemExample()),
Component(ListItemExample.name, (context) => const ListItemExample()),
Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
Component(PaginationExample.name, (context) => const PaginationExample()),
Expand All @@ -74,6 +81,9 @@ final List<Component> components = [
Component(SearchBarExample.name, (context) => const SearchBarExample()),
Component(TooltipExample.name, (context) => const TooltipExample()),
Component(NavigationRailExample.name, (context) => const NavigationRailExample()),
Component(SelectInputExample.name, (context) => const SelectInputExample()),
Component(ScreenHeaderBarExample.name, (context) => const ScreenHeaderBarExample()),
Component(FilterSelectionExample.name, (context) => const FilterSelectionExample()),
];

final List<Component> theme = [
Expand Down
56 changes: 32 additions & 24 deletions example/lib/pages/components/avatar_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
upperBadge: ZetaIndicator.notification(value: 3),
upperBadge: ZetaAvatarBadge.notification(value: 3),
),
const SizedBox(height: 20),
],
Expand All @@ -217,7 +217,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
upperBadge: ZetaIndicator.notification(value: 3),
upperBadge: ZetaAvatarBadge.notification(value: 3),
),
const SizedBox(height: 20),
],
Expand All @@ -231,7 +231,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
upperBadge: ZetaIndicator.notification(value: 3),
upperBadge: ZetaAvatarBadge.notification(value: 3),
image: image,
),
const SizedBox(height: 20),
Expand All @@ -247,7 +247,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
upperBadge: ZetaIndicator.notification(value: 3),
upperBadge: ZetaAvatarBadge.notification(value: 3),
image: image,
),
const SizedBox(height: 20),
Expand Down Expand Up @@ -294,7 +294,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
size: size,
initials: 'AB',
upperBadge: ZetaIndicator.notification(value: 3),
upperBadge: ZetaAvatarBadge.notification(value: 3),
),
const SizedBox(height: 20),
],
Expand All @@ -310,7 +310,7 @@ class AvatarExample extends StatelessWidget {
size: size,
initials: 'AB',
borderColor: Zeta.of(context).colors.green,
upperBadge: ZetaIndicator.notification(value: 3),
upperBadge: ZetaAvatarBadge.notification(value: 3),
),
const SizedBox(height: 20),
],
Expand Down Expand Up @@ -355,7 +355,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
lowerBadge: ZetaIndicator.icon(),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -370,7 +370,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
lowerBadge: ZetaIndicator.icon(),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -384,7 +384,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
lowerBadge: ZetaIndicator.icon(),
lowerBadge: ZetaAvatarBadge.icon(),
image: image,
),
const SizedBox(height: 20),
Expand All @@ -400,7 +400,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
lowerBadge: ZetaIndicator.icon(),
lowerBadge: ZetaAvatarBadge.icon(),
image: image,
),
const SizedBox(height: 20),
Expand Down Expand Up @@ -447,7 +447,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
size: size,
initials: 'AB',
lowerBadge: ZetaIndicator.icon(),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -463,7 +463,7 @@ class AvatarExample extends StatelessWidget {
size: size,
initials: 'AB',
borderColor: Zeta.of(context).colors.green,
lowerBadge: ZetaIndicator.icon(),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand Down Expand Up @@ -509,8 +509,8 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.image(
size: size,
image: image,
upperBadge: ZetaIndicator.notification(value: 3),
lowerBadge: ZetaIndicator.icon(),
upperBadge: ZetaAvatarBadge.notification(value: 3),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -526,8 +526,8 @@ class AvatarExample extends StatelessWidget {
size: size,
image: image,
borderColor: Zeta.of(context).colors.green,
upperBadge: ZetaIndicator.notification(value: 3),
lowerBadge: ZetaIndicator.icon(),
upperBadge: ZetaAvatarBadge.notification(value: 3),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -541,8 +541,8 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
size: size,
initials: 'AB',
upperBadge: ZetaIndicator.notification(value: 3),
lowerBadge: ZetaIndicator.icon(),
upperBadge: ZetaAvatarBadge.notification(value: 3),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -558,8 +558,8 @@ class AvatarExample extends StatelessWidget {
size: size,
initials: 'AB',
borderColor: Zeta.of(context).colors.green,
upperBadge: ZetaIndicator.notification(value: 3),
lowerBadge: ZetaIndicator.icon(),
upperBadge: ZetaAvatarBadge.notification(value: 3),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -580,15 +580,23 @@ class AvatarExample extends StatelessWidget {
extension on ZetaAvatarSize {
double get pixelSize {
switch (this) {
case ZetaAvatarSize.xxxl:
return ZetaSpacing.x50;
case ZetaAvatarSize.xxl:
return ZetaSpacing.x30;
case ZetaAvatarSize.xl:
return ZetaSpacing.x16;
return ZetaSpacing.x20;
case ZetaAvatarSize.l:
return ZetaSpacing.x12;
return ZetaSpacing.x16;
case ZetaAvatarSize.m:
return ZetaSpacing.x10;
return ZetaSpacing.x12;
case ZetaAvatarSize.s:
return ZetaSpacing.x8;
return ZetaSpacing.x10;
case ZetaAvatarSize.xs:
return ZetaSpacing.x9;
case ZetaAvatarSize.xxs:
return ZetaSpacing.x8;
case ZetaAvatarSize.xxxs:
return ZetaSpacing.x6;
}
}
Expand Down
105 changes: 47 additions & 58 deletions example/lib/pages/components/badges_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ class BadgesExample extends StatelessWidget {
_StatusLabel(),
_DividingText('Priority Pill'),
_PriorityPill(),
const SizedBox(height: ZetaSpacing.l),
_PriorityPill(size: ZetaPriorityPillSize.small),
_DividingText('Badge'),
_Badge(),
_DividingText('Indicators'),
_Indicators(),
_DividingText('Tags'),
_Tags(),
_DividingText('WorkCloud indicators'),
_WorkcloudIndicators(),
],
),
),
Expand Down Expand Up @@ -56,8 +56,10 @@ class _StatusLabel extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ZetaStatusLabel(label: 'Label', status: type),
ZetaStatusLabel(label: 'Label', status: type, customIcon: ZetaIcons.star_round),
ZetaStatusLabel(label: 'Label', status: type, rounded: false),
ZetaStatusLabel(label: 'Label', status: type, rounded: true),
ZetaStatusLabel(label: 'Label', status: type, rounded: false, customIcon: ZetaIcons.star_sharp),
],
);
}
Expand All @@ -77,16 +79,45 @@ class _StatusLabel extends StatelessWidget {
}

class _PriorityPill extends StatelessWidget {
const _PriorityPill();
const _PriorityPill({
this.size = ZetaPriorityPillSize.large,
});

final ZetaPriorityPillSize size;

@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZetaPriorityPill(index: 1000, priority: 'Rounded', rounded: true),
ZetaPriorityPill(index: 2, priority: 'Sharp', rounded: false),
].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ZetaPriorityPill(size: size, isBadge: true),
ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.high),
ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.medium),
ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.low),
].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ZetaPriorityPill(size: size),
ZetaPriorityPill(size: size, type: ZetaPriorityPillType.high),
ZetaPriorityPill(size: size, type: ZetaPriorityPillType.medium),
ZetaPriorityPill(size: size, type: ZetaPriorityPillType.low),
].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ZetaPriorityPill(size: size, rounded: false),
ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.high),
ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.medium),
ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.low),
].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
),
],
);
}
}
Expand All @@ -99,8 +130,8 @@ class _Badge extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ZetaBadge(label: 'Label', status: type, rounded: false),
ZetaBadge(label: 'Label', status: type),
ZetaBadge(label: 'Label', status: type, rounded: false),
],
);
}
Expand Down Expand Up @@ -130,7 +161,8 @@ class _Indicators extends StatelessWidget {
Column(
children: [
Text(
'ZetaIndicator.icon',
'ZetaIndicator\nicon',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 15),
Expand Down Expand Up @@ -164,7 +196,11 @@ class _Indicators extends StatelessWidget {
const SizedBox.square(dimension: ZetaSpacing.xl),
Column(
children: [
Text('ZetaIndicator.notification', style: TextStyle(fontWeight: FontWeight.bold)),
Text(
'ZetaIndicator\nnotification',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 15),
Row(
mainAxisSize: MainAxisSize.min,
Expand Down Expand Up @@ -216,50 +252,3 @@ class _Tags extends StatelessWidget {
);
}
}

class _WorkcloudIndicators extends StatelessWidget {
const _WorkcloudIndicators();

Widget workcloudIndicatorExampleRow(ZetaWorkcloudIndicatorType type) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ZetaWorkcloudIndicator(
priorityType: type,
prioritySize: ZetaWidgetSize.large,
icon: ZetaIcons.star_half_round,
label: 'Label',
),
ZetaWorkcloudIndicator(
prioritySize: ZetaWidgetSize.medium,
index: '14',
priorityType: type,
label: 'Label!',
),
ZetaWorkcloudIndicator(
priorityType: type,
),
],
);
}

@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(height: 30),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Text('Medium'), Text('Small'), Text('X-Small')],
),
...List.generate(10, (index) {
return workcloudIndicatorExampleRow(ZetaWorkcloudIndicatorType.values[index]);
}),
].divide(const SizedBox.square(dimension: ZetaSpacing.s)).toList(),
).paddingAll(ZetaSpacing.m)
],
);
}
}
Loading
Loading