feat: change user avatar corner radius (#5461)

This commit is contained in:
Lucas.Xu 2024-06-04 15:59:56 +08:00 committed by GitHub
parent 57d4652824
commit 1757570337
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 33 deletions

View File

@ -28,17 +28,26 @@ class SidebarUser extends StatelessWidget {
child: BlocBuilder<MenuUserBloc, MenuUserState>( child: BlocBuilder<MenuUserBloc, MenuUserState>(
builder: (context, state) => Row( builder: (context, state) => Row(
children: [ children: [
const HSpace(6), const HSpace(4),
UserAvatar( UserAvatar(
iconUrl: state.userProfile.iconUrl, iconUrl: state.userProfile.iconUrl,
name: state.userProfile.name, name: state.userProfile.name,
size: 16.0, size: 24.0,
fontSize: 10.0, fontSize: 16.0,
decoration: ShapeDecoration(
color: const Color(0xFFFBE8FB),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 0.50, color: Color(0x19171717)),
borderRadius: BorderRadius.circular(8),
),
),
), ),
const HSpace(10), const HSpace(8),
Expanded(child: _buildUserName(context, state)), Expanded(child: _buildUserName(context, state)),
UserSettingButton(userProfile: state.userProfile), UserSettingButton(userProfile: state.userProfile),
const HSpace(8.0),
const NotificationButton(), const NotificationButton(),
const HSpace(10.0),
], ],
), ),
), ),
@ -51,6 +60,7 @@ class SidebarUser extends StatelessWidget {
name, name,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
color: Theme.of(context).colorScheme.tertiary, color: Theme.of(context).colorScheme.tertiary,
fontSize: 15.0,
); );
} }

View File

@ -16,12 +16,14 @@ class UserAvatar extends StatelessWidget {
required this.size, required this.size,
required this.fontSize, required this.fontSize,
this.isHovering = false, this.isHovering = false,
this.decoration,
}); });
final String iconUrl; final String iconUrl;
final String name; final String name;
final double size; final double size;
final double fontSize; final double fontSize;
final Decoration? decoration;
// If true, a border will be applied on top of the avatar // If true, a border will be applied on top of the avatar
final bool isHovering; final bool isHovering;
@ -54,17 +56,18 @@ class UserAvatar extends StatelessWidget {
width: size, width: size,
height: size, height: size,
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( decoration: decoration ??
color: color, BoxDecoration(
shape: BoxShape.circle, color: color,
border: isHovering shape: BoxShape.circle,
? Border.all( border: isHovering
color: _darken(color), ? Border.all(
width: 4, color: _darken(color),
) width: 4,
: null, )
), : null,
child: FlowyText.regular( ),
child: FlowyText.medium(
nameInitials, nameInitials,
color: Colors.black, color: Colors.black,
fontSize: fontSize, fontSize: fontSize,
@ -76,15 +79,16 @@ class UserAvatar extends StatelessWidget {
return SizedBox.square( return SizedBox.square(
dimension: size, dimension: size,
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: decoration ??
shape: BoxShape.circle, BoxDecoration(
border: isHovering shape: BoxShape.circle,
? Border.all( border: isHovering
color: Theme.of(context).colorScheme.primary, ? Border.all(
width: 4, color: Theme.of(context).colorScheme.primary,
) width: 4,
: null, )
), : null,
),
child: ClipRRect( child: ClipRRect(
borderRadius: Corners.s5Border, borderRadius: Corners.s5Border,
child: CircleAvatar( child: CircleAvatar(
@ -105,15 +109,16 @@ class UserAvatar extends StatelessWidget {
return SizedBox.square( return SizedBox.square(
dimension: size, dimension: size,
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: decoration ??
shape: BoxShape.circle, BoxDecoration(
border: isHovering shape: BoxShape.circle,
? Border.all( border: isHovering
color: Theme.of(context).colorScheme.primary, ? Border.all(
width: 4, color: Theme.of(context).colorScheme.primary,
) width: 4,
: null, )
), : null,
),
child: ClipRRect( child: ClipRRect(
borderRadius: Corners.s5Border, borderRadius: Corners.s5Border,
child: CircleAvatar( child: CircleAvatar(