Shorten overlay instead of toolbar

pull/1384/head
Kelrap 1 year ago
parent 219777f7d7
commit a7e6e7a4c9

@ -289,17 +289,20 @@ class MessageContent extends StatelessWidget {
// #Pangea // #Pangea
// return Linkify( // return Linkify(
final messageTextStyle = TextStyle( final messageTextStyle = TextStyle(
overflow: TextOverflow.ellipsis,
color: textColor, color: textColor,
fontSize: bigEmotes ? fontSize * 3 : fontSize, fontSize: bigEmotes ? fontSize * 3 : fontSize,
decoration: event.redacted ? TextDecoration.lineThrough : null, decoration: event.redacted ? TextDecoration.lineThrough : null,
height: 1.3, height: 1.3,
); );
if (immersionMode && pangeaMessageEvent != null) { if (immersionMode && pangeaMessageEvent != null) {
return PangeaRichText( return Flexible(
style: messageTextStyle, child: PangeaRichText(
pangeaMessageEvent: pangeaMessageEvent!, style: messageTextStyle,
immersionMode: immersionMode, pangeaMessageEvent: pangeaMessageEvent!,
toolbarController: toolbarController, immersionMode: immersionMode,
toolbarController: toolbarController,
),
); );
} else if (pangeaMessageEvent != null) { } else if (pangeaMessageEvent != null) {
toolbarController?.toolbar?.textSelection.setMessageText( toolbarController?.toolbar?.textSelection.setMessageText(

@ -63,6 +63,7 @@ class ToolbarDisplayController {
MessageMode? mode, MessageMode? mode,
}) { }) {
bool toolbarUp = true; bool toolbarUp = true;
bool messageTooLong = false;
if (highlighted) return; if (highlighted) return;
if (controller.selectMode) { if (controller.selectMode) {
controller.clearSelectedEvents(); controller.clearSelectedEvents();
@ -82,6 +83,10 @@ class ToolbarDisplayController {
messageWidth = transformTargetSize.width; messageWidth = transformTargetSize.width;
final Offset targetOffset = (targetRenderBox).localToGlobal(Offset.zero); final Offset targetOffset = (targetRenderBox).localToGlobal(Offset.zero);
// If the message is too long, will need to anchor by toolbar
messageTooLong =
transformTargetSize.height > MediaQuery.of(context).size.height - 320;
// If there is enough space above, procede as normal // If there is enough space above, procede as normal
// Else if there is enough space below, show toolbar underneath // Else if there is enough space below, show toolbar underneath
if (targetOffset.dy < 320) { if (targetOffset.dy < 320) {
@ -419,85 +424,87 @@ class MessageToolbarState extends State<MessageToolbar> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Flexible( return
child: Material( // Flexible(
type: MaterialType.transparency, // child:
child: Container( Material(
padding: const EdgeInsets.all(10), type: MaterialType.transparency,
decoration: BoxDecoration( child: Container(
color: Theme.of(context).cardColor, padding: const EdgeInsets.all(10),
border: Border.all( decoration: BoxDecoration(
width: 2, color: Theme.of(context).cardColor,
color: Theme.of(context).colorScheme.primary, border: Border.all(
), width: 2,
borderRadius: const BorderRadius.all( color: Theme.of(context).colorScheme.primary,
Radius.circular(25),
),
), ),
constraints: const BoxConstraints( borderRadius: const BorderRadius.all(
maxWidth: 300, Radius.circular(25),
minWidth: 300,
maxHeight: 300,
), ),
child: Column( ),
mainAxisSize: MainAxisSize.min, constraints: const BoxConstraints(
children: [ maxWidth: 300,
Flexible( minWidth: 300,
child: SingleChildScrollView( maxHeight: 300,
child: AnimatedSize( ),
duration: FluffyThemes.animationDuration, child: Column(
child: Column( mainAxisSize: MainAxisSize.min,
children: [ children: [
Padding( Flexible(
padding: const EdgeInsets.all(8.0), child: SingleChildScrollView(
child: toolbarContent ?? const SizedBox(), child: AnimatedSize(
), duration: FluffyThemes.animationDuration,
SizedBox(height: toolbarContent == null ? 0 : 20), child: Column(
], children: [
), Padding(
padding: const EdgeInsets.all(8.0),
child: toolbarContent ?? const SizedBox(),
),
SizedBox(height: toolbarContent == null ? 0 : 20),
],
), ),
), ),
), ),
Row( ),
mainAxisSize: MainAxisSize.min, Row(
children: MessageMode.values.map((mode) { mainAxisSize: MainAxisSize.min,
if ([ children: MessageMode.values.map((mode) {
MessageMode.definition, if ([
MessageMode.textToSpeech, MessageMode.definition,
MessageMode.translation, MessageMode.textToSpeech,
].contains(mode) && MessageMode.translation,
widget.pangeaMessageEvent.isAudioMessage) { ].contains(mode) &&
return const SizedBox.shrink(); widget.pangeaMessageEvent.isAudioMessage) {
} return const SizedBox.shrink();
if (mode == MessageMode.speechToText && }
!widget.pangeaMessageEvent.isAudioMessage) { if (mode == MessageMode.speechToText &&
return const SizedBox.shrink(); !widget.pangeaMessageEvent.isAudioMessage) {
} return const SizedBox.shrink();
return Tooltip( }
message: mode.tooltip(context), return Tooltip(
child: IconButton( message: mode.tooltip(context),
icon: Icon(mode.icon), child: IconButton(
color: mode.iconColor( icon: Icon(mode.icon),
widget.pangeaMessageEvent, color: mode.iconColor(
currentMode, widget.pangeaMessageEvent,
context, currentMode,
), context,
onPressed: () => updateMode(mode),
),
);
}).toList() +
[
Tooltip(
message: L10n.of(context)!.more,
child: IconButton(
icon: const Icon(Icons.add_reaction_outlined),
onPressed: showMore,
), ),
onPressed: () => updateMode(mode),
), ),
], );
), }).toList() +
], [
), Tooltip(
message: L10n.of(context)!.more,
child: IconButton(
icon: const Icon(Icons.add_reaction_outlined),
onPressed: showMore,
),
),
],
),
],
// ),
), ),
), ),
); );

@ -118,81 +118,85 @@ class OverlayMessage extends StatelessWidget {
ownMessage: ownMessage, ownMessage: ownMessage,
); );
return Material( return Flexible(
color: noBubble ? Colors.transparent : color, child: Material(
clipBehavior: Clip.antiAlias, color: noBubble ? Colors.transparent : color,
shape: RoundedRectangleBorder( clipBehavior: Clip.antiAlias,
borderRadius: borderRadius, shape: RoundedRectangleBorder(
), borderRadius: borderRadius,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
),
padding: noBubble || noPadding
? EdgeInsets.zero
: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
constraints: BoxConstraints(
maxWidth: width ?? FluffyThemes.columnWidth * 1.25,
), ),
child: Column( child: Container(
mainAxisSize: MainAxisSize.min, decoration: BoxDecoration(
crossAxisAlignment: CrossAxisAlignment.start, borderRadius: BorderRadius.circular(
children: [ AppConfig.borderRadius,
MessageContent(
event.getDisplayEvent(timeline),
textColor: textColor,
borderRadius: borderRadius,
selected: selected,
pangeaMessageEvent: pangeaMessageEvent,
immersionMode: immersionMode,
toolbarController: toolbarController,
isOverlay: true,
), ),
if (event.hasAggregatedEvents( ),
timeline, padding: noBubble || noPadding
RelationshipTypes.edit, ? EdgeInsets.zero
) || : const EdgeInsets.symmetric(
(pangeaMessageEvent.showUseType)) horizontal: 16,
Padding( vertical: 8,
padding: const EdgeInsets.only(
top: 4.0,
), ),
child: Row( constraints: BoxConstraints(
mainAxisSize: MainAxisSize.min, maxWidth: width ?? FluffyThemes.columnWidth * 1.25,
children: [ ),
if (pangeaMessageEvent.showUseType) ...[ child: Column(
pangeaMessageEvent.msgUseType.iconView( mainAxisSize: MainAxisSize.min,
context, crossAxisAlignment: CrossAxisAlignment.start,
textColor.withAlpha(164), children: [
), Flexible(
const SizedBox(width: 4), child: MessageContent(
], event.getDisplayEvent(timeline),
if (event.hasAggregatedEvents( textColor: textColor,
timeline, borderRadius: borderRadius,
RelationshipTypes.edit, selected: selected,
)) ...[ pangeaMessageEvent: pangeaMessageEvent,
Icon( immersionMode: immersionMode,
Icons.edit_outlined, toolbarController: toolbarController,
color: textColor.withAlpha(164), isOverlay: true,
size: 14, ),
), ),
Text( if (event.hasAggregatedEvents(
' - ${event.getDisplayEvent(timeline).originServerTs.localizedTimeShort(context)}', timeline,
style: TextStyle( RelationshipTypes.edit,
) ||
(pangeaMessageEvent.showUseType))
Padding(
padding: const EdgeInsets.only(
top: 4.0,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (pangeaMessageEvent.showUseType) ...[
pangeaMessageEvent.msgUseType.iconView(
context,
textColor.withAlpha(164),
),
const SizedBox(width: 4),
],
if (event.hasAggregatedEvents(
timeline,
RelationshipTypes.edit,
)) ...[
Icon(
Icons.edit_outlined,
color: textColor.withAlpha(164), color: textColor.withAlpha(164),
fontSize: 12, size: 14,
), ),
), Text(
' - ${event.getDisplayEvent(timeline).originServerTs.localizedTimeShort(context)}',
style: TextStyle(
color: textColor.withAlpha(164),
fontSize: 12,
),
),
],
], ],
], ),
), ),
), ],
], ),
), ),
), ),
); );

Loading…
Cancel
Save