sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Remove legacy room list (#34040)

Browse Source 
* refactor(room-list): migrate SpaceStore off the legacy room list store

SpaceStore.setActiveRoomInSpace iterated the legacy RoomListStore's
`orderedLists` in `TAG_ORDER`; switch it to the space-aware
RoomListStoreV3.getSortedRoomsInActiveSpace() accessor. This drops the
last non-UI dependency on the legacy store and on `TAG_ORDER` (exported
from LegacyRoomList, deleted next).

* feat(room-list)!: remove the legacy room list UI

Delete the old sublist-based room list and its components now that the
new RoomListPanel is the default. Removed: LegacyRoomList,
LegacyRoomListHeader, RoomSublist, ExtraTile, RoomTile (+ Subtitle/
CallSummary), RoomBreadcrumbs and RoomSearch, plus their styles and
tests.

LeftPanel collapses to the RoomListPanel-only path. The shared
`contextMenuBelow` helper is relocated into RoomResultContextMenus (its
only remaining consumer).

* feat(room-list)!: remove the legacy RoomListStore

The legacy sublist-based room list UI is gone, so the old
`stores/room-list` store (Algorithm, sorters, filters, layout store,
space
watcher) has no remaining consumers. Delete the directory and its tests.

MatrixChat.forgetRoom no longer calls the legacy `manualRoomUpdate`; the
new room list store removes the room on the `AfterForgetRoom` dispatch
that still fires. Drop the `mxRoomListStore`/`mxRoomListLayoutStore`
globals and the now-dead test imports.

* feat(room-list)!: remove the feature_new_room_list labs flag

The new room list is now the only room list, so remove the
feature_new_room_list labs flag and make its enabled behaviour
unconditional everywhere it was gated:

- LoggedInView: always use the resizable layout and
NEW_ROOM_LIST_MIN_WIDTH;
  drop the collapsible/minimized legacy path.
- SpaceStore: People and Favourites are dropped from metaSpaceOrder (per
the
  long-standing TODO on the removed accessor).
- MessagePreviewStore: stop appending thread replies to previews.
- Settings, SidebarUserSettingsTab, PreferencesUserSettingsTab,
  QuickSettingsButton, SpacePanel, LandmarkNavigation: drop the flag
reads and
  legacy branches.

Update the tests that toggled the flag; the People/Favourites meta space
tests covered behaviour that the flag (default on) already disabled.

* feat(room-list)!: remove the dead legacy left-panel resizer

LoggedInView still built the old `Resizer`/`CollapseDistributor` over an
`lp-resizer` ResizeHandle and persisted `mx_lhs_size`. That handle is no
longer rendered (the resizable layout is now driven by
LeftResizablePanelView + ResizerViewModel, which persists its own state
via RoomList.panelSize/RoomList.isPanelCollapsed), so the old resizer
was
inert dead code left over from the legacy room list.

Remove createResizer/loadResizer/loadResizerPreferences, the
_resizeContainer/resizeHandler refs, the ResizeHandle render, the
mx_lhs_size handling and NEW_ROOM_LIST_MIN_WIDTH, plus the unit tests
that
exercised the mocked resizer.

* feat(room-list)!: update i18n files

* refactor(room-list): remove the now-unused collapseLhs state

`collapseLhs` is write-only since the left panel no longer collapses: it
was last read by LoggedInView's `shouldUseMinimizedUI`, removed with the
feature_new_room_list flag. Drop it from MatrixChat's IState (and its
assignments), collapsing the hide/show_left_panel handlers to just the
`notifyLeftHandleResized()` call they still need, and from
LoggedInView's
IProps and the test props.

* fix(room-list): instantiate message previewers lazily

Removing the unused SettingsStore import from MessagePreviewStore (when
the
feature_new_room_list flag was dropped) changed module load order and
exposed a latent circular dependency: ReactionEventPreview imports
MessagePreviewStore, which eagerly did `new ReactionEventPreview()` at
module-eval — so importing ReactionEventPreview first (as its unit test
does) hit "ReactionEventPreview is not a constructor".

Construct the previewers lazily on first use (cached) instead of at
module
load, so nothing dereferences a mid-evaluation module. Fixes
ReactionEventPreview-test.

