From 875fd241b7da7b82083b43d123fc64ec8e1125c9 Mon Sep 17 00:00:00 2001 From: Sami Mazouz Date: Fri, 31 Jan 2025 09:17:51 +0100 Subject: [PATCH] fix: messages UI/UX improvement (#4173) --- .../js/src/forum/components/DialogSection.tsx | 7 ++ .../js/src/forum/components/Message.tsx | 2 +- .../js/src/forum/components/MessagesPage.tsx | 17 ++- extensions/messages/less/forum.less | 111 ++++++++++++------ extensions/messages/locale/en.yml | 1 + framework/core/less/admin.less | 1 + framework/core/less/admin/AdminPage.less | 3 + framework/core/less/common/App.less | 5 +- framework/core/less/common/root.less | 2 + framework/core/less/forum/PageStructure.less | 1 + framework/core/less/forum/Post.less | 6 +- framework/core/less/forum/PostStream.less | 6 +- 12 files changed, 118 insertions(+), 44 deletions(-) create mode 100644 framework/core/less/admin/AdminPage.less diff --git a/extensions/messages/js/src/forum/components/DialogSection.tsx b/extensions/messages/js/src/forum/components/DialogSection.tsx index 80bd63eeef..52cea46dc2 100644 --- a/extensions/messages/js/src/forum/components/DialogSection.tsx +++ b/extensions/messages/js/src/forum/components/DialogSection.tsx @@ -59,6 +59,13 @@ export default class DialogSection(); + items.add( + 'back', + + ); + items.add( 'details', : ''; + return this.attrs.message.user() ? : ''; } headerItems() { diff --git a/extensions/messages/js/src/forum/components/MessagesPage.tsx b/extensions/messages/js/src/forum/components/MessagesPage.tsx index e75c649940..f63160578c 100644 --- a/extensions/messages/js/src/forum/components/MessagesPage.tsx +++ b/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 extends Page { protected selectedDialog = Stream(null); + protected currentDialogId: string | null = null; oninit(vnode: Mithril.Vnode) { super.oninit(vnode); @@ -49,6 +51,7 @@ export default class MessagesPage{app.translator.trans('flarum-messages.forum.messages_page.empty_text')} ) : ( -
+
    {listItems(this.viewItems().toArray())}
@@ -103,7 +110,13 @@ export default class MessagesPage
{this.selectedDialog() ? ( - + { + this.currentDialogId = null; + }} + /> ) : ( )} diff --git a/extensions/messages/less/forum.less b/extensions/messages/less/forum.less index 7550eadab4..8770d9985d 100644 --- a/extensions/messages/less/forum.less +++ b/extensions/messages/less/forum.less @@ -1,17 +1,68 @@ -.MessagesPage-sidebar { - flex-shrink: 0; - width: 280px; +.MessagesPage { + padding-bottom: 0; } .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 { diff --git a/extensions/messages/locale/en.yml b/extensions/messages/locale/en.yml index 3463160939..802cc288be 100644 --- a/extensions/messages/locale/en.yml +++ b/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 diff --git a/framework/core/less/admin.less b/framework/core/less/admin.less index 30ae52d033..87f9056126 100644 --- a/framework/core/less/admin.less +++ b/framework/core/less/admin.less @@ -1,5 +1,6 @@ @import "common/common"; +@import "admin/AdminPage"; @import "admin/AdminHeader"; @import "admin/AdminNav"; @import "admin/AdvancedPage"; diff --git a/framework/core/less/admin/AdminPage.less b/framework/core/less/admin/AdminPage.less new file mode 100644 index 0000000000..22ec0008f1 --- /dev/null +++ b/framework/core/less/admin/AdminPage.less @@ -0,0 +1,3 @@ +.AdminPage { + padding-bottom: var(--page-bottom-padding); +} diff --git a/framework/core/less/common/App.less b/framework/core/less/common/App.less index 567d48435b..c93e743e62 100644 --- a/framework/core/less/common/App.less +++ b/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; - padding-bottom: 50px; + min-height: calc(~"100vh - var(--header-height-phone)"); } } diff --git a/framework/core/less/common/root.less b/framework/core/less/common/root.less index 38ff858262..3e30c7d390 100644 --- a/framework/core/less/common/root.less +++ b/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; diff --git a/framework/core/less/forum/PageStructure.less b/framework/core/less/forum/PageStructure.less index 0ddff8c049..c61f9ec42c 100644 --- a/framework/core/less/forum/PageStructure.less +++ b/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); diff --git a/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less index c434150040..381b5917c4 100644 --- a/framework/core/less/forum/Post.less +++ b/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; diff --git a/framework/core/less/forum/PostStream.less b/framework/core/less/forum/PostStream.less index afd8ce3a13..7c289de20d 100644 --- a/framework/core/less/forum/PostStream.less +++ b/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; - padding: 20px 15px; + margin: 0; + padding: 20px 0; } }