Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: added name icon (#2529)

Browse Source 
* feature: added name icon

* feature: added generating color in the defined HSL ranges

* refactor: removed trailing commas for readibility

* fix: fixed trimming name and separated color picker into util file

* fix: changed to using where instead of trim

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

* feat: simplify the color generator

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>
This commit is contained in:
Daniyar Nurmukhamet 2023-05-15 17:11:43 +06:00 committed by GitHub
parent dd5bc7808c
commit a4845e668d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/appflowy_flutter/lib/util/color_generator/color_generator.dart Normal file
View File

@ -0,0 +1,11 @@
import 'dart:ui';
class ColorGenerator {
Color generateColorFromString(String string) {
final hash = string.hashCode;
int r = (hash & 0xFF0000) >> 16;
int g = (hash & 0x00FF00) >> 8;
int b = hash & 0x0000FF;
return Color.fromRGBO(r, g, b, 0.5);
}
}

26
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart
View File

@ -1,4 +1,5 @@
import 'package:appflowy/startup/startup.dart';
import 'package:appflowy/util/color_generator/color_generator.dart';
import 'package:appflowy/workspace/application/menu/menu_user_bloc.dart';
import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
@ -45,8 +46,31 @@ class MenuUser extends StatelessWidget {
String iconUrl = context.read<MenuUserBloc>().state.userProfile.iconUrl;
if (iconUrl.isEmpty) {
iconUrl = defaultUserAvatar;
final String name = context.read<MenuUserBloc>().state.userProfile.name;
final Color color = ColorGenerator().generateColorFromString(name);
const initialsCount = 2;
// Taking the first letters of the name components and limiting to 2 elements
final nameInitials = name
.split(' ')
.where((element) => element.isNotEmpty)
.take(initialsCount)
.map((element) => element[0].toUpperCase())
.join('');
return Container(
width: 28,
height: 28,
alignment: Alignment.center,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
),
child: FlowyText.semibold(
nameInitials,
color: Colors.white,
fontSize: nameInitials.length == initialsCount ? 12 : 14,
),
);
}
return SizedBox(
width: 25,
height: 25,