* test(room-list): remove `feature_new_room_list` labs flag in e2e tests

* chore: remove remaining `newRoomList` flag

* chore: cleanup theme files

* fix: restore the re-resizable TouchEvent polyfill

* chore: remove usage of breadcrumbs settings in BreadcrumbStore

* Revert "fix(room-list): instantiate message previewers lazily"

This reverts commit 4e6eedfff0449c68a96c0470a4eb425b5aec5512.

* chore: remove unused function in BreadCrumbStore

* test: remove unused fuction of BreadcrumStore in tests

* test: add tests for RoomResultContextMenu
This commit is contained in:
Florian Duros
2026-07-02 09:07:37 +00:00
committed by GitHub
parent 522ec3aa57
commit b68ecdb860
103 changed files with 91 additions and 11086 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/_components.pcss
-7
View File
@@ -56,7 +56,6 @@
@import "./compound/_SuccessDialog.pcss";
@import "./structures/_AutoHideScrollbar.pcss";
@import "./structures/_AutocompleteInput.pcss";
@import "./structures/_BackdropPanel.pcss";
@import "./structures/_CompatibilityPage.pcss";
@import "./structures/_ContextualMenu.pcss";
@import "./structures/_ErrorMessage.pcss";
@@ -72,7 +71,6 @@
@import "./structures/_PictureInPictureDragger.pcss";
@import "./structures/_QuickSettingsButton.pcss";
@import "./structures/_RightPanel.pcss";
@import "./structures/_RoomSearch.pcss";
@import "./structures/_RoomView.pcss";
@import "./structures/_SearchBox.pcss";
@import "./structures/_SpaceHierarchy.pcss";
@@ -259,8 +257,6 @@
@import "./views/rooms/_IRCLayout.pcss";
@import "./views/rooms/_InvitedIconView.pcss";
@import "./views/rooms/_JumpToBottomButton.pcss";
@import "./views/rooms/_LegacyRoomList.pcss";
@import "./views/rooms/_LegacyRoomListHeader.pcss";
@import "./views/rooms/_LiveContentSummary.pcss";
@import "./views/rooms/_MemberListHeaderView.pcss";
@import "./views/rooms/_MemberListView.pcss";
@@ -277,15 +273,12 @@
@import "./views/rooms/_ReadReceiptGroup.pcss";
@import "./views/rooms/_ReplyPreview.pcss";
@import "./views/rooms/_ReplyTile.pcss";
@import "./views/rooms/_RoomBreadcrumbs.pcss";
@import "./views/rooms/_RoomHeader.pcss";
@import "./views/rooms/_RoomInfoLine.pcss";
@import "./views/rooms/_RoomKnocksBar.pcss";
@import "./views/rooms/_RoomPreviewBar.pcss";
@import "./views/rooms/_RoomPreviewCard.pcss";
@import "./views/rooms/_RoomSearchAuxPanel.pcss";
@import "./views/rooms/_RoomSublist.pcss";
@import "./views/rooms/_RoomTile.pcss";
@import "./views/rooms/_RoomUpgradeWarningBar.pcss";
@import "./views/rooms/_SendMessageComposer.pcss";
@import "./views/rooms/_Stickers.pcss";
apps/web/res/css/structures/_BackdropPanel.pcss
-29
View File
@@ -1,29 +0,0 @@
/*
Copyright 2021-2024 New Vector Ltd.
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_BackdropPanel {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
filter: blur(var(--lp-background-blur));
/* Force a new layer for the backdropPanel so it's better hardware supported */
transform: translateZ(0);
}
.mx_BackdropPanel--image {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
user-select: none;
}
apps/web/res/css/structures/_LeftPanel.pcss
+4 -139
View File
@@ -43,7 +43,6 @@ Please see LICENSE files in the repository root for full details.
height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
.mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color;
display: flex;
overflow: hidden;
position: relative;
@@ -57,7 +56,10 @@ Please see LICENSE files in the repository root for full details.
}
.mx_LeftPanel {
background-color: $roomlist-bg-color;
background-color: var(--cpd-color-bg-canvas-default);
/* The room list is not designed to be collapsed to just icons. */
/* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
--collapsedWidth: 224px;
/* Create a row-based flexbox for the space panel and the room list */
display: flex;
@@ -66,119 +68,12 @@ Please see LICENSE files in the repository root for full details.
flex-grow: 1;
overflow: hidden;
/* Note: The 'room list' in this context is actually everything that isn't the tag */
/* panel, such as the menu options, breadcrumbs, filtering, etc */
.mx_LeftPanel_roomListContainer {
background-color: $roomlist-bg-color;
flex: 1 0 0;
min-width: 0;
/* Create another flexbox (this time a column) for the room list components */
display: flex;
flex-direction: column;
.mx_LeftPanel_userHeader {
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
* for internal whitespace in the breadcrumbs)
*/
padding: 12px;
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
/* Create another flexbox column for the rows to stack within */
display: flex;
flex-direction: column;
}
.mx_LeftPanel_breadcrumbsContainer {
overflow-y: hidden;
overflow-x: scroll;
margin: 12px 12px 0 12px;
flex: 0 0 auto;
/* Create yet another flexbox, this time within the row, to ensure items stay */
/* aligned correctly. This is also a row-based flexbox. */
display: flex;
align-items: center;
contain: content;
&.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%);
}
&.mx_IndicatorScrollbar_rightOverflow {
mask-image: linear-gradient(90deg, black, black 95%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
}
.mx_LeftPanel_filterContainer {
margin: 0 12px;
padding: 12px 0 8px;
border-bottom: 1px solid $quinary-content;
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
/* Create a flexbox to organize the inputs */
display: flex;
align-items: center;
& + .mx_LegacyRoomListHeader {
margin-top: 12px;
}
.mx_LeftPanel_dialPadButton,
.mx_LeftPanel_exploreButton {
width: 20px;
height: 20px;
padding: var(--cpd-space-1-5x);
border-radius: 8px;
background-color: $panel-actions;
margin-left: 8px;
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
svg {
width: inherit;
height: inherit;
display: block;
color: $secondary-content;
}
&:hover {
background-color: $tertiary-content;
svg {
color: $background;
}
}
}
}
.mx_LegacyRoomListHeader:first-child {
margin-top: 12px;
}
.mx_LeftPanel_roomListWrapper {
/* Make the y-scrollbar more responsive */
padding-right: 2px;
overflow: hidden;
margin-top: 10px; /* so we're not up against the search/filter */
flex: 1 0 0; /* needed in Safari to properly set flex-basis */
&.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px;
}
&.mx_LeftPanel_roomListWrapper_stickyTop {
padding-top: 32px;
}
}
.mx_LeftPanel_actualRoomListContainer {
position: relative; /* for sticky headers */
height: 100%; /* ensure scrolling still works */
}
}
/* These styles override the defaults for the minimized (66px) layout */
@@ -189,40 +84,10 @@ Please see LICENSE files in the repository root for full details.
.mx_LeftPanel_roomListContainer {
width: var(--collapsedWidth);
.mx_LeftPanel_userHeader {
flex-direction: row;
justify-content: center;
}
.mx_LeftPanel_filterContainer {
/* Organize the flexbox into a centered column layout */
flex-direction: column;
justify-content: center;
.mx_LeftPanel_dialPadButton {
margin-left: 0;
margin-top: 8px;
background-color: transparent;
}
.mx_LeftPanel_exploreButton {
margin-left: 0;
margin-top: 8px;
}
}
}
}
}
.mx_LeftPanel_newRoomList {
/* Thew new rooms list is not designed to be collapsed to just icons. */
/* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
--collapsedWidth: 224px;
/* Important to force the color on ED titlebar until we remove the old room list */
background-color: var(--cpd-color-bg-canvas-default) !important;
}
#left-panel .mx_LeftPanel_wrapper--user {
/*
* Disable background when using the new room list.
apps/web/res/css/structures/_QuickSettingsButton.pcss
-2
View File
@@ -110,9 +110,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
}
}
}
.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
.mx_QuickThemeSwitcher {
margin-top: var(--cpd-space-2x);
}
apps/web/res/css/structures/_RoomSearch.pcss
-93
View File
@@ -1,93 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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.
*/
/* Note: this component expects to be contained within a flexbox */
.mx_RoomSearch {
flex: 1;
min-width: 0;
border-radius: 8px;
background-color: $panel-actions;
/* keep border thickness consistent to prevent movement */
border: 1px solid transparent;
height: 28px;
padding: 1px;
/* Create a flexbox for the icons (easier to manage) */
display: flex;
align-items: center;
cursor: pointer;
.mx_RoomSearch_icon {
width: 20px;
height: 20px;
color: $secondary-content;
margin-left: var(--cpd-space-2x);
flex-shrink: 0;
}
.mx_RoomSearch_spotlightTriggerText {
color: var(--cpd-color-text-secondary);
flex: 1;
min-width: 0;
/* the following rules are to match that of a real input field */
overflow: hidden;
margin: 9px;
font: var(--cpd-font-body-sm-semibold);
}
.mx_RoomSearch_shortcutPrompt {
border-radius: 6px;
background-color: $panel-actions;
padding: 2px 4px;
user-select: none;
font-size: $font-12px;
line-height: $font-15px;
font-family: inherit;
font-weight: var(--cpd-font-weight-semibold);
color: $light-fg-color;
margin-right: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.mx_RoomSearch_minimized {
height: 32px;
min-height: 32px;
width: 32px;
box-sizing: border-box;
.mx_RoomSearch_icon {
margin: 0 auto;
padding: 1px;
align-self: center;
}
.mx_RoomSearch_shortcutPrompt {
display: none;
}
}
&:hover {
background-color: $tertiary-content;
.mx_RoomSearch_spotlightTriggerText {
color: $background;
}
.mx_RoomSearch_shortcutPrompt {
background-color: $background;
color: $secondary-content;
}
.mx_RoomSearch_icon {
color: $background;
}
}
}
apps/web/res/css/structures/_SpacePanel.pcss
+2 -6
View File
@@ -14,7 +14,8 @@ Please see LICENSE files in the repository root for full details.
--height-nested: 24px;
--height-topLevel: 32px;
background-color: $spacePanel-bg-color;
background-color: var(--cpd-color-bg-canvas-default);
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
flex: 0 0 auto;
padding: 0;
margin: 0;
@@ -33,11 +34,6 @@ Please see LICENSE files in the repository root for full details.
width: 68px;
}
&.newUi {
background-color: var(--cpd-color-bg-canvas-default);
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
}
.mx_SpacePanel_toggleCollapse {
position: absolute;
width: 18px;
apps/web/res/css/views/rooms/_LegacyRoomList.pcss
-11
View File
@@ -1,11 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_LegacyRoomList {
padding-right: 7px; /* width of the scrollbar, to line things up */
}
apps/web/res/css/views/rooms/_LegacyRoomListHeader.pcss
-75
View File
@@ -1,75 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 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_LegacyRoomListHeader {
display: flex;
align-items: center;
.mx_LegacyRoomListHeader_contextLessTitle,
.mx_LegacyRoomListHeader_contextMenuButton {
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
padding: 1px 24px 1px 4px;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 8px;
margin-right: auto;
user-select: none;
}
.mx_LegacyRoomListHeader_contextMenuButton {
border-radius: 6px;
&:hover {
background-color: $quinary-content;
}
svg {
width: 20px;
height: 20px;
top: 3px;
right: 0;
position: absolute;
color: $tertiary-content;
}
&[aria-expanded="true"] {
background-color: $quinary-content;
}
}
.mx_LegacyRoomListHeader_plusButton {
width: 32px;
height: 32px;
border-radius: 8px;
position: relative;
padding: 8px;
margin-left: 8px;
margin-right: 12px;
background-color: $panel-actions;
box-sizing: border-box;
flex-shrink: 0;
svg {
width: 16px;
height: 16px;
position: absolute;
color: $secondary-content;
}
&:hover {
background-color: $tertiary-content;
svg {
color: $background;
}
}
}
}
apps/web/res/css/views/rooms/_NotificationBadge.pcss
+1 -1
View File
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
/* ^- The count is an element floating within that. */
&.mx_NotificationBadge_visible {
background-color: $roomtile-default-badge-bg-color;
background-color: var(--cpd-color-icon-secondary);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
apps/web/res/css/views/rooms/_RoomBreadcrumbs.pcss
-43
View File
@@ -1,43 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_RoomBreadcrumbs {
width: 100%;
/* Create a flexbox for the crumbs */
display: flex;
flex-direction: row;
align-items: flex-start;
margin-bottom: 12px;
.mx_RoomBreadcrumbs_crumb {
margin-right: 8px;
width: 32px;
}
/* These classes come from the CSSTransition component. There's many more classes we */
/* could care about, but this is all we worried about for now. The animation works by */
/* first triggering the enter state with the newest breadcrumb off screen (-40px) then */
/* sliding it into view. */
&.mx_RoomBreadcrumbs-enter {
transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
}
&.mx_RoomBreadcrumbs-enter-active {
transform: translateX(0);
/* Timing function is as-requested by design. */
/* NOTE: The transition time MUST match the value passed to CSSTransition! */
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
.mx_RoomBreadcrumbs_placeholder {
font: var(--cpd-font-body-md-semibold);
line-height: 32px; /* specifically to match the height this is not scaled */
height: 32px;
}
}
apps/web/res/css/views/rooms/_RoomSublist.pcss
-389
View File
@@ -1,389 +0,0 @@
/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2020 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_RoomSublist {
margin-left: 8px;
margin-bottom: 4px;
&.mx_RoomSublist_hidden {
display: none;
}
&:not(.mx_RoomSublist_minimized) {
.mx_RoomSublist_headerContainer {
height: auto;
}
}
.mx_RoomSublist_headerContainer {
/* Create a flexbox to make alignment easy */
display: flex;
align-items: center;
/* *************************** */
/* Sticky Headers Start */
/* Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the */
/* headerContainer, however due to our layout concerns we actually have to */
/* calculate it manually so we can sticky things in the right places. We also */
/* target the headerText instead of the container to reduce jumps when scrolling, */
/* and to help hide the badges/other buttons that could appear on hover. This */
/* all works by ensuring the header text has a fixed height when sticky so the */
/* fixed height of the container can maintain the scroll position. */
/* The combined height must be set in the LeftPanel component for sticky headers */
/* to work correctly. */
padding-bottom: 8px;
height: 24px;
color: $secondary-content;
.mx_RoomSublist_stickableContainer {
width: 100%;
}
.mx_RoomSublist_stickable {
flex: 1;
max-width: 100%;
/* Create a flexbox to make ordering easy */
display: flex;
align-items: center;
/* We use a generic sticky class for 2 reasons: to reduce style duplication and */
/* to identify when a header is sticky. If we didn't have a consistent sticky class, */
/* we'd have to do the "is sticky" checks again on click, as clicking the header */
/* when sticky scrolls instead of collapses the list. */
&.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px; /* to match the header container */
/* width set by JS because of a compat issue between Firefox and Chrome */
width: calc(100% - 15px);
}
/* We don't have a top style because the top is dependent on the room list header's */
/* height, and is therefore calculated in JS. */
/* The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. */
}
/* Sticky Headers End */
/* *************************** */
.mx_RoomSublist_badgeContainer {
/* Create another flexbox row because it's super easy to position the badge this way. */
display: flex;
align-items: center;
justify-content: center;
/* Apply the width and margin to the badge so the container doesn't occupy dead space */
.mx_NotificationBadge {
/* Do not set a width so the badges get properly sized */
margin-left: 8px; /* same as menu+aux buttons */
}
}
&:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_NotificationBadge {
margin-right: 4px; /* just to push it over a bit, aligning it with the other elements */
}
}
.mx_RoomSublist_auxButton,
.mx_RoomSublist_menuButton {
margin-left: 8px; /* should be the same as the notification badge */
position: relative;
width: 24px;
height: 24px;
border-radius: 8px;
svg {
width: 16px;
height: 16px;
position: absolute;
top: 4px;
left: 4px;
color: var(--cpd-color-icon-secondary);
}
}
.mx_RoomSublist_auxButton:hover svg,
.mx_RoomSublist_menuButton:hover svg {
color: $panel-actions;
}
/* Hide the menu button by default */
.mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
.mx_RoomSublist_headerText {
flex: 1;
max-width: calc(100% - 16px); /* 16px is the badge width */
font: var(--cpd-font-body-sm-semibold);
/* Ellipsize any text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.mx_RoomSublist_collapseBtn {
display: inline-block;
position: relative;
width: 14px;
height: 14px;
margin-right: 6px;
svg {
width: 18px;
height: 18px;
position: absolute;
color: var(--cpd-color-icon-secondary);
}
}
}
}
/* In the general case, we reserve space for each sublist header to prevent */
/* scroll jumps when they become sticky. However, that leaves a gap when */
/* scrolled to the top above the first sublist (whose header can only ever */
/* stick to top), so we make sure to exclude the first visible sublist. */
&:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
height: 24px;
}
.mx_RoomSublist_resizeBox {
position: relative;
/* Create another flexbox column for the tiles */
display: flex;
flex-direction: column;
overflow: hidden;
.mx_RoomSublist_tiles {
flex: 1 0 0;
overflow: hidden;
overflow: clip;
/* need this to be flex otherwise the overflow hidden from above */
/* sometimes vertically centers the clipped list ... no idea why it would do this */
/* as the box model should be top aligned. Happens in both FF and Chromium */
display: flex;
flex-direction: column;
align-self: stretch;
/* without this Firefox will prefer pushing the resizer & show more/less button into the overflow */
min-height: 0;
mask-image: linear-gradient(0deg, transparent, black 4px);
}
&.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
/* in this state the div can collapse its height entirely in Chromium, */
/* so prevent that by allowing overflow */
overflow: visible;
/* clear the min-height to make it not collapse entirely in a state with no active resizer */
min-height: unset;
}
.mx_RoomSublist_resizerHandles_showNButton {
flex: 0 0 32px;
}
.mx_RoomSublist_resizerHandles {
flex: 0 0 4px;
display: flex;
justify-content: center;
width: 100%;
}
/* Class name comes from the ResizableBox component */
/* The hover state needs to use the whole sublist, not just the resizable box, */
/* so that selector is below and one level higher. */
.mx_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
/* Override styles from library */
max-width: 64px;
height: 4px !important; /* Update RESIZE_HANDLE_HEIGHT if this changes */
/* This is positioned directly below the 'show more' button. */
position: relative !important;
bottom: 0 !important; /* override from library */
}
&:hover,
&.mx_RoomSublist_hasMenuOpen {
.mx_RoomSublist_resizerHandle {
opacity: 0.8;
background-color: $primary-content;
}
}
}
.mx_RoomSublist_showNButton {
cursor: pointer;
font-size: $font-13px;
line-height: $font-18px;
color: $secondary-content;
/* Update the render() function for RoomSublist if these change */
/* Update the ListLayout class for minVisibleTiles if these change. */
height: 24px;
padding-bottom: 4px;
/* We create a flexbox to cheat at alignment */
display: flex;
align-items: center;
.mx_RoomSublist_showNButtonChevron {
position: relative;
width: 18px;
height: 18px;
margin-left: 12px;
margin-right: 16px;
color: $tertiary-content;
left: -1px; /* adjust for image position */
}
}
&.mx_RoomSublist_hasMenuOpen,
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
.mx_RoomSublist_menuButton {
visibility: visible;
width: 24px;
margin-left: 8px;
}
}
&.mx_RoomSublist_minimized {
.mx_RoomSublist_headerContainer {
height: auto;
flex-direction: column;
position: relative;
.mx_RoomSublist_badgeContainer {
order: 0;
align-self: flex-end;
margin-right: 0;
}
.mx_RoomSublist_stickable {
order: 1;
max-width: 100%;
}
.mx_RoomSublist_auxButton {
order: 2;
visibility: visible;
width: 32px !important; /* !important to override hover styles */
height: 32px !important; /* !important to override hover styles */
margin-left: 0 !important; /* !important to override hover styles */
background-color: $panel-actions;
margin-top: 8px;
svg {
top: 8px;
left: 8px;
}
}
}
.mx_RoomSublist_resizeBox {
align-items: center;
}
.mx_RoomSublist_showNButton {
flex-direction: column;
.mx_RoomSublist_showNButtonChevron {
margin-right: 12px; /* to center */
}
}
.mx_RoomSublist_menuButton {
height: 16px;
}
&.mx_RoomSublist_hasMenuOpen,
& > .mx_RoomSublist_headerContainer:hover {
.mx_RoomSublist_menuButton {
visibility: visible;
position: absolute;
bottom: 48px; /* align to middle of name, 40px for aux button (with padding) and 8px for alignment */
right: 0;
width: 16px;
height: 16px;
border-radius: 0;
z-index: 1; /* occlude the list name */
/* This is the same color as the left panel background because it needs */
/* to occlude the sublist title */
background-color: $roomlist-bg-color;
svg {
top: 0;
left: 0;
}
}
&.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_RoomSublist_menuButton {
bottom: 8px; /* align to the middle of name, 40px less than the `bottom` above. */
}
}
}
}
}
.mx_RoomSublist_contextMenu {
padding: 20px 16px;
width: 250px;
hr {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; /* additional 16px */
border: 1px solid $primary-content;
opacity: 0.1;
}
.mx_RoomSublist_contextMenu_title {
font-size: $font-15px;
line-height: $font-20px;
font-weight: var(--cpd-font-weight-semibold);
margin-bottom: 4px;
}
.mx_StyledRadioButton {
margin-top: 8px;
}
}
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 240px;
&::before {
background-color: var(--cpd-color-bg-subtle-secondary);
width: 100%;
height: 100%;
content: "";
position: absolute;
mask-repeat: repeat-y;
mask-size: auto 48px;
mask-image: url("/res/img/element-icons/roomlist/skeleton-ui.svg");
}
}
.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
width: 32px; /* cut off the horizontal lines in the svg */
margin-left: 10px; /* align with sublist + buttons */
}
apps/web/res/css/views/rooms/_RoomTile.pcss
-158
View File
@@ -1,158 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020-2023 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.
*/
/* Note: the room tile expects to be in a flexbox column container */
.mx_RoomTile {
margin-bottom: 4px;
padding: 4px;
/* The tile is also a flexbox row itself */
display: flex;
contain: content; /* Not strict as it will break when resizing a sublist vertically */
box-sizing: border-box;
font-size: var(--cpd-font-size-body-sm);
&.mx_RoomTile_selected,
&:hover,
&:focus-within,
&.mx_RoomTile_hasMenuOpen {
background-color: $panel-actions;
border-radius: 8px;
}
.mx_DecoratedRoomAvatar,
.mx_RoomTile_avatarContainer {
margin-right: 10px;
}
.mx_RoomTile_details {
min-width: 0;
}
.mx_RoomTile_titleContainer {
height: 32px;
min-width: 0;
flex-basis: 0;
flex-grow: 1;
margin-right: 8px; /* spacing to buttons/badges */
/* Create a new column layout flexbox for the title parts */
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_subtitle {
align-items: center;
color: $secondary-content;
display: flex;
gap: $spacing-4;
line-height: 1.25;
position: relative;
top: -1px;
}
.mx_RoomTile_title,
.mx_RoomTile_subtitle_text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_RoomTile_title {
font: var(--cpd-font-body-md-regular);
line-height: 1.25;
&.mx_RoomTile_titleHasUnreadEvents {
font-weight: var(--cpd-font-weight-semibold);
}
}
.mx_RoomTile_titleWithSubtitle {
margin-top: -2px; /* shift the title up a bit more */
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; /* spacing between buttons */
}
.mx_RoomTile_badgeContainer {
height: 16px;
/* don't set width so that it takes no space when there is no badge to show */
margin: auto 0; /* vertically align */
/* Create a flexbox to make aligning dot badges easier */
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; /* centering */
}
.mx_NotificationBadge_dot {
/* make the smaller dot occupy the same width for centering */
margin-left: 5px;
margin-right: 7px;
}
}
/* The context menu buttons are hidden by default */
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 16px;
height: 16px;
padding: var(--cpd-space-0-5x);
flex-shrink: 0;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
svg {
width: inherit;
height: inherit;
display: block;
color: var(--cpd-color-icon-primary);
}
}
/* If the room has an overriden notification setting then we always show the notifications menu button */
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
&:hover,
&:focus-within,
&.mx_RoomTile_hasMenuOpen {
/* Hide the badge container on hover because it'll be a menu button */
.mx_RoomTile_badgeContainer {
width: 0;
height: 0;
display: none;
}
.mx_RoomTile_notificationsButton,
.mx_RoomTile_menuButton {
display: block;
}
}
}
&.mx_RoomTile_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_DecoratedRoomAvatar,
.mx_RoomTile_avatarContainer {
margin-right: 0;
}
}
}
apps/web/res/themes/dark/css/_dark.pcss
+1 -14
View File
@@ -15,16 +15,10 @@ $panels: var(--cpd-color-bg-subtle-secondary);
$panel-actions: var(--cpd-color-alpha-gray-300);
$separator: var(--cpd-color-gray-400);
$system: var(--cpd-color-bg-subtle-secondary);
/* ******************** */
/* RoomList */
/* ******************** */
$roomlist-bg-color: rgba(38, 40, 45, 0.9);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/**
* Creating a `semantic` color scale. This will not be needed with the new
* visual language, but necessary during the transition period
@@ -147,13 +141,6 @@ $dialog-close-fg-color: $icon-button-color;
$dialog-close-external-color: $primary-content;
/* ******************** */
/* RoomList */
/* ******************** */
$system: var(--cpd-color-bg-subtle-secondary);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/* Tabbed views */
/* ******************** */
$tab-label-fg-color: $secondary-content;
apps/web/res/themes/legacy-dark/css/_legacy-dark.pcss
+1 -7
View File
@@ -103,7 +103,7 @@ $background: $primary-bg-color;
$overlay-background: rgba($background, 0.85);
$panels: rgba($system, 0.9);
$panel-actions: $roomtile-selected-bg-color;
$panel-actions: #1a1d23;
$separator: var(--cpd-color-gray-400);
@@ -148,16 +148,10 @@ $call-background: $background;
$call-primary-content: $primary-content;
$call-light-quaternary-content: #c1c6cd;
$roomlist-filter-active-bg-color: $panel-actions;
$roomlist-bg-color: rgba(38, 40, 45, 0.9);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$spacePanel-divider-color: $tertiary-content;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #1a1d23;
/* ******************** */
$widget-menu-bar-bg-color: $header-panel-bg-color;
apps/web/res/themes/legacy-light/css/_legacy-light.pcss
+1 -10
View File
@@ -138,9 +138,6 @@ $room-icon-unread-color: var(--cpd-color-icon-tertiary);
/* ******************** */
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #fff;
$presence-away: #d9b072;
$presence-offline: #e3e8f0;
$presence-busy: #ff5b55;
@@ -161,19 +158,13 @@ $background: $primary-bg-color;
$overlay-background: rgba($background, 0.85);
$panels: rgba($system, 0.9);
$panel-actions: $roomtile-selected-bg-color;
$panel-actions: #fff;
$separator: var(--cpd-color-gray-400);
/* Legacy theme backports */
/* ******************** */
$roomlist-filter-active-bg-color: $panel-actions;
$roomlist-bg-color: rgba(245, 245, 245, 0.9);
$roomlist-header-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$voipcall-plinth-color: $system;
$call-view-button-on-foreground: $secondary-content;
apps/web/res/themes/light-custom/css/_custom.pcss
-2
View File
@@ -69,8 +69,6 @@ $dialog-title-fg-color: var(--timeline-text-color);
$authpage-lang-color: var(--timeline-text-color);
/* was #232f32 */
$authpage-primary-color: var(--timeline-text-color);
/* --roomlist-text-secondary-color */
$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
/* --roomlist-separator-color */
$input-darker-bg-color: var(--roomlist-separator-color);
apps/web/res/themes/light/css/_light.pcss
+1 -8
View File
@@ -204,13 +204,6 @@ $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
$imagebody-giflabel-color: $accent-fg-color;
/* ******************** */
/* RoomList */
/* ******************** */
$roomlist-bg-color: rgba(245, 245, 245, 0.9);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/* e2e */
/* ******************** */
$e2e-verified-color: var(--cpd-color-icon-success-primary);
@@ -244,7 +237,7 @@ $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
/* ******************** */
$authpage-primary-color: #232f32;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: $roomlist-bg-color;
$authpage-modal-bg-color: rgb(245, 245, 245, 0.9);
/* background colour of the modal, when the background is blurred */
$authpage-modal-content-with-blur-bg-color: rgb(255, 255, 255, 0.59);
$authpage-focus-bg-color: $focus-bg-color;