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,7 +56,8 @@ class UserAvatar extends StatelessWidget {
width: size, width: size,
height: size, height: size,
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( decoration: decoration ??
BoxDecoration(
color: color, color: color,
shape: BoxShape.circle, shape: BoxShape.circle,
border: isHovering border: isHovering
@ -64,7 +67,7 @@ class UserAvatar extends StatelessWidget {
) )
: null, : null,
), ),
child: FlowyText.regular( child: FlowyText.medium(
nameInitials, nameInitials,
color: Colors.black, color: Colors.black,
fontSize: fontSize, fontSize: fontSize,
@ -76,7 +79,8 @@ class UserAvatar extends StatelessWidget {
return SizedBox.square( return SizedBox.square(
dimension: size, dimension: size,
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: decoration ??
BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
border: isHovering border: isHovering
? Border.all( ? Border.all(
@ -105,7 +109,8 @@ class UserAvatar extends StatelessWidget {
return SizedBox.square( return SizedBox.square(
dimension: size, dimension: size,
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: decoration ??
BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
border: isHovering border: isHovering
? Border.all( ? Border.all(