Add Common Speech Balloon Layout Styles with Compatibility for Latest Redmine (After Redmine 6.0) - #126
Add Common Speech Balloon Layout Styles with Compatibility for Latest Redmine (After Redmine 6.0)#126ishikawa999 wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adapts the speech balloon (conversation timeline) layout styling to work with updated HTML structure in Redmine core, specifically for Redmine 6.0+ where the journal structure has changed. The changes ensure backwards compatibility while providing updated styling for the new structure.
- Creates a shared speech balloon layout component that works with both old and new Redmine HTML structures
- Updates existing components to use conditional selectors that disable old styles when new structure is present
- Maintains visual consistency across different content types (issues, news, boards)
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| stylesheets/theme.css | Compiled CSS containing all the new styles and structure changes |
| src/styles/components/_speech_balloon_layout.scss | New shared component for journal/comment timeline styling |
| src/styles/components/_news.scss | Updated to use conditional styling and moved some styles up |
| src/styles/components/_issues.scss | Refactored to use new shared component with backwards compatibility |
| src/styles/components/_boards.scss | Added conditional selector for backwards compatibility |
| src/styles/bleuclair.scss | Added import for the new speech balloon layout component |
98b7185 to
4c76916
Compare
4c76916 to
701c470
Compare
ishikawa999
changed the title
| // forum(board) | ||
|
|
||
| .controller-messages.action-show #content > div.message { | ||
| .controller-messages.action-show #content h2 + div.message { |
There was a problem hiding this comment.
Corresponding to changes in HTML structure
| .issue-card { | ||
| background-color: $color-issue-bg; | ||
| } | ||
|
|
There was a problem hiding this comment.
Move the code position so that it does not apply to /* After Redmine6.0 This is achieved by common styles in _speech_balloon_layout.scss. The :not(.journals) disables the following styles after Redmine 6.0 */
| @@ -1,12 +1,22 @@ | |||
| .controller-news.action-show { | |||
| #content > div.message { | |||
| #content div.news { | |||
There was a problem hiding this comment.
Corresponding to changes in HTML structure
| padding: 20px; | ||
| border-radius: 3px; | ||
| border: 1px solid #dfe8f1; | ||
| } |
There was a problem hiding this comment.
Fixed a style definition for #content > div.message that was not working and fixed it to work in each version.
I also changed the news section to be displayed in white for the latest Redmine.
| redmine 6.0 stable (with this bleuclair) | Redmine trunk (with this bleuclair) |
|---|---|
 |
 |
There was a problem hiding this comment.
In Redmine 6.0, the timeline line was not displayed for comments, but after unifying the styles in _speech_balloon_layout.scss, the line is now shown.
I believe it's fine as it is, since the absence of the timeline line in Redmine 6.0 was likely not intentional but rather an implementation oversight.
|
This pull request will be closed, and a new one will be created with changes that are incompatible with Redmine 6.0. |
Due to changes in the HTML structure for history sections introduced in the following commit:
redmine/redmine@e940540
the speech balloon layout in the Bleuclair theme was no longer being applied correctly in some cases.
To address this, styles have been separated and organized to support both the latest Redmine (after Redmine 6.0) and Redmine 6.0.
A new shared style file, _speech_balloon_layout.scss, has been added to support the .journals class introduced in latest Redmine. This style is designed to be reused in Issues, News, and Forums.
For backward compatibility with Redmine 6.0, existing styles are now conditionally applied only when the .journals class is not present.