feat: improve bubbles layout with reply

takenet · Nov 28, 2023 · 2bb958b · 2bb958b
1 parent f441506
commit 2bb958b
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 234 deletions.
diff --git a/lib/src/widgets/chat/audio/ds_audio_message_bubble.widget.dart b/lib/src/widgets/chat/audio/ds_audio_message_bubble.widget.dart
@@ -37,43 +37,41 @@ class DSAudioMessageBubble extends StatelessWidget {
       align: align,
       replyContent: replyContent,
       style: style,
-      padding: const EdgeInsets.only(
-        left: 4.0,
-        right: 8.0,
-        top: 8.0,
-        bottom: 8.0,
-      ),
-      child: DSAudioPlayer(
-        uri: uri,
-        shouldAuthenticate: shouldAuthenticate,
-        controlForegroundColor: isLightBubbleBackground
-            ? DSColors.neutralDarkRooftop
-            : DSColors.neutralLightSnow,
-        labelColor: isLightBubbleBackground
-            ? DSColors.neutralDarkCity
-            : DSColors.neutralLightSnow,
-        bufferActiveTrackColor: isLightBubbleBackground
-            ? DSColors.neutralMediumWave
-            : DSColors.neutralMediumElephant,
-        bufferInactiveTrackColor: isLightBubbleBackground
-            ? DSColors.neutralDarkRooftop
-            : DSColors.neutralLightBox,
-        sliderActiveTrackColor: isLightBubbleBackground
-            ? DSColors.primaryNight
-            : DSColors.primaryLight,
-        sliderThumbColor: isLightBubbleBackground
-            ? DSColors.neutralDarkRooftop
-            : DSColors.neutralLightSnow,
-        speedForegroundColor: isLightBubbleBackground
-            ? DSColors.neutralDarkCity
-            : DSColors.neutralLightSnow,
-        speedBorderColor: isLightBubbleBackground
-            ? isDefaultBubbleColors
-                ? DSColors.neutralMediumSilver
-                : DSColors.neutralDarkCity
-            : isDefaultBubbleColors
-                ? DSColors.disabledText
-                : DSColors.neutralLightSnow,
+      padding: EdgeInsets.zero,
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(4.0, 8.0, 8.0, 8.0),
+        child: DSAudioPlayer(
+          uri: uri,
+          shouldAuthenticate: shouldAuthenticate,
+          controlForegroundColor: isLightBubbleBackground
+              ? DSColors.neutralDarkRooftop
+              : DSColors.neutralLightSnow,
+          labelColor: isLightBubbleBackground
+              ? DSColors.neutralDarkCity
+              : DSColors.neutralLightSnow,
+          bufferActiveTrackColor: isLightBubbleBackground
+              ? DSColors.neutralMediumWave
+              : DSColors.neutralMediumElephant,
+          bufferInactiveTrackColor: isLightBubbleBackground
+              ? DSColors.neutralDarkRooftop
+              : DSColors.neutralLightBox,
+          sliderActiveTrackColor: isLightBubbleBackground
+              ? DSColors.primaryNight
+              : DSColors.primaryLight,
+          sliderThumbColor: isLightBubbleBackground
+              ? DSColors.neutralDarkRooftop
+              : DSColors.neutralLightSnow,
+          speedForegroundColor: isLightBubbleBackground
+              ? DSColors.neutralDarkCity
+              : DSColors.neutralLightSnow,
+          speedBorderColor: isLightBubbleBackground
+              ? isDefaultBubbleColors
+                  ? DSColors.neutralMediumSilver
+                  : DSColors.neutralDarkCity
+              : isDefaultBubbleColors
+                  ? DSColors.disabledText
+                  : DSColors.neutralLightSnow,
+        ),
       ),
     );
   }

