nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'github.com/develop' into develop
Some checks failed
Localazy Upload / upload (push) Failing after 0s
Details
Static Analysis / i18n Check (push) Failing after 0s
Details
Docker / Docker Buildx (push) Has been cancelled
Details
Build / Build on macos-14 (push) Has been cancelled
Details
Build / Build on ubuntu-24.04 (push) Has been cancelled
Details
Build / Build on windows-2022 (push) Has been cancelled
Details
Build and Deploy develop / Build & Deploy develop.element.io (push) Has been cancelled
Details
Deploy documentation / GitHub Pages (push) Has been cancelled
Details
Static Analysis / Typescript Syntax Check (push) Has been cancelled
Details
Static Analysis / Rethemendex Check (push) Has been cancelled
Details
Static Analysis / ESLint (push) Has been cancelled
Details
Static Analysis / Style Lint (push) Has been cancelled
Details
Static Analysis / Workflow Lint (push) Has been cancelled
Details
Static Analysis / Analyse Dead Code (push) Has been cancelled
Details
Deploy documentation / deploy (push) Has been cancelled
Details
Close stale issues & PRs / close (push) Has been cancelled
Details
Update Playwright docker images / update (push) Has been cancelled
Details
Update Jitsi / update (push) Has been cancelled
Details
Sync labels / sync-labels (push) Failing after 1s
Details
Localazy Download / download (push) Failing after 1s
Details

Browse Source 
# Conflicts:
#	package.json
#	src/components/views/rooms/EventTile.tsx
#	yarn.lock
This commit is contained in:
Nik Rozman
2025-06-01 20:28:25 +02:00
parent 2c42e95265 6bc117993d
commit 12bd062971
472 changed files with 13046 additions and 7390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
res/apple-app-site-association
View File

@@ -5,8 +5,7 @@
"appIDs": [
"7J4U792NQT.im.vector.app",
"7J4U792NQT.io.element.elementx",
"7J4U792NQT.io.element.elementx.nightly",
"7J4U792NQT.io.element.elementx.pr"
"7J4U792NQT.io.element.elementx.nightly"
],
"components": [
{
@@ -28,8 +27,7 @@
"apps": [
"7J4U792NQT.im.vector.app",
"7J4U792NQT.io.element.elementx",
"7J4U792NQT.io.element.elementx.nightly",
"7J4U792NQT.io.element.elementx.pr"
"7J4U792NQT.io.element.elementx.nightly"
]
}
}

2
res/css/_common.pcss
View File

