ZackandGitHub
ce74b5f614
* Refactor NotificationBadge to shared MVVM * Added snapshot images * Replace legacy NotificationBadge with adapter * Fix Eslint * Use regular NotificationBadge prop names * Remove legacy NotificationBadge selectors * Update TAC badge Playwright selectors * Rename NotificationBadgeAdapter to NotificationBadge Addresses review feedback: the component is the app-facing badge, not an adapter, so name it NotificationBadge. * Make NotificationBadgeView isClickable a required boolean Addresses review feedback: there is no semantic difference between `isClickable: false` and `isClickable: undefined` (both render the non-interactive variant), so the field should be a plain boolean. The view model always provides it. * Drop redundant comparison guards in NotificationBadge view model setters Addresses review feedback: Snapshot.merge already compares each field with Object.is and only emits when something actually changed, so the manual equality guards in each setter were redundant. Recompute the snapshot unconditionally and let merge dedupe. * Resolve notification badge labels inside NotificationBadgeView Addresses review feedback: static UI labels belong in the view, not the snapshot. The view now resolves the knock and unsent-message strings via useI18n, and the snapshot exposes a showUnsentTooltip boolean instead of a prebuilt tooltipLabel (and drops knockLabel entirely). Adds the room|knock_sent and notifications|message_didnt_send keys to the shared-components i18n catalogue so they resolve in tests and storybook. * Remove unused translation because of shared components movement * Fix typescript issue * Fix lint issue * Remove unused notification badge count setting * Pass notification badge class names explicitly
444 lines
14 KiB
Plaintext
444 lines
14 KiB
Plaintext
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
.mx_SpotlightDialog_wrapper {
|
|
.mx_Dialog_border {
|
|
/* Disable the glass border as this dialog wasn't designed with it in mind */
|
|
display: contents;
|
|
}
|
|
|
|
.mx_Dialog {
|
|
/* !important because it's overriding compound */
|
|
width: fit-content !important;
|
|
border-radius: 8px !important;
|
|
height: 60% !important;
|
|
overflow-y: initial;
|
|
position: relative;
|
|
padding: 0;
|
|
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
|
|
|
|
#mx_SpotlightDialog_keyboardPrompt {
|
|
position: absolute;
|
|
padding: var(--cpd-space-2x);
|
|
border-radius: 8px;
|
|
background-color: $background;
|
|
top: -60px; /* relative to the top of the modal */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: $font-12px;
|
|
line-height: $font-15px;
|
|
color: $secondary-content;
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 2px var(--cpd-space-1x);
|
|
margin: 0 var(--cpd-space-1x);
|
|
border-radius: 6px;
|
|
background-color: $quinary-content;
|
|
vertical-align: middle;
|
|
color: $tertiary-content;
|
|
/* To avoid any styling inherent with <kbd> elements */
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.mx_Dialog_header {
|
|
display: none;
|
|
}
|
|
|
|
.mx_SpotlightDialog_searchBox {
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 8px 8px 0 0;
|
|
padding: var(--cpd-space-3x) var(--cpd-space-4x);
|
|
border-bottom: 1px solid $system;
|
|
|
|
> .mx_SpotlightDialog_filter {
|
|
display: flex;
|
|
align-content: center;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
margin-right: var(--cpd-space-2x);
|
|
background-color: $quinary-content;
|
|
vertical-align: middle;
|
|
color: $primary-content;
|
|
position: relative;
|
|
padding: var(--cpd-space-1x) var(--cpd-space-2x) var(--cpd-space-1x) 37px;
|
|
|
|
> svg {
|
|
color: $secondary-content;
|
|
width: 18px;
|
|
height: 18px;
|
|
position: absolute;
|
|
left: var(--cpd-space-2x);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.mx_SpotlightDialog_filter--close {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
padding: 1px;
|
|
background: $system;
|
|
border-radius: 8px;
|
|
margin-left: var(--cpd-space-2x);
|
|
text-align: center;
|
|
line-height: 16px;
|
|
color: $secondary-content;
|
|
|
|
svg {
|
|
color: $secondary-content;
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
> input {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
background-color: transparent;
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0;
|
|
color: $tertiary-content;
|
|
font-weight: normal;
|
|
font-size: $font-15px;
|
|
line-height: $font-24px;
|
|
}
|
|
|
|
> .mx_Spinner {
|
|
flex-grow: 0;
|
|
width: unset;
|
|
height: unset;
|
|
margin-left: var(--cpd-space-4x);
|
|
}
|
|
|
|
&:not(:focus-within) + #mx_SpotlightDialog_content {
|
|
/* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
|
|
--mx_SpotlightDialog_option_selectedBgColor: transparent;
|
|
|
|
/* Hide the enter prompt as in this state pressing enter would not actuate that option */
|
|
.mx_SpotlightDialog_enterPrompt {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
#mx_SpotlightDialog_content {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: var(--cpd-space-4x);
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.mx_SpotlightDialog_section {
|
|
> h4,
|
|
> .mx_SpotlightDialog_sectionHeader > h4 {
|
|
font-weight: var(--cpd-font-weight-semibold);
|
|
font-size: $font-12px;
|
|
line-height: $font-15px;
|
|
color: $secondary-content;
|
|
margin: 0;
|
|
}
|
|
|
|
> h4 {
|
|
margin-bottom: var(--cpd-space-2x);
|
|
}
|
|
|
|
.mx_SpotlightDialog_sectionHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--cpd-space-2x);
|
|
|
|
.mx_SpotlightDialog_options {
|
|
display: flex;
|
|
gap: var(--cpd-space-1x);
|
|
}
|
|
}
|
|
|
|
& + .mx_SpotlightDialog_section {
|
|
margin-top: var(--cpd-space-6x);
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_option {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&:hover,
|
|
&[aria-selected="true"] {
|
|
background-color: var(--mx_SpotlightDialog_option_selectedBgColor, $quinary-content);
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_recentlyViewed {
|
|
> div {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
overflow-x: hidden;
|
|
margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
|
|
}
|
|
|
|
.mx_SpotlightDialog_option {
|
|
padding: var(--cpd-space-1x);
|
|
color: $primary-content;
|
|
font-size: $font-12px;
|
|
line-height: $font-15px;
|
|
display: inline-block;
|
|
width: 58px;
|
|
height: 58px;
|
|
min-width: 58px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
|
|
.mx_DecoratedRoomAvatar {
|
|
margin: 0 9px var(--cpd-space-1x); /* maintain centering */
|
|
}
|
|
|
|
& + .mx_SpotlightDialog_option {
|
|
margin-left: var(--cpd-space-4x);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_results,
|
|
.mx_SpotlightDialog_recentSearches,
|
|
.mx_SpotlightDialog_otherSearches,
|
|
.mx_SpotlightDialog_hiddenResults {
|
|
.mx_SpotlightDialog_option {
|
|
--mx_SpotlightDialog_option_selectedBgColor: $system;
|
|
|
|
padding: 6px var(--cpd-space-1x);
|
|
font-size: $font-15px;
|
|
line-height: $font-24px;
|
|
color: $primary-content;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
.mx_SpotlightDialog_option--endAdornment {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
margin-left: auto;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
&.mx_SpotlightDialog_result_multiline {
|
|
align-items: flex-start;
|
|
|
|
.mx_AccessibleButton {
|
|
padding: var(--cpd-space-1x) var(--cpd-space-5x);
|
|
margin: 2px var(--cpd-space-1x);
|
|
}
|
|
|
|
.mx_SpotlightDialog_enterPrompt {
|
|
margin-top: 9px;
|
|
margin-right: var(--cpd-space-2x);
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_result_name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
> .mx_SpotlightDialog_metaspaceResult,
|
|
> .mx_DecoratedRoomAvatar,
|
|
> .mx_BaseAvatar {
|
|
margin-right: var(--cpd-space-2x);
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
|
|
.mx_BaseAvatar {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_result_publicRoomDetails {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
|
|
.mx_SpotlightDialog_result_publicRoomHeader {
|
|
display: flex;
|
|
flex-direction: row;
|
|
line-height: $font-24px;
|
|
margin-right: var(--cpd-space-2x);
|
|
|
|
.mx_SpotlightDialog_result_publicRoomName {
|
|
color: $primary-content;
|
|
font-size: $font-15px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.mx_SpotlightDialog_result_publicRoomAlias {
|
|
color: $tertiary-content;
|
|
font-size: $font-12px;
|
|
margin-left: var(--cpd-space-2x);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.mx_SpotlightDialog_result_publicRoomDescription {
|
|
color: $secondary-content;
|
|
font-size: $font-12px;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
line-height: $font-20px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_notificationBadge {
|
|
margin-left: var(--cpd-space-2x);
|
|
}
|
|
|
|
.mx_SpotlightDialog_option--menu,
|
|
.mx_SpotlightDialog_option--notifications {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: var(--cpd-space-0-5x);
|
|
flex-shrink: 0;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
position: relative;
|
|
display: none;
|
|
|
|
svg {
|
|
width: inherit;
|
|
height: inherit;
|
|
display: block;
|
|
color: $tertiary-content;
|
|
}
|
|
|
|
&:hover svg,
|
|
&:focus-visible svg {
|
|
color: $secondary-content;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&[aria-selected="true"] {
|
|
.mx_SpotlightDialog_option--menu,
|
|
.mx_SpotlightDialog_option--notifications {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_inviteLink,
|
|
.mx_SpotlightDialog_createRoom {
|
|
margin-top: var(--cpd-space-2x);
|
|
|
|
.mx_AccessibleButton {
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x);
|
|
|
|
svg {
|
|
display: block;
|
|
position: absolute;
|
|
left: var(--cpd-space-2x);
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--cpd-color-icon-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_otherSearches {
|
|
.mx_SpotlightDialog_option {
|
|
padding-left: var(--cpd-space-8x);
|
|
position: relative;
|
|
|
|
svg {
|
|
color: $secondary-content;
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: var(--cpd-space-1x);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_otherSearches_messageSearchText {
|
|
font-size: $font-15px;
|
|
line-height: $font-24px;
|
|
}
|
|
}
|
|
|
|
.mx_SpotlightDialog_result_details {
|
|
margin-left: var(--cpd-space-2x);
|
|
margin-right: var(--cpd-space-2x);
|
|
color: $tertiary-content;
|
|
font-size: $font-12px;
|
|
line-height: $font-15px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
|
|
float: right;
|
|
font-size: $font-12px;
|
|
line-height: $font-15px;
|
|
color: $secondary-content;
|
|
}
|
|
|
|
.mx_SpotlightDialog_enterPrompt {
|
|
padding: 2px var(--cpd-space-1x);
|
|
/* To avoid any styling inherent with <kbd> elements */
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
font-size: $font-12px;
|
|
line-height: $font-15px;
|
|
color: $tertiary-content;
|
|
border-radius: 6px;
|
|
background-color: $quinary-content;
|
|
margin-right: var(--cpd-space-1x);
|
|
display: none;
|
|
}
|
|
|
|
.mx_SpotlightDialog_metaspaceResult svg {
|
|
color: $secondary-content;
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
}
|
|
}
|