From d7b42aabf680325b5e56f46a5ca16a64442a3781 Mon Sep 17 00:00:00 2001 From: Airyz <36567925+Airyzz@users.noreply.github.com> Date: Sat, 27 Jul 2024 15:59:17 +0930 Subject: [PATCH] small improvement ui of subspaces --- commet/lib/ui/atoms/room_text_button.dart | 1 + commet/lib/ui/atoms/space_list.dart | 17 +++-- tiamat/lib/atoms/text.dart | 75 +++++++++++++++++------ tiamat/lib/atoms/text_button.dart | 32 ++++++---- tiamat/lib/config/style/theme_base.dart | 2 +- 5 files changed, 86 insertions(+), 41 deletions(-) diff --git a/commet/lib/ui/atoms/room_text_button.dart b/commet/lib/ui/atoms/room_text_button.dart index b9cd6353..d5486975 100644 --- a/commet/lib/ui/atoms/room_text_button.dart +++ b/commet/lib/ui/atoms/room_text_button.dart @@ -60,6 +60,7 @@ class _RoomTextButtonState extends State { icon: icon, iconColor: color, textColor: color, + softwrap: false, onTap: () => widget.onTap?.call(widget.room), footer: widget.room.displayHighlightedNotificationCount > 0 ? NotificationBadge( diff --git a/commet/lib/ui/atoms/space_list.dart b/commet/lib/ui/atoms/space_list.dart index e3632291..1019e9c6 100644 --- a/commet/lib/ui/atoms/space_list.dart +++ b/commet/lib/ui/atoms/space_list.dart @@ -97,6 +97,7 @@ class _SpaceListState extends State { itemBuilder: (context, data) { return tiamat.TextButtonExpander(data.displayName, initiallyExpanded: true, + childrenPadding: const EdgeInsets.fromLTRB(2, 0, 0, 0), iconColor: Theme.of(context).colorScheme.secondary, textColor: Theme.of(context).colorScheme.secondary, children: [ @@ -118,16 +119,12 @@ class _SpaceListState extends State { Widget roomsList() { if (widget.isTopLevel) { - return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: tiamat.Text( - labelRoomsList, - color: Theme.of(context).colorScheme.secondary, - ), - ), - buildRoomsList() - ]); + return tiamat.TextButtonExpander(labelRoomsList, + childrenPadding: const EdgeInsets.fromLTRB(2, 0, 0, 0), + initiallyExpanded: true, + iconColor: Theme.of(context).colorScheme.secondary, + textColor: Theme.of(context).colorScheme.secondary, + children: [buildRoomsList()]); } else { return buildRoomsList(); } diff --git a/tiamat/lib/atoms/text.dart b/tiamat/lib/atoms/text.dart index ede29488..4364b437 100644 --- a/tiamat/lib/atoms/text.dart +++ b/tiamat/lib/atoms/text.dart @@ -114,6 +114,7 @@ class Text extends StatelessWidget { this.type = TextType.label, this.overflow, this.color, + this.softwrap, this.autoAdjustBrightness, this.maxLines}); final String text; @@ -122,56 +123,93 @@ class Text extends StatelessWidget { final TextOverflow? overflow; final int? maxLines; final bool? autoAdjustBrightness; + final bool? softwrap; const Text.label( this.text, { Key? key, this.overflow, this.maxLines, + this.softwrap, }) : type = TextType.label, color = null, autoAdjustBrightness = false, super(key: key); - const Text.labelEmphasised(this.text, - {Key? key, this.overflow, this.color, this.maxLines}) - : type = TextType.labelEmphasised, + const Text.labelEmphasised( + this.text, { + Key? key, + this.overflow, + this.color, + this.maxLines, + this.softwrap, + }) : type = TextType.labelEmphasised, autoAdjustBrightness = false, super(key: key); - const Text.error(this.text, {Key? key, this.overflow, this.maxLines}) - : type = TextType.error, + const Text.error( + this.text, { + Key? key, + this.overflow, + this.maxLines, + this.softwrap, + }) : type = TextType.error, color = null, autoAdjustBrightness = false, super(key: key); - const Text.tiny(this.text, - {Key? key, this.overflow, this.maxLines, this.color}) - : type = TextType.tiny, + const Text.tiny( + this.text, { + Key? key, + this.overflow, + this.maxLines, + this.color, + this.softwrap, + }) : type = TextType.tiny, autoAdjustBrightness = false, super(key: key); - const Text.body(this.text, {Key? key, this.overflow, this.maxLines}) - : type = TextType.body, + const Text.body( + this.text, { + Key? key, + this.overflow, + this.maxLines, + this.softwrap, + }) : type = TextType.body, color = null, autoAdjustBrightness = false, super(key: key); - const Text.largeTitle(this.text, {Key? key, this.overflow, this.maxLines}) - : type = TextType.largeTitle, + const Text.largeTitle( + this.text, { + Key? key, + this.overflow, + this.maxLines, + this.softwrap, + }) : type = TextType.largeTitle, color = null, autoAdjustBrightness = false, super(key: key); - const Text.name(this.text, - {Key? key, this.color, this.overflow, this.maxLines}) - : type = TextType.name, + const Text.name( + this.text, { + Key? key, + this.color, + this.overflow, + this.maxLines, + this.softwrap, + }) : type = TextType.name, autoAdjustBrightness = true, super(key: key); - const Text.labelLow(this.text, - {Key? key, this.color, this.overflow, this.maxLines}) - : type = TextType.labelLow, + const Text.labelLow( + this.text, { + Key? key, + this.color, + this.overflow, + this.maxLines, + this.softwrap, + }) : type = TextType.labelLow, autoAdjustBrightness = false, super(key: key); @@ -246,6 +284,7 @@ class Text extends StatelessWidget { return material.Text( text, style: style, + softWrap: softwrap, overflow: overflow, maxLines: maxLines, ); diff --git a/tiamat/lib/atoms/text_button.dart b/tiamat/lib/atoms/text_button.dart index 51a528ed..4170af3a 100644 --- a/tiamat/lib/atoms/text_button.dart +++ b/tiamat/lib/atoms/text_button.dart @@ -165,6 +165,7 @@ class TextButton extends StatelessWidget { this.avatarRadius = 12, this.avatarPlaceholderColor, this.avatarPlaceholderText, + this.softwrap, this.footer}); final String text; @@ -179,6 +180,7 @@ class TextButton extends StatelessWidget { final Widget? footer; final Color? textColor; final Color? iconColor; + final bool? softwrap; bool get useAvatar => avatar != null || avatarPlaceholderText != null; @@ -193,7 +195,8 @@ class TextButton extends StatelessWidget { ), child: material .Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Row( + Flexible( + child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -226,19 +229,24 @@ class TextButton extends StatelessWidget { ), ), ), - Padding( - padding: const EdgeInsets.fromLTRB(8, 0, 0, 0), - child: Align( - alignment: Alignment.centerLeft, - child: tiamat.Text.labelEmphasised( - text, - color: highlighted - ? Theme.of(context).colorScheme.onSecondaryContainer - : textColor, - )), + Flexible( + child: Padding( + padding: const EdgeInsets.fromLTRB(8, 0, 0, 0), + child: Align( + alignment: Alignment.centerLeft, + child: tiamat.Text.labelEmphasised( + text, + maxLines: 1, + softwrap: softwrap, + overflow: TextOverflow.fade, + color: highlighted + ? Theme.of(context).colorScheme.onSecondaryContainer + : textColor, + )), + ), ), ], - ), + )), if (footer != null) footer!, ]), onPressed: () => onTap?.call()); diff --git a/tiamat/lib/config/style/theme_base.dart b/tiamat/lib/config/style/theme_base.dart index 5aae42f2..ee91222f 100644 --- a/tiamat/lib/config/style/theme_base.dart +++ b/tiamat/lib/config/style/theme_base.dart @@ -22,7 +22,7 @@ class ThemeBase { RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))), listTileTheme: ListTileThemeData( dense: true, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), + contentPadding: EdgeInsets.fromLTRB(8, 2, 8, 0), ), canvasColor: scheme.surface, iconTheme: IconThemeData(color: scheme.secondary),