@@ -593,6 +593,7 @@ legend {
.mx_Dialog
button:not(
.mx_EncryptionUserSettingsTab button,
.mx_EncryptionCard button,
.mx_UserProfileSettings button,
.mx_ShareDialog button,
.mx_UnpinAllDialog button,
@@ -600,6 +601,7 @@ legend {
.mx_Dialog_nonDialogButton,
.mx_AccessibleButton,
.mx_IdentityServerPicker button,
.mx_AccessSecretStorageDialog button,
[class|="maplibregl"]
),
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),

4
res/css/_components.pcss
View File

@@ -131,6 +131,7 @@
@import "./views/dialogs/_BugReportDialog.pcss";
@import "./views/dialogs/_ChangelogDialog.pcss";
@import "./views/dialogs/_CompoundDialog.pcss";
@import "./views/dialogs/_ConfirmKeyStorageOffDialog.pcss";
@import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
@import "./views/dialogs/_ConfirmUserActionDialog.pcss";
@import "./views/dialogs/_CreateRoomDialog.pcss";
@@ -280,6 +281,8 @@
@import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
@import "./views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss";
@import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";
@import "./views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss";
@import "./views/rooms/RoomListPanel/_RoomListSkeleton.pcss";
@import "./views/rooms/_AppsDrawer.pcss";
@import "./views/rooms/_Autocomplete.pcss";
@import "./views/rooms/_AuxPanel.pcss";
@@ -379,6 +382,7 @@
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_MediaPreviewAccountSettings.pcss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";

6
res/css/structures/_LeftPanel.pcss
View File

@@ -28,6 +28,12 @@ Please see LICENSE files in the repository root for full details.
--collapsedWidth: 68px;
}
.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;
}
.mx_LeftPanel_wrapper {
display: flex;
flex-direction: row;

10
res/css/structures/_SpacePanel.pcss
View File

@@ -30,6 +30,11 @@ 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;
@@ -399,6 +404,11 @@ Please see LICENSE files in the repository root for full details.
display: block;
}
}
&.newUi .mx_UserMenu {
margin-top: var(--cpd-space-4x);
border-bottom: none;
}
}
.mx_SpacePanel_contextMenu {

5
res/css/structures/_ToastContainer.pcss
View File

@@ -79,6 +79,11 @@ Please see LICENSE files in the repository root for full details.
background-color: $primary-content;
}
&.mx_Toast_icon_key_storage::after {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
background-color: $primary-content;
}
&.mx_Toast_icon_labs::after {
mask-image: url("$(res)/img/element-icons/flask.svg");
background-color: $secondary-content;

16
res/css/views/dialogs/_ConfirmKeyStorageOffDialog.pcss Normal file
View File

@@ -0,0 +1,16 @@
/*
Copyright 2025 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_ConfirmKeyStorageOffDialog {
.mx_Dialog_border {
width: 600px;
}
.mx_EncryptionCard {
text-align: center;
}
}

19
res/css/views/dialogs/_SpotlightDialog.pcss
View File

@@ -412,7 +412,8 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_joinRoomAlias,
.mx_SpotlightDialog_explorePublicRooms,
.mx_SpotlightDialog_explorePublicSpaces,
.mx_SpotlightDialog_startGroupChat {
.mx_SpotlightDialog_startGroupChat,
.mx_SpotlightDialog_searchMessages {
padding-left: $spacing-32;
position: relative;
@@ -451,22 +452,14 @@ Please see LICENSE files in the repository root for full details.
mask-image: url("$(res)/img/element-icons/group-members.svg");
}
.mx_SpotlightDialog_searchMessages::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}
.mx_SpotlightDialog_otherSearches_messageSearchText {
font-size: $font-15px;
line-height: $font-24px;
}
.mx_SpotlightDialog_otherSearches_messageSearchIcon {
display: inline-block;
width: 24px;
height: 24px;
background-color: $secondary-content;
vertical-align: text-bottom;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}
}
.mx_SpotlightDialog_result_details {

110
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View File

@@ -7,62 +7,14 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_AccessSecretStorageDialog {
.mx_AccessSecretStorageDialog_titleWithIcon {
&::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-inline-end: $spacing-8;
position: relative;
top: 5px;
background-color: $primary-content;
}
&.mx_AccessSecretStorageDialog_resetBadge::before {
/* The image isn't capable of masking, so we use a background instead. */
background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-size: 24px;
background-color: transparent;
}
&.mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
}
&.mx_AccessSecretStorageDialog_securePhraseTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
}
&.mx_EncryptionCard {
/* override some styles that we don't need */
border: 0px none;
box-shadow: none;
padding: 0px;
}
.mx_AccessSecretStorageDialog_primaryContainer {
.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid $accent;
border-radius: 5px;
}
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: flex;
align-items: center;
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
flex-grow: 1;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: $spacing-16;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
@@ -76,15 +28,6 @@ Please see LICENSE files in the repository root for full details.
margin-inline-end: 5px;
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
color: $accent;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
background-color: $accent;
}
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
color: $alert;
@@ -94,46 +37,9 @@ Please see LICENSE files in the repository root for full details.
}
}
}
}
.mx_Dialog_buttons {
$spacingStart: $spacing-24; /* 16px icon + 8px padding */
text-align: initial;
display: flex;
flex-flow: column;
gap: 14px;
.mx_Dialog_buttons_additive {
float: none;
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-inline-start: $spacingStart;
/* To avoid bold styling inherent with <strong> elements */
font-weight: inherit;
&::before {
content: "";
display: inline-block;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; /* alignment */
background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-size: contain;
}
.mx_AccessSecretStorageDialog_reset_link {
color: $alert;
}
}
}
.mx_Dialog_buttons_row {
gap: $spacing-16; /* TODO: needs normalization */
padding-inline-start: $spacingStart;
}
}
.mx_EncryptionCard_buttons {
margin-top: var(--cpd-space-20x);
}
}

