From 4bf0df2b3dfadda74a33a566b1a99f9c2b98184a Mon Sep 17 00:00:00 2001 From: su-ex Date: Wed, 1 Mar 2023 00:17:18 +0100 Subject: [PATCH] Make linter happier --- .github/PULL_REQUEST_TEMPLATE.md | 4 +- res/css/structures/_SpacePanel.pcss | 6 +- res/css/structures/_UserMenu.pcss | 3 +- .../views/avatars/_DecoratedRoomAvatar.pcss | 5 +- .../_RoomGeneralContextMenu.pcss | 4 +- res/css/views/elements/_Pill.pcss | 2 +- res/css/views/elements/_StyledCheckbox.pcss | 2 +- res/css/views/rooms/_BubbleLayout.pcss | 56 ++- res/css/views/rooms/_NotificationBadge.pcss | 3 +- res/css/views/rooms/_RoomHeader.pcss | 3 +- res/css/views/rooms/_RoomListHeader.pcss | 2 +- res/css/views/rooms/_RoomSublist.pcss | 7 +- res/css/views/rooms/_RoomTile.pcss | 45 +-- res/css/views/settings/_LayoutSwitcher.pcss | 2 +- res/css/views/settings/_ThemeChoicePanel.pcss | 3 +- res/css/views/settings/tabs/_SettingsTab.pcss | 3 +- res/themes/dark/css/_dark.pcss | 8 +- res/themes/legacy-dark/css/_legacy-dark.pcss | 13 +- .../legacy-light/css/_legacy-light.pcss | 37 +- res/themes/light/css/_light.pcss | 38 +- src/Avatar.ts | 2 +- src/HtmlUtils.tsx | 30 +- src/Markdown.ts | 3 +- src/RoomNotifs.ts | 2 +- src/Rooms.ts | 10 +- src/ScalarAuthClient.ts | 2 +- src/autocomplete/EmojiProvider.tsx | 88 ++--- src/components/structures/FilePanel.tsx | 2 +- src/components/structures/LeftPanel.tsx | 9 +- src/components/structures/LoggedInView.tsx | 14 +- src/components/structures/MatrixChat.tsx | 18 +- src/components/structures/MessagePanel.tsx | 2 +- src/components/structures/RightPanel.tsx | 19 +- src/components/structures/RoomSearchView.tsx | 18 +- src/components/structures/RoomView.tsx | 22 +- .../structures/SoundPackContainer.tsx | 15 +- src/components/structures/TimelinePanel.tsx | 2 +- src/components/structures/UserMenu.tsx | 6 +- .../context_menus/RoomGeneralContextMenu.tsx | 28 +- .../views/dialogs/FeedbackDialog.tsx | 3 +- .../views/dialogs/ModalWidgetDialog.tsx | 2 +- .../elements/GenericEventListSummary.tsx | 12 +- .../views/elements/InlineSpinner.tsx | 6 +- src/components/views/elements/ReplyChain.tsx | 8 +- src/components/views/elements/Spinner.tsx | 11 +- src/components/views/elements/SvgSpinner.tsx | 4 +- src/components/views/emojipicker/Category.tsx | 6 +- src/components/views/emojipicker/Emoji.tsx | 31 +- .../views/emojipicker/EmojiPicker.tsx | 45 +-- src/components/views/emojipicker/Header.tsx | 56 +-- .../views/messages/DisambiguatedProfile.tsx | 12 +- .../views/messages/LegacyCallEvent.tsx | 2 +- src/components/views/messages/MImageBody.tsx | 32 +- .../views/messages/SenderProfile.tsx | 2 +- .../views/messages/TileErrorBoundary.tsx | 40 +- .../views/right_panel/RoomSummaryCard.tsx | 1 - .../room_settings/RoomPublishSetting.tsx | 2 +- .../views/rooms/BasicMessageComposer.tsx | 6 +- src/components/views/rooms/EventTile.tsx | 270 +++++++------- .../views/rooms/LinkPreviewGroup.tsx | 8 +- .../views/rooms/LinkPreviewWidget.tsx | 33 +- .../views/rooms/MessageComposer.tsx | 11 +- .../views/rooms/MessageComposerButtons.tsx | 12 +- .../views/rooms/PinnedEventTile.tsx | 6 +- src/components/views/rooms/ReplyTile.tsx | 2 +- src/components/views/rooms/RoomList.tsx | 225 ++++++------ src/components/views/rooms/RoomListHeader.tsx | 28 +- src/components/views/rooms/RoomSublist.tsx | 10 +- src/components/views/rooms/RoomTile.tsx | 6 +- .../views/settings/FontScalingPanel.tsx | 129 +++---- .../views/settings/LayoutSwitcher.tsx | 168 +++++---- .../views/settings/Notifications.tsx | 10 +- .../views/settings/ThemeChoicePanel.tsx | 347 +++++++++--------- .../tabs/user/AppearanceUserSettingsTab.tsx | 106 +++--- .../tabs/user/HelpUserSettingsTab.tsx | 48 ++- .../tabs/user/SidebarUserSettingsTab.tsx | 6 +- src/editor/parts.ts | 4 +- src/editor/serialize.ts | 6 +- src/emojipicker/customemoji.ts | 2 +- src/settings/Settings.tsx | 14 +- src/settings/enums/BorderRadius.ts | 2 +- src/settings/enums/RoomListStyle.ts | 2 +- src/settings/enums/Theme.ts | 2 +- src/settings/enums/UserNameColorMode.ts | 2 +- src/settings/watchers/ThemeWatcher.ts | 18 +- .../room-list/previews/MessageEventPreview.ts | 2 +- src/stores/spaces/SpaceStore.ts | 13 +- src/stores/widgets/StopGapWidget.ts | 1 - src/toasts/ScUpdateAnnouncementsRoomToast.ts | 57 +-- src/utils/FormattingUtils.ts | 8 +- 90 files changed, 1266 insertions(+), 1111 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 4fc21788fcf..599b6aa6d88 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,5 +1,5 @@ ------------------------------------------------------------------------------ +--- -- [ ] I agree to release my changes under this project's license +- [ ] I agree to release my changes under this project's license diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index f52a222afa4..ef5d47e1cd4 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -237,7 +237,8 @@ $activeBorderColor: $primary-content; transform: rotate(45deg); } - .mx_BaseAvatar_image, .mx_BaseAvatar_initial { + .mx_BaseAvatar_image, + .mx_BaseAvatar_initial { border-radius: 8px; width: $topLevelHeight !important; height: $topLevelHeight !important; @@ -293,7 +294,8 @@ $activeBorderColor: $primary-content; .mx_SpaceTreeLevel { // SC: doubled .mx_SpaceTreeLevel: Size down only space avatars of second hierarchy and down .mx_SpaceButton { - .mx_BaseAvatar_image, .mx_BaseAvatar_initial { + .mx_BaseAvatar_image, + .mx_BaseAvatar_initial { border-radius: 8px; width: $nestedHeight !important; height: $nestedHeight !important; diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index 126d0857047..6be33771af1 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -54,7 +54,8 @@ limitations under the License. } // SC: Scale avatar well with the font size - .mx_BaseAvatar_image, .mx_BaseAvatar_initial { + .mx_BaseAvatar_image, + .mx_BaseAvatar_initial { width: 3.2rem !important; height: 3.2rem !important; line-height: 3.2rem !important; diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss index e15e8264224..6356875ef0f 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.pcss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.pcss @@ -80,9 +80,10 @@ limitations under the License. } } -.mx_RoomList_Roomy .mx_DecoratedRoomAvatar, .mx_ExtraTile { +.mx_RoomList_Roomy .mx_DecoratedRoomAvatar, +.mx_ExtraTile { &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar { - mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask-big.svg'); + mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask-big.svg"); } .mx_DecoratedRoomAvatar_icon { diff --git a/res/css/views/context_menus/_RoomGeneralContextMenu.pcss b/res/css/views/context_menus/_RoomGeneralContextMenu.pcss index 15e2d223118..c1bcf462251 100644 --- a/res/css/views/context_menus/_RoomGeneralContextMenu.pcss +++ b/res/css/views/context_menus/_RoomGeneralContextMenu.pcss @@ -67,9 +67,9 @@ } .mx_RoomGeneralContextMenu_markAsUnread::before { - mask-image: url('$(res)/img/element-icons/roomlist/mark-as-unread.svg'); + mask-image: url("$(res)/img/element-icons/roomlist/mark-as-unread.svg"); } .mx_RoomGeneralContextMenu_markAsRead::before { - mask-image: url('$(res)/img/element-icons/roomlist/mark-as-read.svg'); + mask-image: url("$(res)/img/element-icons/roomlist/mark-as-read.svg"); } diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss index ec3a99e36e6..92b7f464ddc 100644 --- a/res/css/views/elements/_Pill.pcss +++ b/res/css/views/elements/_Pill.pcss @@ -46,7 +46,7 @@ limitations under the License. &.mx_UserPill_me:hover { color: $accent-fg-color !important; /* To override .markdown-body */ - background-color: #F44336 !important; /* To override .markdown-body | same on both themes */ + background-color: #f44336 !important; /* To override .markdown-body | same on both themes */ } /* We don't want to indicate clickability */ diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index 2a4cb3635ec..2b995255ed8 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_Checkbox { $size: $font-16px; $border-size: $font-1-5px; - $border-radius: min($border-radius-4px, .6rem); + $border-radius: min($border-radius-4px, 0.6rem); display: flex; align-items: flex-start; diff --git a/res/css/views/rooms/_BubbleLayout.pcss b/res/css/views/rooms/_BubbleLayout.pcss index a4deb55149f..83075555e08 100644 --- a/res/css/views/rooms/_BubbleLayout.pcss +++ b/res/css/views/rooms/_BubbleLayout.pcss @@ -77,14 +77,16 @@ $left-gutter: 5.4rem; > .mx_EventTile_avatar { position: absolute; - .mx_BaseAvatar_image, .mx_BaseAvatar_initial { + .mx_BaseAvatar_image, + .mx_BaseAvatar_initial { width: 3rem !important; height: 3rem !important; line-height: 3rem !important; } } - .mx_EventTile_line, .mx_EventTile_reply { + .mx_EventTile_line, + .mx_EventTile_reply { padding-top: 3px; padding-bottom: 3px; padding-left: $left-gutter; @@ -102,11 +104,13 @@ $left-gutter: 5.4rem; padding-top: 0 !important; } - .mx_EventTile_line, .mx_EventTile_reply { + .mx_EventTile_line, + .mx_EventTile_reply { padding-left: $left-gutter; } - .mx_GenericEventListSummary, .mx_EventTile_tileError { + .mx_GenericEventListSummary, + .mx_EventTile_tileError { /* For toggle */ position: relative; @@ -219,7 +223,13 @@ $left-gutter: 5.4rem; margin-right: unset; .markdown-body { - p, ul, ol, dl, blockquote, pre, table { + p, + ul, + ol, + dl, + blockquote, + pre, + table { margin-bottom: 8px; } @@ -287,7 +297,8 @@ $left-gutter: 5.4rem; /* margin-bottom: 10px; */ /* } */ - .mx_ReplyChain, .mx_ReplyPreview { + .mx_ReplyChain, + .mx_ReplyPreview { /* padding-top: 2px; */ .mx_EventTile_avatar { @@ -347,7 +358,6 @@ $left-gutter: 5.4rem; max-width: 100%; } - .sc_EventTile_bubble_sticker { .sc_MImageBody_container { position: relative; @@ -362,15 +372,15 @@ $left-gutter: 5.4rem; display: inline-flex; box-sizing: border-box; border: 1px solid $message-bubble-background; - + .mx_MFileBody_download { display: none; } - + .sc_PlaceholderTimestamp { display: none; } - + .mx_MessageTimestamp { visibility: visible !important; text-align: center; @@ -387,7 +397,7 @@ $left-gutter: 5.4rem; line-height: 1; } } - + .mx_MImageBody_thumbnail { border-radius: unset; } @@ -526,7 +536,7 @@ $left-gutter: 5.4rem; /* ToDo: make the tail some sort of absolutely positioned rotated cutout */ &.sc_EventTile_bubble_tail::before { - content: ''; + content: ""; border: 16px solid transparent; border-top-color: $message-bubble-background; border-bottom: 0; @@ -569,7 +579,7 @@ $left-gutter: 5.4rem; .sc_PlaceholderTimestamp { display: inline-flex; - margin-inline-start: .7em; + margin-inline-start: 0.7em; /* don't add additional height */ height: 0; @@ -614,7 +624,8 @@ $left-gutter: 5.4rem; } /* ToDo: These break on small width */ - .mx_MFileBody_info, .mx_MediaBody.mx_AudioPlayer_container { + .mx_MFileBody_info, + .mx_MediaBody.mx_AudioPlayer_container { display: inline-block; padding: 0; padding-top: 6px; @@ -713,7 +724,7 @@ $left-gutter: 5.4rem; .sc_EventTile_bubble_info { &::before { - content: ''; + content: ""; position: absolute; inset: 0; box-shadow: inset 0px 0px 0px 1px $roomtopic-color; @@ -731,7 +742,8 @@ $left-gutter: 5.4rem; max-width: unset; text-align: start; - &::before, &::after { + &::before, + &::after { margin-top: 1px; } @@ -763,7 +775,8 @@ $left-gutter: 5.4rem; padding-top: unset; } - .mx_TextualEvent, .mx_RoomAvatarEvent { + .mx_TextualEvent, + .mx_RoomAvatarEvent { display: inline; opacity: 0.8; } @@ -852,7 +865,7 @@ $left-gutter: 5.4rem; /* margin-top: 0; */ /* margin-bottom: 0; */ /* } */ - + .mx_MImageBody { border: none; @@ -900,7 +913,8 @@ $left-gutter: 5.4rem; box-shadow: inset 0px 0px 0px 1px rgba($roomtopic-color, 0.15); margin-bottom: 3rem; - &::before, &::after { + &::before, + &::after { margin-top: 1px; } @@ -934,7 +948,9 @@ $left-gutter: 5.4rem; max-width: calc(104rem - $left-gutter); } - .sc_EventTile_bubbleLine_info, .mx_DateSeparator, .mx_GenericEventListSummary, + .sc_EventTile_bubbleLine_info, + .mx_DateSeparator, + .mx_GenericEventListSummary, .mx_RoomView_MessageList > li > .mx_Spinner { max-width: calc($left-gutter + 104rem); } diff --git a/res/css/views/rooms/_NotificationBadge.pcss b/res/css/views/rooms/_NotificationBadge.pcss index c541979901d..2519d5c7114 100644 --- a/res/css/views/rooms/_NotificationBadge.pcss +++ b/res/css/views/rooms/_NotificationBadge.pcss @@ -33,7 +33,8 @@ limitations under the License. align-items: center; justify-content: center; - &.mx_NotificationBadge_highlighted, &.mx_NotificationBadge_highlighted.mx_NotificationBadge_dot { + &.mx_NotificationBadge_highlighted, + &.mx_NotificationBadge_highlighted.mx_NotificationBadge_dot { /* TODO: Use a more specific variable */ background-color: $alert; } diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 4aeb855c199..6410a1e5574 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -192,7 +192,8 @@ limitations under the License. // SC: downwards ... object-fit: cover; - .mx_BaseAvatar_image, .mx_BaseAvatar_initial { + .mx_BaseAvatar_image, + .mx_BaseAvatar_initial { width: 3rem !important; height: 3rem !important; line-height: 3rem !important; diff --git a/res/css/views/rooms/_RoomListHeader.pcss b/res/css/views/rooms/_RoomListHeader.pcss index d2b58bf83e6..db92a8318b2 100644 --- a/res/css/views/rooms/_RoomListHeader.pcss +++ b/res/css/views/rooms/_RoomListHeader.pcss @@ -100,7 +100,7 @@ limitations under the License. margin-right: 0; &::before { - mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg'); + mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg"); } } } diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 905471d2556..bb66f469e47 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -138,18 +138,19 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/roomlist/plus.svg"); } - .mx_RoomSublist_auxGroupButton, .mx_RoomSublist_auxDmButton { + .mx_RoomSublist_auxGroupButton, + .mx_RoomSublist_auxDmButton { @extend .mx_RoomSublist_auxButton; } .mx_RoomSublist_auxGroupButton::before { // mask-image: url('$(res)/img/feather-customised/group-plus.svg'); - mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg'); + mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg"); } .mx_RoomSublist_auxDmButton::before { // mask-image: url('$(res)/img/feather-customised/dm-plus.svg'); - mask-image: url('$(res)/img/element-icons/roomlist/member-plus.svg'); + mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg"); } .mx_RoomSublist_menuButton::before { diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss index ebf4aa24ed6..3fe18ce8b97 100644 --- a/res/css/views/rooms/_RoomTile.pcss +++ b/res/css/views/rooms/_RoomTile.pcss @@ -16,8 +16,8 @@ limitations under the License. /* Note: the room tile expects to be in a flexbox column container */ .mx_RoomTile { - margin-bottom: .4rem; - padding: .4rem; + margin-bottom: 0.4rem; + padding: 0.4rem; position: relative; /* The tile is also a flexbox row itself */ @@ -59,7 +59,7 @@ limitations under the License. min-width: 0; flex-basis: 0; flex-grow: 1; - margin-right: .8rem; /* spacing to buttons/badges */ + margin-right: 0.8rem; /* spacing to buttons/badges */ /* Create a new column layout flexbox for the title parts */ display: flex; @@ -103,7 +103,7 @@ limitations under the License. } .mx_RoomTile_notificationsButton { - right: .4rem; + right: 0.4rem; } .mx_RoomTile_badgeContainer { @@ -116,13 +116,13 @@ limitations under the License. align-items: center; .mx_NotificationBadge { - margin-right: .2rem; /* centering */ + margin-right: 0.2rem; /* centering */ } .mx_NotificationBadge_dot { /* make the smaller dot occupy the same width for centering */ - margin-left: .5rem; - margin-right: .7rem; + margin-left: 0.5rem; + margin-right: 0.7rem; } } @@ -141,8 +141,8 @@ limitations under the License. border-radius: 500px; &::before { - top: .2rem; - left: .2rem; + top: 0.2rem; + left: 0.2rem; content: ""; width: 1.6rem; height: 1.6rem; @@ -194,7 +194,8 @@ limitations under the License. .mx_RoomList_Roomy .mx_RoomTile { height: 5.6rem; - .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer { + .mx_DecoratedRoomAvatar, + .mx_RoomTile_avatarContainer { .mx_BaseAvatar_initial { width: 4.8rem !important; line-height: 4.8rem !important; @@ -218,11 +219,11 @@ limitations under the License. display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - margin-bottom: -.3rem; /* shift the preview down a bit more */ + margin-bottom: -0.3rem; /* shift the preview down a bit more */ } .mx_RoomTile_titleWithSubtitle { - margin-top: -.4rem; /* shift the name up a bit more */ + margin-top: -0.4rem; /* shift the name up a bit more */ } } } @@ -230,7 +231,8 @@ limitations under the License. .mx_RoomList_Intermediate .mx_RoomTile { height: 4rem; - .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer { + .mx_DecoratedRoomAvatar, + .mx_RoomTile_avatarContainer { .mx_BaseAvatar_initial { width: 3.2rem !important; line-height: 3.2rem !important; @@ -250,22 +252,23 @@ limitations under the License. font-size: 1.3rem; line-height: 1.8rem; max-height: 1.8rem; - margin-bottom: -.4rem; /* shift the preview down a bit more */ + margin-bottom: -0.4rem; /* shift the preview down a bit more */ } .mx_RoomTile_titleWithSubtitle { - margin-top: -.4rem; /* shift the name up a bit more */ + margin-top: -0.4rem; /* shift the name up a bit more */ } } } .mx_RoomList_Compact .mx_RoomTile { height: 2.6rem; - padding-top: .2rem; - padding-bottom: .2rem; + padding-top: 0.2rem; + padding-bottom: 0.2rem; - .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer { - margin-right: .4rem; + .mx_DecoratedRoomAvatar, + .mx_RoomTile_avatarContainer { + margin-right: 0.4rem; .mx_BaseAvatar_initial { width: 2.2rem !important; @@ -284,13 +287,13 @@ limitations under the License. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - margin-right: .4rem; /* spacing to buttons/badges */ + margin-right: 0.4rem; /* spacing to buttons/badges */ .mx_RoomTile_title, .mx_RoomTile_subtitle { display: inline; text-overflow: unset; - margin: 0 .2rem; + margin: 0 0.2rem; } .mx_RoomTile_title { diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss index e07d87a2cca..ada1e222eb8 100644 --- a/res/css/views/settings/_LayoutSwitcher.pcss +++ b/res/css/views/settings/_LayoutSwitcher.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_LayoutSwitcher { margin-top: -16px; - + .mx_LayoutSwitcher_RadioButtons { display: flex; flex-direction: row; diff --git a/res/css/views/settings/_ThemeChoicePanel.pcss b/res/css/views/settings/_ThemeChoicePanel.pcss index fa7f0e5e01e..475af77d524 100644 --- a/res/css/views/settings/_ThemeChoicePanel.pcss +++ b/res/css/views/settings/_ThemeChoicePanel.pcss @@ -113,7 +113,8 @@ limitations under the License. .mx_ThemeChoicePanel_userNameColorModeSection { .mx_SettingsTab_settingsTable { - tr > th:first-child, tr > td:first-child { + tr > th:first-child, + tr > td:first-child { padding-right: 16px; } } diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 206de7357d0..e049a768e22 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -108,7 +108,8 @@ limitations under the License. font-weight: $font-semi-bold; } - tr > th:first-child, tr > td:first-child { + tr > th:first-child, + tr > td:first-child { text-align: left; } diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 5afc28dc565..a5b43f79daa 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -117,7 +117,7 @@ $dialog-close-external-color: $primary-content; /* ******************** */ $roomlist-bg-color: rgba($system, 0.9); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #424242 0%, #42424200 100%); -$roomtile-default-badge-bg-color: #8BC34A; +$roomtile-default-badge-bg-color: #8bc34a; /* ******************** */ /* Tabbed views */ @@ -155,7 +155,7 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color; /* Reaction row */ /* ******************** */ $reaction-row-button-hover-border-color: $header-panel-text-primary-color; -$reaction-row-button-selected-bg-color: #33691E; +$reaction-row-button-selected-bg-color: #33691e; /* ******************** */ /* Voice messages */ @@ -168,7 +168,7 @@ $voice-record-icon-color: $quaternary-content; /* ******************** */ $message-bubble-background-self: #303030; $message-bubble-background: #424242; -$message-bubble-background-selected: #3F4931; +$message-bubble-background-selected: #3f4931; /* ******************** */ @@ -196,7 +196,7 @@ $call-light-quaternary-content: #bdbdbd; /* Location sharing */ /* ******************** */ -$location-live-color: #8BC34A; +$location-live-color: #8bc34a; $location-live-secondary-color: #e0e0e0; /* ******************** */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 37518e10522..bf45fecabf0 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -87,8 +87,8 @@ $roomtopic-color: $text-secondary-color; $room-icon-unread-color: #fff; /* Legacy theme backports */ -$accent: #8BC34A; -$alert: #E53935; +$accent: #8bc34a; +$alert: #e53935; $links: #0086e6; $primary-content: $primary-fg-color; $secondary-content: $secondary-fg-color; @@ -131,7 +131,7 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #424242 0%, #42424200 100%) $spacePanel-divider-color: $tertiary-content; -$roomtile-default-badge-bg-color: #8BC34A; +$roomtile-default-badge-bg-color: #8bc34a; $roomtile-selected-bg-color: #303030; /* ******************** */ @@ -171,7 +171,7 @@ $message-action-bar-border-color: #616161; $message-action-bar-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-hover-border-color: $header-panel-text-primary-color; -$reaction-row-button-selected-bg-color: #33691E; +$reaction-row-button-selected-bg-color: #33691e; $kbd-border-color: #000000; @@ -196,13 +196,12 @@ $inlinecode-background-color: #121212; /* Bubble tiles */ $message-bubble-background-self: #303030; $message-bubble-background: #424242; -$message-bubble-background-selected: #3F4931; - +$message-bubble-background-selected: #3f4931; /* Location sharing */ /* ******************** */ $location-marker-color: #ffffff; -$location-live-color: #8BC34A; +$location-live-color: #8bc34a; $location-live-secondary-color: #e0e0e0; /* ******************** */ diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index c3355372e00..cd343aa9837 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -124,7 +124,7 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04); $header-panel-text-primary-color: #757575; $pill-bg-color: rgba(0, 0, 0, 0.13); -$pill-hover-bg-color: rgba(0, 0, 0, 0.10); +$pill-hover-bg-color: rgba(0, 0, 0, 0.1); $topleftmenu-color: #212121; $roomheader-bg-color: $primary-bg-color; @@ -138,16 +138,16 @@ $room-icon-unread-color: #757575; $theme-button-bg-color: #e0e0e0; -$roomtile-default-badge-bg-color: #8BC34A; +$roomtile-default-badge-bg-color: #8bc34a; $roomtile-selected-bg-color: #fff; $presence-away: #d9b072; $presence-offline: #bdbdbd; -$presence-busy: #E53935; +$presence-busy: #e53935; /* Legacy theme backports */ -$accent: #8BC34A; -$alert: #E53935; +$accent: #8bc34a; +$alert: #e53935; $links: #0086e6; $primary-content: $primary-fg-color; $secondary-content: $secondary-fg-color; @@ -199,11 +199,11 @@ $username-variant6-color: #299ea0; $username-variant7-color: #5c57df; $username-variant8-color: #69a011; -$username-pl100-color: #F44336; -$username-pl95-color: #FF5722; -$username-pl51-color: #03A9F4; -$username-pl50-color: #2196F3; -$username-pl1-color: #CDDC39; +$username-pl100-color: #f44336; +$username-pl95-color: #ff5722; +$username-pl51-color: #03a9f4; +$username-pl50-color: #2196f3; +$username-pl1-color: #cddc39; $username-pl0-color: #8bc34a; /* ******************** */ @@ -226,10 +226,10 @@ $event-timestamp-color: #aaaaaa; $copy-button-url: "$(res)/img/element-icons/copy.svg"; /* e2e */ -$e2e-verified-color: #8BC34A; -$e2e-unknown-color: #FFC107; -$e2e-unverified-color: #FFC107; -$e2e-warning-color: #E53935; +$e2e-verified-color: #8bc34a; +$e2e-unknown-color: #ffc107; +$e2e-unverified-color: #ffc107; +$e2e-warning-color: #e53935; $e2e-verified-color-light: rgba($e2e-verified-color, 0.06); $e2e-warning-color-light: rgba($e2e-warning-color, 0.06); @@ -276,7 +276,7 @@ $message-action-bar-border-color: #e0e0e0; $message-action-bar-hover-border-color: $focus-bg-color; $reaction-row-button-hover-border-color: $focus-bg-color; -$reaction-row-button-selected-bg-color: #DCEDC8; +$reaction-row-button-selected-bg-color: #dcedc8; $kbd-border-color: $message-action-bar-border-color; @@ -301,10 +301,9 @@ $inlinecode-border-color: #00000010; $inlinecode-background-color: #00000010; /* Bubble tiles */ -$message-bubble-background-self: #F1F8E9; +$message-bubble-background-self: #f1f8e9; $message-bubble-background: #eeeeee; -$message-bubble-background-selected: #DBEDC6; - +$message-bubble-background-selected: #dbedc6; /* pinned events indicator */ $pinned-color: $tertiary-content; @@ -314,7 +313,7 @@ $spacePanel-divider-color: $tertiary-content; /* Location sharing */ /* ******************** */ $location-marker-color: #ffffff; -$location-live-color: #8BC34A; +$location-live-color: #8bc34a; $location-live-secondary-color: #e0e0e0; /* ******************** */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 164351c5a3e..d743ddcd5c5 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -38,8 +38,8 @@ $panel-hover: rgba($tertiary-content, 0.1); $panel-actions: rgba($tertiary-content, 0.2); $space-nav: rgba($tertiary-content, 0.15); -$accent: #8BC34A; -$alert: #E53935; +$accent: #8bc34a; +$alert: #e53935; $links: #0086e6; $username-variant1-color: #4189c9; @@ -51,11 +51,11 @@ $username-variant6-color: #299ea0; $username-variant7-color: #5c57df; $username-variant8-color: #69a011; -$username-pl100-color: #F44336; -$username-pl95-color: #FF5722; -$username-pl51-color: #03A9F4; -$username-pl50-color: #2196F3; -$username-pl1-color: #CDDC39; +$username-pl100-color: #f44336; +$username-pl95-color: #ff5722; +$username-pl51-color: #03a9f4; +$username-pl50-color: #2196f3; +$username-pl1-color: #cddc39; $username-pl0-color: #8bc34a; $username-accent-color: $accent; @@ -148,7 +148,7 @@ $roomheader-addroom-fg-color: #616161; /* Rich-text-editor */ /* ******************** */ $pill-bg-color: rgba(0, 0, 0, 0.13); -$pill-hover-bg-color: rgba(0, 0, 0, 0.10); +$pill-hover-bg-color: rgba(0, 0, 0, 0.1); $rte-bg-color: #e0e0e0; $rte-code-bg-color: rgba(0, 0, 0, 0.04); /* ******************** */ @@ -190,15 +190,15 @@ $imagebody-giflabel-color: $background; /* ******************** */ $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: #8BC34A; +$roomtile-default-badge-bg-color: #8bc34a; /* ******************** */ /* e2e */ /* ******************** */ -$e2e-verified-color: #8BC34A; -$e2e-unknown-color: #FFC107; -$e2e-unverified-color: #FFC107; -$e2e-warning-color: #E53935; +$e2e-verified-color: #8bc34a; +$e2e-unknown-color: #ffc107; +$e2e-unverified-color: #ffc107; +$e2e-warning-color: #e53935; $e2e-verified-color-light: rgba($e2e-verified-color, 0.06); $e2e-warning-color-light: rgba($e2e-warning-color, 0.06); /* ******************** */ @@ -245,24 +245,24 @@ $message-action-bar-hover-border-color: $focus-bg-color; /* Reaction row */ /* ******************** */ $reaction-row-button-hover-border-color: $focus-bg-color; -$reaction-row-button-selected-bg-color: #DCEDC8; +$reaction-row-button-selected-bg-color: #dcedc8; /* ******************** */ /* Voice messages */ /* ******************** */ /* These two don't change between themes. They are the $alert, but we don't want */ /* custom themes to affect them by accident. */ -$voice-record-stop-symbol-color: #E53935; -$voice-record-live-circle-color: #E53935; +$voice-record-stop-symbol-color: #e53935; +$voice-record-live-circle-color: #e53935; $voice-record-stop-border-color: $quinary-content; $voice-record-icon-color: $tertiary-content; /* ******************** */ /* Message bubbles */ /* ******************** */ -$message-bubble-background-self: #F1F8E9; +$message-bubble-background-self: #f1f8e9; $message-bubble-background: #eeeeee; -$message-bubble-background-selected: #DBEDC6; +$message-bubble-background-selected: #dbedc6; /* ******************** */ @@ -335,7 +335,7 @@ $copy-button-url: "$(res)/img/element-icons/copy.svg"; /* Location sharing */ /* ******************** */ $location-marker-color: #ffffff; -$location-live-color: #8BC34A; +$location-live-color: #8bc34a; $location-live-secondary-color: #e0e0e0; /* ******************** */ diff --git a/src/Avatar.ts b/src/Avatar.ts index 8ea0e7c2d84..d02e4b8e281 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -88,7 +88,7 @@ const colorToDataURLCache = new Map(); export function defaultAvatarUrlForString(s: string): string { if (!s) return ""; // XXX: should never happen but empirically does by evidence of a rageshake - const defaultColors = ['#8BC34A', '#368bd6', '#ac3ba8']; + const defaultColors = ["#8BC34A", "#368bd6", "#ac3ba8"]; let total = 0; for (let i = 0; i < s.length; ++i) { total += s.charCodeAt(i); diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 0ce2aa73478..cf7cb285394 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -572,20 +572,20 @@ export function bodyToHtml(content: IContent, highlights: Optional, op safeBody = phtml.html(); } if (isHtmlMessage) { - isAllHtmlEmoji = (phtml.root()[0] as cheerio.TagElement).children.every(elm => { - if (elm.type === 'text') { + isAllHtmlEmoji = (phtml.root()[0] as cheerio.TagElement).children.every((elm) => { + if (elm.type === "text") { let elmText = elm.data; // Remove zero width joiner, zero width spaces and other spaces in body // text. This ensures that emojis with spaces in between or that are made // up of multiple unicode characters are still counted as purely emoji // messages. - elmText = elmText.replace(EMOJI_SEPARATOR_REGEX, ''); + elmText = elmText.replace(EMOJI_SEPARATOR_REGEX, ""); const match = BIGEMOJI_REGEX.exec(elmText); return match && match[0] && match[0].length === elmText.length; - } else if (elm.type == 'tag') { - return elm.name === 'img' && 'data-mx-emoticon' in elm.attribs; + } else if (elm.type == "tag") { + return elm.name === "img" && "data-mx-emoticon" in elm.attribs; } return true; }); @@ -607,7 +607,7 @@ export function bodyToHtml(content: IContent, highlights: Optional, op let emojiBody = false; if (!opts.disableBigEmoji) { - let contentBodyTrimmed = (bodyHasEmoji && contentBody !== undefined) ? contentBody.trim() : ""; + let contentBodyTrimmed = bodyHasEmoji && contentBody !== undefined ? contentBody.trim() : ""; // Remove zero width joiner, zero width spaces and other spaces in body // text. This ensures that emojis with spaces in between or that are made @@ -617,12 +617,11 @@ export function bodyToHtml(content: IContent, highlights: Optional, op const match = BIGEMOJI_REGEX.exec(contentBodyTrimmed); const matched = match && match[0] && match[0].length === contentBodyTrimmed.length; - emojiBody = (matched || isAllHtmlEmoji) && ( - strippedBody === safeBody || // replies have the html fallbacks, account for that here - content.formatted_body === undefined || - (!content.formatted_body.includes("http:") && - !content.formatted_body.includes("https:")) - ); + emojiBody = + (matched || isAllHtmlEmoji) && + (strippedBody === safeBody || // replies have the html fallbacks, account for that here + content.formatted_body === undefined || + (!content.formatted_body.includes("http:") && !content.formatted_body.includes("https:"))); } const className = classNames({ @@ -637,12 +636,7 @@ export function bodyToHtml(content: IContent, highlights: Optional, op } return safeBody ? ( - + ) : ( {emojiBodyElements || strippedBody} diff --git a/src/Markdown.ts b/src/Markdown.ts index 7cf727579dd..b082e659d01 100644 --- a/src/Markdown.ts +++ b/src/Markdown.ts @@ -30,8 +30,7 @@ const TEXT_NODES = ["text", "softbreak", "linebreak", "paragraph", "document"]; function isAllowedHtmlTag(node: commonmark.Node): boolean { if (node.literal != null && node.literal.match('^<((div|span) data-mx-maths="[^"]*"|/(div|span))>$') != null) { return true; - } else if (node.literal != null && - node.literal.match('^ { - await MatrixClientPeg.get().setRoomAccountData( - room.roomId, - MARKED_UNREAD_TYPE.name, - { - unread: value, - }, - ); + await MatrixClientPeg.get().setRoomAccountData(room.roomId, MARKED_UNREAD_TYPE.name, { + unread: value, + }); } diff --git a/src/ScalarAuthClient.ts b/src/ScalarAuthClient.ts index a78e3b41096..f65d03ab5cb 100644 --- a/src/ScalarAuthClient.ts +++ b/src/ScalarAuthClient.ts @@ -24,7 +24,7 @@ import { Service, startTermsFlow, TermsInteractionCallback, TermsNotSignedError import { MatrixClientPeg } from "./MatrixClientPeg"; import SdkConfig from "./SdkConfig"; import { WidgetType } from "./widgets/WidgetType"; -import ThemeWatcher from './settings/watchers/ThemeWatcher'; +import ThemeWatcher from "./settings/watchers/ThemeWatcher"; // The version of the integration manager API we're intending to work with const imApiVersion = "1.1"; diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx index 2440ffd2bba..3d76a366d4b 100644 --- a/src/autocomplete/EmojiProvider.tsx +++ b/src/autocomplete/EmojiProvider.tsx @@ -32,8 +32,8 @@ import { ICompletion, ISelectionRange } from "./Autocompleter"; import SettingsStore from "../settings/SettingsStore"; import { EMOJI, IEmoji, getEmojiFromUnicode } from "../emoji"; import { TimelineRenderingType } from "../contexts/RoomContext"; -import { mediaFromMxc } from '../customisations/Media'; -import { ICustomEmoji, loadImageSet } from '../emojipicker/customemoji'; +import { mediaFromMxc } from "../customisations/Media"; +import { ICustomEmoji, loadImageSet } from "../emojipicker/customemoji"; import * as recent from "../emojipicker/recent"; import { MatrixClientPeg } from "../MatrixClientPeg"; @@ -96,17 +96,18 @@ export default class EmojiProvider extends AutocompleteProvider { }); // Load this room's image sets. - const imageSetEvents = room.currentState.getStateEvents('im.ponies.room_emotes'); - let loadedImages: ICustomEmoji[] = imageSetEvents.flatMap(imageSetEvent => loadImageSet(imageSetEvent)); + const imageSetEvents = room.currentState.getStateEvents("im.ponies.room_emotes"); + let loadedImages: ICustomEmoji[] = imageSetEvents.flatMap((imageSetEvent) => loadImageSet(imageSetEvent)); // Global emotes from rooms const cli = MatrixClientPeg.get(); const globalPacks = cli.getAccountData("im.ponies.emote_rooms")?.getContent()?.rooms; for (const key in globalPacks) { const packRoom = cli.getRoom(key); - const packRoomImageSetEvents = packRoom.currentState.getStateEvents('im.ponies.room_emotes'); - const moreLoadedImages: ICustomEmoji[] = - packRoomImageSetEvents.flatMap(packRoomImageSetEvents => loadImageSet(packRoomImageSetEvents)); + const packRoomImageSetEvents = packRoom.currentState.getStateEvents("im.ponies.room_emotes"); + const moreLoadedImages: ICustomEmoji[] = packRoomImageSetEvents.flatMap((packRoomImageSetEvents) => + loadImageSet(packRoomImageSetEvents), + ); loadedImages = [...loadedImages, ...moreLoadedImages]; } @@ -117,7 +118,7 @@ export default class EmojiProvider extends AutocompleteProvider { })); this.customEmojiMatcher = new QueryMatcher(sortedCustomImages, { keys: [], - funcs: [o => o.emoji?.shortcodes.map(s => `:${s}:`)], + funcs: [(o) => o.emoji?.shortcodes.map((s) => `:${s}:`)], shouldMatchWordsOnly: true, }); @@ -178,43 +179,42 @@ export default class EmojiProvider extends AutocompleteProvider { }); completions = sortBy(uniq(completions), sorters); - completionResult = completions.map(c => { - if ('unicode' in c.emoji) { - return { - completion: c.emoji.unicode, - component: ( - - { c.emoji.unicode } - - ), - range, - }; - } else { - let mediaUrl; - - // SC: Might be no valid mxc url - try { - mediaUrl = mediaFromMxc(c.emoji.url).getThumbnailOfSourceHttp(24, 24, 'scale'); - } catch (e) { - logger.error(e); + completionResult = completions + .map((c) => { + if ("unicode" in c.emoji) { + return { + completion: c.emoji.unicode, + component: ( + + {c.emoji.unicode} + + ), + range, + }; + } else { + let mediaUrl; + + // SC: Might be no valid mxc url + try { + mediaUrl = mediaFromMxc(c.emoji.url).getThumbnailOfSourceHttp(24, 24, "scale"); + } catch (e) { + logger.error(e); + } + + return { + completion: c.emoji.shortcodes[0], + type: "customEmoji", + completionId: c.emoji.url, + component: ( + + {c.emoji.shortcodes[0]} + + ), + range, + } as const; } - - return { - completion: c.emoji.shortcodes[0], - type: "customEmoji", - completionId: c.emoji.url, - component: ( - - {c.emoji.shortcodes[0]} - - ), - range, - } as const; - } - }).slice(0, LIMIT); + }) + .slice(0, LIMIT); } return completionResult; } diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index 285937f890a..03ec6eb4335 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -33,7 +33,7 @@ import ResizeNotifier from "../../utils/ResizeNotifier"; import TimelinePanel from "./TimelinePanel"; import Spinner from "../views/elements/Spinner"; import { Layout } from "../../settings/enums/Layout"; -import { UserNameColorMode } from '../../settings/enums/UserNameColorMode'; +import { UserNameColorMode } from "../../settings/enums/UserNameColorMode"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import Measured from "../views/elements/Measured"; diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 369c5a29531..ed680a39973 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -341,9 +341,12 @@ export default class LeftPanel extends React.Component { let rightButton: JSX.Element; if (this.state.showBreadcrumbs === BreadcrumbsMode.Labs) { rightButton = ; - // SC: Always show explore button in any space - // eslint-disable-next-line no-constant-condition - } else if (true || this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) { + } else if ( + // SC: Always show explore button in any space + // eslint-disable-next-line no-constant-condition + true || + (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) + ) { rightButton = ( { this.state = { syncErrorData: undefined, - layout: SettingsStore.getValue('layout'), + layout: SettingsStore.getValue("layout"), // use compact timeline view useCompactLayout: SettingsStore.getValue("useCompactLayout"), usageLimitDismissed: false, @@ -179,17 +179,13 @@ class LoggedInView extends React.Component { this.onSync(this._matrixClient.getSyncState(), null, this._matrixClient.getSyncStateData()); this._matrixClient.on(RoomStateEvent.Events, this.onRoomStateEvents); - this.layoutWatcherRef = SettingsStore.watchSetting( - "layout", null, this.onLayoutChanged, - ); + this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, this.onLayoutChanged); this.compactLayoutWatcherRef = SettingsStore.watchSetting( "useCompactLayout", null, this.onCompactLayoutChanged, ); - this.borderRadiusWatcherRef = SettingsStore.watchSetting( - "borderRadius", null, this.onBorderRadiusChanged, - ); + this.borderRadiusWatcherRef = SettingsStore.watchSetting("borderRadius", null, this.onBorderRadiusChanged); this.backgroundImageWatcherRef = SettingsStore.watchSetting( "RoomList.backgroundImage", null, diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 15f67ea50e4..a4a41a79b7f 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -1411,13 +1411,19 @@ export default class MatrixChat extends React.PureComponent { if (this.screenAfterLogin && this.screenAfterLogin.screen) { this.showScreen(this.screenAfterLogin.screen, this.screenAfterLogin.params); this.screenAfterLogin = null; - } else if (!SettingsStore.getValue("Spaces.returnToPreviouslyOpenedRoom") - && localStorage && localStorage.getItem('mx_active_space') - && localStorage.getItem('mx_active_space')[0] === "!") { + } else if ( + !SettingsStore.getValue("Spaces.returnToPreviouslyOpenedRoom") && + localStorage && + localStorage.getItem("mx_active_space") && + localStorage.getItem("mx_active_space")[0] === "!" + ) { // SC: Show the last viewed space this.viewLastSpace(); - } else if (SettingsStore.getValue("Spaces.returnToPreviouslyOpenedRoom") - && localStorage && localStorage.getItem("mx_last_room_id")) { + } else if ( + SettingsStore.getValue("Spaces.returnToPreviouslyOpenedRoom") && + localStorage && + localStorage.getItem("mx_last_room_id") + ) { // Before defaulting to directory, show the last viewed room this.viewLastRoom(); } else { @@ -1433,7 +1439,7 @@ export default class MatrixChat extends React.PureComponent { // SC-ToDo: Make this work for meta spaces dis.dispatch({ action: Action.ViewRoom, - room_id: localStorage.getItem('mx_active_space'), + room_id: localStorage.getItem("mx_active_space"), }); } diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index da75a2f6073..038eab36f36 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -52,7 +52,7 @@ import ResizeNotifier from "../../utils/ResizeNotifier"; import Spinner from "../views/elements/Spinner"; import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks"; import EditorStateTransfer from "../../utils/EditorStateTransfer"; -import { UserNameColorMode } from '../../settings/enums/UserNameColorMode'; +import { UserNameColorMode } from "../../settings/enums/UserNameColorMode"; import { Action } from "../../dispatcher/actions"; import { getEventDisplayInfo } from "../../utils/EventRenderingUtils"; import { IReadReceiptInfo } from "../views/rooms/ReadReceiptMarker"; diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index f881c0b8fb2..d0f1c7b3135 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -205,10 +205,7 @@ export default class RightPanel extends React.Component { break; case RightPanelPhases.NotificationPanel: - card = ; + card = ; break; case RightPanelPhases.PinnedMessages: @@ -237,12 +234,14 @@ export default class RightPanel extends React.Component { ); break; case RightPanelPhases.FilePanel: - card = ; + card = ( + + ); break; case RightPanelPhases.ThreadView: diff --git a/src/components/structures/RoomSearchView.tsx b/src/components/structures/RoomSearchView.tsx index 4ddb9895420..c55cd2ee897 100644 --- a/src/components/structures/RoomSearchView.tsx +++ b/src/components/structures/RoomSearchView.tsx @@ -34,8 +34,8 @@ import ResizeNotifier from "../../utils/ResizeNotifier"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks"; import RoomContext from "../../contexts/RoomContext"; -import { Layout } from '../../settings/enums/Layout'; -import { UserNameColorMode } from '../../settings/enums/UserNameColorMode'; +import { Layout } from "../../settings/enums/Layout"; +import { UserNameColorMode } from "../../settings/enums/UserNameColorMode"; import SettingsStore from "../../settings/SettingsStore"; const DEBUG = false; @@ -65,7 +65,19 @@ interface Props { // XXX: why doesn't searching on name work? export const RoomSearchView = forwardRef( ( - { term, scope, promise, abortController, resizeNotifier, permalinkCreator, className, layout, singleSideBubbles, userNameColorMode, onUpdate }: Props, + { + term, + scope, + promise, + abortController, + resizeNotifier, + permalinkCreator, + className, + layout, + singleSideBubbles, + userNameColorMode, + onUpdate, + }: Props, ref: RefObject, ) => { const client = useContext(MatrixClientContext); diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index bbdb14b1315..80f65976fdb 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -458,25 +458,25 @@ export class RoomView extends React.Component { SettingsStore.watchSetting("layout", null, (...[, , , value]) => this.setState({ layout: value as Layout }), ), - SettingsStore.watchSetting("singleSideBubbles", null, (...[,,, value]) => + SettingsStore.watchSetting("singleSideBubbles", null, (...[, , , value]) => this.setState({ singleSideBubbles: value as boolean }), ), - SettingsStore.watchSetting("adaptiveSideBubbles", null, (...[,,, value]) => + SettingsStore.watchSetting("adaptiveSideBubbles", null, (...[, , , value]) => this.setState({ adaptiveSideBubbles: value as boolean, singleSideBubbles: SettingsStore.getValue("singleSideBubbles"), // restore default }), ), - SettingsStore.watchSetting("userNameColorModeDM", null, (...[,,, value]) => + SettingsStore.watchSetting("userNameColorModeDM", null, (...[, , , value]) => this.recalculateUserNameColorMode(), ), - SettingsStore.watchSetting("userNameColorModeGroup", null, (...[,,, value]) => + SettingsStore.watchSetting("userNameColorModeGroup", null, (...[, , , value]) => this.recalculateUserNameColorMode(), ), - SettingsStore.watchSetting("userNameColorModePublic", null, (...[,,, value]) => + SettingsStore.watchSetting("userNameColorModePublic", null, (...[, , , value]) => this.recalculateUserNameColorMode(), ), - SettingsStore.watchSetting("youtubeEmbedPlayer", null, (...[,,, value]) => + SettingsStore.watchSetting("youtubeEmbedPlayer", null, (...[, , , value]) => this.setState({ youtubeEmbedPlayer: value as boolean }), ), SettingsStore.watchSetting("lowBandwidth", null, (...[, , , value]) => @@ -1214,7 +1214,7 @@ export class RoomView extends React.Component { } // SC: userNameColorMode can change dependent on if room is public - if (ev.getType() === 'm.room.join_rules') { + if (ev.getType() === "m.room.join_rules") { this.recalculateUserNameColorMode(); } }; @@ -1248,7 +1248,7 @@ export class RoomView extends React.Component { const joinRules = room.currentState.getStateEvents("m.room.join_rules", ""); const joinRule = joinRules && joinRules.getContent().join_rule; - const isPublic = joinRule === 'public'; + const isPublic = joinRule === "public"; const isDm = !!DMRoomMap.shared().getUserIdForRoomId(room.roomId); @@ -1930,9 +1930,9 @@ export class RoomView extends React.Component { private get messagePanelClassNames(): string { return classNames("mx_RoomView_messagePanel", { - "mx_IRCLayout": this.state.layout === Layout.IRC, - "sc_BubbleLayout": this.state.layout === Layout.Bubble, - "sc_BubbleLayout_singleSide": this.state.layout === Layout.Bubble && this.state.singleSideBubbles, + mx_IRCLayout: this.state.layout === Layout.IRC, + sc_BubbleLayout: this.state.layout === Layout.Bubble, + sc_BubbleLayout_singleSide: this.state.layout === Layout.Bubble && this.state.singleSideBubbles, }); } diff --git a/src/components/structures/SoundPackContainer.tsx b/src/components/structures/SoundPackContainer.tsx index 909c32adc1e..30635f7a56b 100644 --- a/src/components/structures/SoundPackContainer.tsx +++ b/src/components/structures/SoundPackContainer.tsx @@ -24,8 +24,7 @@ import SettingsStore from "../../settings/SettingsStore"; * Sound packs are implemented by setting the sources to different sources. */ -interface IProps { -} +interface IProps {} interface IState { soundPack?: SoundPack; @@ -35,7 +34,7 @@ export default class SoundPackContainer extends React.Component private watcher: string; private containerRef: React.RefObject; - constructor(props: IProps) { + public constructor(props: IProps) { super(props); this.containerRef = React.createRef(); @@ -44,16 +43,16 @@ export default class SoundPackContainer extends React.Component soundPack: SettingsStore.getValue("soundPack"), }; - this.watcher = SettingsStore.watchSetting("soundPack", null, (...[,,,, value]) => + this.watcher = SettingsStore.watchSetting("soundPack", null, (...[, , , , value]) => this.setState({ soundPack: value as SoundPack }), ); } - public componentWillUnmount() { + public componentWillUnmount(): void { SettingsStore.unwatchSetting(this.watcher); } - public render() { + public render(): JSX.Element { return (
@@ -125,11 +123,9 @@ const GenericEventListSummary: React.FC = ({
- { avatars } - - - { summaryText } + {avatars} + {summaryText}
); diff --git a/src/components/views/elements/InlineSpinner.tsx b/src/components/views/elements/InlineSpinner.tsx index a663e5e5020..80242f1e60f 100644 --- a/src/components/views/elements/InlineSpinner.tsx +++ b/src/components/views/elements/InlineSpinner.tsx @@ -33,11 +33,7 @@ export default class InlineSpinner extends React.PureComponent { public render(): JSX.Element { return (
- +
); } diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index 8233809f851..c2d327c593f 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.tsx @@ -199,9 +199,11 @@ export default class ReplyChain extends React.Component { }; private getReplyChainColorClass(ev: MatrixEvent): string { - return getUserNameColorClass(this.props.userNameColorMode, - ev.getSender(), this.matrixClient.getRoom(ev.getRoomId())) - .replace("Username", "ReplyChain"); + return getUserNameColorClass( + this.props.userNameColorMode, + ev.getSender(), + this.matrixClient.getRoom(ev.getRoomId()), + ).replace("Username", "ReplyChain"); } public render(): JSX.Element { diff --git a/src/components/views/elements/Spinner.tsx b/src/components/views/elements/Spinner.tsx index f1d442b055a..da726d0ab88 100644 --- a/src/components/views/elements/Spinner.tsx +++ b/src/components/views/elements/Spinner.tsx @@ -34,14 +34,11 @@ export default class Spinner extends React.PureComponent { return (
{this.props.message && ( -
{this.props.message}
  + +
{this.props.message}
  + )} - +
); } diff --git a/src/components/views/elements/SvgSpinner.tsx b/src/components/views/elements/SvgSpinner.tsx index 34623523087..05a525b6fd1 100644 --- a/src/components/views/elements/SvgSpinner.tsx +++ b/src/components/views/elements/SvgSpinner.tsx @@ -25,13 +25,13 @@ interface IProps { } export default class InlineSpinner extends React.PureComponent { - static defaultProps = { + public static defaultProps = { w: 32, h: 32, className: "mx_Spinner_icon", }; - render() { + public render(): JSX.Element { return ( // loading-bubbles.svg from https://github.com/jxnblk/loading {
{emojisForRow.map((emoji) => ( ))}
diff --git a/src/components/views/emojipicker/Emoji.tsx b/src/components/views/emojipicker/Emoji.tsx index d3b04a6018e..e247ba667a8 100644 --- a/src/components/views/emojipicker/Emoji.tsx +++ b/src/components/views/emojipicker/Emoji.tsx @@ -20,8 +20,8 @@ import { logger } from "matrix-js-sdk/src/logger"; import { MenuItem } from "../../structures/ContextMenu"; import { IEmoji } from "../../../emoji"; -import { ICustomEmoji } from '../../../emojipicker/customemoji'; -import { mediaFromMxc } from '../../../customisations/Media'; +import { ICustomEmoji } from "../../../emojipicker/customemoji"; +import { mediaFromMxc } from "../../../customisations/Media"; interface IProps { emoji: IEmoji | ICustomEmoji; @@ -37,27 +37,28 @@ class Emoji extends React.PureComponent { const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props; let emojiElement: JSX.Element; - if ('unicode' in emoji) { + if ("unicode" in emoji) { const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode); - emojiElement =
- { emoji.unicode } -
; + emojiElement = ( +
+ {emoji.unicode} +
+ ); } else { let mediaUrl; // SC: Might be no valid mxc url try { - mediaUrl = mediaFromMxc(emoji.url).getThumbnailOfSourceHttp(24, 24, 'scale'); + mediaUrl = mediaFromMxc(emoji.url).getThumbnailOfSourceHttp(24, 24, "scale"); } catch (e) { logger.error(e); } - emojiElement =
- {emoji.shortcodes[0]} -
; + emojiElement = ( +
+ {emoji.shortcodes[0]} +
+ ); } emojiElement; @@ -68,10 +69,10 @@ class Emoji extends React.PureComponent { onMouseEnter={() => onMouseEnter(emoji)} onMouseLeave={() => onMouseLeave(emoji)} className="mx_EmojiPicker_item_wrapper" - label={'unicode' in emoji ? emoji.unicode : emoji.shortcodes[0]} + label={"unicode" in emoji ? emoji.unicode : emoji.shortcodes[0]} disabled={this.props.disabled} > - { emojiElement } + {emojiElement} ); } diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx index 340077b50b0..5f2bd93acde 100644 --- a/src/components/views/emojipicker/EmojiPicker.tsx +++ b/src/components/views/emojipicker/EmojiPicker.tsx @@ -27,8 +27,8 @@ import Search from "./Search"; import Preview from "./Preview"; import QuickReactions from "./QuickReactions"; import Category, { ICategory, CategoryKey } from "./Category"; -import AccessibleButton from '../elements/AccessibleButton'; -import { ICustomEmoji, loadImageSet } from '../../../emojipicker/customemoji'; +import AccessibleButton from "../elements/AccessibleButton"; +import { ICustomEmoji, loadImageSet } from "../../../emojipicker/customemoji"; export const CATEGORY_HEADER_HEIGHT = 20; export const EMOJI_HEIGHT = 35; @@ -76,23 +76,30 @@ class EmojiPicker extends React.Component { let loadedImages: ICustomEmoji[]; if (props.room) { - const imageSetEvents = props.room.currentState.getStateEvents('im.ponies.room_emotes'); - loadedImages = imageSetEvents.flatMap(imageSetEvent => loadImageSet(imageSetEvent)); + const imageSetEvents = props.room.currentState.getStateEvents("im.ponies.room_emotes"); + loadedImages = imageSetEvents.flatMap((imageSetEvent) => loadImageSet(imageSetEvent)); } else { loadedImages = []; } // populate the map of custom emojis from shortcodes - loadedImages.forEach(image => { - image?.shortcodes.forEach(shortCode => { + loadedImages.forEach((image) => { + image?.shortcodes.forEach((shortCode) => { this.shortcodes_to_custom_emoji[`:${shortCode}:`] = image; }); }); // Convert recent emoji characters to emoji data, removing unknowns and duplicates - this.recentlyUsed = Array.from(new Set(recent.get().map(recentKey => { - return getEmojiFromUnicode(recentKey) || this.shortcodes_to_custom_emoji[recentKey]; - }).filter(Boolean))); + this.recentlyUsed = Array.from( + new Set( + recent + .get() + .map((recentKey) => { + return getEmojiFromUnicode(recentKey) || this.shortcodes_to_custom_emoji[recentKey]; + }) + .filter(Boolean), + ), + ); this.allEmojis = { recent: this.recentlyUsed, room: loadedImages, @@ -243,7 +250,7 @@ class EmojiPicker extends React.Component { }; private emojiMatchesFilter = (emoji: IEmoji | ICustomEmoji, filter: string): boolean => { - if ('label' in emoji) { + if ("label" in emoji) { return ( emoji.label.toLowerCase().includes(filter) || (Array.isArray(emoji.emoticon) @@ -253,7 +260,7 @@ class EmojiPicker extends React.Component { emoji.unicode.split(ZERO_WIDTH_JOINER).includes(filter) ); } else { - return emoji.shortcodes.some(x => x.toLowerCase().includes(filter)); + return emoji.shortcodes.some((x) => x.toLowerCase().includes(filter)); } }; @@ -279,7 +286,7 @@ class EmojiPicker extends React.Component { private onClickEmoji = (emoji: IEmoji | ICustomEmoji): void => { if (this.props.onChoose(emoji) !== false) { - recent.add('unicode' in emoji ? emoji.unicode : `:${emoji.shortcodes[0]}:`); + recent.add("unicode" in emoji ? emoji.unicode : `:${emoji.shortcodes[0]}:`); } }; @@ -329,15 +336,11 @@ class EmojiPicker extends React.Component { return categoryElement; })} - { - (this.props.allowUnlisted && this.state.filter) && - this.reactWith(this.state.filter)} - > - { _t('React with "%(reaction)s"', { reaction: this.state.filter }) } - - } + {this.props.allowUnlisted && this.state.filter && ( + this.reactWith(this.state.filter)}> + {_t('React with "%(reaction)s"', { reaction: this.state.filter })} + + )} {this.state.previewEmoji || !this.props.showQuickReactions ? ( ) : ( diff --git a/src/components/views/emojipicker/Header.tsx b/src/components/views/emojipicker/Header.tsx index 90ab1dd912e..9063ac05c1e 100644 --- a/src/components/views/emojipicker/Header.tsx +++ b/src/components/views/emojipicker/Header.tsx @@ -17,13 +17,13 @@ limitations under the License. import React from "react"; import classNames from "classnames"; -import { logger } from 'matrix-js-sdk/src/logger'; +import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; import { CategoryKey, ICategory } from "./Category"; import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; -import { mediaFromMxc } from '../../../customisations/Media'; +import { mediaFromMxc } from "../../../customisations/Media"; interface IProps { categories: ICategory[]; @@ -103,7 +103,7 @@ class Header extends React.PureComponent { onKeyDown={this.onKeyDown} onWheel={this.onWheel} > - { this.props.categories.map(category => { + {this.props.categories.map((category) => { let emojiElement: JSX.Element; let classes: string; if (category.representativeEmoji) { @@ -111,16 +111,22 @@ class Header extends React.PureComponent { // SC: Might be no valid mxc url try { - mediaUrl = mediaFromMxc(category.representativeEmoji.url). - getThumbnailOfSourceHttp(24, 24, 'scale'); + mediaUrl = mediaFromMxc(category.representativeEmoji.url).getThumbnailOfSourceHttp( + 24, + 24, + "scale", + ); } catch (e) { logger.error(e); } - emojiElement = {category.representativeEmoji.shortcodes[0]}; + emojiElement = ( + {category.representativeEmoji.shortcodes[0]} + ); classes = classNames(`mx_EmojiPicker_anchor`, `mx_CustomEmojiCategory`, { mx_EmojiPicker_anchor_visible: category.visible, }); @@ -130,21 +136,23 @@ class Header extends React.PureComponent { }); } // Properties of this button are also modified by EmojiPicker's updateVisibility in DOM. - return ; - }) } + return ( + + ); + })} ); } diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index be208c0dd80..759d4e62099 100644 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ b/src/components/views/messages/DisambiguatedProfile.tsx @@ -22,8 +22,8 @@ import classNames from "classnames"; import { _t } from "../../../languageHandler"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import UserIdentifier from "../../../customisations/UserIdentifier"; -import { UserNameColorMode } from '../../../settings/enums/UserNameColorMode'; -import { MatrixClientPeg } from '../../../MatrixClientPeg'; +import { UserNameColorMode } from "../../../settings/enums/UserNameColorMode"; +import { MatrixClientPeg } from "../../../MatrixClientPeg"; interface IProps { member?: RoomMember | null; @@ -37,14 +37,18 @@ interface IProps { export default class DisambiguatedProfile extends React.Component { public render(): JSX.Element { - const { fallbackName, userNameColorMode, member, colored, emphasizeDisplayName, withTooltip, onClick } = this.props; + const { fallbackName, userNameColorMode, member, colored, emphasizeDisplayName, withTooltip, onClick } = + this.props; const rawDisplayName = member?.rawDisplayName || fallbackName; const mxid = member?.userId; let colorClass: string | undefined; if (colored) { colorClass = getUserNameColorClass( - userNameColorMode, fallbackName, MatrixClientPeg.get().getRoom(member?.roomId)); + userNameColorMode, + fallbackName, + MatrixClientPeg.get().getRoom(member?.roomId), + ); } let mxidElement; diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx index c51a5bc5338..84249259456 100644 --- a/src/components/views/messages/LegacyCallEvent.tsx +++ b/src/components/views/messages/LegacyCallEvent.tsx @@ -30,7 +30,7 @@ import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { formatPreciseDuration } from "../../../DateUtils"; import Clock from "../audio_messages/Clock"; -import { Layout } from '../../../settings/enums/Layout'; +import { Layout } from "../../../settings/enums/Layout"; const MAX_NON_NARROW_WIDTH = (450 / 70) * 100; diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index eb31b43eafa..d39da2d4b6e 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -573,13 +573,15 @@ export default class MImageBody extends React.Component { errorText = _t("Error downloading image"); } - return
- - { errorText } - { this.props.scBubbleTimestamp } - - { this.props.scBubbleActionBar } -
; + return ( +
+ + {errorText} + {this.props.scBubbleTimestamp} + + {this.props.scBubbleActionBar} +
+ ); } let contentUrl = this.state.contentUrl; @@ -596,14 +598,16 @@ export default class MImageBody extends React.Component { const thumbnail = this.messageContent(contentUrl, thumbUrl, content); const fileBody = this.getFileBody(); - return
-
- {thumbnail} - {fileBody} - {this.props.scBubbleTimestamp} + return ( +
+
+ {thumbnail} + {fileBody} + {this.props.scBubbleTimestamp} +
+ {this.props.scBubbleActionBar}
- { this.props.scBubbleActionBar } -
; + ); } } diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx index 4ed004c43e2..ea73288a945 100644 --- a/src/components/views/messages/SenderProfile.tsx +++ b/src/components/views/messages/SenderProfile.tsx @@ -19,7 +19,7 @@ import React from "react"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { MsgType } from "matrix-js-sdk/src/@types/event"; -import { UserNameColorMode } from '../../../settings/enums/UserNameColorMode'; +import { UserNameColorMode } from "../../../settings/enums/UserNameColorMode"; import DisambiguatedProfile from "./DisambiguatedProfile"; import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile"; diff --git a/src/components/views/messages/TileErrorBoundary.tsx b/src/components/views/messages/TileErrorBoundary.tsx index f74bfff2038..9ed0b16f0ba 100644 --- a/src/components/views/messages/TileErrorBoundary.tsx +++ b/src/components/views/messages/TileErrorBoundary.tsx @@ -102,29 +102,33 @@ export default class TileErrorBoundary extends React.Component { ); } - const snippet = ( - { _t("Can't load this message") } - { mxEvent && ` (${mxEvent.getType()})` } - { submitLogsButton } - { viewSourceButton } - ); + const snippet = ( + + {_t("Can't load this message")} + {mxEvent && ` (${mxEvent.getType()})`} + {submitLogsButton} + {viewSourceButton} + + ); if (this.props.layout === Layout.Bubble) { - return (
  • -
    -
    -
    - { snippet } + return ( +
  • +
    +
    +
    + {snippet} +
    -
    • - ); + + ); } else { - return (
  • -
    - { snippet } -
    -
    • ); + return ( +
  • +
    {snippet}
    +
    • + ); } } diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 9b9fdb7d191..37d9a6f97a6 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -49,7 +49,6 @@ import RoomName from "../elements/RoomName"; import UIStore from "../../../stores/UIStore"; import ExportDialog from "../dialogs/ExportDialog"; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; -import RoomTopic from "../elements/RoomTopic"; import PosthogTrackers from "../../../PosthogTrackers"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { PollHistoryDialog } from "../dialogs/polls/PollHistoryDialog"; diff --git a/src/components/views/room_settings/RoomPublishSetting.tsx b/src/components/views/room_settings/RoomPublishSetting.tsx index 7a1a86f9566..9a90894f842 100644 --- a/src/components/views/room_settings/RoomPublishSetting.tsx +++ b/src/components/views/room_settings/RoomPublishSetting.tsx @@ -77,7 +77,7 @@ export default class RoomPublishSetting extends React.PureComponent }); } - public insertEmoji(emoji: ICustomEmoji | IEmoji) { + public insertEmoji(emoji: ICustomEmoji | IEmoji): void { this.modifiedFlag = true; const { model } = this.props; const { partCreator } = model; const caret = this.getCaret(); const position = model.positionForOffset(caret.offset, caret.atNodeEnd); let emojiPart: Part; - if ('unicode' in emoji) { + if ("unicode" in emoji) { emojiPart = partCreator.emoji(emoji.unicode); } else { emojiPart = partCreator.customEmoji(emoji.shortcodes[0], emoji.url); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index b177e882d11..cac06ecaf38 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -933,7 +933,8 @@ export class UnwrappedEventTile extends React.Component // Use `getSender()` because searched events might not have a proper `sender`. const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.get().getUserId(); - const scBubbleEnabled = this.props.layout === Layout.Bubble && + const scBubbleEnabled = + this.props.layout === Layout.Bubble && this.context.timelineRenderingType !== TimelineRenderingType.Notification && this.context.timelineRenderingType !== TimelineRenderingType.File; const showRight = isOwnEvent && !this.props.singleSideBubbles; @@ -943,7 +944,8 @@ export class UnwrappedEventTile extends React.Component if ( this.context.timelineRenderingType !== TimelineRenderingType.Room && this.context.timelineRenderingType !== TimelineRenderingType.Search && - !isInfoMessage && !isBubbleMessage + !isInfoMessage && + !isBubbleMessage ) { isContinuation = false; } @@ -962,8 +964,10 @@ export class UnwrappedEventTile extends React.Component mx_EventTile_sending: !isEditing && isSending, mx_EventTile_highlight: this.shouldHighlight(), mx_EventTile_selected: this.props.isSelectedEvent || this.state.contextMenu, - mx_EventTile_continuation: isContinuation || (this.props.layout !== Layout.Bubble && - (eventType === EventType.CallInvite || ElementCall.CALL_EVENT_TYPE.matches(eventType))), + mx_EventTile_continuation: + isContinuation || + (this.props.layout !== Layout.Bubble && + (eventType === EventType.CallInvite || ElementCall.CALL_EVENT_TYPE.matches(eventType))), mx_EventTile_last: this.props.last, mx_EventTile_lastInSection: this.props.lastInSection, mx_EventTile_contextual: this.props.contextual, @@ -1067,22 +1071,25 @@ export class UnwrappedEventTile extends React.Component this.context.timelineRenderingType === TimelineRenderingType.Pinned || this.context.timelineRenderingType === TimelineRenderingType.Thread ) { - sender = ; + sender = ( + + ); } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { - sender = ; + sender = ( + + ); } else { - sender = ; + sender = ( + + ); } } @@ -1142,7 +1149,8 @@ export class UnwrappedEventTile extends React.Component } const linkedTimestamp = ( - ); - const placeholderTimestamp = - { timestamp } - ; + const placeholderTimestamp = {timestamp}; const useIRCLayout = this.props.layout === Layout.IRC; const groupTimestamp = !useIRCLayout ? linkedTimestamp : null; @@ -1388,12 +1394,13 @@ export class UnwrappedEventTile extends React.Component ); } - default: { // Pinned, Room, Search + default: { + // Pinned, Room, Search if (scBubbleEnabled) { const infoBubble = isInfoMessage || isBubbleMessage; const mediaBodyTypes = []; // 'm.image', 'm.file', 'm.audio', 'm.video' - const mediaEvTypes = ['m.sticker']; + const mediaEvTypes = ["m.sticker"]; let mediaBody = false; let stickerBody = false; let noticeBody = false; @@ -1411,41 +1418,34 @@ export class UnwrappedEventTile extends React.Component stickerBody = true; } - if (msgtype && msgtype == 'm.notice') noticeBody = true; - - const bubbleLineClasses = classNames( - "sc_EventTile_bubbleLine", - { - "sc_EventTile_bubbleLine_info": infoBubble, - }, - ); - const bubbleAreaClasses = classNames( - "sc_EventTile_bubbleArea", - { - "sc_EventTile_bubbleArea_right": !infoBubble && showRight, - "sc_EventTile_bubbleArea_left": !infoBubble && showLeft, - "sc_EventTile_bubbleArea_center": infoBubble, - "sc_EventTile_bubbleArea_info": infoBubble, - }, - ); - const bubbleClasses = classNames( - { - "sc_EventTile_bubble": !mediaBody, - "sc_EventTile_bubble_media": mediaBody, - "sc_EventTile_bubble_info": infoBubble, - "sc_EventTile_bubble_self": !infoBubble && isOwnEvent, - "sc_EventTile_bubble_right": !infoBubble && showRight, - "sc_EventTile_bubble_left": !infoBubble && showLeft, - "sc_EventTile_bubble_center": infoBubble, - "sc_EventTile_bubble_tail": !infoBubble && !this.props.continuation, - "sc_EventTile_bubble_notice": noticeBody, - "sc_EventTile_bubble_sticker": stickerBody, - }, - ); + if (msgtype && msgtype == "m.notice") noticeBody = true; + + const bubbleLineClasses = classNames("sc_EventTile_bubbleLine", { + sc_EventTile_bubbleLine_info: infoBubble, + }); + const bubbleAreaClasses = classNames("sc_EventTile_bubbleArea", { + sc_EventTile_bubbleArea_right: !infoBubble && showRight, + sc_EventTile_bubbleArea_left: !infoBubble && showLeft, + sc_EventTile_bubbleArea_center: infoBubble, + sc_EventTile_bubbleArea_info: infoBubble, + }); + const bubbleClasses = classNames({ + sc_EventTile_bubble: !mediaBody, + sc_EventTile_bubble_media: mediaBody, + sc_EventTile_bubble_info: infoBubble, + sc_EventTile_bubble_self: !infoBubble && isOwnEvent, + sc_EventTile_bubble_right: !infoBubble && showRight, + sc_EventTile_bubble_left: !infoBubble && showLeft, + sc_EventTile_bubble_center: infoBubble, + sc_EventTile_bubble_tail: !infoBubble && !this.props.continuation, + sc_EventTile_bubble_notice: noticeBody, + sc_EventTile_bubble_sticker: stickerBody, + }); // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers - return ( - React.createElement(this.props.as || "li", { + return React.createElement( + this.props.as || "li", + { "ref": this.ref, "className": classes, "tabIndex": -1, @@ -1458,46 +1458,61 @@ export class UnwrappedEventTile extends React.Component "data-has-reply": !!replyChain, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), - }, <> -
    - { this.renderContextMenu() } + }, + <> +
    + {this.renderContextMenu()}
    - { sender } - { replyChain } - { infoBubble ? avatar : null } - { renderTile(this.context.timelineRenderingType, { - ...this.props, - - // overrides - ref: this.tile, - isSeeingThroughMessageHiddenForModeration, - timestamp: null, - scBubble: true, - scBubbleActionBar: mediaBody ? actionBar : null, - scBubbleTimestamp: <>{ placeholderTimestamp }{ linkedTimestamp }, - - // appease TS - highlights: this.props.highlights, - highlightLink: this.props.highlightLink, - onHeightChanged: this.props.onHeightChanged, - permalinkCreator: this.props.permalinkCreator, - }, this.context.showHiddenEvents) } - { !mediaBody ? actionBar : null } - { groupPadlock } + {sender} + {replyChain} + {infoBubble ? avatar : null} + {renderTile( + this.context.timelineRenderingType, + { + ...this.props, + + // overrides + ref: this.tile, + isSeeingThroughMessageHiddenForModeration, + timestamp: null, + scBubble: true, + scBubbleActionBar: mediaBody ? actionBar : null, + scBubbleTimestamp: ( + <> + {placeholderTimestamp} + {linkedTimestamp} + + ), + + // appease TS + highlights: this.props.highlights, + highlightLink: this.props.highlightLink, + onHeightChanged: this.props.onHeightChanged, + permalinkCreator: this.props.permalinkCreator, + }, + this.context.showHiddenEvents, + )} + {!mediaBody ? actionBar : null} + {groupPadlock}
    - { reactionsRow } - { this.renderThreadInfo() } + {reactionsRow} + {this.renderThreadInfo()}
    - { !infoBubble ? avatar : null } - { msgOption } - ) + {!infoBubble ? avatar : null} + {msgOption} + , ); } else { // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers - return ( - React.createElement(this.props.as || "li", { + return React.createElement( + this.props.as || "li", + { "ref": this.ref, "className": classes, "tabIndex": -1, @@ -1510,42 +1525,51 @@ export class UnwrappedEventTile extends React.Component "data-has-reply": !!replyChain, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), - }, <> - { ircTimestamp } - { sender } - { ircPadlock } - { avatar } + }, + <> + {ircTimestamp} + {sender} + {ircPadlock} + {avatar}
    - { this.renderContextMenu() } - { groupTimestamp } - { groupPadlock } - { replyChain } - { renderTile(this.context.timelineRenderingType, { - ...this.props, - - // overrides - ref: this.tile, - isSeeingThroughMessageHiddenForModeration, - timestamp: bubbleTimestamp, - - // appease TS - highlights: this.props.highlights, - highlightLink: this.props.highlightLink, - onHeightChanged: this.props.onHeightChanged, - permalinkCreator: this.props.permalinkCreator, - }, this.context.showHiddenEvents) } - { actionBar } - { this.props.layout === Layout.IRC && <> - { reactionsRow } - { this.renderThreadInfo() } - } + {this.renderContextMenu()} + {groupTimestamp} + {groupPadlock} + {replyChain} + {renderTile( + this.context.timelineRenderingType, + { + ...this.props, + + // overrides + ref: this.tile, + isSeeingThroughMessageHiddenForModeration, + timestamp: bubbleTimestamp, + + // appease TS + highlights: this.props.highlights, + highlightLink: this.props.highlightLink, + onHeightChanged: this.props.onHeightChanged, + permalinkCreator: this.props.permalinkCreator, + }, + this.context.showHiddenEvents, + )} + {actionBar} + {this.props.layout === Layout.IRC && ( + <> + {reactionsRow} + {this.renderThreadInfo()} + + )}
    - { this.props.layout !== Layout.IRC && <> - { reactionsRow } - { this.renderThreadInfo() } - } - { msgOption } - ) + {this.props.layout !== Layout.IRC && ( + <> + {reactionsRow} + {this.renderThreadInfo()} + + )} + {msgOption} + , ); } } diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx index 1e70d9e2d8c..94f5a83caff 100644 --- a/src/components/views/rooms/LinkPreviewGroup.tsx +++ b/src/components/views/rooms/LinkPreviewGroup.tsx @@ -69,7 +69,13 @@ const LinkPreviewGroup: React.FC = ({ links, mxEvent, onCancelClick, onH return (
    {showPreviews.map(([link, preview], i) => ( - + {i === 0 ? ( { videoID = this.props.link.split("youtu.be/")[1].split("&")[0]; } - const restrictedDims = suggestedVideoSize( - SettingsStore.getValue("Images.size") as ImageSize, - { w: p["og:image:width"], h: p["og:image:height"] }, - ); + const restrictedDims = suggestedVideoSize(SettingsStore.getValue("Images.size") as ImageSize, { + w: p["og:image:width"], + h: p["og:image:height"], + }); return (
    -
    +
    {
    - { needsTooltip ? - { anchor } - : anchor } - { p["og:site_name"] && - { (" - " + p["og:site_name"]) } - } + {needsTooltip ? ( + + {anchor} + + ) : ( + anchor + )} + {p["og:site_name"] && ( + {" - " + p["og:site_name"]} + )}
    {description} diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 0dc9ca2ad9a..bbc2286f589 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -35,7 +35,7 @@ import { aboveLeftOf, MenuProps } from "../../structures/ContextMenu"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ReplyPreview from "./ReplyPreview"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; -import { Layout } from '../../../settings/enums/Layout'; +import { Layout } from "../../../settings/enums/Layout"; import VoiceRecordComposerTile from "./VoiceRecordComposerTile"; import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore"; import { RecordingState } from "../../../audio/VoiceRecording"; @@ -74,12 +74,9 @@ interface ISendButtonProps { } function SendButton(props: ISendButtonProps): JSX.Element { - const classes = classNames( - "mx_MessageComposer_sendMessage", - { - "mx_MessageComposer_sendMessage_enabled": props.enabled, - }, - ); + const classes = classNames("mx_MessageComposer_sendMessage", { + mx_MessageComposer_sendMessage_enabled: props.enabled, + }); return ( = (props: IProps) => { ]; } else if (props.collapseButtons) { mainButtons = [ - isWysiwygLabEnabled ? - : - emojiButton(props, room), + isWysiwygLabEnabled ? ( + + ) : ( + emojiButton(props, room) + ), uploadButton(), // props passed via UploadButtonContext ]; moreButtons = [ diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx index c08d4cb211f..fc63e7d1894 100644 --- a/src/components/views/rooms/PinnedEventTile.tsx +++ b/src/components/views/rooms/PinnedEventTile.tsx @@ -97,7 +97,11 @@ export default class PinnedEventTile extends React.Component { fallbackUserId={sender} /> - + {this.props.event.sender?.name || sender} diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index f664ce31239..c0e91685a56 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -31,7 +31,7 @@ import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils"; import MFileBody from "../messages/MFileBody"; import MemberAvatar from "../avatars/MemberAvatar"; import MVoiceMessageBody from "../messages/MVoiceMessageBody"; -import { UserNameColorMode } from '../../../settings/enums/UserNameColorMode'; +import { UserNameColorMode } from "../../../settings/enums/UserNameColorMode"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { renderReplyTile } from "../../../events/EventTileFactory"; import { GetRelationsForEvent } from "../rooms/EventTile"; diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index cc92b644175..4b199209843 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -96,13 +96,8 @@ export const TAG_ORDER: TagID[] = [ DefaultTagID.Suggested, DefaultTagID.Archived, ]; -const ALWAYS_VISIBLE_SPLIT_TAGS: TagID[] = [ - DefaultTagID.DM, - DefaultTagID.Untagged, -]; -const ALWAYS_VISIBLE_UNIFIED_TAGS: TagID[] = [ - DefaultTagID.Unified, -]; +const ALWAYS_VISIBLE_SPLIT_TAGS: TagID[] = [DefaultTagID.DM, DefaultTagID.Untagged]; +const ALWAYS_VISIBLE_UNIFIED_TAGS: TagID[] = [DefaultTagID.Unified]; interface ITagAesthetics { sectionLabel: string; @@ -201,19 +196,21 @@ const DmAuxButton: React.FC = ({ tabIndex, dispatcher = default ); } else if ((true || !activeSpace) && showCreateRooms) { - return <> - { - dispatcher.dispatch({ action: "view_create_chat" }); - PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", e); - }} - className="mx_RoomSublist_auxButton" - tooltipClassName="mx_RoomSublist_addRoomTooltip" - aria-label={_t("Start chat")} - title={_t("Start chat")} - /> - ; + return ( + <> + { + dispatcher.dispatch({ action: "view_create_chat" }); + PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", e); + }} + className="mx_RoomSublist_auxButton" + tooltipClassName="mx_RoomSublist_addRoomTooltip" + aria-label={_t("Start chat")} + title={_t("Start chat")} + /> + + ); } return null; @@ -310,32 +307,69 @@ const UntaggedAuxButton: React.FC = ({ tabIndex }) => { canAddRooms ? undefined : _t("You do not have permissions to add rooms to this space") } /> - ) - : null - } + + ) : null} ); // SC: Just show the button, no menu - scAddRoomButton = { - e.preventDefault(); - e.stopPropagation(); - showCreateNewRoom(activeSpace); - }} - className="mx_RoomSublist_auxButton mx_RoomSublist_auxGroupButton" - tooltipClassName="mx_RoomSublist_addRoomTooltip" - disabled={!canAddRooms} - aria-label={canAddRooms ? _t("Create new room") - : _t("You do not have permissions to add rooms to this space")} - title={canAddRooms ? _t("Create new room") - : _t("You do not have permissions to add rooms to this space")} - />; - // eslint-disable-next-line no-constant-condition + scAddRoomButton = ( + { + e.preventDefault(); + e.stopPropagation(); + showCreateNewRoom(activeSpace); + }} + className="mx_RoomSublist_auxButton mx_RoomSublist_auxGroupButton" + tooltipClassName="mx_RoomSublist_addRoomTooltip" + disabled={!canAddRooms} + aria-label={ + canAddRooms ? _t("Create new room") : _t("You do not have permissions to add rooms to this space") + } + title={ + canAddRooms ? _t("Create new room") : _t("You do not have permissions to add rooms to this space") + } + /> + ); + // eslint-disable-next-line no-constant-condition } else if (true || menuDisplayed) { - contextMenuContent = - { showCreateRoom && <> + contextMenuContent = ( + + {showCreateRoom && ( + <> + { + e.preventDefault(); + e.stopPropagation(); + closeMenu(); + PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuExploreRoomsItem", e); + defaultDispatcher.fire(Action.ViewRoomDirectory); + }} + /> + {videoRoomsEnabled && ( + { + e.preventDefault(); + e.stopPropagation(); + closeMenu(); + defaultDispatcher.dispatch({ + action: "view_create_room", + type: elementCallVideoRoomsEnabled + ? RoomType.UnstableCall + : RoomType.ElementVideo, + }); + }} + > + + + )} + + )} = ({ tabIndex }) => { defaultDispatcher.fire(Action.ViewRoomDirectory); }} /> - { videoRoomsEnabled && ( - { - e.preventDefault(); - e.stopPropagation(); - closeMenu(); - defaultDispatcher.dispatch({ - action: "view_create_room", - type: elementCallVideoRoomsEnabled ? RoomType.UnstableCall : RoomType.ElementVideo, - }); - }} - > - - - ) } - } - + ); + + // SC: Just show the button, no menu + scAddRoomButton = ( + { e.preventDefault(); e.stopPropagation(); - closeMenu(); - PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuExploreRoomsItem", e); - defaultDispatcher.fire(Action.ViewRoomDirectory); + defaultDispatcher.dispatch({ action: "view_create_room" }); }} + className="mx_RoomSublist_auxButton mx_RoomSublist_auxGroupButton" + tooltipClassName="mx_RoomSublist_addRoomTooltip" + aria-label={_t("Create new room")} + title={_t("Create new room")} /> - ; - - // SC: Just show the button, no menu - scAddRoomButton = { - e.preventDefault(); - e.stopPropagation(); - defaultDispatcher.dispatch({ action: "view_create_room" }); - }} - className="mx_RoomSublist_auxButton mx_RoomSublist_auxGroupButton" - tooltipClassName="mx_RoomSublist_addRoomTooltip" - aria-label={_t("Create new room")} - title={_t("Create new room")} - />; + ); } // SC: Just show the button, no menu @@ -423,11 +431,15 @@ const UntaggedAuxButton: React.FC = ({ tabIndex }) => { ); }; -const UnifiedAuxButton = (iAuxButtonProps: IAuxButtonProps) => { - return <> - { DmAuxButton(iAuxButtonProps) } - { UntaggedAuxButton(iAuxButtonProps) } - ; +const UnifiedAuxButton: React.FC = (iAuxButtonProps: IAuxButtonProps) => { + return ( + <> + {/* eslint-disable-next-line new-cap */} + {DmAuxButton(iAuxButtonProps)} + {/* eslint-disable-next-line new-cap */} + {UntaggedAuxButton(iAuxButtonProps)} + + ); }; const TAG_AESTHETICS: ITagAestheticsMap = { @@ -508,8 +520,11 @@ export default class RoomList extends React.PureComponent { feature_favourite_messages: SettingsStore.getValue("feature_favourite_messages"), }; - this.unifiedRoomListWatcherRef = SettingsStore.watchSetting("unifiedRoomList", null, - this.onUnifiedRoomListChange); + this.unifiedRoomListWatcherRef = SettingsStore.watchSetting( + "unifiedRoomList", + null, + this.onUnifiedRoomListChange, + ); } public componentDidMount(): void { @@ -708,21 +723,19 @@ export default class RoomList extends React.PureComponent { const aesthetics = TAG_AESTHETICS[orderedTagId]; if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`); - let alwaysVisible = - (this.state.unifiedRoomList ? ALWAYS_VISIBLE_UNIFIED_TAGS : ALWAYS_VISIBLE_SPLIT_TAGS) - .includes(orderedTagId); - if ( - (this.props.activeSpace === MetaSpace.Favourites && orderedTagId !== DefaultTagID.Favourite) || - (this.props.activeSpace === MetaSpace.People && orderedTagId !== DefaultTagID.DM) || - (this.props.activeSpace === MetaSpace.Orphans && orderedTagId === DefaultTagID.DM) || - ( - !isMetaSpace(this.props.activeSpace) && - orderedTagId === DefaultTagID.DM && - !SettingsStore.getValue("Spaces.showPeopleInSpace", this.props.activeSpace) - ) - ) { - alwaysVisible = false; - } + let alwaysVisible = ( + this.state.unifiedRoomList ? ALWAYS_VISIBLE_UNIFIED_TAGS : ALWAYS_VISIBLE_SPLIT_TAGS + ).includes(orderedTagId); + if ( + (this.props.activeSpace === MetaSpace.Favourites && orderedTagId !== DefaultTagID.Favourite) || + (this.props.activeSpace === MetaSpace.People && orderedTagId !== DefaultTagID.DM) || + (this.props.activeSpace === MetaSpace.Orphans && orderedTagId === DefaultTagID.DM) || + (!isMetaSpace(this.props.activeSpace) && + orderedTagId === DefaultTagID.DM && + !SettingsStore.getValue("Spaces.showPeopleInSpace", this.props.activeSpace)) + ) { + alwaysVisible = false; + } let forceExpanded = false; if ( @@ -763,10 +776,10 @@ export default class RoomList extends React.PureComponent { public render(): JSX.Element { const roomListStyle = SettingsStore.getValue("roomListStyle"); const roomListClassNames = classNames({ - "mx_RoomList": true, - "mx_RoomList_Compact": roomListStyle === RoomListStyle.Compact, - "mx_RoomList_Intermediate": roomListStyle === RoomListStyle.Intermediate, - "mx_RoomList_Roomy": roomListStyle === RoomListStyle.Roomy, + mx_RoomList: true, + mx_RoomList_Compact: roomListStyle === RoomListStyle.Compact, + mx_RoomList_Intermediate: roomListStyle === RoomListStyle.Intermediate, + mx_RoomList_Roomy: roomListStyle === RoomListStyle.Roomy, }); const sublists = this.renderSublists(); return ( diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index 11844f67239..16dfb98b54e 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -241,7 +241,7 @@ const RoomListHeader: React.FC = ({ onVisibilityChange }) => { {inviteOption} {newRoomOptions} - { /* SC: Added beneath search all spaces */ } + {/* SC: Added beneath search all spaces */} {/* = ({ onVisibilityChange }) => { const client = MatrixClientPeg.get(); const userId = client.getUserId(); const canAddRooms = activeSpace.currentState.maySendStateEvent(EventType.SpaceChild, userId); - spaceExploreButton = { - e.preventDefault(); - e.stopPropagation(); - defaultDispatcher.dispatch({ - action: "view_room", - room_id: activeSpace?.roomId, - }); - }} - className="mx_RoomListHeader_plusButton sc_RoomListHeader_exploreButton" - title={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")} - />; + spaceExploreButton = ( + { + e.preventDefault(); + e.stopPropagation(); + defaultDispatcher.dispatch({ + action: "view_room", + room_id: activeSpace?.roomId, + }); + }} + className="mx_RoomListHeader_plusButton sc_RoomListHeader_exploreButton" + title={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")} + /> + ); } return ( diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 3603dfc56c8..2baf98abfe8 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -137,7 +137,7 @@ export default class RoomSublist extends React.Component { this.state = Object.assign(this.state, { height: this.calculateInitialHeight() }); this.settingWatchers = [ - SettingsStore.watchSetting("baseFontSize", null, (...[,,, value]) => + SettingsStore.watchSetting("baseFontSize", null, (...[, , , value]) => this.setState({ baseFontSize: value as number }), ), ]; @@ -867,11 +867,11 @@ export default class RoomSublist extends React.Component { content = ( - { /* fucking resizeable doesn't like rem */ } + {/* fucking resizeable doesn't like rem */} { } // SC: Remove focus from room tile after hiding menu - if ((!!prevState.generalMenuPosition && !this.state.generalMenuPosition) || - (!!prevState.notificationsMenuPosition && this.state.notificationsMenuPosition)) { + if ( + (!!prevState.generalMenuPosition && !this.state.generalMenuPosition) || + (!!prevState.notificationsMenuPosition && this.state.notificationsMenuPosition) + ) { this.roomTileRef?.current?.focus(); this.roomTileRef?.current?.blur(); } diff --git a/src/components/views/settings/FontScalingPanel.tsx b/src/components/views/settings/FontScalingPanel.tsx index df7393cf260..80d76f4ff37 100644 --- a/src/components/views/settings/FontScalingPanel.tsx +++ b/src/components/views/settings/FontScalingPanel.tsx @@ -16,8 +16,8 @@ limitations under the License. import React, { ChangeEvent } from "react"; -import Field from '../elements/Field'; -import SettingsFlag from '../elements/SettingsFlag'; +import Field from "../elements/Field"; +import SettingsFlag from "../elements/SettingsFlag"; import SettingsStore from "../../../settings/SettingsStore"; import Slider from "../elements/Slider"; import { FontWatcher } from "../../../settings/watchers/FontWatcher"; @@ -26,7 +26,7 @@ import { Layout } from "../../../settings/enums/Layout"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { SettingLevel } from "../../../settings/SettingLevel"; import { _t } from "../../../languageHandler"; -import SdkConfig from '../../../SdkConfig'; +import SdkConfig from "../../../SdkConfig"; interface IProps {} @@ -116,71 +116,72 @@ export default class FontScalingPanel extends React.Component { { brand }, ); - return <> -
    { _t("Font size and typeface") }
    -
    -
    -
    Aa
    - ""} - disabled={this.state.useCustomFontSize} - /> -
    Aa
    -
    - -
    -
    - this.setState({ useCustomFontSize: checked })} - useCheckbox={true} + return ( + <> +
    {_t("Font size and typeface")}
    +
    +
    +
    Aa
    + ""} + disabled={this.state.useCustomFontSize} /> +
    Aa
    +
    - ) => +
    +
    + this.setState({ useCustomFontSize: checked })} + useCheckbox={true} + /> + + ) => this.setState({ fontSize: value.target.value }) - } - disabled={!this.state.useCustomFontSize} - className="mx_FontScalingPanel_customFontSizeField" - /> -
    -
    - this.setState({ useSystemFont: checked })} - /> - { - this.setState({ - systemFont: value.target.value, - }); - - SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value); - }} - tooltipContent={systemFontTooltipContent} - forceTooltipVisible={true} - disabled={!this.state.useSystemFont} - value={this.state.systemFont} - /> + } + disabled={!this.state.useCustomFontSize} + className="mx_FontScalingPanel_customFontSizeField" + /> +
    +
    + this.setState({ useSystemFont: checked })} + /> + { + this.setState({ + systemFont: value.target.value, + }); + + SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value); + }} + tooltipContent={systemFontTooltipContent} + forceTooltipVisible={true} + disabled={!this.state.useSystemFont} + value={this.state.systemFont} + /> +
    -
    - ; + + ); } } diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx index 2faab9fcdd4..414fcc7fcc8 100644 --- a/src/components/views/settings/LayoutSwitcher.tsx +++ b/src/components/views/settings/LayoutSwitcher.tsx @@ -69,92 +69,90 @@ export default class LayoutSwitcher extends React.Component { mx_LayoutSwitcher_RadioButton_selected: this.state.layout === Layout.Bubble, }); - return <> -
    { _t("Message layout") }
    -
    -
    - - - -
    + return ( + <> +
    {_t("Message layout")}
    +
    +
    + + + +
    -
    - { this.state.layout === Layout.Group ? - : null - } - { this.state.layout === Layout.Bubble ? - : null - } - { this.state.layout === Layout.Bubble ? - this.setState({ adaptiveSideBubbles: checked })} - /> : null - } +
    + {this.state.layout === Layout.Group ? ( + + ) : null} + {this.state.layout === Layout.Bubble ? ( + + ) : null} + {this.state.layout === Layout.Bubble ? ( + this.setState({ adaptiveSideBubbles: checked })} + /> + ) : null} +
    -
    - ; + + ); } } diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx index eb1a6248909..5332e494421 100644 --- a/src/components/views/settings/Notifications.tsx +++ b/src/components/views/settings/Notifications.tsx @@ -147,7 +147,7 @@ export default class Notifications extends React.PureComponent { SettingsStore.watchSetting("audioNotificationsEnabled", null, (...[, , , , value]) => this.setState({ audioNotifications: value as boolean }), ), - SettingsStore.watchSetting("soundPack", null, (...[,,,, value]) => + SettingsStore.watchSetting("soundPack", null, (...[, , , , value]) => this.setState({ soundPack: value as SoundPack }), ), ]; @@ -631,8 +631,8 @@ export default class Notifications extends React.PureComponent { {emailSwitches} -
    -
    { _t("Sound pack") }
    +
    +
    {_t("Sound pack")}
    diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx index 09112a07305..1a3770902b0 100644 --- a/src/components/views/settings/ThemeChoicePanel.tsx +++ b/src/components/views/settings/ThemeChoicePanel.tsx @@ -23,17 +23,17 @@ import { getOrderedThemes } from "../../../theme"; import ThemeWatcher from "../../../settings/watchers/ThemeWatcher"; import AccessibleButton from "../elements/AccessibleButton"; import dis from "../../../dispatcher/dispatcher"; -import { RecheckThemePayload } from '../../../dispatcher/payloads/RecheckThemePayload'; -import { Action } from '../../../dispatcher/actions'; +import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload"; +import { Action } from "../../../dispatcher/actions"; // import StyledCheckbox from '../elements/StyledCheckbox'; -import Field from '../elements/Field'; +import Field from "../elements/Field"; import StyledRadioGroup from "../elements/StyledRadioGroup"; import { SettingLevel } from "../../../settings/SettingLevel"; import PosthogTrackers from "../../../PosthogTrackers"; -import StyledRadioButton from '../elements/StyledRadioButton'; -import { Theme } from '../../../settings/enums/Theme'; -import { UserNameColorMode } from '../../../settings/enums/UserNameColorMode'; -import { BorderRadius } from '../../../settings/enums/BorderRadius'; +import StyledRadioButton from "../elements/StyledRadioButton"; +import { Theme } from "../../../settings/enums/Theme"; +import { UserNameColorMode } from "../../../settings/enums/UserNameColorMode"; +import { BorderRadius } from "../../../settings/enums/BorderRadius"; interface IProps {} @@ -85,7 +85,7 @@ export default class ThemeChoicePanel extends React.Component { // doing getValue in the .catch will still return the value we failed to set, // so remember what the value was before we tried to set it so we can revert - const oldTheme: string = SettingsStore.getValue('light_theme'); + const oldTheme: string = SettingsStore.getValue("light_theme"); SettingsStore.setValue("light_theme", null, SettingLevel.DEVICE, newTheme).catch(() => { dis.dispatch({ action: Action.RecheckTheme }); this.setState({ lightTheme: oldTheme }); @@ -102,7 +102,7 @@ export default class ThemeChoicePanel extends React.Component { // doing getValue in the .catch will still return the value we failed to set, // so remember what the value was before we tried to set it so we can revert - const oldTheme: string = SettingsStore.getValue('dark_theme'); + const oldTheme: string = SettingsStore.getValue("dark_theme"); SettingsStore.setValue("dark_theme", null, SettingLevel.DEVICE, newTheme).catch(() => { dis.dispatch({ action: Action.RecheckTheme }); this.setState({ darkTheme: oldTheme }); @@ -213,113 +213,123 @@ export default class ThemeChoicePanel extends React.Component { /> ); - const makeRow = (description: string, setting: string): JSX.Element => ( - { description } - { makeRadio(setting, UserNameColorMode.Uniform) } - { makeRadio(setting, UserNameColorMode.PowerLevel) } - { makeRadio(setting, UserNameColorMode.MXID) } - ); - - return <> -
    - - - - - - - - - - - { makeRow(_t("For people"), "userNameColorModeDM") } - { makeRow(_t("In group chats"), "userNameColorModeGroup") } - { makeRow(_t("In public rooms"), "userNameColorModePublic") } - -
    { _t("User name color mode") }{ _t("Uniform") }{ _t("PowerLevel") }{ _t("MXID") }
    -
    - ; + const makeRow = (description: string, setting: string): JSX.Element => ( + + {description} + {makeRadio(setting, UserNameColorMode.Uniform)} + {makeRadio(setting, UserNameColorMode.PowerLevel)} + {makeRadio(setting, UserNameColorMode.MXID)} + + ); + + return ( + <> +
    + + + + + + + + + + + {makeRow(_t("For people"), "userNameColorModeDM")} + {makeRow(_t("In group chats"), "userNameColorModeGroup")} + {makeRow(_t("In public rooms"), "userNameColorModePublic")} + +
    + {_t("User name color mode")} + {_t("Uniform")}{_t("PowerLevel")}{_t("MXID")}
    +
    + + ); } public render(): React.ReactElement { const themeWatcher = new ThemeWatcher(); - const themeInUseSection =
    - - - { themeWatcher.isSystemThemeSupported() ? + const themeInUseSection = ( +
    : null - } -
    ; - - const borderRadiusSection =
    - - - - -
    ; + + + {themeWatcher.isSystemThemeSupported() ? ( + + ) : null} +
    + ); + + const borderRadiusSection = ( +
    + + + + +
    + ); let customThemeForm: JSX.Element; if (SettingsStore.getValue("feature_custom_themes")) { @@ -332,8 +342,8 @@ export default class ThemeChoicePanel extends React.Component { } } customThemeForm = ( -
    - { _t("Add custom theme") } +
    + {_t("Add custom theme")}
    { ); } - const toggle = this.setState({ showAdvancedThemeSettings: !this.state.showAdvancedThemeSettings })} - > - { this.state.showAdvancedThemeSettings ? - _t("Hide advanced theme settings") : _t("Show advanced theme settings") } - ; + const toggle = ( + this.setState({ showAdvancedThemeSettings: !this.state.showAdvancedThemeSettings })} + > + {this.state.showAdvancedThemeSettings + ? _t("Hide advanced theme settings") + : _t("Show advanced theme settings")} + + ); let advanced: React.ReactNode; if (this.state.showAdvancedThemeSettings) { const orderedThemes = getOrderedThemes(); - advanced = <> -
    - { _t("Light theme") } -
    - ({ - value: t.id, - label: t.name, - className: "mx_ThemeSelector_" + t.id, - }))} - onChange={this.onLightThemeChange} - value={this.state.lightTheme} - outlined - /> + advanced = ( + <> +
    + {_t("Light theme")} +
    + ({ + value: t.id, + label: t.name, + className: "mx_ThemeSelector_" + t.id, + }))} + onChange={this.onLightThemeChange} + value={this.state.lightTheme} + outlined + /> +
    -
    -
    - { _t("Dark theme") } -
    - ({ - value: t.id, - label: t.name, - className: "mx_ThemeSelector_" + t.id, - }))} - onChange={this.onDarkThemeChange} - value={this.state.darkTheme} - outlined - /> +
    + {_t("Dark theme")} +
    + ({ + value: t.id, + label: t.name, + className: "mx_ThemeSelector_" + t.id, + }))} + onChange={this.onDarkThemeChange} + value={this.state.darkTheme} + outlined + /> +
    -
    - { customThemeForm } - { this.renderUserNameColorModeSection() } - ; + {customThemeForm} + {this.renderUserNameColorModeSection()} + + ); } - return <> -
    { _t("Theme") }
    -
    - { _t("Theme in use") } - { themeInUseSection } -
    -
    - { _t("Corners") } - { borderRadiusSection } -
    -
    - { toggle } - { advanced } -
    - ; + return ( + <> +
    {_t("Theme")}
    +
    + {_t("Theme in use")} + {themeInUseSection} +
    +
    + {_t("Corners")} + {borderRadiusSection} +
    +
    + {toggle} + {advanced} +
    + + ); // // XXX: replace any type here // const themes = Object.entries(enumerateThemes()) diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index ab2e67fd6cd..18ca2e94219 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -21,15 +21,15 @@ import { _t } from "../../../../../languageHandler"; import SdkConfig from "../../../../../SdkConfig"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; import SettingsStore from "../../../../../settings/SettingsStore"; -import SettingsFlag from '../../../elements/SettingsFlag'; +import SettingsFlag from "../../../elements/SettingsFlag"; import { SettingLevel } from "../../../../../settings/SettingLevel"; import { Layout } from "../../../../../settings/enums/Layout"; import LayoutSwitcher from "../../LayoutSwitcher"; -import StyledRadioButton from '../../../elements/StyledRadioButton'; -import { Theme } from '../../../../../settings/enums/Theme'; -import { RoomListStyle } from '../../../../../settings/enums/RoomListStyle'; -import FontScalingPanel from '../../FontScalingPanel'; -import ThemeChoicePanel from '../../ThemeChoicePanel'; +import StyledRadioButton from "../../../elements/StyledRadioButton"; +import { Theme } from "../../../../../settings/enums/Theme"; +import { RoomListStyle } from "../../../../../settings/enums/RoomListStyle"; +import FontScalingPanel from "../../FontScalingPanel"; +import ThemeChoicePanel from "../../ThemeChoicePanel"; import ImageSizePanel from "../../ImageSizePanel"; interface IProps {} @@ -103,53 +103,53 @@ export default class AppearanceUserSettingsTab extends React.Component - - - -
    ; - - return <> -
    { _t("Room list") }
    -
    - -
    -
    - { _t("Room list style") } - { roomListStyleSection } + const roomListStyleSection = ( +
    + + +
    - ; + ); + + return ( + <> +
    {_t("Room list")}
    +
    + +
    +
    + {_t("Room list style")} + {roomListStyleSection} +
    + + ); } public render(): JSX.Element { @@ -162,7 +162,7 @@ export default class AppearanceUserSettingsTab extends React.Component - { this.renderRoomListSection() } + {this.renderRoomListSection()} {_t("Credits")}
    • - The default cover photo is from  - + {" "} + default cover photo + {" "} + is from  + here{ ' ' } + target="_blank" + > + here + {" "} used under the terms of the  - Pixabay License. + Pixabay License + + .
    • - The + The{" "} + CC-BY-SA 4.0 . @@ -192,14 +198,22 @@ export default class HelpUserSettingsTab extends React.Component .
    • - The "schildi" ring sound is © Ana Gelez - used under the terms of  - Apache 2.0. + The "schildi" ring sound is © Ana Gelez used under the terms of  + + Apache 2.0 + + .
    • - The "schildi" message sound is created by Ash Logan and - used under the terms of  - CC0. + The "schildi" message sound is created by Ash Logan and used under the terms of  + + CC0 + + .
    diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx index 67845f97e2a..7c1e24840a0 100644 --- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx @@ -70,8 +70,10 @@ const SidebarUserSettingsTab: React.FC = () => { {_t("Home")}
    - {_t("Home is useful for getting an overview of everything. " + - "Keep in mind that disabling it could leave you unable to see certain rooms.")} + {_t( + "Home is useful for getting an overview of everything. " + + "Keep in mind that disabling it could leave you unable to see certain rooms.", + )}
    ` + `:${_.escape(part.text)}:` ); } }, ""); diff --git a/src/emojipicker/customemoji.ts b/src/emojipicker/customemoji.ts index fdf6c21b483..2d62e62057f 100644 --- a/src/emojipicker/customemoji.ts +++ b/src/emojipicker/customemoji.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { MatrixEvent } from 'matrix-js-sdk/src/matrix'; +import { MatrixEvent } from "matrix-js-sdk/src/matrix"; export function loadImageSet(imageSetEvent: MatrixEvent): ICustomEmoji[] { const loadedImages: ICustomEmoji[] = []; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index ed73edd0cc8..a241385aeb9 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -38,17 +38,17 @@ import { OrderedMultiController } from "./controllers/OrderedMultiController"; import { Layout } from "./enums/Layout"; import ReducedMotionController from "./controllers/ReducedMotionController"; import IncompatibleController from "./controllers/IncompatibleController"; -import { Theme } from './enums/Theme'; -import { UserNameColorMode } from './enums/UserNameColorMode'; -import { RoomListStyle } from './enums/RoomListStyle'; +import { Theme } from "./enums/Theme"; +import { UserNameColorMode } from "./enums/UserNameColorMode"; +import { RoomListStyle } from "./enums/RoomListStyle"; import { ImageSize } from "./enums/ImageSize"; import { MetaSpace } from "../stores/spaces"; import SdkConfig from "../SdkConfig"; import SlidingSyncController from "./controllers/SlidingSyncController"; import ThreadBetaController from "./controllers/ThreadBetaController"; import { FontWatcher } from "./watchers/FontWatcher"; -import { BorderRadius } from './enums/BorderRadius'; -import { SoundPack } from './enums/SoundPack'; +import { BorderRadius } from "./enums/BorderRadius"; +import { SoundPack } from "./enums/SoundPack"; import RustCryptoSdkController from "./controllers/RustCryptoSdkController"; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times @@ -559,7 +559,7 @@ export const SETTINGS: { [setting: string]: ISetting } = { }, "MessageComposerInput.collapseButtons": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, - displayName: _td('Collapse additional buttons'), + displayName: _td("Collapse additional buttons"), default: false, controller: new UIFeatureController(UIFeature.Widgets, false), }, @@ -905,7 +905,7 @@ export const SETTINGS: { [setting: string]: ISetting } = { }, "youtubeEmbedPlayer": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, - displayName: _td('Enable YouTube embed player'), + displayName: _td("Enable YouTube embed player"), default: true, controller: new UIFeatureController(UIFeature.YoutubeEmbedPlayer), }, diff --git a/src/settings/enums/BorderRadius.ts b/src/settings/enums/BorderRadius.ts index aa61944a2f3..8b2728e34a7 100644 --- a/src/settings/enums/BorderRadius.ts +++ b/src/settings/enums/BorderRadius.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; /* TODO: This should be later reworked into something more generic */ diff --git a/src/settings/enums/RoomListStyle.ts b/src/settings/enums/RoomListStyle.ts index c56e72af548..ac12aed76e9 100644 --- a/src/settings/enums/RoomListStyle.ts +++ b/src/settings/enums/RoomListStyle.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; /* TODO: This should be later reworked into something more generic */ diff --git a/src/settings/enums/Theme.ts b/src/settings/enums/Theme.ts index f77db348cd1..9d6e2f914a6 100644 --- a/src/settings/enums/Theme.ts +++ b/src/settings/enums/Theme.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; /* TODO: This should be later reworked into something more generic */ diff --git a/src/settings/enums/UserNameColorMode.ts b/src/settings/enums/UserNameColorMode.ts index fdd1f511553..fb2c35aadba 100644 --- a/src/settings/enums/UserNameColorMode.ts +++ b/src/settings/enums/UserNameColorMode.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; /* TODO: This should be later reworked into something more generic */ diff --git a/src/settings/watchers/ThemeWatcher.ts b/src/settings/watchers/ThemeWatcher.ts index 61682fd7df8..a11b5012f83 100644 --- a/src/settings/watchers/ThemeWatcher.ts +++ b/src/settings/watchers/ThemeWatcher.ts @@ -15,13 +15,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import SettingsStore from '../SettingsStore'; -import dis from '../../dispatcher/dispatcher'; -import { Action } from '../../dispatcher/actions'; +import SettingsStore from "../SettingsStore"; +import dis from "../../dispatcher/dispatcher"; +import { Action } from "../../dispatcher/actions"; import ThemeController from "../controllers/ThemeController"; import { setTheme, getCustomTheme } from "../../theme"; -import { ActionPayload } from '../../dispatcher/payloads'; -import { Theme } from '../enums/Theme'; +import { ActionPayload } from "../../dispatcher/payloads"; +import { Theme } from "../enums/Theme"; export default class ThemeWatcher { private lightThemeWatchRef: string; @@ -99,7 +99,7 @@ export default class ThemeWatcher { let themeToUse = Theme.Light; if (!ThemeController.isLogin) { - themeToUse = SettingsStore.getValue('theme_in_use'); + themeToUse = SettingsStore.getValue("theme_in_use"); if (themeToUse === Theme.System) { if (this.preferDark.matches) themeToUse = Theme.Dark; @@ -108,9 +108,9 @@ export default class ThemeWatcher { } if (themeToUse === Theme.Dark) { - return SettingsStore.getValue('dark_theme'); + return SettingsStore.getValue("dark_theme"); } else { - return SettingsStore.getValue('light_theme'); + return SettingsStore.getValue("light_theme"); } } @@ -125,7 +125,7 @@ export default class ThemeWatcher { /** * For widgets/stickers/... who only support light/dark * @returns "light" or "dark" - */ + */ public static getCurrentThemeSimplified(): string { let theme = ThemeWatcher.currentTheme; if (theme.startsWith("custom-")) { diff --git a/src/stores/room-list/previews/MessageEventPreview.ts b/src/stores/room-list/previews/MessageEventPreview.ts index a6ce82e2c3b..edf8e4e4a32 100644 --- a/src/stores/room-list/previews/MessageEventPreview.ts +++ b/src/stores/room-list/previews/MessageEventPreview.ts @@ -75,7 +75,7 @@ export class MessageEventPreview implements IPreview { if (isThread || isSelf(event) || !shouldPrefixMessagesIn(event.getRoomId(), tagId)) { return body; } else { - return _t("%(senderName)s: %(message)s", { senderName: getSenderName(event), message: '\u2068' + body }); + return _t("%(senderName)s: %(message)s", { senderName: getSenderName(event), message: "\u2068" + body }); } } } diff --git a/src/stores/spaces/SpaceStore.ts b/src/stores/spaces/SpaceStore.ts index 02126b09898..6397e7ba2cb 100644 --- a/src/stores/spaces/SpaceStore.ts +++ b/src/stores/spaces/SpaceStore.ts @@ -102,7 +102,11 @@ const validOrder = (order: string): string | undefined => { // For sorting space children using a validated `order`, `origin_server_ts`, `room_id` export const getChildOrder = ( - order: string, ts: number, roomId: string, roomName: string): Array>> => { + order: string, + ts: number, + roomId: string, + roomName: string, +): Array>> => { return [validOrder(order) ?? NaN, roomName?.toLowerCase(), ts, roomId]; // NaN has lodash sort it at the end in asc }; @@ -356,7 +360,12 @@ export class SpaceStoreClass extends AsyncStoreWithClient { .filter((ev) => ev.getContent()?.via); return ( sortBy(childEvents, (ev) => { - return getChildOrder(ev.getContent().order, ev.getTs(), ev.getStateKey(), this.matrixClient?.getRoom(ev.getStateKey())?.name); + return getChildOrder( + ev.getContent().order, + ev.getTs(), + ev.getStateKey(), + this.matrixClient?.getRoom(ev.getStateKey())?.name, + ); }) .map((ev) => { const history = this.matrixClient.getRoomUpgradeHistory(ev.getStateKey(), true); diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts index 27922c525c3..2af502de44e 100644 --- a/src/stores/widgets/StopGapWidget.ts +++ b/src/stores/widgets/StopGapWidget.ts @@ -46,7 +46,6 @@ import { MatrixClientPeg } from "../../MatrixClientPeg"; import { OwnProfileStore } from "../OwnProfileStore"; import WidgetUtils from "../../utils/WidgetUtils"; import { IntegrationManagers } from "../../integrations/IntegrationManagers"; -import SettingsStore from "../../settings/SettingsStore"; import { WidgetType } from "../../widgets/WidgetType"; import ActiveWidgetStore from "../ActiveWidgetStore"; import { objectShallowClone } from "../../utils/objects"; diff --git a/src/toasts/ScUpdateAnnouncementsRoomToast.ts b/src/toasts/ScUpdateAnnouncementsRoomToast.ts index c35b55f1112..21d8ab253a1 100644 --- a/src/toasts/ScUpdateAnnouncementsRoomToast.ts +++ b/src/toasts/ScUpdateAnnouncementsRoomToast.ts @@ -15,16 +15,16 @@ limitations under the License. */ import { _t } from "../languageHandler"; -import dis from '../dispatcher/dispatcher'; +import dis from "../dispatcher/dispatcher"; import GenericToast from "../components/views/toasts/GenericToast"; import ToastStore from "../stores/ToastStore"; import PlatformPeg from "../PlatformPeg"; import SettingsStore from "../settings/SettingsStore"; import { SettingLevel } from "../settings/SettingLevel"; -const onAccept = () => { +const onAccept = (): void => { dis.dispatch({ - action: 'view_room', + action: "view_room", room_alias: "#web-announcements:schildi.chat", }); @@ -35,7 +35,7 @@ const onAccept = () => { hideToast(); }; -const onReject = () => { +const onReject = (): void => { // Don't show again SettingsStore.setValue("scShowUpdateAnnouncementRoomToast", null, SettingLevel.DEVICE, false); @@ -44,32 +44,35 @@ const onReject = () => { const TOAST_KEY = "scupdateannouncementroom"; -export const showToast = () => { - PlatformPeg.get().canSelfUpdate().then((b) => { - if (b) return; +export const showToast = (): void => { + PlatformPeg.get() + .canSelfUpdate() + .then((b) => { + if (b) return; - ToastStore.sharedInstance().addOrReplaceToast({ - key: TOAST_KEY, - title: _t("Update notifications"), - props: { - description: _t( - "Do you want to join a room notifying you about new releases? " + - "This is especially useful if your platform doesn't support " + - "automatic updates for SchildiChat (e.g. Windows and macOS).", - ), - acceptLabel: _t("Show preview"), - onAccept, - rejectLabel: _t("No"), - onReject, - }, - component: GenericToast, - priority: 20, + ToastStore.sharedInstance().addOrReplaceToast({ + key: TOAST_KEY, + title: _t("Update notifications"), + props: { + description: _t( + "Do you want to join a room notifying you about new releases? " + + "This is especially useful if your platform doesn't support " + + "automatic updates for SchildiChat (e.g. Windows and macOS).", + ), + acceptLabel: _t("Show preview"), + onAccept, + rejectLabel: _t("No"), + onReject, + }, + component: GenericToast, + priority: 20, + }); + }) + .catch((e) => { + console.error("Error getting vector version: ", e); }); - }).catch((e) => { - console.error("Error getting vector version: ", e); - }); }; -export const hideToast = () => { +export const hideToast = (): void => { ToastStore.sharedInstance().dismissToast(TOAST_KEY); }; diff --git a/src/utils/FormattingUtils.ts b/src/utils/FormattingUtils.ts index 495f827914e..7402b3f3f37 100644 --- a/src/utils/FormattingUtils.ts +++ b/src/utils/FormattingUtils.ts @@ -15,11 +15,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Room } from 'matrix-js-sdk/src/matrix'; +import { Room } from "matrix-js-sdk/src/matrix"; -import { _t } from '../languageHandler'; -import { UserNameColorMode } from '../settings/enums/UserNameColorMode'; -import { jsxJoin } from './ReactUtils'; +import { _t } from "../languageHandler"; +import { UserNameColorMode } from "../settings/enums/UserNameColorMode"; +import { jsxJoin } from "./ReactUtils"; /** * formats numbers to fit into ~3 characters, suitable for badge counts