Skip to content

Commit

Permalink
Update avatar
Browse files Browse the repository at this point in the history
  • Loading branch information
Osman authored and Osman committed Apr 17, 2024
1 parent 87b6449 commit 1cfb09e
Show file tree
Hide file tree
Showing 6 changed files with 309 additions and 103 deletions.
66 changes: 42 additions & 24 deletions example/lib/pages/components/avatar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,8 @@ 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 +218,8 @@ 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 +233,8 @@ 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 +250,8 @@ 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 +298,8 @@ 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 +315,8 @@ 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 +361,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
lowerBadge: ZetaIndicator.icon(),
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
],
Expand All @@ -370,7 +376,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 +390,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 +406,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 +453,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 +469,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 +515,9 @@ 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 +533,9 @@ 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 +549,9 @@ 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 +567,9 @@ 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 +590,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
28 changes: 23 additions & 5 deletions example/widgetbook/pages/components/avatar_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import '../../test/test_components.dart';

Widget avatarUseCase(BuildContext context) {
final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
final colors = Zeta.of(context).colors;

return WidgetbookTestWidget(
widget: ZetaAvatar(
Expand All @@ -15,12 +16,29 @@ Widget avatarUseCase(BuildContext context) {
options: ZetaAvatarSize.values,
labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
),
lowerBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null,
borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
upperBadge:
context.knobs.boolean(label: 'Notification Badge', initialValue: false) ? ZetaIndicator.notification() : null,
initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null),
backgroundColor: context.knobs.colorOrNull(label: 'Background color'),
context.knobs.boolean(label: 'Status Badge', initialValue: false)
? ZetaAvatarBadge.icon(
icon: ZetaIcons.close_round,
iconColor: Colors.white,
color: Color.fromRGBO(141, 149, 163, 1),
)
: null,
borderColor: context.knobs.colorOrNull(
label: 'Outline',
),
lowerBadge: context.knobs
.boolean(label: 'Notification Badge', initialValue: false)
? ZetaAvatarBadge.notification(
value: 99,
color: colors.negative,
)
: null,
initials:
context.knobs.stringOrNull(label: 'Initials', initialValue: null),
backgroundColor: context.knobs.colorOrNull(
label: 'Background color',
),
),
);
}
Loading

0 comments on commit 1cfb09e

Please sign in to comment.