Konrad's UI feedback (a.o.)

phnx-im · Sep 3, 2024 · 4623bcc · 4623bcc
1 parent 2f43be2
commit 4623bcc
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 42 deletions.
diff --git a/prototype/lib/conversation_pane/conversation_content/conversation_content.dart b/prototype/lib/conversation_pane/conversation_content/conversation_content.dart
@@ -147,7 +147,7 @@ class _ConversationContentState extends State<ConversationContent> {
   }) {
     setState(() {
       WidgetsBinding.instance.addPostFrameCallback((_) {
-        final extent = _scrollController.position.maxScrollExtent;
+        final extent = _scrollController.position.minScrollExtent;
         if (animated) {
           _scrollController.animateTo(
             extent,
@@ -177,7 +177,10 @@ class _ConversationContentState extends State<ConversationContent> {
           ),
           itemCount: _messages.length,
           physics: _scrollPhysics,
+          reverse: true,
           itemBuilder: (BuildContext context, int index) {
+            // Reverse the index to display the messages in the correct order
+            index = _messages.length - 1 - index;
             final key = GlobalKey();
             _tileKeys[index] = key;
             final message = _messages[index];

diff --git a/prototype/lib/conversation_pane/conversation_content/text_message_tile.dart b/prototype/lib/conversation_pane/conversation_content/text_message_tile.dart
@@ -41,32 +41,53 @@ class _TextMessageTileState extends State<TextMessageTile> {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: isSender()
-          ? [_messageSpace()]
-          : [
-              _avatar(),
-              const SizedBox(width: 20),
-              _messageSpace(),
-            ],
+    return Column(
+      children: [
+        if (!isSender()) _sender(),
+        _messageSpace(),
+      ],
     );
   }
 
   Widget _messageSpace() {
-    return Expanded(
-      child: Container(
-        padding: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 5),
-        child: Column(
-          crossAxisAlignment:
-              isSender() ? CrossAxisAlignment.end : CrossAxisAlignment.start,
-          children: [
-            if (!isSender()) _username(),
-            _textContent(context),
-            const SizedBox(height: 3),
-            _timestamp(),
-          ],
+    const flex = Flexible(child: SizedBox());
+    return Row(
+      mainAxisAlignment:
+          isSender() ? MainAxisAlignment.end : MainAxisAlignment.start,
+      children: [
+        if (isSender()) flex,
+        Flexible(
+          flex: 5,
+          child: Container(
+            padding:
+                const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 5),
+            child: Column(
+              crossAxisAlignment: isSender()
+                  ? CrossAxisAlignment.end
+                  : CrossAxisAlignment.start,
+              children: [
+                _textContent(context),
+                const SizedBox(height: 3),
+                _timestamp(),
+              ],
+            ),
+          ),
         ),
+        if (!isSender()) flex,
+      ],
+    );
+  }
+
+  Widget _sender() {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 8.0),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          _avatar(),
+          const SizedBox(width: 10),
+          _username(),
+        ],
       ),
     );
   }
@@ -84,9 +105,9 @@ class _TextMessageTileState extends State<TextMessageTile> {
       child: SelectionContainer.disabled(
         child: Text(
           timeString(widget.timestamp),
-          style: const TextStyle(
+          style: TextStyle(
             color: colorGreyDark,
-            fontSize: 10,
+            fontSize: isLargeScreen(context) ? 10 : 11,
             fontVariations: variationMedium,
             letterSpacing: -0.1,
           ),
@@ -115,7 +136,12 @@ class _TextMessageTileState extends State<TextMessageTile> {
           ? AlignmentDirectional.topEnd
           : AlignmentDirectional.topStart,
       child: Container(
-        padding: const EdgeInsets.only(top: 1, right: 10, left: 10, bottom: 5),
+        padding: EdgeInsets.only(
+          top: isLargeScreen(context) ? 1 : 4,
+          right: isLargeScreen(context) ? 10 : 11,
+          left: isLargeScreen(context) ? 10 : 11,
+          bottom: isLargeScreen(context) ? 5 : 6,
+        ),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(7),
           color: isSender() ? colorDMB : colorDMBSuperLight,
@@ -134,21 +160,18 @@ class _TextMessageTileState extends State<TextMessageTile> {
   }
 
   Widget _username() {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 5.0),
-      child: SelectionContainer.disabled(
-        child: Text(
-          isSender()
-              ? "You"
-              : widget.contentMessage.sender.split("@").firstOrNull ?? "",
-          style: const TextStyle(
-            color: colorDMB,
-            fontVariations: variationSemiBold,
-            fontSize: 12,
-            letterSpacing: -0.2,
-          ),
-          overflow: TextOverflow.ellipsis,
+    return SelectionContainer.disabled(
+      child: Text(
+        isSender()
+            ? "You"
+            : widget.contentMessage.sender.split("@").firstOrNull ?? "",
+        style: const TextStyle(
+          color: colorDMB,
+          fontVariations: variationSemiBold,
+          fontSize: 12,
+          letterSpacing: -0.2,
         ),
+        overflow: TextOverflow.ellipsis,
       ),
     );
   }

diff --git a/prototype/lib/elements.dart b/prototype/lib/elements.dart
@@ -128,7 +128,7 @@ class FrostedGlass extends StatelessWidget {
         child: Container(
           width: MediaQuery.of(context).size.width,
           height: height,
-          color: color.withOpacity(0.1),
+          color: color.withOpacity(0.4),
         ),
       ),
     );

diff --git a/prototype/lib/styles.dart b/prototype/lib/styles.dart
@@ -117,8 +117,8 @@ TextStyle messageTextStyle(BuildContext context, bool inverted) => TextStyle(
       fontVariations:
           isLargeScreen(context) ? variationRegular : variationMedium,
       letterSpacing: -0.05,
-      fontSize: isLargeScreen(context) ? 14 : 14,
-      height: isLargeScreen(context) ? 1.66 : 1.3,
+      fontSize: isLargeScreen(context) ? 14 : 15,
+      height: isLargeScreen(context) ? 1.5 : 1.3,
     );
 
 final textInputBorder = OutlineInputBorder(