Communication: Adjust message container height and send button
#10361
Conversation
github-actions
bot
added
the
client
WalkthroughThis pull request refines the user interface of several conversation and posting components by updating HTML structures, modifying CSS styling, and introducing new input properties. The changes include adjusting button classes for size and styling, restructuring component layouts, and adding dynamic CSS variables for height calculations. Additionally, the markdown editor and inline message components now use new inputs to manage loading states, form validation, and edit modes, while localization files are updated to reflect a shift from conversation-specific language to channel-context wording. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.html (1)
9-11: Consistent Input Property Bindings for Markdown Editor
The new input properties[isButtonLoading],[isFormGroupValid], and[editType]are correctly bound to the<jhi-posting-markdown-editor>component. This change should help manage loading states and form validation consistently across different contexts.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html(1 hunks)src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html(2 hunks)src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss(4 hunks)src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html(1 hunks)src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html(4 hunks)src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss(0 hunks)src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts(6 hunks)src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.html(2 hunks)src/main/webapp/app/shared/metis/message/message-reply-inline-input/message-reply-inline-input.component.html(2 hunks)src/main/webapp/app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component.html(2 hunks)src/main/webapp/app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component.html(1 hunks)src/main/webapp/app/shared/metis/posting-footer/posting-footer.component.html(1 hunks)src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html(1 hunks)src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts(2 hunks)src/main/webapp/i18n/de/conversation.json(1 hunks)src/main/webapp/i18n/en/conversation.json(1 hunks)
💤 Files with no reviewable changes (1)
- src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss
✅ Files skipped from review due to trivial changes (3)
- src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
- src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html
- src/main/webapp/app/shared/metis/posting-footer/posting-footer.component.html
🧰 Additional context used
📓 Path-based instructions (3)
`src/main/webapp/**/*.html`: @if and @for are new and valid ...
src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.
src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.htmlsrc/main/webapp/app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component.htmlsrc/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.htmlsrc/main/webapp/app/shared/metis/message/message-reply-inline-input/message-reply-inline-input.component.htmlsrc/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.htmlsrc/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.htmlsrc/main/webapp/app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component.html
`src/main/webapp/i18n/de/**/*.json`: German language transla...
src/main/webapp/i18n/de/**/*.json: German language translations should be informal (dutzen) and should never be formal (sietzen). So the user should always be addressed with "du/dein" and never with "sie/ihr".
src/main/webapp/i18n/de/conversation.json
`src/main/webapp/**/*.ts`: angular_style:https://angular.io/...
src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.tssrc/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
⏰ Context from checks skipped due to timeout of 90000ms (9)
- GitHub Check: Call Build Workflow / Build and Push Docker Image
- GitHub Check: Call Build Workflow / Build .war artifact
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: client-tests-selected
- GitHub Check: client-tests
- GitHub Check: client-style
- GitHub Check: server-tests
- GitHub Check: server-style
- GitHub Check: Analyse
🔇 Additional comments (24)
src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts (1)
50-50: LGTM! Input properties and constant follow Angular best practices.The new input properties and constant are well-structured and follow Angular style guide recommendations:
- Properties use camelCase naming
- No initialization in property declarations
- Clear and descriptive names that indicate their purpose
Also applies to: 82-86
src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts (3)
58-58: LGTM! Imports are well-organized and necessary.The new imports are properly organized and support the enhanced functionality for posting actions.
Also applies to: 75-76
245-248: LGTM! Input properties and constant follow Angular best practices.The new input properties and constant are well-structured and follow Angular style guide recommendations:
- Properties use camelCase naming
- No initialization in property declarations
- Clear and descriptive names that indicate their purpose
Also applies to: 327-327
134-134: LGTM! Component import is properly placed.The PostingButtonComponent is correctly added to the imports array.
src/main/webapp/app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component.html (2)
10-12: LGTM! Input properties enhance component functionality.The new input properties are properly bound and improve the component's state management:
- Loading state for buttons
- Form validation state
- Edit type context
22-22: LGTM! Button styling aligns with UI objectives.The change from secondary to primary button style better reflects the importance of the save action.
src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html (1)
24-26: LGTM! Input properties enhance component functionality.The new input properties are properly bound and improve the component's state management:
- Loading state for buttons
- Form validation state
- Edit type context
src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.html (1)
30-38: Appropriate Button Update for Edit Mode
The conditional block rendering a new button wheneditType === EditType.UPDATEis clear and correctly implements the “Save” functionality. The button’s bindings—using[buttonLoading], disabling onisLoading || !formGroup.valid, and proper labeling via localization—are well integrated. Ensure that the cancel button (above it) continues to emit the expected modal close event.src/main/webapp/app/shared/metis/message/message-reply-inline-input/message-reply-inline-input.component.html (2)
11-13: Consistent Integration of New Editor Inputs
The addition of[isButtonLoading],[isFormGroupValid], and[editType]to the<jhi-posting-markdown-editor>component in this reply context mirrors the changes in the inline input component. This will ensure that loading states and form validity are uniformly managed.
32-40: Updated Save Button for Edited Replies
The new save button under the@if (editType === EditType.UPDATE)condition is well structured, with proper bindings for loading state, disabled condition, and localized label. This change enhances the user experience during message editing.src/main/webapp/app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component.html (2)
40-48: Enhanced Markdown Editor in Modal with New State Inputs
The<jhi-posting-markdown-editor>inside the modal now correctly receives[isButtonLoading],[isFormGroupValid], and[editType]. This consistency allows the modal to manage its submit button state (e.g. switching between send and save) based on the form’s validity and loading status.
52-64: Conditional Rendering of Modal Footer for Edit Mode
The modal footer now appears only wheneditType === EditType.UPDATE, displaying a save button that mimics the behavior from other components. The button’s properties (loading indicator, disabled state, label, and type) are properly set. This clear conditional approach improves the modal’s UX during message editing.src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss (3)
10-11: Introduction of New CSS Custom Properties
The addition of--header-height: 68px;and--announcement-button-height: 48px;provides a scalable way to calculate dynamic heights within the layout. This change is well aligned with the goal of eliminating unnecessary whitespace.
49-58: Refined Max-Height Calculations for Infinite Scroll Container
The updates to the max-height formulas in the.posting-infinite-scroll-containerand its variants (e.g..hide-input-fulland.hide-input) make effective use of the new custom properties. These calculated values should improve responsiveness across devices. Please verify on different viewports to ensure the dynamic spacing meets design expectations.
117-133: New Layout Classes for Channel Content and Search
The introduction of.channel-contentand.channel-searchclasses adds flexibility to manage the overall layout. Their properties (height calculation, flexbox layout, fixed positioning for search, etc.) are well defined and clearly separated from other structural styles.src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html (2)
1-51: Improved Search Bar Section with Updated Class Naming
The search bar section now uses thechannel-searchclass and is conditionally rendered based onsearchbarCollapsedandsearchText. The structure (including proper use of ARIA attributes and clear icon labeling) supports accessibility and aligns with the new design. The use of Angular’s new@ifsyntax is correct and clean.
52-129: Optimized Conversation Messages Container and Conditional Inputs
The main conversation area wraps the message list in a<div>with the newchannel-contentclass, enabling dynamic height calculations that integrate with the SCSS updates. The infinite scroll container and conditional rendering of new message inputs (differentiated by mobile/non-mobile views and announcement channels) are clearly structured. This layout adjustment should enhance usability by utilizing screen real estate more efficiently.src/main/webapp/i18n/en/conversation.json (2)
17-18: Addition of "saveMessage" key.
The new key"saveMessage": "Save"is correctly added to support the updated UI behavior for message editing. This aligns with the new functionality where the button text changes when appropriate.
25-28: Refinement of search-related keys.
Updating"searchBarPlaceholder"to"Search within current channel"and simplifying the results messages (e.g."{{ count }} Results","1 Result","No Results") enhances clarity and conciseness. These changes are consistent with the objective to optimize space and improve user messaging.src/main/webapp/i18n/de/conversation.json (2)
17-18: Einführung des neuen "saveMessage" Schlüssels.
Die Ergänzung von"saveMessage": "Speichern"entspricht der neuen Funktionalität und verwendet eine informelle Ansprache, was den deutschen Richtlinien entspricht.
25-28: Anpassung der Suchtext- und Ergebnistexte.
Durch die Änderung von"searchBarPlaceholder"zu"Suche im aktuellen Kanal"und die Anpassungen der Ergebnis-Texte (z. B."{{ count }} Ergebnisse","1 Ergebnis","Keine Ergebnisse") wird der Anwendungsfall klarer und prägnanter kommuniziert – genau im Sinne der überarbeiteten Benutzeroberfläche.src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html (3)
27-60: Enhanced styling and conditional button integration in the file upload footer.
The file upload footer now uses the additional classesd-flex align-items-center border-topfor improved visual alignment and separation. The conditional rendering of the message button based oneditType !== EditType.UPDATEensures the button appears only when composing a new message rather than when editing.
86-97: Consistent message submission button in the preview section.
The send button within the preview tab is conditionally rendered with the same logic (editType !== EditType.UPDATE), ensuring consistent behavior across tabs. This maintains uniformity between the two message-sending interfaces.
109-110: Simplification of header action condition.
Using@if (displayedActions.header.length)is a succinct way to check for non-zero length and improves code readability without changing the logic.
helios-aet
bot
temporarily deployed
to
artemis-test3.artemis.cit.tum.de
rabeatwork
dismissed stale reviews from HanyangXu0508 and coderabbitai[bot]
via
040ff65
...rview/course-conversations/layout/conversation-messages/conversation-messages.component.scss
Show resolved
Hide resolved
rabeatwork
dismissed stale reviews from coderabbitai[bot] and az108
via
dfe99dc
src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts (1)
245-247: Consider using the new input() syntax consistently.The new input properties use Angular's modern input() syntax, which is good. However, for better consistency across the codebase, consider migrating other input properties to use the same syntax.
Example for other inputs:
-@Input() -enableFileUpload = true; +enableFileUpload = input<boolean>(true); -@Input() -enableResize = true; +enableResize = input<boolean>(true);
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html(5 hunks)src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts(6 hunks)src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html(1 hunks)src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html
- src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html
- src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts
🧰 Additional context used
📓 Path-based instructions (1)
`src/main/webapp/**/*.ts`: angular_style:https://angular.io/...
src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Call Build Workflow / Build .war artifact
- GitHub Check: Call Build Workflow / Build and Push Docker Image
- GitHub Check: client-tests
- GitHub Check: client-tests-selected
- GitHub Check: server-tests
- GitHub Check: server-style
- GitHub Check: Analyse
🔇 Additional comments (4)
src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts (4)
58-58: LGTM! Imports are well-organized.The new imports are correctly placed and follow Angular's style guide for import organization.
Also applies to: 75-76
134-134: LGTM! Component import is correctly added.PostingButtonComponent is properly added to the imports array, following Angular's standalone component pattern.
327-327: LGTM! Readonly property is correctly exposed.The EditType property is correctly exposed as readonly for template access, following Angular's best practices for enum exposure.
113-143: LGTM! Component follows Angular best practices.The component demonstrates excellent architectural decisions:
- Uses OnPush change detection for better performance
- Properly implements OnDestroy for cleanup
- Leverages signals for reactive state management
helios-aet
bot
temporarily deployed
to
artemis-test5.artemis.cit.tum.de
There was a problem hiding this comment.
Tested on TS5, works as expected.
I noticed one very small thing, but this is unrelated and occurs on other branches as well: If the title bar (the one that displays the channel name and stuff) goes over two lines, the message text box is initially cut off at the bottom and has to be scrolled up, which then hides the top of the title bar.
We can tackle this issue in a separate PR. Thanks for pointing out. |
rabeatwork
added
communication
helios-aet
bot
temporarily deployed
to
artemis-test3.artemis.cit.tum.de
helios-aet
bot
temporarily deployed
to
artemis-test3.artemis.cit.tum.de
Hint: Use the
hide whitespaceoption in the diff view to better track code changes in HTML templates.Checklist
General
Client
Motivation and Context
Remove unnecessary whitespace and use the full space in Communication.
Description
The text field for writing messages is now always positioned at the bottom. The send button is now displayed inside the text field to save space. When editing messages, the "Send" button has been renamed to "Save" for better clarity. The buttons (Save + Cancel) remain located below the text field when editing a message.
Steps for Testing
Prerequisites:
Sendbutton is disabled when the text field is emptySendbutton is now enabledSendbutton to send a messageEdit contentCancelandSavebutton below the text fieldTestserver States
You can manage test servers using Helios. Check environment statuses in the environment list. To deploy to a test server, go to the CI/CD page, find your PR or branch, and trigger the deployment.
Review Progress
Code Review
Manual Tests
Test Coverage
Screenshots
Old:
New:
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Style