You've already forked element-web
mirror of
https://github.com/element-hq/element-web.git
synced 2026-10-23 11:09:01 +03:00
4dacb8b4ca
* Align view model with the current EventTileView contract * Use presentation context at every application call for EventTileView * Render EventTileView from UnwrappedEventTile * Remove the legacy styling * Added missing receipt gutter logic * Adding Card as a new shape, used in TimelineCard panel * Added visual tests for the Card story * Migrate EventTile layout styling and enhanced the story book rendering * Migrate preview, notification, thread, and file shapes * Use MemberAvatar and RoomAvatar in storybook * Make slot styling self-contained and clean up corresponding application styling * Clean up action bar styling * Clean up event tile styling overrides * RoomView realted styling fixes * Adjustments for threads list * Adjustments to File view * Adjustments to Card shape * More styling cleanup * Updated Playwright test selectors * Update the story book with more relevant data * Fix oxlint and update story screenshots * Restored conditional notification-badge slot rendering to avoid empty wrappers * Fixed tests and snapshots * Remove the unused UnreadNotificationBadge * Updated snapshots and removed a11y failing story test * Fix test locator hooks * Fixed styling and logic issues in appearance settings * Fixes to slotSender and slotBody placement for group layout * Reorder style sheet for better readability * Fix for spacing between slotSender, slotBody and reply-chain * Fix more Playwright test loacators * Clean up event tile class overrides * Fix the slotBody styling * More clean up of unused locators * Styling fixes * Fixes to test locators and styling for bubble and irc layout * Locator fixes, updated snapshots, layout adjustements * Fix for selected and editing markers and timestamp pos * Styling fixes to bubble layout. Also dismiss releaseAnnouncements * Styling updates and dont wait for release announcements anymore * Styling adjustments * Make the Playwright test wait for UI to settle before taking screenshot. * Updated screenshot - the only difference is scroll pos * Fixing test locators and styling adjustments * Updated the test to reflect ellipsis, hence the screenshot update * More test locators and styling adjustments * Updated snapshots and screenshots * More locator fixes and snapshots * Restore the original screenshot * Added Search result specific styling and make reply chain density aware * Test locators and styling adjustments * More styling fixes * Updated snapshot * oxfmt * Styling adjustment and updated snapshots * Styling adjustement * Restore the font-12px override on thread view ViewSourceEvent * Adjust styles for thread view bubble layout of ViewEventSoucrce * More adjustments * Styling adjustments * Fix the bubble layout thread view event source alignment * Fix the thread view without destroying the room view * Removing !important * Updated snapshots after merge * Put back !important until MemberAvatarView is actually used in event tiles * Updated snapshots * Use hideJumpToBottomButton to avoid flakiness * More hideJumpToBottomButton
107 lines
3.5 KiB
Plaintext
107 lines
3.5 KiB
Plaintext
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
|
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
.mx_LayoutSwitcher_LayoutSelector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/**
|
|
* The settings form has a default gap of 10px
|
|
* We want to have a bigger gap between the layout options
|
|
*/
|
|
gap: var(--cpd-space-4x) !important;
|
|
|
|
.mxLayoutSwitcher_LayoutSelector_LayoutRadio {
|
|
border: 1px solid var(--cpd-color-border-interactive-primary);
|
|
border-radius: var(--cpd-space-2x);
|
|
|
|
.mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
|
|
display: flex;
|
|
/*
|
|
* 10px
|
|
*/
|
|
gap: calc(var(--cpd-space-2x) + var(--cpd-space-0-5x));
|
|
align-items: center;
|
|
}
|
|
|
|
.mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline,
|
|
.mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
|
|
margin: var(--cpd-space-3x);
|
|
}
|
|
|
|
/**
|
|
* Override the event tile style to make it fit in the selector
|
|
* Tweak also hover style and remove action bar
|
|
*/
|
|
.mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
|
|
pointer-events: none;
|
|
|
|
.mx_EventTile {
|
|
margin: 0;
|
|
|
|
/*
|
|
* EventTileView applies the content gutter through this
|
|
* variable on the shell. Keep the preview's content width
|
|
* consistent with the legacy preview override below.
|
|
*/
|
|
--event-tile-content-inline-end: 0;
|
|
|
|
/**
|
|
* Hide the message options and message action bar in the preview
|
|
*/
|
|
.mx_ReadReceiptGroup,
|
|
.mx_MessageActionBar {
|
|
display: none;
|
|
}
|
|
|
|
.mx_EventTile_content {
|
|
margin-right: 0;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
&:has([data-event-layout="group"]) {
|
|
margin-top: calc(var(--cpd-space-3x) * -1);
|
|
}
|
|
|
|
/**
|
|
* Add margin to center the bubble
|
|
*/
|
|
&:has([data-event-layout="bubble"]) {
|
|
/**
|
|
* Add the layout margin and the margin to vertically center the bubble
|
|
*/
|
|
margin-top: var(--cpd-space-6x);
|
|
margin-right: 34px;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
&:has([data-event-layout="irc"]) {
|
|
/*
|
|
* The migrated tile keeps an empty timestamp slot for
|
|
* IRC alignment. The preview must hide that slot as the
|
|
* legacy preview hid its timestamp element.
|
|
*/
|
|
.mx_MessageTimestamp,
|
|
[data-testid="event-tile-slot-timestamp"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mx_EventTile_line {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
|
|
border-top: 0;
|
|
border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
|
|
}
|
|
}
|
|
}
|