14
res/css/views/right_panel/_ExtensionsCard.pcss
View File

@@ -7,12 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_ExtensionsCard {
--cpd-separator-inset: var(--cpd-space-4x);
--cpd-separator-spacing: var(--cpd-space-4x);
--cpd-separator-spacing: var(--cpd-space-6x);
--AddExtension-overlap: -76px;
.mx_AutoHideScrollbar {
padding: 0 var(--cpd-space-4x);
margin-top: var(--cpd-space-3x);
margin-top: var(--cpd-space-6x);
box-sizing: border-box;
/* Styling for the "Add extensions" button */
@@ -128,6 +127,11 @@ Please see LICENSE files in the repository root for full details.
.mx_EmptyState::before {
/* Overlap the Add extensions button */
top: -76px;
top: var(--AddExtension-overlap);
}
.mx_EmptyState {
/* Stop empty state scrolling */
height: calc(100% + var(--AddExtension-overlap));
}
}

18
res/css/views/right_panel/_UserInfo.pcss
View File

@@ -109,6 +109,15 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-20px;
line-height: $font-25px;
/* E2E icon wrapper */
.mx_Flex > span {
display: inline-block;
}
}
.mx_UserInfo_profile_name {
min-height: 30px;
/* limit to 2 lines, show an ellipsis if it overflows */
/* this looks webkit specific but is supported by Firefox 68+ */
display: -webkit-box;
@@ -118,15 +127,6 @@ Please see LICENSE files in the repository root for full details.
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
/* E2E icon wrapper */
.mx_Flex > span {
display: inline-block;
}
}
.mx_UserInfo_profile_name {
height: 30px;
}
.mx_UserInfo_profile_mxid {

57
res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
View File

@@ -7,23 +7,19 @@
/**
* The RoomListItemView has the following structure:
* button----------------------------------------|
* | <-12px-> container--------------------------|
* | | room avatar <-12px-> content-----|
* | | | room_name |
* | | | ----------| <-- border
* |---------------------------------------------|
* button--------------------------------------------------|
* | <-12px-> container------------------------------------|
* | | room avatar <-8px-> content----------------|
* | | | room_name <- 20px ->|
* | | | --------------------| <-- border
* |-------------------------------------------------------|
*/
.mx_RoomListItemView {
all: unset;
cursor: pointer;
&:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
.mx_RoomListItemView_container {
padding-left: var(--cpd-space-2x);
padding-left: var(--cpd-space-3x);
font: var(--cpd-font-body-md-regular);
height: 100%;
@@ -34,40 +30,47 @@
border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
box-sizing: border-box;
min-width: 0;
padding-right: var(--cpd-space-5x);
.mx_RoomListItemView_text {
min-width: 0;
}
.mx_RoomListItemView_roomName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_RoomListItemView_messagePreview {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.mx_RoomListItemView_menu_open {
.mx_RoomListItemView_hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-1-5x);
}
.mx_RoomListItemView_menu_open .mx_RoomListItemView_container .mx_RoomListItemView_content {
/**
* The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
* the icon size of the menu is 18px instead of 20px with a different internal padding
* We need to use 18px to align the icon with the others icons
* 18px is not available in compound spacing
*/
padding-right: 18px;
}
.mx_RoomListItemView_selected {
background-color: var(--cpd-color-bg-action-secondary-pressed);
}
.mx_RoomListItemView_notification_decoration {
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-2x);
}
}
.mx_RoomListItemView_empty {
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-3x);
}
}
.mx_RoomListItemView_bold .mx_RoomListItemView_roomName {
font: var(--cpd-font-body-md-semibold);
}

