Matrix/fluffychat
Matrix/fluffychat
1
0
Fork 0
mirror of https://github.com/krille-chan/fluffychat synced 2024-09-17 09:35:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

design: Slightly adjust chat design

Browse source
This commit is contained in:
krille-chan 2023-07-22 11:11:35 +02:00
parent 2e14e63172
commit c4bc626b09
No known key found for this signature in database
5 changed files with 81 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
lib/config/themes.dart
View file

@ -90,9 +90,6 @@ abstract class FluffyThemes {
filled: true, filled: true,
), ),
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
surfaceTintColor:
brightness == Brightness.light ? Colors.white : Colors.black,
shadowColor: Colors.black.withAlpha(64),
systemOverlayStyle: SystemUiOverlayStyle( systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.transparent, statusBarColor: Colors.transparent,
statusBarIconBrightness: brightness.reversed, statusBarIconBrightness: brightness.reversed,

10
lib/pages/chat/chat_view.dart
View file

@ -168,7 +168,6 @@ class ChatView extends StatelessWidget {
builder: (BuildContext context, snapshot) { builder: (BuildContext context, snapshot) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
elevation: 3,
actionsIconTheme: IconThemeData( actionsIconTheme: IconThemeData(
color: controller.selectedEvents.isEmpty color: controller.selectedEvents.isEmpty
? null ? null
@ -215,15 +214,6 @@ class ChatView extends StatelessWidget {
height: double.infinity, height: double.infinity,
fit: BoxFit.cover, fit: BoxFit.cover,
filterQuality: FilterQuality.medium, filterQuality: FilterQuality.medium,
)
else
Container(
decoration: BoxDecoration(
gradient: FluffyThemes.backgroundGradient(
context,
64,
),
),
), ),
SafeArea( SafeArea(
child: Column( child: Column(

21
lib/pages/chat/events/message.dart
View file

@ -86,7 +86,7 @@ class Message extends StatelessWidget {
nextEvent!.senderId == event.senderId && nextEvent!.senderId == event.senderId &&
!displayTime; !displayTime;
final textColor = ownMessage final textColor = ownMessage
? Theme.of(context).colorScheme.onPrimary ? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.onBackground; : Theme.of(context).colorScheme.onBackground;
final rowMainAxisAlignment = final rowMainAxisAlignment =
ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start; ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
@ -116,7 +116,7 @@ class Message extends StatelessWidget {
if (ownMessage) { if (ownMessage) {
color = displayEvent.status.isError color = displayEvent.status.isError
? Colors.redAccent ? Colors.redAccent
: Theme.of(context).colorScheme.primary; : Theme.of(context).colorScheme.primaryContainer;
} }
final rowChildren = <Widget>[ final rowChildren = <Widget>[
@ -187,9 +187,15 @@ class Message extends StatelessWidget {
padding: const EdgeInsets.only(left: 8), padding: const EdgeInsets.only(left: 8),
child: Material( child: Material(
color: noBubble ? Colors.transparent : color, color: noBubble ? Colors.transparent : color,
elevation: event.type == EventTypes.Sticker ? 0 : 4, shape: RoundedRectangleBorder(
shadowColor: Colors.black.withAlpha(64), borderRadius: borderRadius,
borderRadius: borderRadius, side: noBubble
? BorderSide.none
: BorderSide(
color: Theme.of(context).dividerTheme.color ??
Theme.of(context).dividerColor,
),
),
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
child: InkWell( child: InkWell(
onHover: (b) => useMouse = true, onHover: (b) => useMouse = true,
@ -205,7 +211,10 @@ class Message extends StatelessWidget {
), ),
padding: noBubble || noPadding padding: noBubble || noPadding
? EdgeInsets.zero ? EdgeInsets.zero
: EdgeInsets.all(16 * AppConfig.bubbleSizeFactor), : EdgeInsets.symmetric(
horizontal: 16 * AppConfig.bubbleSizeFactor,
vertical: 8 * AppConfig.bubbleSizeFactor,
),
constraints: const BoxConstraints( constraints: const BoxConstraints(
maxWidth: FluffyThemes.columnWidth * 1.5, maxWidth: FluffyThemes.columnWidth * 1.5,
), ),

111
lib/pages/chat_list/chat_list_header.dart
View file

@ -43,64 +43,61 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
controller.selectedRoomIds.length.toString(), controller.selectedRoomIds.length.toString(),
key: const ValueKey(SelectMode.select), key: const ValueKey(SelectMode.select),
) )
: SizedBox( : TextField(
height: 44, controller: controller.searchController,
child: TextField( textInputAction: TextInputAction.search,
controller: controller.searchController, onChanged: controller.onSearchEnter,
textInputAction: TextInputAction.search, decoration: InputDecoration(
onChanged: controller.onSearchEnter, border: UnderlineInputBorder(
decoration: InputDecoration( borderSide: BorderSide.none,
border: UnderlineInputBorder( borderRadius:
borderSide: BorderSide.none, BorderRadius.circular(AppConfig.borderRadius),
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
),
hintText: L10n.of(context)!.search,
floatingLabelBehavior: FloatingLabelBehavior.never,
prefixIcon: controller.isSearchMode
? IconButton(
tooltip: L10n.of(context)!.cancel,
icon: const Icon(Icons.close_outlined),
onPressed: controller.cancelSearch,
color: Theme.of(context).colorScheme.onBackground,
)
: Icon(
Icons.search_outlined,
color: Theme.of(context).colorScheme.onBackground,
),
suffixIcon: controller.isSearchMode
? controller.isSearching
? const Padding(
padding: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 12,
),
child: SizedBox.square(
dimension: 24,
child: CircularProgressIndicator.adaptive(
strokeWidth: 2,
),
),
)
: TextButton(
onPressed: controller.setServer,
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 12),
),
child: Text(
controller.searchServer ??
Matrix.of(context)
.client
.homeserver!
.host,
maxLines: 2,
),
)
: SizedBox(
width: 0,
child: ClientChooserButton(controller),
),
), ),
hintText: L10n.of(context)!.search,
floatingLabelBehavior: FloatingLabelBehavior.never,
prefixIcon: controller.isSearchMode
? IconButton(
tooltip: L10n.of(context)!.cancel,
icon: const Icon(Icons.close_outlined),
onPressed: controller.cancelSearch,
color: Theme.of(context).colorScheme.onBackground,
)
: Icon(
Icons.search_outlined,
color: Theme.of(context).colorScheme.onBackground,
),
suffixIcon: controller.isSearchMode
? controller.isSearching
? const Padding(
padding: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 12,
),
child: SizedBox.square(
dimension: 24,
child: CircularProgressIndicator.adaptive(
strokeWidth: 2,
),
),
)
: TextButton(
onPressed: controller.setServer,
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 12),
),
child: Text(
controller.searchServer ??
Matrix.of(context)
.client
.homeserver!
.host,
maxLines: 2,
),
)
: SizedBox(
width: 0,
child: ClientChooserButton(controller),
),
), ),
), ),
actions: selectMode == SelectMode.share actions: selectMode == SelectMode.share

19
lib/pages/settings_style/settings_style_view.dart
View file

@ -146,17 +146,22 @@ class SettingsStyleView extends StatelessWidget {
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 12), padding: const EdgeInsets.symmetric(horizontal: 12),
child: Material( child: Material(
color: Theme.of(context).colorScheme.primary, color: Theme.of(context).colorScheme.primaryContainer,
elevation: 6, shape: RoundedRectangleBorder(
shadowColor: borderRadius: BorderRadius.circular(AppConfig.borderRadius),
Theme.of(context).secondaryHeaderColor.withAlpha(100), side: BorderSide(
borderRadius: BorderRadius.circular(AppConfig.borderRadius), color: Theme.of(context).dividerColor,
),
),
child: Padding( child: Padding(
padding: EdgeInsets.all(16 * AppConfig.bubbleSizeFactor), padding: EdgeInsets.symmetric(
horizontal: 16 * AppConfig.bubbleSizeFactor,
vertical: 8 * AppConfig.bubbleSizeFactor,
),
child: Text( child: Text(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor', 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
style: TextStyle( style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary, color: Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: fontSize:
AppConfig.messageFontSize * AppConfig.fontSizeFactor, AppConfig.messageFontSize * AppConfig.fontSizeFactor,
), ),