fix: messages UI/UX improvement (#4173)

extensions/messages/js/src/forum/components/DialogSection.tsx

@@ -59,6 +59,13 @@ export default class DialogSection<CustomAttrs extends IDialogStreamAttrs = IDia
   actionItems() {
     const items = new ItemList<Mithril.Children>();
 
+    items.add(
+      'back',
+      <Button className="Button Button--icon DialogSection-back" icon="fas fa-arrow-left" onclick={this.attrs.onback}>
+        {app.translator.trans('flarum-messages.forum.dialog_section.back_label')}
+      </Button>
+    );
+
     items.add(
       'details',
       <Dropdown

extensions/messages/js/src/forum/components/Message.tsx

@@ -97,7 +97,7 @@ export default abstract class Message<CustomAttrs extends IMessageAttrs = IMessa
   }
 
   avatar(): Mithril.Children {
-    return this.attrs.message.user() ? <Avatar user={this.attrs.message.user()} /> : '';
+    return this.attrs.message.user() ? <Avatar user={this.attrs.message.user()} className="Post-avatar" /> : '';
   }
 
   headerItems() {

extensions/messages/js/src/forum/components/MessagesPage.tsx

@@ -14,11 +14,13 @@ import listItems from 'flarum/common/helpers/listItems';
 import ItemList from 'flarum/common/utils/ItemList';
 import Dropdown from 'flarum/common/components/Dropdown';
 import Button from 'flarum/common/components/Button';
+import classList from 'flarum/common/utils/classList';
 
 export interface IMessagesPageAttrs extends IPageAttrs {}
 
 export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMessagesPageAttrs> extends Page<CustomAttrs> {
   protected selectedDialog = Stream<Dialog | null>(null);
+  protected currentDialogId: string | null = null;
 
   oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
@@ -49,6 +51,7 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
 
   protected async initDialog() {
     const dialogId = m.route.param('id');
+    this.currentDialogId = dialogId;
 
     const title = app.translator.trans('flarum-messages.forum.messages_page.title', {}, true);
 
@@ -94,7 +97,11 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
         ) : !app.dialogs.hasItems() ? (
           <InfoTile icon="far fa-envelope-open">{app.translator.trans('flarum-messages.forum.messages_page.empty_text')}</InfoTile>
         ) : (
-          <div className="MessagesPage-content">
+          <div
+            className={classList('MessagesPage-content', {
+              'MessagesPage-content--onDialog': this.currentDialogId,
+            })}
+          >
             <div className="MessagesPage-sidebar" key="sidebar">
               <div className="IndexPage-toolbar" key="toolbar">
                 <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
@@ -103,7 +110,13 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
               <DialogList key="list" state={app.dialogs} activeDialog={this.selectedDialog()} />
             </div>
             {this.selectedDialog() ? (
-              <DialogSection key="dialog" dialog={this.selectedDialog()} />
+              <DialogSection
+                key="dialog"
+                dialog={this.selectedDialog()}
+                onback={() => {
+                  this.currentDialogId = null;
+                }}
+              />
             ) : (
               <LoadingIndicator key="loading" display="block" />
             )}

extensions/messages/less/forum.less

@@ -1,17 +1,68 @@
-.MessagesPage-sidebar {
+.MessagesPage {
-  flex-shrink: 0;
+  padding-bottom: 0;
-  width: 280px;
 }
 
 .MessagesPage-content {
+  --messages-page-gap: 32px;
   display: flex;
-  gap: 32px;
+  gap: var(--messages-page-gap);
 
   .Avatar {
     --size: 40px;
   }
 }
 
+.MessagesPage-sidebar {
+  flex-shrink: 0;
+  width: 100%;
+
+  .MessagesPage-content--onDialog & {
+    // margin-inline-start: calc(~"0px - 100% - var(--messages-page-gap)");
+    display: none;
+  }
+
+  @media @tablet-up {
+    width: 280px;
+
+    .MessagesPage-content--onDialog & {
+      // margin-inline-start: 0;
+      display: block;
+    }
+  }
+}
+
+.DialogSection {
+  flex-grow: 1;
+  min-width: 0;
+
+  @media @tablet-up {
+    padding-inline-start: 32px;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--control-bg);
+
+    a {
+      color: var(--text-color);
+    }
+
+    &-actions {
+      margin-inline-start: auto;
+    }
+
+    &-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+}
+
 .MessageComposer-recipients {
   display: flex;
   align-items: center;
@@ -145,34 +196,6 @@
   }
 }
 
-.DialogSection {
-  flex-grow: 1;
-  padding-inline-start: 32px;
-
-  &-header {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 16px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--control-bg);
-
-    a {
-      color: var(--text-color);
-    }
-
-    &-actions {
-      margin-inline-start: auto;
-    }
-
-    &-info {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-  }
-}
-
 .Message {
   padding-right: 0;
 
@@ -191,8 +214,30 @@
 }
 
 .MessageStream, .DialogList {
-  max-height: calc(100vh - var(--header-height) - 140px - 235px);
+  --additional-gap: 52px;
+  max-height: calc(100vh - var(--header-height) - 140px - var(--additional-gap));
   overflow: auto;
+
+  @media @tablet-up {
+    --additional-gap: 235px;
+  }
+}
+
+.MessageStream .ReplyPlaceholder {
+  margin-bottom: 24px;
+}
+
+.DialogSection-header-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.DialogSection-back {
+  display: flex;
+
+  @media @tablet-up {
+    display: none;
+  }
 }
 
 .DialogList-loadMore {

extensions/messages/locale/en.yml

@@ -21,6 +21,7 @@ flarum-messages:
       view_all: View all messages
 
     dialog_section:
+      back_label: Go back
       controls:
         details_button: Details
       controls_toggle_label: Dialog control actions

framework/core/less/admin.less

@@ -1,5 +1,6 @@
 @import "common/common";
 
+@import "admin/AdminPage";
 @import "admin/AdminHeader";
 @import "admin/AdminNav";
 @import "admin/AdvancedPage";

framework/core/less/admin/AdminPage.less

@@ -0,0 +1,3 @@
+.AdminPage {
+  padding-bottom: var(--page-bottom-padding);
+}

framework/core/less/common/App.less

@@ -1,7 +1,7 @@
 .App {
   position: relative !important;
   padding-top: var(--header-height);
-  padding-bottom: 50px;
+  padding-bottom: var(--app-bottom-padding);
   min-height: 100vh;
 
   @media @phone {
@@ -325,7 +325,6 @@
   .App-content {
     background: var(--body-bg);
     width: 100%;
-    min-height: 100vh;
+    min-height: calc(~"100vh - var(--header-height-phone)");
-    padding-bottom: 50px;
   }
 }

framework/core/less/common/root.less

@@ -255,6 +255,8 @@
   --zindex-alerts:                 @zindex-alerts;
   --zindex-tooltip:                @zindex-tooltip;
 
+  --page-bottom-padding:            100px;
+
   // Store the current responsive screen mode in a CSS variable, to make it
   // available to the JS code.
   --flarum-screen:                 none;

framework/core/less/forum/PageStructure.less

@@ -21,6 +21,7 @@
   --content-width: 100%;
   --sidebar-width: 190px;
   --gap: 50px;
+  padding-bottom: var(--page-bottom-padding);
 
   &-container {
     gap: var(--gap);

framework/core/less/forum/Post.less

@@ -429,7 +429,7 @@
   cursor: text;
   overflow: hidden;
   margin-top: 50px;
-  margin-left: calc(0px - var(--post-padding));
+  margin-left: 0;
   padding-left: var(--post-padding);
   border: 2px dashed var(--control-bg);
   color: var(--muted-color);
@@ -439,7 +439,7 @@
   appearance: none;
   -webkit-appearance: none;
   text-align: left;
-  width: calc(100% + var(--post-padding));
+  width: 100%;
 
   .Post-container {
     display: grid;
@@ -469,6 +469,8 @@
   .ReplyPlaceholder {
     border-color: transparent;
     transition: border-color 0.2s;
+    margin-left: calc(0px - var(--post-padding));
+    width: calc(100% + var(--post-padding));
 
     .Post-header {
       position: relative;

framework/core/less/forum/PostStream.less

@@ -50,12 +50,12 @@
   text-transform: uppercase;
   font-weight: bold;
   color: var(--muted-color);
-  padding: 20px 20px 20px calc(~"var(--avatar-column-width) + 20px");
+  padding: 20px 20px 20px var(--avatar-column-width);
   font-size: 12px;
 
   @media @phone {
-    margin: 0 -15px;
+    margin: 0;
-    padding: 20px 15px;
+    padding: 20px 0;
   }
 }