12
res/css/views/rooms/RoomListPanel/_RoomListSearch.pcss
View File

@@ -21,6 +21,7 @@
flex: 1;
font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-secondary);
min-width: 0;
span {
flex: 1;
@@ -28,6 +29,17 @@
kbd {
font-family: inherit;
}
/* Shrink and truncate the search text */
white-space: nowrap;
overflow: hidden;
.mx_RoomListSearch_search_text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: start;
}
}
}

12
res/css/views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss Normal file
View File

@@ -0,0 +1,12 @@
/*
* Copyright 2025 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_RoomListSecondaryFilters {
font: var(--cpd-font-body-md-medium);
margin: var(--cpd-space-2x);
margin-left: var(--cpd-space-1x);
}

24
res/css/views/rooms/RoomListPanel/_RoomListSkeleton.pcss Normal file
View File

@@ -0,0 +1,24 @@
/*
* Copyright 2025 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_RoomListSkeleton {
position: relative;
margin-left: 4px;
height: 100%;
&::before {
background-color: var(--cpd-color-bg-subtle-secondary);
width: 100%;
height: 100%;
content: "";
position: absolute;
mask-repeat: repeat-y;
mask-size: auto 96px;
mask-image: url("$(res)/img/element-icons/roomlist/room-list-item-skeleton.svg");
}
}

3
res/css/views/rooms/_RoomSublist.pcss
View File

@@ -404,8 +404,7 @@ Please see LICENSE files in the repository root for full details.
height: 240px;
&::before {
background: $roomsublist-skeleton-ui-bg;
background-color: var(--cpd-color-bg-subtle-secondary);
width: 100%;
height: 100%;

12
res/css/views/settings/_JoinRuleSettings.pcss
View File

@@ -53,6 +53,14 @@ Please see LICENSE files in the repository root for full details.
display: block;
}
&.mx_StyledRadioButton_disabled {
opacity: 0.5;
}
&.mx_StyledRadioButton_disabled + span {
opacity: 0.5;
}
& + span {
display: inline-block;
margin-left: 34px;
@@ -71,3 +79,7 @@ Please see LICENSE files in the repository root for full details.
font: var(--cpd-font-body-md-regular);
margin-top: var(--cpd-space-2x);
}
.mx_JoinRuleSettings_recommended {
color: $accent-1000;
}

28
res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss Normal file
View File

@@ -0,0 +1,28 @@
/*
Copyright 2025 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_MediaPreviewAccountSetting_Radio {
margin: var(--cpd-space-1x) 0;
}
.mx_MediaPreviewAccountSetting {
margin-top: var(--cpd-space-1x);
}
.mx_MediaPreviewAccountSetting_RadioHelp {
margin-top: 0;
margin-bottom: var(--cpd-space-1x);
}
.mx_MediaPreviewAccountSetting_Form {
width: 100%;
}
.mx_MediaPreviewAccountSetting_ToggleSwitch {
font: var(--cpd-font-body-md-medium);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
}

14
res/img/element-icons/roomlist/room-list-item-skeleton.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

3
res/themes/light-high-contrast/css/_light-high-contrast.pcss
View File

@@ -163,7 +163,8 @@ $accent-1400: var(--cpd-color-green-1400);
&.mx_SpotlightDialog_startChat::before,
&.mx_SpotlightDialog_joinRoomAlias::before,
&.mx_SpotlightDialog_explorePublicRooms::before,
&.mx_SpotlightDialog_startGroupChat::before {
&.mx_SpotlightDialog_startGroupChat::before,
&.mx_SpotlightDialog_searchMessages::before {
background-color: $background !important;
}

2
res/welcome.html
View File

@@ -3,7 +3,7 @@
* voodoo where we have to set display: none by default
*/
h1::after {
.mx_Header_title::after {
content: "!";
}