diff --git a/lib/src/widgets/chat/ds_contact_message_bubble.widget.dart b/lib/src/widgets/chat/ds_contact_message_bubble.widget.dart
@@ -36,7 +36,7 @@ class DSContactMessageBubble extends StatelessWidget {
     return DSMessageBubble(
       align: align,
       borderRadius: borderRadius,
-      padding: const EdgeInsets.all(16.0),
+      padding: EdgeInsets.zero,
       shouldUseDefaultSize: true,
       style: style,
       replyContent: replyContent,
@@ -48,44 +48,51 @@ class DSContactMessageBubble extends StatelessWidget {
     final foregroundColor = style.isLightBubbleBackground(align)
         ? DSColors.neutralDarkCity
         : DSColors.neutralLightSnow;
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Visibility(
-          visible: name != null,
-          child: DSBodyText(
-            name,
-            fontWeight: DSFontWeights.semiBold,
-            color: foregroundColor,
-            overflow: TextOverflow.visible,
-          ),
-        ),
-        const SizedBox(height: 16.0),
 
-        /// TODO(format): Format phone number
-        if (phone != null)
-          Padding(
-            padding: const EdgeInsets.only(bottom: 4.0),
-            child: _buildContactField(
-                title: 'Telefone',
-                body: phone!,
-                foregroundColor: foregroundColor),
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        vertical: 8.0,
+        horizontal: 16.0,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Visibility(
+            visible: name != null,
+            child: DSBodyText(
+              name,
+              fontWeight: DSFontWeights.semiBold,
+              color: foregroundColor,
+              overflow: TextOverflow.visible,
+            ),
           ),
-        if (email != null)
-          Padding(
-            padding: const EdgeInsets.only(bottom: 4.0),
-            child: _buildContactField(
-                title: 'E-mail',
-                body: email!,
-                foregroundColor: foregroundColor),
-          ),
-        if (address != null)
-          _buildContactField(
-            title: 'Endereço',
-            body: address!,
-            foregroundColor: foregroundColor,
-          ),
-      ],
+          const SizedBox(height: 16.0),
+
+          /// TODO(format): Format phone number
+          if (phone != null)
+            Padding(
+              padding: const EdgeInsets.only(bottom: 4.0),
+              child: _buildContactField(
+                  title: 'Telefone',
+                  body: phone!,
+                  foregroundColor: foregroundColor),
+            ),
+          if (email != null)
+            Padding(
+              padding: const EdgeInsets.only(bottom: 4.0),
+              child: _buildContactField(
+                  title: 'E-mail',
+                  body: email!,
+                  foregroundColor: foregroundColor),
+            ),
+          if (address != null)
+            _buildContactField(
+              title: 'Endereço',
+              body: address!,
+              foregroundColor: foregroundColor,
+            ),
+        ],
+      ),
     );
   }
 

diff --git a/lib/src/widgets/chat/ds_image_message_bubble.widget.dart b/lib/src/widgets/chat/ds_image_message_bubble.widget.dart
@@ -92,79 +92,84 @@ class _DSImageMessageBubbleState extends State<DSImageMessageBubble>
       padding: EdgeInsets.zero,
       hasSpacer: widget.hasSpacer,
       style: widget.style,
