diff --git a/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png b/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png index 6a490c2157..8519e162f2 100644 Binary files a/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png and b/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png differ diff --git a/res/css/_components.pcss b/res/css/_components.pcss index c0dd2ee0b0..f52cdbdbdd 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -286,7 +286,6 @@ @import "./views/rooms/_HistoryTile.pcss"; @import "./views/rooms/_IRCLayout.pcss"; @import "./views/rooms/_JumpToBottomButton.pcss"; -@import "./views/rooms/_LegacyRoomHeader.pcss"; @import "./views/rooms/_LinkPreviewGroup.pcss"; @import "./views/rooms/_LinkPreviewWidget.pcss"; @import "./views/rooms/_LiveContentSummary.pcss"; diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 52fa523c4e..359f67c803 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -181,11 +181,6 @@ Please see LICENSE files in the repository root for full details. } } -/* Rooms with immersive content */ -.mx_RoomView_immersive .mx_LegacyRoomHeader_wrapper { - border: unset; -} - .mx_RoomView_inCall { .mx_RoomView_statusAreaBox_line { margin-top: 2px; diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss deleted file mode 100644 index dc41108041..0000000000 --- a/res/css/views/rooms/_LegacyRoomHeader.pcss +++ /dev/null @@ -1,281 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2023 The Matrix.org Foundation C.I.C. -Copyright 2015, 2016 OpenMarket Ltd - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only -Please see LICENSE files in the repository root for full details. -*/ - -:root { - --RoomHeader-indicator-dot-size: 8px; - --RoomHeader-indicator-dot-offset: -3px; - --RoomHeader-indicator-pulseColor: $alert; -} - -.mx_LegacyRoomHeader { - flex: 0 0 50px; - border-bottom: 1px solid $primary-hairline-color; - background-color: $background; - - .mx_LegacyRoomHeader_icon { - height: 12px; - width: 12px; - - &.mx_LegacyRoomHeader_icon_video { - height: 14px; - width: 14px; - background-color: $secondary-content; - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); - mask-size: 100%; - } - - &.mx_E2EIcon { - margin: 0; - height: 100%; /* To give the tooltip room to breathe */ - } - } - - .mx_CallDuration { - margin-top: calc(($font-15px - $font-13px) / 2); /* To align with the name */ - font-size: $font-13px; - } -} - -.mx_LegacyRoomHeader_wrapper { - height: 44px; - display: flex; - align-items: center; - min-width: 0; - padding: 10px 20px 9px 16px; - border-bottom: 1px solid $separator; - - .mx_InviteOnlyIcon_large { - margin: 0; - } - - .mx_BetaCard_betaPill { - margin-right: $spacing-8; - } - - /* The container of E2EIcon in the legacy header needs to have its height set */ - & > span { - height: 100%; - } -} - -.mx_LegacyRoomHeader_name { - flex: 0 1 auto; - overflow: hidden; - color: $primary-content; - font: var(--cpd-font-heading-sm-semibold); - font-weight: var(--cpd-font-weight-semibold); - min-height: 24px; - align-items: center; - border-radius: 6px; - margin: 0 3px; - padding: 1px 4px; - display: flex; - user-select: none; - cursor: pointer; - - &:hover { - background-color: $quinary-content; - } - - .mx_LegacyRoomHeader_nametext { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .mx_LegacyRoomHeader_chevron { - align-self: center; - width: 20px; - height: 20px; - mask-position: center; - mask-size: 20px; - mask-repeat: no-repeat; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); - background-color: $tertiary-content; - } - - &.mx_LegacyRoomHeader_name--textonly { - cursor: unset; - - &:hover { - background-color: unset; - } - } - - &[aria-expanded="true"] { - background-color: $separator; - - .mx_LegacyRoomHeader_chevron { - transform: rotate(180deg); - } - } -} - -.mx_LegacyRoomHeader_settingsHint { - color: $settings-grey-fg-color !important; -} - -.mx_LegacyRoomHeader_searchStatus { - font-weight: normal; - opacity: 0.6; -} - -.mx_RoomTopic { - position: relative; - cursor: pointer; -} - -.mx_LegacyRoomHeader_topic { - $lines: 2; - - flex: 1; - color: $secondary-content; - font: var(--cpd-font-body-sm-regular); - line-height: 1rem; - max-height: calc(1rem * $lines); - - overflow: hidden; - -webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */ - -webkit-box-orient: vertical; - display: -webkit-box; -} - -.mx_LegacyRoomHeader_topic .mx_Emoji { - /* Undo font size increase to prevent vertical cropping and ensure the same size */ - /* as in plain text emojis */ - font-size: inherit; -} - -.mx_LegacyRoomHeader_avatar { - flex: 0; - margin: 0 7px; - position: relative; - cursor: pointer; -} - -.mx_LegacyRoomHeader_button_unreadIndicator_bg { - position: absolute; - right: var(--RoomHeader-indicator-dot-offset); - top: var(--RoomHeader-indicator-dot-offset); - margin: 4px; - width: var(--RoomHeader-indicator-dot-size); - height: var(--RoomHeader-indicator-dot-size); - border-radius: 50%; - transform: scale(1.6); - transform-origin: center center; - background: $background; -} - -.mx_LegacyRoomHeader_button_unreadIndicator { - position: absolute; - right: var(--RoomHeader-indicator-dot-offset); - top: var(--RoomHeader-indicator-dot-offset); - margin: 4px; - - &.mx_Indicator_highlight { - background: var(--cpd-color-icon-critical-primary); - box-shadow: var(--cpd-color-icon-critical-primary); - } - - &.mx_Indicator_notification { - background: var(--cpd-color-icon-success-primary); - box-shadow: var(--cpd-color-icon-success-primary); - } - - &.mx_Indicator_activity { - background: var(--cpd-color-icon-primary); - box-shadow: var(--cpd-color-icon-primary); - } -} - -.mx_LegacyRoomHeader_forgetButton::before { - mask-image: url("$(res)/img/element-icons/leave.svg"); - width: 26px; -} - -.mx_LegacyRoomHeader_appsButton::before { - mask-image: url("$(res)/img/element-icons/room/apps.svg"); -} - -.mx_LegacyRoomHeader_appsButton_highlight::before { - background-color: $accent; -} - -.mx_LegacyRoomHeader_searchButton::before { - mask-image: url("$(res)/img/element-icons/room/search-inset.svg"); -} - -.mx_LegacyRoomHeader_inviteButton::before { - mask-image: url("$(res)/img/element-icons/room/invite.svg"); -} - -.mx_LegacyRoomHeader_voiceCallButton::before { - mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); - - /* The call button SVG is padded slightly differently, so match it up to the size */ - /* of the other icons */ - mask-size: 20px; - mask-position: center; -} - -.mx_LegacyRoomHeader_videoCallButton::before { - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); -} - -.mx_LegacyRoomHeader_layoutButton--freedom::before, -.mx_LegacyRoomHeader_freedomIcon::before { - mask-image: url("$(res)/img/element-icons/call/freedom.svg"); -} - -.mx_LegacyRoomHeader_layoutButton--spotlight::before, -.mx_LegacyRoomHeader_spotlightIcon::before { - mask-image: url("$(res)/img/element-icons/call/spotlight.svg"); -} - -.mx_LegacyRoomHeader_closeButton { - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - mask-size: 20px; - mask-position: center; - } - - &:hover { - background: unset; /* remove background color on hover */ - - &::before { - background-color: $icon-button-color; /* set the default background color */ - } - } -} - -.mx_LegacyRoomHeader_minimiseButton::before { - mask-image: url("$(res)/img/element-icons/reduce.svg"); -} - -.mx_LegacyRoomHeader_layoutMenu .mx_IconizedContextMenu_icon::before { - content: ""; - width: 16px; - height: 16px; - display: block; - mask-position: center; - mask-size: 20px; - mask-repeat: no-repeat; - background: $primary-content; -} - -@media only screen and (max-width: 480px) { - .mx_LegacyRoomHeader_wrapper { - padding: 0; - margin: 0; - } - - .mx_LegacyRoomHeader { - overflow: hidden; - } -} diff --git a/res/img/camera.svg b/res/img/camera.svg deleted file mode 100644 index 6519496f78..0000000000 --- a/res/img/camera.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - icon_camera - Created with Sketch. - - - - - - - diff --git a/res/img/element-icons/call/freedom.svg b/res/img/element-icons/call/freedom.svg deleted file mode 100644 index 0a883b7833..0000000000 --- a/res/img/element-icons/call/freedom.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/call/spotlight.svg b/res/img/element-icons/call/spotlight.svg deleted file mode 100644 index f9d96a1e85..0000000000 --- a/res/img/element-icons/call/spotlight.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/reduce.svg b/res/img/element-icons/reduce.svg deleted file mode 100644 index 3179e33a23..0000000000 --- a/res/img/element-icons/reduce.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/feather-customised/edit.svg b/res/img/feather-customised/edit.svg deleted file mode 100644 index f511aa1477..0000000000 --- a/res/img/feather-customised/edit.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/location/pointer.svg b/res/img/location/pointer.svg deleted file mode 100644 index 8a7c5edf71..0000000000 --- a/res/img/location/pointer.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/markdown.svg b/res/img/markdown.svg deleted file mode 100644 index 9aadd3cb7f..0000000000 --- a/res/img/markdown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/voip/signal-bars.svg b/res/img/voip/signal-bars.svg deleted file mode 100644 index 6802ba2d34..0000000000 --- a/res/img/voip/signal-bars.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx index 08e488e5ff..2870ccafd3 100644 --- a/src/utils/exportUtils/HtmlExport.tsx +++ b/src/utils/exportUtils/HtmlExport.tsx @@ -161,24 +161,19 @@ export default class HTMLExporter extends Exporter {
-
-
-
-
- ${roomAvatar} +
+ ${roomAvatar} +
+
+ + ${safeRoomName} + +
-
-
-
- ${safeRoomName} -
-
-
${safeTopic}
-
${previousMessagesLink}
diff --git a/src/utils/exportUtils/exportCustomCSS.css b/src/utils/exportUtils/exportCustomCSS.css index 3d034d7df5..b3fa8e81d3 100644 --- a/src/utils/exportUtils/exportCustomCSS.css +++ b/src/utils/exportUtils/exportCustomCSS.css @@ -130,6 +130,14 @@ a.mx_reply_anchor:hover { } } +.mx_RoomHeader { + --mx-flex-display: flex; + --mx-flex-direction: row; + --mx-flex-align: center; + --mx-flex-justify: start; + --mx-flex-gap: var(--cpd-space-3x); +} + .mx_ReplyChain_Export { margin-top: 0; margin-bottom: 5px; diff --git a/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index 6a7adbabb2..94f31f7652 100644 --- a/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -17,24 +17,19 @@ exports[`HTMLExport should export 1`] = `
-
-
-
-
- ! +
+ ! +
+
+ + !myroom:example.org + +
-
-
-
- !myroom:example.org -
-
-
-