Skip to content

Commit

Permalink
fix: RTL and web title fixes (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kypsis
Kypsis authored Feb 10, 2023
1 parent fa2c217 commit 25619e5
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 92 deletions.
70 changes: 39 additions & 31 deletions example/lib/src/storybook/stories/avatar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ class AvatarStory extends Story {
],
);

final setRtlModeKnob = context.knobs.boolean(
label: "RTL mode",
description: "Switch between LTR and RTL modes.",
);

final customLabelTextKnob = context.knobs.text(
label: "Custom label text",
initial: "MD",
Expand Down Expand Up @@ -72,39 +77,42 @@ class AvatarStory extends Story {
final badgeColor = colorTable(context)[badgeColorKnob];

return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 64),
const TextDivider(text: "Customisable avatar"),
const SizedBox(height: 32),
MoonAvatar(
avatarSize: avatarSizesKnob,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob,
child: Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(customLabelTextKnob),
child: Directionality(
textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 64),
const TextDivider(text: "Customisable avatar"),
const SizedBox(height: 32),
MoonAvatar(
avatarSize: avatarSizesKnob,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob,
child: Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(customLabelTextKnob),
),
),
),
const SizedBox(height: 40),
const TextDivider(text: "Preset avatar with picture background"),
const SizedBox(height: 32),
MoonAvatar(
avatarSize: avatarSizesKnob,
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob,
backgroundImage: const AssetImage(
"assets/images/placeholder-640x359.png",
const SizedBox(height: 40),
const TextDivider(text: "Preset avatar with picture background"),
const SizedBox(height: 32),
MoonAvatar(
avatarSize: avatarSizesKnob,
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob,
backgroundImage: const AssetImage(
"assets/images/placeholder-640x359.png",
),
),
),
const SizedBox(height: 64),
],
const SizedBox(height: 64),
],
),
),
);
},
Expand Down
1 change: 0 additions & 1 deletion example/lib/src/storybook/stories/button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ class ButtonStory extends Story {
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
showBorder: showBorderKnob,
buttonSize: buttonSizesKnob,
isFullWidth: setFullWidthKnob,
backgroundColor: color,
showPulseEffect: showPulseEffectKnob,
showPulseEffectJiggle: showPulseEffectJiggleKnob,
Expand Down
1 change: 0 additions & 1 deletion example/lib/src/storybook/storybook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ class StorybookPage extends StatelessWidget {
child: Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
backgroundColor: context.moonColors!.beerus,
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: child,
Expand Down
6 changes: 3 additions & 3 deletions example/web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,19 @@

<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<meta name="description" content="Moon Design for Flutter.">

<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="example">
<meta name="apple-mobile-web-app-title" content="Moon Design for Flutter">
<link rel="apple-touch-icon" href="icons/Icon-192.png">

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

<title>example</title>
<title>Moon Design for Flutter</title>
<link rel="manifest" href="manifest.json">

<script>
Expand Down
43 changes: 30 additions & 13 deletions lib/src/widgets/avatar/avatar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,18 +76,34 @@ class MoonAvatar extends StatelessWidget {
this.child,
});

Alignment _avatarAlignmentMapper() {
switch (badgeAlignment) {
case MoonBadgeAlignment.topLeft:
return Alignment.topLeft;
case MoonBadgeAlignment.topRight:
return Alignment.topRight;
case MoonBadgeAlignment.bottomLeft:
return Alignment.bottomLeft;
case MoonBadgeAlignment.bottomRight:
return Alignment.bottomRight;
default:
return Alignment.bottomLeft;
Alignment _avatarAlignmentMapper(BuildContext context) {
final isRTL = Directionality.of(context) == TextDirection.rtl;
if (isRTL) {
switch (badgeAlignment) {
case MoonBadgeAlignment.topLeft:
return Alignment.topRight;
case MoonBadgeAlignment.topRight:
return Alignment.topLeft;
case MoonBadgeAlignment.bottomLeft:
return Alignment.bottomRight;
case MoonBadgeAlignment.bottomRight:
return Alignment.bottomLeft;
default:
return Alignment.bottomRight;
}
} else {
switch (badgeAlignment) {
case MoonBadgeAlignment.topLeft:
return Alignment.topLeft;
case MoonBadgeAlignment.topRight:
return Alignment.topRight;
case MoonBadgeAlignment.bottomLeft:
return Alignment.bottomLeft;
case MoonBadgeAlignment.bottomRight:
return Alignment.bottomRight;
default:
return Alignment.bottomRight;
}
}
}

Expand Down Expand Up @@ -153,6 +169,7 @@ class MoonAvatar extends StatelessWidget {
badgeSize: effectiveBadgeSize,
badgeMarginValue: effectiveBadgeMarginValue,
badgeAlignment: badgeAlignment,
textDirection: Directionality.of(context),
),
child: DefaultTextStyle(
style: effectiveMoonAvatarSize.textStyle.copyWith(color: effectiveTextColor),
Expand All @@ -173,7 +190,7 @@ class MoonAvatar extends StatelessWidget {
),
if (showBadge)
Align(
alignment: _avatarAlignmentMapper(),
alignment: _avatarAlignmentMapper(context),
child: Container(
height: effectiveBadgeSize,
width: effectiveBadgeSize,
Expand Down
129 changes: 88 additions & 41 deletions lib/src/widgets/avatar/avatar_clipper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class AvatarClipper extends CustomClipper<Path> {
final double badgeMarginValue;
final double borderRadiusValue;
final MoonBadgeAlignment badgeAlignment;
final TextDirection textDirection;

AvatarClipper({
required this.showBadge,
Expand All @@ -22,52 +23,98 @@ class AvatarClipper extends CustomClipper<Path> {
required this.badgeMarginValue,
required this.borderRadiusValue,
required this.badgeAlignment,
required this.textDirection,
});

Path _getBadgePath() {
final badgeRadius = badgeSize / 2;

switch (badgeAlignment) {
case MoonBadgeAlignment.topLeft:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(0 + badgeRadius, 0 + badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.topRight:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, 0 + badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.bottomLeft:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(0 + badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.bottomRight:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
default:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
if (textDirection == TextDirection.rtl) {
switch (badgeAlignment) {
case MoonBadgeAlignment.topLeft:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, 0 + badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.topRight:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(0 + badgeRadius, 0 + badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.bottomLeft:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.bottomRight:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(0 + badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
default:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
}
} else {
switch (badgeAlignment) {
case MoonBadgeAlignment.topLeft:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(0 + badgeRadius, 0 + badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.topRight:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, 0 + badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.bottomLeft:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(0 + badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.bottomRight:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
default:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, width - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
}
}
}

Expand Down
2 changes: 0 additions & 2 deletions lib/src/widgets/buttons/button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,6 @@ class MoonButton extends StatelessWidget {
double minTouchTargetSize = 40,
bool autofocus = false,
bool isFocusable = true,
bool isFullWidth = false,
bool ensureMinimalTouchTargetSize = false,
bool showBorder = false,
bool showFocusEffect = true,
Expand Down Expand Up @@ -253,7 +252,6 @@ class MoonButton extends StatelessWidget {
minTouchTargetSize: minTouchTargetSize,
autofocus: autofocus,
isFocusable: isFocusable,
isFullWidth: isFullWidth,
ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize,
showBorder: showBorder,
showFocusEffect: showFocusEffect,
Expand Down

0 comments on commit 25619e5

Please sign in to comment.