-      child: LayoutBuilder(
-        builder: (_, constraints) {
-          return Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Obx(
-                () => _controller.localPath.value != null
-                    ? DSExpandedImage(
-                        appBarText: widget.appBarText,
-                        appBarPhotoUri: widget.appBarPhotoUri,
-                        url: _controller.localPath.value!,
-                        maxHeight: widget.imageMaxHeight != null
-                            ? widget.imageMaxHeight!
-                            : widget.showSelect
-                                ? 200.0
-                                : double.infinity,
-                        minHeight: widget.imageMinHeight != null
-                            ? widget.imageMinHeight!
-                            : widget.showSelect
-                                ? 200.0
-                                : 0.0,
-                        align: widget.align,
-                        style: widget.style,
-                        isLoading: false,
-                        shouldAuthenticate: widget.shouldAuthenticate,
-                      )
-                    : DSCircularProgress(
-                        currentProgress: _controller.downloadProgress,
-                        maximumProgress: _controller.maximumProgress,
-                        foregroundColor: foregroundColor,
+      child: Padding(
+        padding: widget.replyContent == null
+            ? EdgeInsets.zero
+            : const EdgeInsets.only(top: 8.0),
+        child: LayoutBuilder(
+          builder: (_, constraints) {
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Obx(
+                  () => _controller.localPath.value != null
+                      ? DSExpandedImage(
+                          appBarText: widget.appBarText,
+                          appBarPhotoUri: widget.appBarPhotoUri,
+                          url: _controller.localPath.value!,
+                          maxHeight: widget.imageMaxHeight != null
+                              ? widget.imageMaxHeight!
+                              : widget.showSelect
+                                  ? 200.0
+                                  : double.infinity,
+                          minHeight: widget.imageMinHeight != null
+                              ? widget.imageMinHeight!
+                              : widget.showSelect
+                                  ? 200.0
+                                  : 0.0,
+                          align: widget.align,
+                          style: widget.style,
+                          isLoading: false,
+                          shouldAuthenticate: widget.shouldAuthenticate,
+                        )
+                      : DSCircularProgress(
+                          currentProgress: _controller.downloadProgress,
+                          maximumProgress: _controller.maximumProgress,
+                          foregroundColor: foregroundColor,
+                        ),
+                ),
+                if ((widget.title?.isNotEmpty ?? false) ||
+                    (widget.text?.isNotEmpty ?? false))
+                  SizedBox(
+                    child: Padding(
+                      padding: const EdgeInsets.all(12.0),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          if (widget.title?.isNotEmpty ?? false)
+                            DSCaptionText(
+                              widget.title!,
+                              color: foregroundColor,
+                              isSelectable: true,
+                            ),
+                          if ((widget.text?.isNotEmpty ?? false) &&
+                              (widget.title?.isNotEmpty ?? false))
+                            const SizedBox(
+                              height: 6.0,
+                            ),
+                          if (widget.text?.isNotEmpty ?? false)
+                            DSShowMoreText(
+                              text: widget.text!,
+                              maxWidth: constraints.maxWidth,
+                              align: widget.align,
+                              style: widget.style,
+                            )
+                        ],
                       ),
-              ),
-              if ((widget.title?.isNotEmpty ?? false) ||
-                  (widget.text?.isNotEmpty ?? false))
-                SizedBox(
-                  child: Padding(
-                    padding: const EdgeInsets.all(12.0),
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        if (widget.title?.isNotEmpty ?? false)
-                          DSCaptionText(
-                            widget.title!,
-                            color: foregroundColor,
-                            isSelectable: true,
-                          ),
-                        if ((widget.text?.isNotEmpty ?? false) &&
-                            (widget.title?.isNotEmpty ?? false))
-                          const SizedBox(
-                            height: 6.0,
-                          ),
-                        if (widget.text?.isNotEmpty ?? false)
-                          DSShowMoreText(
-                            text: widget.text!,
-                            maxWidth: constraints.maxWidth,
-                            align: widget.align,
-                            style: widget.style,
-                          )
-                      ],
                     ),
                   ),
-                ),
-              if (widget.showSelect)
-                DSDocumentSelect(
-                  align: widget.align,
-                  options: widget.selectOptions,
-                  onSelected: widget.onSelected,
-                  onOpenLink: widget.onOpenLink,
-                  style: widget.style,
-                ),
-            ],
-          );
-        },
+                if (widget.showSelect)
+                  DSDocumentSelect(
+                    align: widget.align,
+                    options: widget.selectOptions,
+                    onSelected: widget.onSelected,
+                    onOpenLink: widget.onOpenLink,
+                    style: widget.style,
+                  ),
+              ],
+            );
+          },
+        ),
       ),
     );
   }