bruig: First round of mobile screen design implementation

bruig/flutterui/bruig/lib/components/buttons.dart

@@ -42,26 +42,118 @@ final ButtonStyle emptyButtonStyle = ElevatedButton.styleFrom(
       side: BorderSide(color: Color(0xFF5A5968), width: 2)),
 );
 
+final ButtonStyle readMoreButton = ElevatedButton.styleFrom(
+  padding: const EdgeInsets.only(left: 10, top: 10, right: 10, bottom: 10),
+  foregroundColor: const Color(0xFF8E8D98),
+  //padding: EdgeInsets.symmetric(horizontal: 16),
+  shape: const RoundedRectangleBorder(
+      borderRadius: BorderRadius.all(Radius.circular(30)),
+      side: BorderSide(color: Color(0xFF5A5968), width: 1)),
+);
+
 class LoadingScreenButton extends StatelessWidget {
   final VoidCallback? onPressed;
   final bool loading;
   final String text;
   final bool empty;
+  final double minSize;
   const LoadingScreenButton(
       {required this.onPressed,
       required this.text,
       this.loading = false,
       this.empty = false,
+      this.minSize = 0,
       Key? key})
       : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return TextButton(
-        style: empty ? emptyButtonStyle : raisedButtonStyle,
+        style: minSize != 0
+            ? ElevatedButton.styleFrom(
+                padding: const EdgeInsets.only(
+                    left: 34, top: 10, right: 34, bottom: 10),
+                minimumSize: Size(minSize - 30, 55),
+                foregroundColor: const Color(0xFFE4E3E6),
+                backgroundColor: const Color(0xFF252438),
+                //padding: EdgeInsets.symmetric(horizontal: 16),
+                shape: const RoundedRectangleBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(30)),
+                ),
+              )
+            : empty
+                ? emptyButtonStyle
+                : raisedButtonStyle,
         onPressed: !loading ? onPressed : null,
         child: Text(text,
             style:
                 const TextStyle(fontSize: 21, fontWeight: FontWeight.normal)));
   }
 }
+
+class MobileScreenButton extends StatelessWidget {
+  final VoidCallback? onPressed;
+  final bool loading;
+  final String text;
+  final bool empty;
+  final double minSize;
+  const MobileScreenButton(
+      {required this.onPressed,
+      required this.text,
+      this.loading = false,
+      this.empty = false,
+      this.minSize = 0,
+      Key? key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var theme = Theme.of(context);
+    var buttonForeground = theme.backgroundColor;
+    var buttonBackground = theme.bottomAppBarColor;
+    return TextButton(
+        style: minSize != 0
+            ? ElevatedButton.styleFrom(
+                padding: const EdgeInsets.only(
+                    left: 34, top: 13, right: 34, bottom: 13),
+                minimumSize: Size(minSize - 46, 20),
+                foregroundColor: buttonForeground,
+                backgroundColor: buttonBackground,
+                shape: const RoundedRectangleBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(30)),
+                ),
+              )
+            : empty
+                ? emptyButtonStyle
+                : raisedButtonStyle,
+        onPressed: !loading ? onPressed : null,
+        child: Text(text,
+            style: const TextStyle(
+                letterSpacing: 1, fontSize: 13, fontWeight: FontWeight.w500)));
+  }
+}
+
+class FeedReadMoreButton extends StatelessWidget {
+  final VoidCallback? onPressed;
+  final bool loading;
+  final String text;
+  final bool empty;
+  final double minSize;
+  const FeedReadMoreButton(
+      {required this.onPressed,
+      required this.text,
+      this.loading = false,
+      this.empty = false,
+      this.minSize = 0,
+      Key? key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+        style: readMoreButton,
+        onPressed: !loading ? onPressed : null,
+        child:
+            Text(text, style: const TextStyle(letterSpacing: 1, fontSize: 12)));
+  }
+}

bruig/flutterui/bruig/lib/components/chat/active_chat.dart

