mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-10 13:05:11 +00:00
design: Slightly adjust chat design
This commit is contained in:
krille-chan
parent
2e14e63172
commit
c4bc626b09
5 changed files with 81 additions and 83 deletions
|
|
@ -90,9 +90,6 @@ abstract class FluffyThemes {
|
|||
filled: true,
|
||||
),
|
||||
appBarTheme: AppBarTheme(
|
||||
surfaceTintColor:
|
||||
brightness == Brightness.light ? Colors.white : Colors.black,
|
||||
shadowColor: Colors.black.withAlpha(64),
|
||||
systemOverlayStyle: SystemUiOverlayStyle(
|
||||
statusBarColor: Colors.transparent,
|
||||
statusBarIconBrightness: brightness.reversed,
|
||||
|
|
|
|||
|
|
@ -168,7 +168,6 @@ class ChatView extends StatelessWidget {
|
|||
builder: (BuildContext context, snapshot) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
elevation: 3,
|
||||
actionsIconTheme: IconThemeData(
|
||||
color: controller.selectedEvents.isEmpty
|
||||
? null
|
||||
|
|
@ -215,15 +214,6 @@ class ChatView extends StatelessWidget {
|
|||
height: double.infinity,
|
||||
fit: BoxFit.cover,
|
||||
filterQuality: FilterQuality.medium,
|
||||
)
|
||||
else
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: FluffyThemes.backgroundGradient(
|
||||
context,
|
||||
64,
|
||||
),
|
||||
),
|
||||
),
|
||||
SafeArea(
|
||||
child: Column(
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ class Message extends StatelessWidget {
|
|||
nextEvent!.senderId == event.senderId &&
|
||||
!displayTime;
|
||||
final textColor = ownMessage
|
||||
? Theme.of(context).colorScheme.onPrimary
|
||||
? Theme.of(context).colorScheme.onPrimaryContainer
|
||||
: Theme.of(context).colorScheme.onBackground;
|
||||
final rowMainAxisAlignment =
|
||||
ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
|
||||
|
|
@ -116,7 +116,7 @@ class Message extends StatelessWidget {
|
|||
if (ownMessage) {
|
||||
color = displayEvent.status.isError
|
||||
? Colors.redAccent
|
||||
: Theme.of(context).colorScheme.primary;
|
||||
: Theme.of(context).colorScheme.primaryContainer;
|
||||
}
|
||||
|
||||
final rowChildren = <Widget>[
|
||||
|
|
@ -187,9 +187,15 @@ class Message extends StatelessWidget {
|
|||
padding: const EdgeInsets.only(left: 8),
|
||||
child: Material(
|
||||
color: noBubble ? Colors.transparent : color,
|
||||
elevation: event.type == EventTypes.Sticker ? 0 : 4,
|
||||
shadowColor: Colors.black.withAlpha(64),
|
||||
borderRadius: borderRadius,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: borderRadius,
|
||||
side: noBubble
|
||||
? BorderSide.none
|
||||
: BorderSide(
|
||||
color: Theme.of(context).dividerTheme.color ??
|
||||
Theme.of(context).dividerColor,
|
||||
),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onHover: (b) => useMouse = true,
|
||||
|
|
@ -205,7 +211,10 @@ class Message extends StatelessWidget {
|
|||
),
|
||||
padding: noBubble || noPadding
|
||||
? EdgeInsets.zero
|
||||
: EdgeInsets.all(16 * AppConfig.bubbleSizeFactor),
|
||||
: EdgeInsets.symmetric(
|
||||
horizontal: 16 * AppConfig.bubbleSizeFactor,
|
||||
vertical: 8 * AppConfig.bubbleSizeFactor,
|
||||
),
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: FluffyThemes.columnWidth * 1.5,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -43,64 +43,61 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
|
|||
controller.selectedRoomIds.length.toString(),
|
||||
key: const ValueKey(SelectMode.select),
|
||||
)
|
||||
: SizedBox(
|
||||
height: 44,
|
||||
child: TextField(
|
||||
controller: controller.searchController,
|
||||
textInputAction: TextInputAction.search,
|
||||
onChanged: controller.onSearchEnter,
|
||||
decoration: InputDecoration(
|
||||
border: UnderlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
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),
|
||||
),
|
||||
: TextField(
|
||||
controller: controller.searchController,
|
||||
textInputAction: TextInputAction.search,
|
||||
onChanged: controller.onSearchEnter,
|
||||
decoration: InputDecoration(
|
||||
border: UnderlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
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),
|
||||
),
|
||||
),
|
||||
),
|
||||
actions: selectMode == SelectMode.share
|
||||
|
|
|
|||
|
|
@ -146,17 +146,22 @@ class SettingsStyleView extends StatelessWidget {
|
|||
alignment: Alignment.centerLeft,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Material(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
elevation: 6,
|
||||
shadowColor:
|
||||
Theme.of(context).secondaryHeaderColor.withAlpha(100),
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
color: Theme.of(context).colorScheme.primaryContainer,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
side: BorderSide(
|
||||
color: Theme.of(context).dividerColor,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16 * AppConfig.bubbleSizeFactor),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 16 * AppConfig.bubbleSizeFactor,
|
||||
vertical: 8 * AppConfig.bubbleSizeFactor,
|
||||
),
|
||||
child: Text(
|
||||
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
color: Theme.of(context).colorScheme.onPrimaryContainer,
|
||||
fontSize:
|
||||
AppConfig.messageFontSize * AppConfig.fontSizeFactor,
|
||||
),
|
||||
|
|
|
|||
Loading…
Reference in a new issue