From 199ee081a0fc49952382628701f9ecc191d79a4b Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Wed, 22 Nov 2023 15:16:34 -0300 Subject: [PATCH 1/5] fix: Add header bubble to interactive JSON button --- ...eractive_button_message_bubble.widget.dart | 94 ++++++++++++++++--- ...nteractive_list_message_bubble.widget.dart | 23 +++-- .../sample_message_bubble.showcase.dart | 53 +++++++++-- 3 files changed, 139 insertions(+), 31 deletions(-) diff --git a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart index 4efc97cd..3ad73629 100644 --- a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart @@ -6,12 +6,15 @@ import '../../enums/ds_interactive_message_header_type.enum.dart'; import '../../models/ds_message_bubble_avatar_config.model.dart'; import '../../models/ds_message_bubble_style.model.dart'; import '../../models/interactive_message/ds_interactive_message.model.dart'; +import '../../themes/colors/ds_colors.theme.dart'; import '../../utils/ds_utils.util.dart'; import '../buttons/ds_menu_item.widget.dart'; +import '../texts/ds_body_text.widget.dart'; +import '../texts/ds_caption_text.widget.dart'; +import '../texts/ds_headline_small_text.widget.dart'; import 'ds_file_message_bubble.widget.dart'; import 'ds_image_message_bubble.widget.dart'; import 'ds_message_bubble.widget.dart'; -import 'ds_text_message_bubble.widget.dart'; import 'ds_unsupported_content_message_bubble.widget.dart'; import 'video/ds_video_message_bubble.widget.dart'; @@ -25,11 +28,13 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { late final bool isDefaultBubbleColors; late final bool isLightBubbleBackground; + final bool hasButtons; final bool hasHeaderText; + final bool hasBodyText; + final bool hasFooterText; final bool hasImageLink; final bool hasVideoLink; final bool hasDocumentLink; - final bool hasButtons; DSInteractiveButtonMessageBubble({ super.key, @@ -39,11 +44,13 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { this.avatarConfig = const DSMessageBubbleAvatarConfig(), DSMessageBubbleStyle? style, }) : style = style ?? DSMessageBubbleStyle(), + hasButtons = content.action?.buttons?.isNotEmpty ?? false, hasHeaderText = content.header?.text?.isNotEmpty ?? false, + hasBodyText = content.body?.text?.isNotEmpty ?? false, + hasFooterText = content.footer?.text?.isNotEmpty ?? false, hasImageLink = content.header?.image?.link?.isNotEmpty ?? false, hasVideoLink = content.header?.video?.link?.isNotEmpty ?? false, - hasDocumentLink = content.header?.document?.link?.isNotEmpty ?? false, - hasButtons = content.action?.buttons?.isNotEmpty ?? false { + hasDocumentLink = content.header?.document?.link?.isNotEmpty ?? false { isDefaultBubbleColors = this.style.isDefaultBubbleBackground(align); isLightBubbleBackground = this.style.isLightBubbleBackground(align); } @@ -60,6 +67,19 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { : DSBorderRadius.bottomLeft, ]; + List get _bodyBorderRadius => [ + ...(borderRadius.contains(DSBorderRadius.all) + ? [ + align == DSAlign.left + ? DSBorderRadius.topRight + : DSBorderRadius.topLeft, + ] + : borderRadius), + align == DSAlign.left + ? DSBorderRadius.bottomRight + : DSBorderRadius.bottomLeft, + ]; + List get _buttonsBorderRadius => [ ...(borderRadius.contains(DSBorderRadius.all) ? [ @@ -75,28 +95,42 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { @override Widget build(BuildContext context) => Column( children: [ - _buildHeaderBubble(), + if (hasHeaderText) ...[ + _buildHeaderBubble(), + const SizedBox( + height: 3.0, + ), + ], + if (hasBodyText || hasFooterText) _buildBodyBubble(), const SizedBox( height: 3.0, ), - _buildButtonsBubble(), + if (hasButtons) _buildButtonsBubble(), ], ); Widget _buildHeaderBubble() => switch (content.header?.type) { - DSInteractiveMessageHeaderType.text => _buildText(), + DSInteractiveMessageHeaderType.text => _buildHeaderText(), DSInteractiveMessageHeaderType.image => _buildImage(), DSInteractiveMessageHeaderType.video => _buildVideo(), DSInteractiveMessageHeaderType.document => _buildDocument(), _ => _buildUnsupportedContent(), }; - Widget _buildText() => hasHeaderText - ? DSTextMessageBubble( - text: content.header!.text!, + Widget _buildHeaderText() => hasHeaderText + ? DSMessageBubble( align: align, - borderRadius: _headerBorderRadius, + borderRadius: hasBodyText || hasFooterText || hasButtons + ? _headerBorderRadius + : borderRadius, style: style, + child: DSHeadlineSmallText( + content.header!.text!, + overflow: TextOverflow.visible, + color: isLightBubbleBackground + ? DSColors.neutralDarkCity + : DSColors.neutralLightSnow, + ), ) : _buildUnsupportedContent(); @@ -147,9 +181,45 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { style: style, ); + Widget _buildBodyBubble() => DSMessageBubble( + align: align, + borderRadius: hasHeaderText && hasButtons + ? _bodyBorderRadius + : hasHeaderText + ? _buttonsBorderRadius + : hasButtons + ? _headerBorderRadius + : borderRadius, + style: style, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (hasBodyText) + DSBodyText( + content.body!.text!, + overflow: TextOverflow.visible, + color: isLightBubbleBackground + ? DSColors.neutralDarkCity + : DSColors.neutralLightSnow, + ), + if (hasFooterText) + DSCaptionText( + content.footer!.text!, + fontStyle: FontStyle.italic, + overflow: TextOverflow.visible, + color: isLightBubbleBackground + ? DSColors.neutralDarkCity + : DSColors.neutralLightSnow, + ), + ], + ), + ); + Widget _buildButtonsBubble() => DSMessageBubble( align: align, - borderRadius: _buttonsBorderRadius, + borderRadius: hasHeaderText || hasBodyText || hasFooterText + ? _buttonsBorderRadius + : borderRadius, style: style, child: Column( crossAxisAlignment: CrossAxisAlignment.start, diff --git a/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart b/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart index 92831a7f..40cb7931 100644 --- a/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart @@ -69,17 +69,18 @@ class DSInteractiveListMessageBubble extends StatelessWidget { @override Widget build(BuildContext context) => Column( children: [ - _buildHeaderBubble(), + if (hasBodyText || hasFooterText || hasButtonText) + _buildHeaderBubble(), const SizedBox( height: 3.0, ), - _buildListBubble(), + if (hasSections) _buildListBubble(), ], ); Widget _buildHeaderBubble() => DSMessageBubble( align: align, - borderRadius: _headerBorderRadius, + borderRadius: hasSections ? _headerBorderRadius : borderRadius, style: style, child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -92,7 +93,9 @@ class DSInteractiveListMessageBubble extends StatelessWidget { Widget _buildListBubble() => DSMessageBubble( align: align, - borderRadius: _listBorderRadius, + borderRadius: hasBodyText || hasFooterText || hasButtonText + ? _listBorderRadius + : borderRadius, style: style, child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -110,11 +113,13 @@ class DSInteractiveListMessageBubble extends StatelessWidget { padding: const EdgeInsets.only( bottom: bottomPadding, ), - child: DSBodyText(content.body!.text, - overflow: TextOverflow.visible, - color: isLightBubbleBackground - ? DSColors.neutralDarkCity - : DSColors.neutralLightSnow), + child: DSBodyText( + content.body!.text, + overflow: TextOverflow.visible, + color: isLightBubbleBackground + ? DSColors.neutralDarkCity + : DSColors.neutralLightSnow, + ), ), ); } diff --git a/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart b/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart index c19006f9..612009a2 100644 --- a/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart +++ b/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart @@ -54,7 +54,7 @@ class SampleMessageBubbleShowcase extends StatelessWidget { () => Column( children: [ DSApplicationJsonMessageBubble( - align: DSAlign.left, + align: DSAlign.right, borderRadius: const [DSBorderRadius.all], content: const { "recipient_type": "individual", @@ -62,25 +62,58 @@ class SampleMessageBubbleShowcase extends StatelessWidget { "interactive": { "type": "button", "header": { - "type": "video", - "text": "video blip", - "video": { - "link": - "http://techslides.com/demos/sample-videos/small.mp4" - } + "type": "text", + "text": "Cabeçalho", }, - "body": {"text": "Button Body Message"}, + "body": {"text": "Você já é nosso cliente?"}, "action": { "buttons": [ { "type": "reply", - "reply": {"id": "unique-postback-id", "title": "First"} + "reply": {"id": "1", "title": "Sim"} }, { "type": "reply", - "reply": {"id": "unique-id", "title": "Second"} + "reply": {"id": "2", "title": "Não L'"} } ] + }, + "footer": {"text": "Selecione uma opção abaixo"} + } + }, + ), + DSApplicationJsonMessageBubble( + align: DSAlign.left, + borderRadius: const [DSBorderRadius.all], + content: const { + "recipient_type": "individual", + "type": "interactive", + "interactive": { + "type": "list", + "header": { + "text": "Cabeçalho", + }, + "body": { + "text": + "Tenho mais algumas perguntas, mas prometo que vamos ser agéis. Gostaríamos de saber: Em qual segmento sua empresa atua? Essa informação nos ajudará a direcioná-lo para o atendimento ideal." + }, + "action": { + "button": "Selecione uma opção", + "sections": [ + { + "rows": [ + {"id": "1", "title": "Esq. de Alumínio"}, + {"id": "2", "title": "Vidraceiro"}, + {"id": "3", "title": "Distribuidor"}, + {"id": "4", "title": "Sistemista"}, + {"id": "5", "title": "Soluções"}, + {"id": "6", "title": "Outros"} + ] + } + ] + }, + "footer": { + "text": "Clique no botão abaixo para selecionar uma opção" } } }, From 8967b190c128b0b2a1b2dcae49a9336e828d3997 Mon Sep 17 00:00:00 2001 From: Andre Rossi Date: Wed, 22 Nov 2023 17:28:38 -0300 Subject: [PATCH 2/5] fix: fix to show the media --- .../chat/ds_interactive_button_message_bubble.widget.dart | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart index 3ad73629..c777d7a7 100644 --- a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart @@ -95,7 +95,10 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { @override Widget build(BuildContext context) => Column( children: [ - if (hasHeaderText) ...[ + if (hasHeaderText || + hasVideoLink || + hasImageLink || + hasDocumentLink) ...[ _buildHeaderBubble(), const SizedBox( height: 3.0, From d8a6bdc90bd63e9ae88bbbabbe71c2b4f547bc29 Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Wed, 22 Nov 2023 19:09:39 -0300 Subject: [PATCH 3/5] fix: Improvements for Interactive Lists and Buttons - Refactor DSMenuItem - Fix border radius from interactive list - Fix border radius from interactive button --- .../widgets/buttons/ds_menu_item.widget.dart | 63 +++++----- ...pplication_json_message_bubble.widget.dart | 2 +- .../chat/ds_document_select.widget.dart | 2 +- ...eractive_button_message_bubble.widget.dart | 109 ++++++++++-------- ...nteractive_list_message_bubble.widget.dart | 35 +++--- .../widgets/chat/ds_select_menu.widget.dart | 2 +- sample/lib/main.dart | 69 +++++------ .../sample_message_bubble.showcase.dart | 38 +++++- 8 files changed, 182 insertions(+), 138 deletions(-) diff --git a/lib/src/widgets/buttons/ds_menu_item.widget.dart b/lib/src/widgets/buttons/ds_menu_item.widget.dart index d73f26d5..7308eed6 100644 --- a/lib/src/widgets/buttons/ds_menu_item.widget.dart +++ b/lib/src/widgets/buttons/ds_menu_item.widget.dart @@ -1,17 +1,13 @@ import 'package:flutter/material.dart'; -import '../../enums/ds_align.enum.dart'; -import '../../models/ds_message_bubble_style.model.dart'; -import '../../themes/colors/ds_colors.theme.dart'; -import '../../themes/texts/utils/ds_font_weights.theme.dart'; -import '../texts/ds_body_text.widget.dart'; +import '../../../blip_ds.dart'; class DSMenuItem extends StatelessWidget { DSMenuItem({ Key? key, required this.text, required this.align, - this.showBorder = false, + this.showDivider = false, this.onPressed, this.fontWeight = DSFontWeights.bold, DSMessageBubbleStyle? style, @@ -23,7 +19,7 @@ class DSMenuItem extends StatelessWidget { final String text; final DSAlign align; - final bool showBorder; + final bool showDivider; final void Function()? onPressed; final DSMessageBubbleStyle style; final FontWeight fontWeight; @@ -32,36 +28,18 @@ class DSMenuItem extends StatelessWidget { late final bool isLightBubbleBackground; @override - Widget build(BuildContext context) { - return InkWell( - onTap: onPressed, - child: Container( - height: 57.0, - padding: const EdgeInsets.symmetric(horizontal: 16), - decoration: BoxDecoration( - border: showBorder - ? Border( - bottom: BorderSide( - color: isLightBubbleBackground - ? isDefaultBubbleColors - ? DSColors.neutralMediumWave - : DSColors.neutralDarkCity - : isDefaultBubbleColors - ? DSColors.neutralDarkRooftop - : DSColors.neutralLightSnow, - ), - ) - : null, - ), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.center, + Widget build(BuildContext context) => InkWell( + onTap: onPressed, + child: Column( children: [ - Flexible( + Container( + height: 57.0, + alignment: Alignment.center, + padding: const EdgeInsets.symmetric(horizontal: 16), child: DSBodyText( text, fontWeight: fontWeight, - textAlign: TextAlign.center, + maxLines: 2, color: isLightBubbleBackground ? isDefaultBubbleColors ? DSColors.primaryNight @@ -71,9 +49,22 @@ class DSMenuItem extends StatelessWidget { : DSColors.neutralLightSnow, ), ), + if (showDivider) + Padding( + padding: const EdgeInsets.symmetric( + vertical: 1.0, + ), + child: DSDivider( + color: isLightBubbleBackground + ? isDefaultBubbleColors + ? DSColors.neutralMediumWave + : DSColors.neutralDarkCity + : isDefaultBubbleColors + ? DSColors.neutralDarkRooftop + : DSColors.neutralLightSnow, + ), + ) ], ), - ), - ); - } + ); } diff --git a/lib/src/widgets/chat/ds_application_json_message_bubble.widget.dart b/lib/src/widgets/chat/ds_application_json_message_bubble.widget.dart index 7081c893..247f5325 100644 --- a/lib/src/widgets/chat/ds_application_json_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_application_json_message_bubble.widget.dart @@ -16,8 +16,8 @@ class DSApplicationJsonMessageBubble extends StatelessWidget { DSApplicationJsonMessageBubble({ super.key, required this.align, - required this.borderRadius, required this.content, + this.borderRadius = const [DSBorderRadius.all], this.status, this.avatarConfig = const DSMessageBubbleAvatarConfig(), DSMessageBubbleStyle? style, diff --git a/lib/src/widgets/chat/ds_document_select.widget.dart b/lib/src/widgets/chat/ds_document_select.widget.dart index d49e2e3c..1b26c917 100644 --- a/lib/src/widgets/chat/ds_document_select.widget.dart +++ b/lib/src/widgets/chat/ds_document_select.widget.dart @@ -57,7 +57,7 @@ class DSDocumentSelect extends StatelessWidget { ? option.label.value : option.label.value['text'], align: align, - showBorder: count != options.length, + showDivider: count != options.length, onPressed: () { if (option.label.type == DSMessageContentType.webLink) { if (onOpenLink != null) { diff --git a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart index 3ad73629..bb34b1c2 100644 --- a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart @@ -12,6 +12,7 @@ import '../buttons/ds_menu_item.widget.dart'; import '../texts/ds_body_text.widget.dart'; import '../texts/ds_caption_text.widget.dart'; import '../texts/ds_headline_small_text.widget.dart'; +import '../utils/ds_divider.widget.dart'; import 'ds_file_message_bubble.widget.dart'; import 'ds_image_message_bubble.widget.dart'; import 'ds_message_bubble.widget.dart'; @@ -44,52 +45,49 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { this.avatarConfig = const DSMessageBubbleAvatarConfig(), DSMessageBubbleStyle? style, }) : style = style ?? DSMessageBubbleStyle(), - hasButtons = content.action?.buttons?.isNotEmpty ?? false, hasHeaderText = content.header?.text?.isNotEmpty ?? false, - hasBodyText = content.body?.text?.isNotEmpty ?? false, - hasFooterText = content.footer?.text?.isNotEmpty ?? false, hasImageLink = content.header?.image?.link?.isNotEmpty ?? false, hasVideoLink = content.header?.video?.link?.isNotEmpty ?? false, - hasDocumentLink = content.header?.document?.link?.isNotEmpty ?? false { + hasDocumentLink = content.header?.document?.link?.isNotEmpty ?? false, + hasButtons = content.action?.buttons?.isNotEmpty ?? false, + hasBodyText = content.body?.text?.isNotEmpty ?? false, + hasFooterText = content.footer?.text?.isNotEmpty ?? false { isDefaultBubbleColors = this.style.isDefaultBubbleBackground(align); isLightBubbleBackground = this.style.isLightBubbleBackground(align); } - List get _headerBorderRadius => [ - ...(borderRadius.contains(DSBorderRadius.all) - ? [ - DSBorderRadius.topLeft, - DSBorderRadius.topRight, - ] - : borderRadius), + List get _startBorderRadius => [ + DSBorderRadius.topLeft, align == DSAlign.left ? DSBorderRadius.bottomRight : DSBorderRadius.bottomLeft, + if (borderRadius.any((border) => [ + DSBorderRadius.all, + DSBorderRadius.topRight, + ].contains(border))) + DSBorderRadius.topRight, ]; - List get _bodyBorderRadius => [ - ...(borderRadius.contains(DSBorderRadius.all) - ? [ - align == DSAlign.left - ? DSBorderRadius.topRight - : DSBorderRadius.topLeft, - ] - : borderRadius), - align == DSAlign.left - ? DSBorderRadius.bottomRight - : DSBorderRadius.bottomLeft, - ]; + List get _midBorderRadius => align == DSAlign.left + ? [ + DSBorderRadius.topRight, + DSBorderRadius.bottomRight, + ] + : [ + DSBorderRadius.topLeft, + DSBorderRadius.bottomLeft, + ]; - List get _buttonsBorderRadius => [ - ...(borderRadius.contains(DSBorderRadius.all) - ? [ - DSBorderRadius.bottomLeft, - DSBorderRadius.bottomRight, - ] - : borderRadius), + List get _endBorderRadius => [ + DSBorderRadius.bottomLeft, align == DSAlign.left ? DSBorderRadius.topRight : DSBorderRadius.topLeft, + if (borderRadius.any((border) => [ + DSBorderRadius.all, + DSBorderRadius.bottomRight, + ].contains(border))) + DSBorderRadius.bottomRight, ]; @override @@ -121,7 +119,7 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { ? DSMessageBubble( align: align, borderRadius: hasBodyText || hasFooterText || hasButtons - ? _headerBorderRadius + ? _startBorderRadius : borderRadius, style: style, child: DSHeadlineSmallText( @@ -143,7 +141,7 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { '', text: content.header?.text, align: align, - borderRadius: _headerBorderRadius, + borderRadius: _startBorderRadius, style: style, ) : _buildUnsupportedContent(); @@ -158,7 +156,7 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { mediaSize: 0, text: content.header?.text, align: align, - borderRadius: _headerBorderRadius, + borderRadius: _startBorderRadius, style: style, ) : _buildUnsupportedContent(); @@ -171,24 +169,24 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { size: 0, style: style, align: align, - borderRadius: _headerBorderRadius, + borderRadius: _startBorderRadius, ) : _buildUnsupportedContent(); Widget _buildUnsupportedContent() => DSUnsupportedContentMessageBubble( align: align, - borderRadius: _headerBorderRadius, + borderRadius: _startBorderRadius, style: style, ); Widget _buildBodyBubble() => DSMessageBubble( align: align, borderRadius: hasHeaderText && hasButtons - ? _bodyBorderRadius + ? _midBorderRadius : hasHeaderText - ? _buttonsBorderRadius + ? _endBorderRadius : hasButtons - ? _headerBorderRadius + ? _startBorderRadius : borderRadius, style: style, child: Column( @@ -218,11 +216,11 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { Widget _buildButtonsBubble() => DSMessageBubble( align: align, borderRadius: hasHeaderText || hasBodyText || hasFooterText - ? _buttonsBorderRadius + ? _endBorderRadius : borderRadius, style: style, + shouldUseDefaultSize: true, child: Column( - crossAxisAlignment: CrossAxisAlignment.start, children: _buildButtons(), ), ); @@ -237,13 +235,30 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { final hasTitle = button.title?.isNotEmpty ?? false; if (hasTitle) { - widgets.add( - DSMenuItem( - text: button.title!, - align: align, - style: style, - showBorder: count != content.action!.buttons!.length, - ), + widgets.addAll( + [ + DSMenuItem( + text: button.title!, + align: align, + style: style, + showDivider: false, + ), + if (count != content.action!.buttons!.length) + Padding( + padding: const EdgeInsets.symmetric( + vertical: 1.0, + ), + child: DSDivider( + color: isLightBubbleBackground + ? isDefaultBubbleColors + ? DSColors.neutralMediumWave + : DSColors.neutralDarkCity + : isDefaultBubbleColors + ? DSColors.neutralDarkRooftop + : DSColors.neutralLightSnow, + ), + ), + ], ); } diff --git a/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart b/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart index 40cb7931..cc6c93f1 100644 --- a/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart @@ -41,29 +41,28 @@ class DSInteractiveListMessageBubble extends StatelessWidget { isDefaultBubbleColors = this.style.isDefaultBubbleBackground(align); isLightBubbleBackground = this.style.isLightBubbleBackground(align); } - - List get _headerBorderRadius => [ - ...(borderRadius.contains(DSBorderRadius.all) - ? [ - DSBorderRadius.topLeft, - DSBorderRadius.topRight, - ] - : borderRadius), + List get _startBorderRadius => [ + DSBorderRadius.topLeft, align == DSAlign.left ? DSBorderRadius.bottomRight : DSBorderRadius.bottomLeft, + if (borderRadius.any((border) => [ + DSBorderRadius.all, + DSBorderRadius.topRight, + ].contains(border))) + DSBorderRadius.topRight, ]; - List get _listBorderRadius => [ - ...(borderRadius.contains(DSBorderRadius.all) - ? [ - DSBorderRadius.bottomLeft, - DSBorderRadius.bottomRight, - ] - : borderRadius), + List get _endBorderRadius => [ + DSBorderRadius.bottomLeft, align == DSAlign.left ? DSBorderRadius.topRight : DSBorderRadius.topLeft, + if (borderRadius.any((border) => [ + DSBorderRadius.all, + DSBorderRadius.bottomRight, + ].contains(border))) + DSBorderRadius.bottomRight, ]; @override @@ -80,7 +79,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { Widget _buildHeaderBubble() => DSMessageBubble( align: align, - borderRadius: hasSections ? _headerBorderRadius : borderRadius, + borderRadius: hasSections ? _startBorderRadius : borderRadius, style: style, child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -94,7 +93,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { Widget _buildListBubble() => DSMessageBubble( align: align, borderRadius: hasBodyText || hasFooterText || hasButtonText - ? _listBorderRadius + ? _endBorderRadius : borderRadius, style: style, child: Column( @@ -228,7 +227,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { text: row.title!, align: align, style: style, - showBorder: count != section.rows!.length, + showDivider: count != section.rows!.length, ), ); } diff --git a/lib/src/widgets/chat/ds_select_menu.widget.dart b/lib/src/widgets/chat/ds_select_menu.widget.dart index 70889ccc..c0986ce1 100644 --- a/lib/src/widgets/chat/ds_select_menu.widget.dart +++ b/lib/src/widgets/chat/ds_select_menu.widget.dart @@ -45,7 +45,7 @@ class DSSelectMenu extends StatelessWidget { DSMenuItem( text: option.text, align: align, - showBorder: count != content['options'].length, + showDivider: count != content['options'].length, onPressed: () { if (onSelected != null) { Map payload = {}; diff --git a/sample/lib/main.dart b/sample/lib/main.dart index 35a998f7..b5532a88 100644 --- a/sample/lib/main.dart +++ b/sample/lib/main.dart @@ -51,39 +51,42 @@ class HomePage extends StatelessWidget { title: 'Blip Design System Showcase', ), body: SafeArea( - child: ListView( - children: [ - SampleMessageBubbleShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleTextStyleShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleButtonShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleTypingShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleSwitchShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleDialogShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleToastShowcase(), - const Divider(color: DSColors.neutralDarkCity), - SampleRadioShowcase(), - const Divider(color: DSColors.neutralDarkCity), - SampleGroupCardShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleHeaderShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleBottomSheetShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleTicketMessage(), - const Divider(color: DSColors.neutralDarkCity), - const SampleCollectionShowcase(), - const Divider(color: DSColors.neutralDarkCity), - const SampleWeblinkShowcase(), - const Divider(color: DSColors.neutralDarkCity), - SampleInputShowcase(), - const Divider(color: DSColors.neutralDarkCity), - ], + child: Padding( + padding: const EdgeInsets.all(8.0), + child: ListView( + children: [ + SampleMessageBubbleShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleTextStyleShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleButtonShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleTypingShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleSwitchShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleDialogShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleToastShowcase(), + const Divider(color: DSColors.neutralDarkCity), + SampleRadioShowcase(), + const Divider(color: DSColors.neutralDarkCity), + SampleGroupCardShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleHeaderShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleBottomSheetShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleTicketMessage(), + const Divider(color: DSColors.neutralDarkCity), + const SampleCollectionShowcase(), + const Divider(color: DSColors.neutralDarkCity), + const SampleWeblinkShowcase(), + const Divider(color: DSColors.neutralDarkCity), + SampleInputShowcase(), + const Divider(color: DSColors.neutralDarkCity), + ], + ), ), ), ); diff --git a/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart b/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart index 612009a2..c2f92c86 100644 --- a/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart +++ b/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart @@ -53,6 +53,42 @@ class SampleMessageBubbleShowcase extends StatelessWidget { return Obx( () => Column( children: [ + DSApplicationJsonMessageBubble( + align: DSAlign.right, + borderRadius: const [ + DSBorderRadius.all, + // DSBorderRadius.topLeft, + // DSBorderRadius.bottomLeft, + // DSBorderRadius.bottomRight, + // DSBorderRadius.topRight, + ], + content: const { + "recipient_type": "individual", + "type": "interactive", + "interactive": { + "type": "button", + "header": { + "text": "Cabeçalho", + "type": "video", + "video": { + "link": + "http://techslides.com/demos/sample-videos/small.mp4" + } + }, + "body": {"text": "Selecione qual é o seu interesse:"}, + "action": { + "buttons": [ + { + "reply": {"title": "Título do Botão"} + } + ] + }, + "footer": { + "text": "Clique no botão abaixo para selecionar uma opção" + } + } + }, + ), DSApplicationJsonMessageBubble( align: DSAlign.right, borderRadius: const [DSBorderRadius.all], @@ -74,7 +110,7 @@ class SampleMessageBubbleShowcase extends StatelessWidget { }, { "type": "reply", - "reply": {"id": "2", "title": "Não L'"} + "reply": {"id": "2", "title": "Não"} } ] }, From 4dee076590098ce7c3e5e184acd5f0bc16f85bce Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Wed, 22 Nov 2023 20:16:15 -0300 Subject: [PATCH 4/5] refactor: Improve interactive list and button code --- ...eractive_button_message_bubble.widget.dart | 198 ++++++++++-------- ...nteractive_list_message_bubble.widget.dart | 143 ++++++++----- 2 files changed, 198 insertions(+), 143 deletions(-) diff --git a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart index e314f9d5..830aaf08 100644 --- a/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_interactive_button_message_bubble.widget.dart @@ -26,16 +26,23 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { final DSMessageBubbleAvatarConfig avatarConfig; final DSMessageBubbleStyle style; - late final bool isDefaultBubbleColors; - late final bool isLightBubbleBackground; + late final List _startBorderRadius; + late final List _middleBorderRadius; + late final List _endBorderRadius; - final bool hasButtons; - final bool hasHeaderText; - final bool hasBodyText; - final bool hasFooterText; - final bool hasImageLink; - final bool hasVideoLink; - final bool hasDocumentLink; + late final bool _isLeftAligned; + late final bool _isDefaultBubbleColors; + late final bool _isLightBubbleBackground; + late final bool _shouldShowStartBubble; + late final bool _shouldShowMiddleBubble; + late final bool _shouldShowEndBubble; + late final bool _hasButtons; + late final bool _hasHeaderText; + late final bool _hasBodyText; + late final bool _hasFooterText; + late final bool _hasImageLink; + late final bool _hasVideoLink; + late final bool _hasDocumentLink; DSInteractiveButtonMessageBubble({ super.key, @@ -44,73 +51,86 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { this.borderRadius = const [DSBorderRadius.all], this.avatarConfig = const DSMessageBubbleAvatarConfig(), DSMessageBubbleStyle? style, - }) : style = style ?? DSMessageBubbleStyle(), - hasHeaderText = content.header?.text?.isNotEmpty ?? false, - hasImageLink = content.header?.image?.link?.isNotEmpty ?? false, - hasVideoLink = content.header?.video?.link?.isNotEmpty ?? false, - hasDocumentLink = content.header?.document?.link?.isNotEmpty ?? false, - hasButtons = content.action?.buttons?.isNotEmpty ?? false, - hasBodyText = content.body?.text?.isNotEmpty ?? false, - hasFooterText = content.footer?.text?.isNotEmpty ?? false { - isDefaultBubbleColors = this.style.isDefaultBubbleBackground(align); - isLightBubbleBackground = this.style.isLightBubbleBackground(align); + }) : style = style ?? DSMessageBubbleStyle() { + _initProperties(); + _initBorderRadius(); } - List get _startBorderRadius => [ - DSBorderRadius.topLeft, - align == DSAlign.left - ? DSBorderRadius.bottomRight - : DSBorderRadius.bottomLeft, - if (borderRadius.any((border) => [ - DSBorderRadius.all, - DSBorderRadius.topRight, - ].contains(border))) - DSBorderRadius.topRight, - ]; + void _initProperties() { + _isLeftAligned = align == DSAlign.left; + _isDefaultBubbleColors = style.isDefaultBubbleBackground(align); + _isLightBubbleBackground = style.isLightBubbleBackground(align); - List get _midBorderRadius => align == DSAlign.left - ? [ - DSBorderRadius.topRight, - DSBorderRadius.bottomRight, - ] - : [ - DSBorderRadius.topLeft, - DSBorderRadius.bottomLeft, - ]; + _hasHeaderText = content.header?.text?.isNotEmpty ?? false; + _hasImageLink = content.header?.image?.link?.isNotEmpty ?? false; + _hasVideoLink = content.header?.video?.link?.isNotEmpty ?? false; + _hasDocumentLink = content.header?.document?.link?.isNotEmpty ?? false; + _hasButtons = content.action?.buttons?.isNotEmpty ?? false; + _hasBodyText = content.body?.text?.isNotEmpty ?? false; + _hasFooterText = content.footer?.text?.isNotEmpty ?? false; - List get _endBorderRadius => [ - DSBorderRadius.bottomLeft, - align == DSAlign.left - ? DSBorderRadius.topRight - : DSBorderRadius.topLeft, - if (borderRadius.any((border) => [ - DSBorderRadius.all, - DSBorderRadius.bottomRight, - ].contains(border))) - DSBorderRadius.bottomRight, - ]; + _shouldShowStartBubble = + _hasHeaderText || _hasVideoLink || _hasImageLink || _hasDocumentLink; + _shouldShowMiddleBubble = _hasBodyText || _hasFooterText; + _shouldShowEndBubble = _hasButtons; + } + + void _initBorderRadius() { + final shouldStartBorder = borderRadius.any( + (border) => [ + DSBorderRadius.all, + _isLeftAligned ? DSBorderRadius.topLeft : DSBorderRadius.topRight, + ].contains(border), + ); + + final shouldEndBorder = borderRadius.any( + (border) => [ + DSBorderRadius.all, + _isLeftAligned ? DSBorderRadius.bottomLeft : DSBorderRadius.bottomRight, + ].contains(border), + ); + + _middleBorderRadius = _isLeftAligned + ? [ + DSBorderRadius.topRight, + DSBorderRadius.bottomRight, + ] + : [ + DSBorderRadius.topLeft, + DSBorderRadius.bottomLeft, + ]; + + _startBorderRadius = [ + ..._middleBorderRadius, + if (shouldStartBorder) + _isLeftAligned ? DSBorderRadius.topLeft : DSBorderRadius.topRight, + ]; + + _endBorderRadius = [ + ..._middleBorderRadius, + if (shouldEndBorder) + _isLeftAligned ? DSBorderRadius.bottomLeft : DSBorderRadius.bottomRight, + ]; + } @override Widget build(BuildContext context) => Column( children: [ - if (hasHeaderText || - hasVideoLink || - hasImageLink || - hasDocumentLink) ...[ - _buildHeaderBubble(), + if (_shouldShowStartBubble) ...[ + _buildStartBubble(), const SizedBox( height: 3.0, ), ], - if (hasBodyText || hasFooterText) _buildBodyBubble(), + if (_shouldShowMiddleBubble) _buildMiddleBubble(), const SizedBox( height: 3.0, ), - if (hasButtons) _buildButtonsBubble(), + if (_shouldShowEndBubble) _buildEndBubble(), ], ); - Widget _buildHeaderBubble() => switch (content.header?.type) { + Widget _buildStartBubble() => switch (content.header?.type) { DSInteractiveMessageHeaderType.text => _buildHeaderText(), DSInteractiveMessageHeaderType.image => _buildImage(), DSInteractiveMessageHeaderType.video => _buildVideo(), @@ -118,53 +138,57 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { _ => _buildUnsupportedContent(), }; - Widget _buildHeaderText() => hasHeaderText + Widget _buildHeaderText() => _hasHeaderText ? DSMessageBubble( align: align, - borderRadius: hasBodyText || hasFooterText || hasButtons + borderRadius: _shouldShowMiddleBubble || _shouldShowEndBubble ? _startBorderRadius : borderRadius, style: style, child: DSHeadlineSmallText( content.header!.text!, overflow: TextOverflow.visible, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), ) : _buildUnsupportedContent(); - Widget _buildImage() => hasImageLink + Widget _buildImage() => _hasImageLink ? DSImageMessageBubble( url: content.header!.image!.link!, - appBarText: (align == DSAlign.left + appBarText: (_isLeftAligned ? avatarConfig.receivedName : avatarConfig.sentName) ?? '', text: content.header?.text, align: align, - borderRadius: _startBorderRadius, + borderRadius: _shouldShowMiddleBubble || _shouldShowEndBubble + ? _startBorderRadius + : borderRadius, style: style, ) : _buildUnsupportedContent(); - Widget _buildVideo() => hasVideoLink + Widget _buildVideo() => _hasVideoLink ? DSVideoMessageBubble( url: content.header!.video!.link!, - appBarText: (align == DSAlign.left + appBarText: (_isLeftAligned ? avatarConfig.receivedName : avatarConfig.sentName) ?? '', mediaSize: 0, text: content.header?.text, align: align, - borderRadius: _startBorderRadius, + borderRadius: _shouldShowMiddleBubble || _shouldShowEndBubble + ? _startBorderRadius + : borderRadius, style: style, ) : _buildUnsupportedContent(); - Widget _buildDocument() => hasDocumentLink + Widget _buildDocument() => _hasDocumentLink ? DSFileMessageBubble( url: content.header!.document!.link!, filename: @@ -172,43 +196,47 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { size: 0, style: style, align: align, - borderRadius: _startBorderRadius, + borderRadius: _shouldShowMiddleBubble || _shouldShowEndBubble + ? _startBorderRadius + : borderRadius, ) : _buildUnsupportedContent(); Widget _buildUnsupportedContent() => DSUnsupportedContentMessageBubble( align: align, - borderRadius: _startBorderRadius, + borderRadius: _shouldShowMiddleBubble || _shouldShowEndBubble + ? _startBorderRadius + : borderRadius, style: style, ); - Widget _buildBodyBubble() => DSMessageBubble( + Widget _buildMiddleBubble() => DSMessageBubble( align: align, - borderRadius: hasHeaderText && hasButtons - ? _midBorderRadius - : hasHeaderText + borderRadius: _shouldShowStartBubble && _shouldShowEndBubble + ? _middleBorderRadius + : _shouldShowStartBubble ? _endBorderRadius - : hasButtons + : _shouldShowEndBubble ? _startBorderRadius : borderRadius, style: style, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - if (hasBodyText) + if (_hasBodyText) DSBodyText( content.body!.text!, overflow: TextOverflow.visible, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), - if (hasFooterText) + if (_hasFooterText) DSCaptionText( content.footer!.text!, fontStyle: FontStyle.italic, overflow: TextOverflow.visible, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), @@ -216,9 +244,9 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { ), ); - Widget _buildButtonsBubble() => DSMessageBubble( + Widget _buildEndBubble() => DSMessageBubble( align: align, - borderRadius: hasHeaderText || hasBodyText || hasFooterText + borderRadius: _shouldShowStartBubble || _shouldShowMiddleBubble ? _endBorderRadius : borderRadius, style: style, @@ -231,7 +259,7 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { List _buildButtons() { final widgets = []; - if (hasButtons) { + if (_hasButtons) { var count = 1; for (final button in content.action!.buttons!) { @@ -252,11 +280,11 @@ class DSInteractiveButtonMessageBubble extends StatelessWidget { vertical: 1.0, ), child: DSDivider( - color: isLightBubbleBackground - ? isDefaultBubbleColors + color: _isLightBubbleBackground + ? _isDefaultBubbleColors ? DSColors.neutralMediumWave : DSColors.neutralDarkCity - : isDefaultBubbleColors + : _isDefaultBubbleColors ? DSColors.neutralDarkRooftop : DSColors.neutralLightSnow, ), diff --git a/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart b/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart index cc6c93f1..2da68588 100644 --- a/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_interactive_list_message_bubble.widget.dart @@ -19,13 +19,18 @@ class DSInteractiveListMessageBubble extends StatelessWidget { final List borderRadius; final DSMessageBubbleStyle style; - late final bool isDefaultBubbleColors; - late final bool isLightBubbleBackground; + late final List _startBorderRadius; + late final List _endBorderRadius; - final bool hasBodyText; - final bool hasFooterText; - final bool hasButtonText; - final bool hasSections; + late final bool _isLeftAligned; + late final bool _isDefaultBubbleColors; + late final bool _isLightBubbleBackground; + late final bool _shouldShowStartBubble; + late final bool _shouldShowEndBubble; + late final bool _hasBodyText; + late final bool _hasFooterText; + late final bool _hasButtonText; + late final bool _hasSections; DSInteractiveListMessageBubble({ super.key, @@ -33,53 +38,77 @@ class DSInteractiveListMessageBubble extends StatelessWidget { required this.align, this.borderRadius = const [DSBorderRadius.all], DSMessageBubbleStyle? style, - }) : style = style ?? DSMessageBubbleStyle(), - hasBodyText = content.body?.text?.isNotEmpty ?? false, - hasFooterText = content.footer?.text?.isNotEmpty ?? false, - hasButtonText = content.action?.button?.isNotEmpty ?? false, - hasSections = content.action?.sections?.isNotEmpty ?? false { - isDefaultBubbleColors = this.style.isDefaultBubbleBackground(align); - isLightBubbleBackground = this.style.isLightBubbleBackground(align); + }) : style = style ?? DSMessageBubbleStyle() { + _initProperties(); + _initBorderRadius(); + } + + void _initProperties() { + _isLeftAligned = align == DSAlign.left; + _isDefaultBubbleColors = style.isDefaultBubbleBackground(align); + _isLightBubbleBackground = style.isLightBubbleBackground(align); + + _hasBodyText = content.body?.text?.isNotEmpty ?? false; + _hasFooterText = content.footer?.text?.isNotEmpty ?? false; + _hasButtonText = content.action?.button?.isNotEmpty ?? false; + _hasSections = content.action?.sections?.isNotEmpty ?? false; + + _shouldShowStartBubble = _hasBodyText || _hasFooterText || _hasButtonText; + _shouldShowEndBubble = _hasSections; + } + + void _initBorderRadius() { + final shouldStartBorder = borderRadius.any( + (border) => [ + DSBorderRadius.all, + _isLeftAligned ? DSBorderRadius.topLeft : DSBorderRadius.topRight, + ].contains(border), + ); + + final shouldEndBorder = borderRadius.any( + (border) => [ + DSBorderRadius.all, + _isLeftAligned ? DSBorderRadius.bottomLeft : DSBorderRadius.bottomRight, + ].contains(border), + ); + + final defaultBorderRadius = _isLeftAligned + ? [ + DSBorderRadius.topRight, + DSBorderRadius.bottomRight, + ] + : [ + DSBorderRadius.topLeft, + DSBorderRadius.bottomLeft, + ]; + + _startBorderRadius = [ + ...defaultBorderRadius, + if (shouldStartBorder) + _isLeftAligned ? DSBorderRadius.topLeft : DSBorderRadius.topRight, + ]; + + _endBorderRadius = [ + ...defaultBorderRadius, + if (shouldEndBorder) + _isLeftAligned ? DSBorderRadius.bottomLeft : DSBorderRadius.bottomRight, + ]; } - List get _startBorderRadius => [ - DSBorderRadius.topLeft, - align == DSAlign.left - ? DSBorderRadius.bottomRight - : DSBorderRadius.bottomLeft, - if (borderRadius.any((border) => [ - DSBorderRadius.all, - DSBorderRadius.topRight, - ].contains(border))) - DSBorderRadius.topRight, - ]; - - List get _endBorderRadius => [ - DSBorderRadius.bottomLeft, - align == DSAlign.left - ? DSBorderRadius.topRight - : DSBorderRadius.topLeft, - if (borderRadius.any((border) => [ - DSBorderRadius.all, - DSBorderRadius.bottomRight, - ].contains(border))) - DSBorderRadius.bottomRight, - ]; @override Widget build(BuildContext context) => Column( children: [ - if (hasBodyText || hasFooterText || hasButtonText) - _buildHeaderBubble(), + if (_shouldShowStartBubble) _buildStartBubble(), const SizedBox( height: 3.0, ), - if (hasSections) _buildListBubble(), + if (_shouldShowEndBubble) _buildEndBubble(), ], ); - Widget _buildHeaderBubble() => DSMessageBubble( + Widget _buildStartBubble() => DSMessageBubble( align: align, - borderRadius: hasSections ? _startBorderRadius : borderRadius, + borderRadius: _shouldShowEndBubble ? _startBorderRadius : borderRadius, style: style, child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -90,11 +119,9 @@ class DSInteractiveListMessageBubble extends StatelessWidget { ), ); - Widget _buildListBubble() => DSMessageBubble( + Widget _buildEndBubble() => DSMessageBubble( align: align, - borderRadius: hasBodyText || hasFooterText || hasButtonText - ? _endBorderRadius - : borderRadius, + borderRadius: _shouldShowStartBubble ? _endBorderRadius : borderRadius, style: style, child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -106,7 +133,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { const bottomPadding = 8.0; final widgets = []; - if (hasBodyText) { + if (_hasBodyText) { widgets.add( Padding( padding: const EdgeInsets.only( @@ -115,7 +142,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { child: DSBodyText( content.body!.text, overflow: TextOverflow.visible, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), @@ -123,7 +150,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { ); } - if (hasFooterText) { + if (_hasFooterText) { widgets.add( Padding( padding: const EdgeInsets.only( @@ -133,7 +160,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { content.footer!.text, fontStyle: FontStyle.italic, overflow: TextOverflow.visible, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), @@ -148,11 +175,11 @@ class DSInteractiveListMessageBubble extends StatelessWidget { bottom: bottomPadding, ), child: DSDivider( - color: isLightBubbleBackground - ? isDefaultBubbleColors + color: _isLightBubbleBackground + ? _isDefaultBubbleColors ? DSColors.neutralMediumWave : DSColors.neutralDarkCity - : isDefaultBubbleColors + : _isDefaultBubbleColors ? DSColors.neutralDarkRooftop : DSColors.neutralLightSnow, ), @@ -168,22 +195,22 @@ class DSInteractiveListMessageBubble extends StatelessWidget { children: [ Padding( padding: EdgeInsets.only( - right: hasButtonText ? 4.0 : 0.0, + right: _hasButtonText ? 4.0 : 0.0, ), child: Icon( DSIcons.list_outline, size: 20.0, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), ), - if (hasButtonText) + if (_hasButtonText) DSCaptionText( content.action!.button, fontWeight: DSFontWeights.bold, overflow: TextOverflow.visible, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), @@ -193,7 +220,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { List _buildList() { final widgets = []; - if (hasSections) { + if (_hasSections) { for (final section in content.action!.sections!) { final hasRows = section.rows?.isNotEmpty ?? false; final hasSectionTitle = section.title?.isNotEmpty ?? false; @@ -207,7 +234,7 @@ class DSInteractiveListMessageBubble extends StatelessWidget { child: DSBodyText( section.title!, overflow: TextOverflow.visible, - color: isLightBubbleBackground + color: _isLightBubbleBackground ? DSColors.neutralDarkCity : DSColors.neutralLightSnow, ), From c4da387f429456b1951de0cac67c4c869e37fc41 Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Wed, 22 Nov 2023 20:19:16 -0300 Subject: [PATCH 5/5] chore: Upgrade package version to 0.0.89 --- CHANGELOG.md | 5 +++++ pubspec.yaml | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b3d0a79..314b686e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 0.0.89 + +- [DSInteractiveButtonMessageBubble] Fixed border radius behavior. +- [DSInteractiveListMessageBubble] Fixed border radius behavior. + ## 0.0.88 - [DSApplicationJsonMessageBubble] Added support for interactive lists and buttons. diff --git a/pubspec.yaml b/pubspec.yaml index 1cd2a63d..0b36c416 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: blip_ds description: Blip Design System for Flutter. -version: 0.0.88 +version: 0.0.89 homepage: https://github.com/takenet/blip-ds-flutter#readme repository: https://github.com/takenet/blip-ds-flutter