@@ -5,7 +5,6 @@ import 'package:bruig/util.dart';
 import 'package:bruig/models/client.dart';
 import 'package:flutter/material.dart';
 import 'package:bruig/components/profile.dart';
-import 'package:bruig/components/addressbook/addressbook.dart';
 import 'package:bruig/components/chat/messages.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 import 'package:bruig/components/chat/input.dart';
@@ -86,7 +85,7 @@ class _ActiveChatState extends State<ActiveChat> {
   void dispose() {
     _debounce?.cancel();
     client.removeListener(clientChanged);
-    inputFocusNode.dispose();
+    //inputFocusNode.dispose();  XXX Does this need to be put back?  Errors with it
     super.dispose();
   }
 
@@ -95,9 +94,6 @@ class _ActiveChatState extends State<ActiveChat> {
 
   @override
   Widget build(BuildContext context) {
-    if (client.showAddressBook) {
-      return AddressBook(client, inputFocusNode);
-    }
     if (this.chat == null) return Container();
     var chat = this.chat!;
     var profile = client.profile;
@@ -121,76 +117,144 @@ class _ActiveChatState extends State<ActiveChat> {
             ? hightLightTextColor
             : darkTextColor;
 
-    return Row(children: [
-      Expanded(
-        child: Column(children: [
-          Expanded(
-            child: Messages(chat, client.nick, client, _itemScrollController,
-                _itemPositionsListener),
-          ),
-          Input(sendMsg, chat, inputFocusNode)
-        ]),
-      ),
-      Visibility(
-        visible: client.activeSubMenu.isNotEmpty,
-        child: Container(
-          width: 250,
-          decoration: BoxDecoration(
-            border: Border(
-              left: BorderSide(width: 2, color: subMenuBorderColor),
-            ),
-          ),
-          child: Stack(alignment: Alignment.topRight, children: [
-            Column(children: [
-              Container(
-                margin: const EdgeInsets.only(top: 20, bottom: 20),
-                child: CircleAvatar(
-                  radius: 75,
-                  backgroundColor: avatarColor,
-                  child: Text(
-                    nickCapitalLetter(),
-                    style: TextStyle(color: avatarTextColor, fontSize: 75),
+    bool isScreenSmall = MediaQuery.of(context).size.width <= 500;
+    return isScreenSmall
+        ? client.activeSubMenu.isNotEmpty
+            ? Stack(
+                alignment: Alignment.topRight,
+                children: [
+                  Column(children: [
+                    Container(
+                      margin: const EdgeInsets.only(top: 20, bottom: 20),
+                      child: CircleAvatar(
+                        radius: 75,
+                        backgroundColor: avatarColor,
+                        child: Text(
+                          nickCapitalLetter(),
+                          style:
+                              TextStyle(color: avatarTextColor, fontSize: 75),
+                        ),
+                      ),
+                    ),
+                    Visibility(
+                      visible: chat.isGC,
+                      child: Text("Group Chat",
+                          style: TextStyle(fontSize: 15, color: textColor)),
+                    ),
+                    Text(chat.nick,
+                        style: TextStyle(fontSize: 15, color: textColor)),
+                    Expanded(
+                        child: ListView.builder(
+                      shrinkWrap: true,
+                      itemCount: client.activeSubMenu.length,
+                      itemBuilder: (context, index) => ListTile(
+                          title: Text(client.activeSubMenu[index].label,
+                              style: const TextStyle(fontSize: 11)),
+                          onTap: () {
+                            client.activeSubMenu[index]
+                                .onSelected(context, client);
+                            client.hideSubMenu();
+                          },
+                          hoverColor: Colors.black),
+                    )),
+                  ]),
+                  Positioned(
+                    top: 5,
+                    right: 5,
+                    child: Material(
+                      color: selectedBackgroundColor.withOpacity(0),
+                      child: IconButton(
+                        tooltip: "Close",
+                        hoverColor: selectedBackgroundColor,
+                        splashRadius: 15,
+                        iconSize: 15,
+                        onPressed: () => client.hideSubMenu(),
+                        icon: Icon(color: darkTextColor, Icons.close_outlined),
+                      ),
+                    ),
                   ),
+                ],
+              )
+            : Column(children: [
+                Expanded(
+                  child: Messages(chat, client.nick, client,
+                      _itemScrollController, _itemPositionsListener),
                 ),
-              ),
-              Visibility(
-                visible: chat.isGC,
-                child: Text("Group Chat",
-                    style: TextStyle(fontSize: 15, color: textColor)),
-              ),
-              Text(chat.nick, style: TextStyle(fontSize: 15, color: textColor)),
-              Expanded(
-                  child: ListView.builder(
-                shrinkWrap: true,
-                itemCount: client.activeSubMenu.length,
-                itemBuilder: (context, index) => ListTile(
-                    title: Text(client.activeSubMenu[index].label,
-                        style: const TextStyle(fontSize: 11)),
-                    onTap: () {
-                      client.activeSubMenu[index].onSelected(context, client);
-                      client.hideSubMenu();
-                    },
-                    hoverColor: Colors.black),
-              )),
-            ]),
-            Positioned(
-              top: 5,
-              right: 5,
-              child: Material(
-                color: selectedBackgroundColor.withOpacity(0),
-                child: IconButton(
-                  tooltip: "Close",
-                  hoverColor: selectedBackgroundColor,
-                  splashRadius: 15,
-                  iconSize: 15,
-                  onPressed: () => client.hideSubMenu(),
-                  icon: Icon(color: darkTextColor, Icons.close_outlined),
+                Input(sendMsg, chat, inputFocusNode)
+              ])
+        : Row(children: [
+            Expanded(
+              child: Column(children: [
+                Expanded(
+                  child: Messages(chat, client.nick, client,
+                      _itemScrollController, _itemPositionsListener),
                 ),
-              ),
+                Input(sendMsg, chat, inputFocusNode)
+              ]),
             ),
-          ]),
-        ),
-      )
-    ]);
+            Visibility(
+              visible: client.activeSubMenu.isNotEmpty,
+              child: Container(
+                width: 250,
+                decoration: BoxDecoration(
+                  border: Border(
+                    left: BorderSide(width: 2, color: subMenuBorderColor),
+                  ),
+                ),
+                child: Stack(alignment: Alignment.topRight, children: [
+                  Column(children: [
+                    Container(
+                      margin: const EdgeInsets.only(top: 20, bottom: 20),
+                      child: CircleAvatar(
+                        radius: 75,
+                        backgroundColor: avatarColor,
+                        child: Text(
+                          nickCapitalLetter(),
+                          style:
+                              TextStyle(color: avatarTextColor, fontSize: 75),
+                        ),
+                      ),
+                    ),
+                    Visibility(
+                      visible: chat.isGC,
+                      child: Text("Group Chat",
+                          style: TextStyle(fontSize: 15, color: textColor)),
+                    ),
+                    Text(chat.nick,
+                        style: TextStyle(fontSize: 15, color: textColor)),
+                    Expanded(
+                        child: ListView.builder(
+                      shrinkWrap: true,
+                      itemCount: client.activeSubMenu.length,
+                      itemBuilder: (context, index) => ListTile(
+                          title: Text(client.activeSubMenu[index].label,
+                              style: const TextStyle(fontSize: 11)),
+                          onTap: () {
+                            client.activeSubMenu[index]
+                                .onSelected(context, client);
+                            client.hideSubMenu();
+                          },
+                          hoverColor: Colors.black),
+                    )),
+                  ]),
+                  Positioned(
+                    top: 5,
+                    right: 5,
+                    child: Material(
+                      color: selectedBackgroundColor.withOpacity(0),
+                      child: IconButton(
+                        tooltip: "Close",
+                        hoverColor: selectedBackgroundColor,
+                        splashRadius: 15,
+                        iconSize: 15,
+                        onPressed: () => client.hideSubMenu(),
+                        icon: Icon(color: darkTextColor, Icons.close_outlined),
+                      ),
+                    ),
+                  ),
+                ]),
+              ),
+            )
+          ]);
   }
 }