Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Manage style rules related to mx_RoomView_body on _RoomView.pcss and mx_MessageComposer on _MessageComposer.pcss #10732

Closed
luixxiul wants to merge 1 commit into from
Closed

Manage style rules related to mx_RoomView_body on _RoomView.pcss and mx_MessageComposer on _MessageComposer.pcss #10732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions res/css/structures/_RoomView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ limitations under the License.

:root {
--RoomView_MessageList-padding: 18px; /* TODO: use a variable */
--RoomView_timeline-width: 100%;
--RoomView_timeline-max-width: 1200px;
--RoomView_timeline-margin: 0 auto;
}

.mx_RoomView_wrapper {
Expand Down Expand Up @@ -111,6 +114,16 @@ limitations under the License.
flex-direction: column;
margin-right: calc(var(--container-gap-width) / 2);
}

&[data-layout="bubble"] {
/* Make widgets and calls span across the whole room width when using bubble layout */
Copy link
Contributor Author

@luixxiul luixxiul Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment was taken from the title of #7553.

.mx_RoomView_timeline,
.mx_RoomView_statusArea {
width: var(--RoomView_timeline-width);
max-width: var(--RoomView_timeline-max-width);
margin: var(--RoomView_timeline-margin);
}
}
}

.mx_RoomView_statusArea {
Expand Down
10 changes: 0 additions & 10 deletions res/css/views/rooms/_EventBubbleTile.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_RoomView_body[data-layout="bubble"] {
.mx_RoomView_timeline,
.mx_RoomView_statusArea,
.mx_MessageComposer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
}

.mx_EventTile[data-layout="bubble"],
.mx_GenericEventListSummary[data-layout="bubble"] {
--avatarSize: 32px;
Expand Down
7 changes: 7 additions & 0 deletions res/css/views/rooms/_MessageComposer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,13 @@ limitations under the License.
}

.mx_MessageComposer {
.mx_RoomView_body[data-layout="bubble"] & {
/* Align with mx_RoomView_timeline and mx_RoomView_statusArea */
width: var(--RoomView_timeline-width);
max-width: var(--RoomView_timeline-max-width);
margin: var(--RoomView_timeline-margin);
}

.mx_MessageComposer_avatar {
position: absolute;
left: 26px;
Expand Down