Tweak rendering of icons for a11y (#31358)
* Tweak rendering of icons in legacy video feed Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused classes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in face pile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in overflow tile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in room search view Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in top unread messages bar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in space basic settings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in thread summary tile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in legacy room tile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in incoming call toast Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in labs jump to date Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in field validation Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in mini avatar uploader Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in info tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in network dropdown Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -61,18 +61,13 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
svg {
|
||||||
background-color: $info-plinth-fg-color;
|
color: $info-plinth-fg-color;
|
||||||
mask: url("@vector-im/compound-design-tokens/icons/search.svg");
|
width: 50px;
|
||||||
mask-repeat: no-repeat;
|
height: 50px;
|
||||||
mask-position: center;
|
|
||||||
mask-size: 50px;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 286px;
|
top: 286px;
|
||||||
left: 0;
|
left: calc(50% - 25px);
|
||||||
right: 0;
|
|
||||||
height: 50px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -169,18 +169,6 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
color: $tertiary-content;
|
color: $tertiary-content;
|
||||||
font-size: $font-12px;
|
font-size: $font-12px;
|
||||||
line-height: $font-15px;
|
line-height: $font-15px;
|
||||||
|
|
||||||
.mx_InfoTooltip_icon {
|
|
||||||
margin-right: 4px;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: text-top;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_InfoTooltip {
|
.mx_InfoTooltip {
|
||||||
|
|||||||
@@ -49,8 +49,9 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
.mx_NetworkDropdown_removeServer {
|
.mx_NetworkDropdown_removeServer {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 14px;
|
||||||
height: 16px;
|
height: 14px;
|
||||||
|
padding: 1px;
|
||||||
background: $quinary-content;
|
background: $quinary-content;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -58,19 +59,10 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
color: $secondary-content;
|
color: $secondary-content;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
||||||
&::before {
|
svg {
|
||||||
background-color: $secondary-content;
|
color: $secondary-content;
|
||||||
content: "";
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-position: center;
|
|
||||||
mask-size: 14px;
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
height: inherit;
|
||||||
position: absolute;
|
width: inherit;
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -13,23 +13,12 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: var(--cpd-space-1x);
|
||||||
background-color: $panels;
|
background-color: $panels;
|
||||||
|
color: $tertiary-content;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
z-index: 1;
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: inherit;
|
|
||||||
width: inherit;
|
|
||||||
background: $tertiary-content;
|
|
||||||
mask-position: center;
|
|
||||||
mask-size: 20px;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_FacePile_summary {
|
.mx_FacePile_summary {
|
||||||
|
|||||||
@@ -10,24 +10,15 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: inherit;
|
||||||
|
width: inherit;
|
||||||
|
color: $muted-fg-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_InfoTooltip_icon::before {
|
.mx_InfoTooltip_icon::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: $muted-fg-color;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-size: 16px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
mask-position: center;
|
|
||||||
content: "";
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_InfoTooltip_icon_info::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_InfoTooltip_icon_warning::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -13,28 +13,22 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
.mx_MiniAvatarUploader_indicator {
|
.mx_MiniAvatarUploader_indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
height: 26px;
|
height: 16px;
|
||||||
width: 26px;
|
width: 16px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
right: -6px;
|
right: -6px;
|
||||||
bottom: -6px;
|
bottom: -6px;
|
||||||
|
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
|
||||||
.mx_MiniAvatarUploader_cameraIcon {
|
.mx_MiniAvatarUploader_cameraIcon {
|
||||||
height: 100%;
|
height: inherit;
|
||||||
width: 100%;
|
width: inherit;
|
||||||
|
color: $secondary-content;
|
||||||
background-color: $secondary-content;
|
|
||||||
mask-position: center;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
|
|
||||||
mask-size: 16px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mx_Validation_details {
|
.mx_Validation_details {
|
||||||
padding-left: 20px;
|
padding-left: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -20,7 +20,6 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mx_Validation_detail {
|
.mx_Validation_detail {
|
||||||
position: relative;
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
@@ -29,33 +28,18 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
svg {
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
top: 0;
|
margin-right: var(--cpd-space-1x);
|
||||||
left: -18px;
|
vertical-align: text-bottom;
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-position: center;
|
|
||||||
mask-size: contain;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mx_Validation_valid {
|
&.mx_Validation_valid {
|
||||||
color: $accent;
|
color: $accent;
|
||||||
|
|
||||||
&::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
|
|
||||||
background-color: $accent;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mx_Validation_invalid {
|
&.mx_Validation_invalid {
|
||||||
color: $alert;
|
color: $alert;
|
||||||
|
|
||||||
&::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
|
||||||
background-color: $alert;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,9 +27,5 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
align-self: center;
|
align-self: center;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
mask-position: center;
|
color: var(--cpd-color-icon-secondary);
|
||||||
mask-size: contain;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
|
|
||||||
background-color: var(--cpd-color-icon-secondary);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,19 +26,20 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
.mx_OverflowTileView:hover {
|
.mx_OverflowTileView:hover {
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
position: relative; /* to keep the chevron aligned */
|
position: relative; /* to keep the chevron aligned */
|
||||||
|
|
||||||
|
.mx_OverflowTileView_chevron {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_OverflowTileView:hover::before {
|
.mx_OverflowTileView_chevron {
|
||||||
content: "";
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(50% - 8px); /* center */
|
top: calc(50% - 12px); /* center */
|
||||||
right: -8px;
|
right: 0;
|
||||||
mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
|
width: 24px;
|
||||||
mask-repeat: no-repeat;
|
height: 24px;
|
||||||
mask-position: center;
|
color: $header-panel-text-primary-color;
|
||||||
width: 16px;
|
display: none;
|
||||||
height: 16px;
|
|
||||||
background-color: $header-panel-text-primary-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_OverflowTileView_icon {
|
.mx_OverflowTileView_icon {
|
||||||
|
|||||||
@@ -113,29 +113,32 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&::before {
|
svg {
|
||||||
top: 2px;
|
|
||||||
left: 2px;
|
|
||||||
content: "";
|
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
position: absolute;
|
padding: var(--cpd-space-0-5x);
|
||||||
mask-position: center;
|
color: var(--cpd-color-icon-primary);
|
||||||
mask-size: contain;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
background: var(--cpd-color-icon-primary);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_RoomTile_notificationsButton::before {
|
||||||
|
top: 2px;
|
||||||
|
left: 2px;
|
||||||
|
content: "";
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
position: absolute;
|
||||||
|
mask-position: center;
|
||||||
|
mask-size: contain;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
background: var(--cpd-color-icon-primary);
|
||||||
|
}
|
||||||
|
|
||||||
/* If the room has an overriden notification setting then we always show the notifications menu button */
|
/* If the room has an overriden notification setting then we always show the notifications menu button */
|
||||||
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
|
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomTile_menuButton::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
|
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus-within,
|
&:focus-within,
|
||||||
|
|||||||
@@ -49,19 +49,14 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
transform: translateX(60px);
|
transform: translateX(60px);
|
||||||
transition: all 0.1s ease-in-out;
|
transition: all 0.1s ease-in-out;
|
||||||
|
|
||||||
&::before {
|
svg {
|
||||||
content: "";
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: var(--cpd-space-1x);
|
right: var(--cpd-space-1x);
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
|
color: $secondary-content;
|
||||||
mask-position: center;
|
|
||||||
mask-size: contain;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
background-color: $secondary-content;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -29,23 +29,19 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
|
|
||||||
.mx_TopUnreadMessagesBar_scrollUp {
|
.mx_TopUnreadMessagesBar_scrollUp {
|
||||||
height: 38px;
|
height: 38px;
|
||||||
|
width: 38px;
|
||||||
border-radius: 19px;
|
border-radius: 19px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: $background;
|
background: $background;
|
||||||
border: 1.3px solid var(--cpd-color-icon-tertiary);
|
border: 1.3px solid var(--cpd-color-icon-tertiary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_TopUnreadMessagesBar_scrollUp::before {
|
svg {
|
||||||
content: "";
|
width: 24px;
|
||||||
position: absolute;
|
height: 24px;
|
||||||
width: 36px;
|
padding: 6px;
|
||||||
height: 36px;
|
color: var(--cpd-color-icon-tertiary);
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
|
}
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-size: 24px;
|
|
||||||
mask-position: center;
|
|
||||||
background: var(--cpd-color-icon-tertiary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_TopUnreadMessagesBar_markAsRead {
|
.mx_TopUnreadMessagesBar_markAsRead {
|
||||||
@@ -56,16 +52,11 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
border: 1.3px solid var(--cpd-color-icon-tertiary);
|
border: 1.3px solid var(--cpd-color-icon-tertiary);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin: 5px auto;
|
margin: 5px auto;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_TopUnreadMessagesBar_markAsRead::before {
|
svg {
|
||||||
content: "";
|
width: 16px;
|
||||||
position: absolute;
|
height: 16px;
|
||||||
width: 18px;
|
padding: 1px;
|
||||||
height: 18px;
|
color: var(--cpd-color-icon-tertiary);
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
}
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-size: 16px;
|
|
||||||
mask-position: center;
|
|
||||||
background: var(--cpd-color-icon-tertiary);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,36 +16,17 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
|
|
||||||
.mx_SpaceBasicSettings_avatar {
|
.mx_SpaceBasicSettings_avatar {
|
||||||
position: relative;
|
|
||||||
height: 80px;
|
height: 80px;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
background-color: $tertiary-content;
|
background-color: $tertiary-content;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
}
|
|
||||||
|
|
||||||
img.mx_SpaceBasicSettings_avatar {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* only show it when the button is a div and not an img (has avatar) */
|
svg {
|
||||||
div.mx_SpaceBasicSettings_avatar {
|
width: 20px;
|
||||||
cursor: pointer;
|
height: 20px;
|
||||||
|
padding: 30px;
|
||||||
&::before {
|
color: #ffffff; /* white icon fill */
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
height: 80px;
|
|
||||||
width: 80px;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: #ffffff; /* white icon fill */
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-position: center;
|
|
||||||
mask-size: 20px;
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -62,17 +62,10 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
height: $closeButtonSize;
|
height: $closeButtonSize;
|
||||||
width: $closeButtonSize;
|
width: $closeButtonSize;
|
||||||
|
|
||||||
&::before {
|
svg {
|
||||||
content: "";
|
|
||||||
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
|
||||||
|
|
||||||
height: inherit;
|
height: inherit;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
background-color: $secondary-content;
|
color: $secondary-content;
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-size: contain;
|
|
||||||
mask-position: center;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mx_IncomingCallToast_toggleWithLabel {
|
.mx_IncomingCallToast_toggleWithLabel {
|
||||||
|
|||||||
@@ -22,168 +22,4 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background-color: $call-background;
|
background-color: $call-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
|
|
||||||
.mx_CallView_lobby ~ .mx_AppTile {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_CallView_lobby {
|
|
||||||
min-height: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: $spacing-12;
|
|
||||||
color: $call-primary-content;
|
|
||||||
background-color: $call-background;
|
|
||||||
|
|
||||||
--facepile-background: $call-background;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: $spacing-32;
|
|
||||||
|
|
||||||
.mx_FacePile {
|
|
||||||
width: fit-content;
|
|
||||||
margin: $spacing-8 auto 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_CallView_preview {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
aspect-ratio: 1.5;
|
|
||||||
background-color: $call-system;
|
|
||||||
|
|
||||||
border-radius: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.mx_BaseAvatar {
|
|
||||||
margin: $spacing-20;
|
|
||||||
|
|
||||||
/* Override the explicit dimensions on the element so that this gets sized responsively */
|
|
||||||
width: unset !important;
|
|
||||||
height: unset !important;
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
flex: 0 1 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
video {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
transform: scaleX(-1); /* flip the image */
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_CallView_controls {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
background-color: $info-plinth-fg-color;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: $spacing-24;
|
|
||||||
|
|
||||||
.mx_CallView_deviceButtonWrapper {
|
|
||||||
position: relative;
|
|
||||||
margin: 6px 0 10px;
|
|
||||||
|
|
||||||
.mx_CallView_deviceButton {
|
|
||||||
$size: 50px;
|
|
||||||
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
|
|
||||||
background-color: $call-system;
|
|
||||||
border-radius: calc($size / 2);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-size: 20px;
|
|
||||||
mask-position: center;
|
|
||||||
background-color: $call-primary-content;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_CallView_deviceButton_audio::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
|
|
||||||
mask-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_CallView_deviceButton_video::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_CallView_deviceListButton {
|
|
||||||
$size: 15px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: -2.5px;
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
|
|
||||||
background-color: $call-system;
|
|
||||||
border-radius: calc($size / 2);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
|
|
||||||
mask-size: 20px;
|
|
||||||
mask-position: center;
|
|
||||||
background-color: $call-primary-content;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_CallView_deviceButtonWrapper_muted {
|
|
||||||
.mx_CallView_deviceButton,
|
|
||||||
.mx_CallView_deviceListButton {
|
|
||||||
background-color: $call-primary-content;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background-color: $call-system;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_CallView_deviceButton {
|
|
||||||
&.mx_CallView_deviceButton_audio::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
|
|
||||||
mask-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_CallView_deviceButton_video::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_CallView_connectButton {
|
|
||||||
padding-left: 50px;
|
|
||||||
padding-right: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -49,9 +49,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 6px;
|
left: 6px;
|
||||||
bottom: 6px;
|
bottom: 6px;
|
||||||
display: flex;
|
z-index: 1;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@@ -59,24 +57,11 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
background-color: rgb(0, 0, 0, 0.5); /* Same on both themes */
|
background-color: rgb(0, 0, 0, 0.5); /* Same on both themes */
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
||||||
&::before {
|
svg {
|
||||||
position: absolute;
|
width: 16px;
|
||||||
content: "";
|
height: 16px;
|
||||||
width: 17px;
|
padding: 4px;
|
||||||
height: 17px;
|
color: white; /* Same on both themes */
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-size: contain;
|
|
||||||
mask-position: center;
|
|
||||||
background-color: white; /* Same on both themes */
|
|
||||||
border-radius: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_VideoFeed_mic_muted::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_VideoFeed_mic_unmuted::before {
|
|
||||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import {
|
|||||||
THREAD_RELATION_TYPE,
|
THREAD_RELATION_TYPE,
|
||||||
} from "matrix-js-sdk/src/matrix";
|
} from "matrix-js-sdk/src/matrix";
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
|
import { SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import ScrollPanel from "./ScrollPanel";
|
import ScrollPanel from "./ScrollPanel";
|
||||||
import Spinner from "../views/elements/Spinner";
|
import Spinner from "../views/elements/Spinner";
|
||||||
@@ -153,7 +154,9 @@ export const RoomSearchView = ({
|
|||||||
<div
|
<div
|
||||||
className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner"
|
className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner"
|
||||||
data-testid="messagePanelSearchSpinner"
|
data-testid="messagePanelSearchSpinner"
|
||||||
/>
|
>
|
||||||
|
<SearchIcon />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
import { without } from "lodash";
|
import { without } from "lodash";
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { MatrixError } from "matrix-js-sdk/src/matrix";
|
import { MatrixError } from "matrix-js-sdk/src/matrix";
|
||||||
|
import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import { _t } from "../../../languageHandler";
|
import { _t } from "../../../languageHandler";
|
||||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||||
@@ -190,7 +191,9 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
|
|||||||
className="mx_NetworkDropdown_removeServer"
|
className="mx_NetworkDropdown_removeServer"
|
||||||
title={_t("spotlight|public_rooms|network_dropdown_remove_server_adornment", { roomServer })}
|
title={_t("spotlight|public_rooms|network_dropdown_remove_server_adornment", { roomServer })}
|
||||||
onClick={() => setUserDefinedServers(without(userDefinedServers, roomServer))}
|
onClick={() => setUserDefinedServers(without(userDefinedServers, roomServer))}
|
||||||
/>
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</AccessibleButton>
|
||||||
),
|
),
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import React, { type FC, type HTMLAttributes, type ReactNode } from "react";
|
|||||||
import { type RoomMember } from "matrix-js-sdk/src/matrix";
|
import { type RoomMember } from "matrix-js-sdk/src/matrix";
|
||||||
import { AvatarStack, Tooltip } from "@vector-im/compound-web";
|
import { AvatarStack, Tooltip } from "@vector-im/compound-web";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import MemberAvatar from "../avatars/MemberAvatar";
|
import MemberAvatar from "../avatars/MemberAvatar";
|
||||||
import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
|
import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
|
||||||
@@ -56,7 +57,7 @@ const FacePile: FC<IProps> = ({
|
|||||||
const pileContents = (
|
const pileContents = (
|
||||||
<>
|
<>
|
||||||
{faces}
|
{faces}
|
||||||
{overflow ? <span className="mx_FacePile_more" /> : null}
|
{overflow ? <OverflowHorizontalIcon className="mx_FacePile_more" /> : null}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
import React, { type ReactNode } from "react";
|
import React, { type ReactNode } from "react";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { Tooltip } from "@vector-im/compound-web";
|
import { Tooltip } from "@vector-im/compound-web";
|
||||||
|
import { ErrorSolidIcon, InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import { _t } from "../../../languageHandler";
|
import { _t } from "../../../languageHandler";
|
||||||
|
|
||||||
@@ -30,14 +31,14 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
|
|||||||
public render(): React.ReactNode {
|
public render(): React.ReactNode {
|
||||||
const { tooltip, children, className, kind } = this.props;
|
const { tooltip, children, className, kind } = this.props;
|
||||||
const title = _t("info_tooltip_title");
|
const title = _t("info_tooltip_title");
|
||||||
const iconClassName =
|
|
||||||
kind !== InfoTooltipKind.Warning ? "mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning";
|
|
||||||
|
|
||||||
// Tooltip are forced on the right for a more natural feel to them on info icons
|
// Tooltip are forced on the right for a more natural feel to them on info icons
|
||||||
return (
|
return (
|
||||||
<Tooltip description={tooltip || title} placement="right">
|
<Tooltip description={tooltip || title} placement="right">
|
||||||
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
|
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
|
||||||
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
|
<span className="mx_InfoTooltip_icon" aria-label={title}>
|
||||||
|
{kind !== InfoTooltipKind.Warning ? <InfoIcon /> : <ErrorSolidIcon />}
|
||||||
|
</span>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { EventType } from "matrix-js-sdk/src/matrix";
|
import { EventType } from "matrix-js-sdk/src/matrix";
|
||||||
import React, { useContext, useRef, useState, type MouseEvent, type ReactNode } from "react";
|
import React, { useContext, useRef, useState, type MouseEvent, type ReactNode } from "react";
|
||||||
|
import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||||
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
|
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
|
||||||
@@ -86,7 +87,11 @@ const MiniAvatarUploader: React.FC<IProps> = ({
|
|||||||
{children}
|
{children}
|
||||||
|
|
||||||
<div className="mx_MiniAvatarUploader_indicator">
|
<div className="mx_MiniAvatarUploader_indicator">
|
||||||
{busy ? <Spinner w={20} h={20} /> : <div className="mx_MiniAvatarUploader_cameraIcon" />}
|
{busy ? (
|
||||||
|
<Spinner w={20} h={20} />
|
||||||
|
) : (
|
||||||
|
<TakePhotoSolidIcon className="mx_MiniAvatarUploader_cameraIcon" />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</AccessibleButton>
|
</AccessibleButton>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
import React, { type JSX, type ReactNode } from "react";
|
import React, { type JSX, type ReactNode } from "react";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
|
import { CheckIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
type Data = Pick<IFieldState, "value" | "allowEmpty">;
|
type Data = Pick<IFieldState, "value" | "allowEmpty">;
|
||||||
|
|
||||||
@@ -173,6 +174,7 @@ export default function withValidation<T = void, D = void>({
|
|||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<li key={result.key} className={classes}>
|
<li key={result.key} className={classes}>
|
||||||
|
{result.valid ? <CheckIcon /> : <CloseIcon />}
|
||||||
{result.text}
|
{result.text}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import React, { type JSX } from "react";
|
|||||||
import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
|
import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
import { capitalize } from "lodash";
|
import { capitalize } from "lodash";
|
||||||
|
import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import { _t, getUserLanguage } from "../../../languageHandler";
|
import { _t, getUserLanguage } from "../../../languageHandler";
|
||||||
import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
|
import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
|
||||||
@@ -312,7 +313,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
|
|||||||
<h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
|
<h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
|
||||||
{this.getLabel()}
|
{this.getLabel()}
|
||||||
</h2>
|
</h2>
|
||||||
<div className="mx_DateSeparator_chevron" />
|
<ChevronDownIcon className="mx_DateSeparator_chevron" />
|
||||||
{contextMenu}
|
{contextMenu}
|
||||||
</ContextMenuTooltipButton>
|
</ContextMenuTooltipButton>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import Icon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
|
import { ChevronRightIcon, OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import { _t } from "../../../languageHandler";
|
import { _t } from "../../../languageHandler";
|
||||||
import AccessibleButton from "../elements/AccessibleButton";
|
import AccessibleButton from "../elements/AccessibleButton";
|
||||||
@@ -24,9 +24,10 @@ export const OverflowTileView: React.FC<Props> = ({ remaining, onClick }) => {
|
|||||||
return (
|
return (
|
||||||
<AccessibleButton onClick={onClick} className="mx_OverflowTileView">
|
<AccessibleButton onClick={onClick} className="mx_OverflowTileView">
|
||||||
<div className="mx_OverflowTileView_icon">
|
<div className="mx_OverflowTileView_icon">
|
||||||
<Icon height="36px" width="36px" />
|
<OverflowHorizontalIcon height="36px" width="36px" />
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_OverflowTileView_text">{_t("common|and_n_others", { count: remaining })}</div>
|
<div className="mx_OverflowTileView_text">{_t("common|and_n_others", { count: remaining })}</div>
|
||||||
|
<ChevronRightIcon className="mx_OverflowTileView_chevron" />
|
||||||
</AccessibleButton>
|
</AccessibleButton>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import React, { createRef } from "react";
|
|||||||
import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
|
import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
|
||||||
import { KnownMembership } from "matrix-js-sdk/src/types";
|
import { KnownMembership } from "matrix-js-sdk/src/types";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import type { Call } from "../../../models/Call";
|
import type { Call } from "../../../models/Call";
|
||||||
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
|
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
|
||||||
@@ -332,7 +333,9 @@ class RoomTile extends React.PureComponent<Props, State> {
|
|||||||
onClick={this.onGeneralMenuOpenClick}
|
onClick={this.onGeneralMenuOpenClick}
|
||||||
title={_t("room|context_menu|title")}
|
title={_t("room|context_menu|title")}
|
||||||
isExpanded={!!this.state.generalMenuPosition}
|
isExpanded={!!this.state.generalMenuPosition}
|
||||||
/>
|
>
|
||||||
|
<OverflowHorizontalIcon />
|
||||||
|
</ContextMenuTooltipButton>
|
||||||
{this.state.generalMenuPosition && (
|
{this.state.generalMenuPosition && (
|
||||||
<RoomGeneralContextMenu
|
<RoomGeneralContextMenu
|
||||||
{...contextMenuBelow(this.state.generalMenuPosition)}
|
{...contextMenuBelow(this.state.generalMenuPosition)}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
import React, { useContext } from "react";
|
import React, { useContext } from "react";
|
||||||
import { type Thread, ThreadEvent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
|
import { type Thread, ThreadEvent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||||
import { IndicatorIcon } from "@vector-im/compound-web";
|
import { IndicatorIcon } from "@vector-im/compound-web";
|
||||||
import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
|
import { ThreadsSolidIcon, ChevronRightIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import { _t } from "../../../languageHandler";
|
import { _t } from "../../../languageHandler";
|
||||||
import { CardContext } from "../right_panel/context";
|
import { CardContext } from "../right_panel/context";
|
||||||
@@ -58,11 +58,13 @@ const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
|
|||||||
aria-label={_t("threads|open_thread")}
|
aria-label={_t("threads|open_thread")}
|
||||||
>
|
>
|
||||||
<IndicatorIcon size="24px" indicator={notificationLevelToIndicator(level)}>
|
<IndicatorIcon size="24px" indicator={notificationLevelToIndicator(level)}>
|
||||||
<ThreadIconSolid />
|
<ThreadsSolidIcon />
|
||||||
</IndicatorIcon>
|
</IndicatorIcon>
|
||||||
<span className="mx_ThreadSummary_replies_amount">{countSection}</span>
|
<span className="mx_ThreadSummary_replies_amount">{countSection}</span>
|
||||||
<ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
|
<ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
|
||||||
<div className="mx_ThreadSummary_chevron" />
|
<div className="mx_ThreadSummary_chevron">
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</div>
|
||||||
</AccessibleButton>
|
</AccessibleButton>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { ChevronUpIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import { _t } from "../../../languageHandler";
|
import { _t } from "../../../languageHandler";
|
||||||
import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
|
import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
|
||||||
@@ -24,12 +25,16 @@ export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
|
|||||||
className="mx_TopUnreadMessagesBar_scrollUp"
|
className="mx_TopUnreadMessagesBar_scrollUp"
|
||||||
title={_t("room|jump_read_marker")}
|
title={_t("room|jump_read_marker")}
|
||||||
onClick={this.props.onScrollUpClick}
|
onClick={this.props.onScrollUpClick}
|
||||||
/>
|
>
|
||||||
|
<ChevronUpIcon />
|
||||||
|
</AccessibleButton>
|
||||||
<AccessibleButton
|
<AccessibleButton
|
||||||
className="mx_TopUnreadMessagesBar_markAsRead"
|
className="mx_TopUnreadMessagesBar_markAsRead"
|
||||||
title={_t("notifications|mark_all_read")}
|
title={_t("notifications|mark_all_read")}
|
||||||
onClick={this.props.onCloseClick}
|
onClick={this.props.onCloseClick}
|
||||||
/>
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</AccessibleButton>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { type ChangeEvent, useRef, useState } from "react";
|
import React, { type ChangeEvent, useRef, useState } from "react";
|
||||||
|
import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import { _t } from "../../../languageHandler";
|
import { _t } from "../../../languageHandler";
|
||||||
import AccessibleButton from "../elements/AccessibleButton";
|
import AccessibleButton from "../elements/AccessibleButton";
|
||||||
@@ -71,7 +72,9 @@ export const SpaceAvatar: React.FC<Pick<IProps, "avatarUrl" | "avatarDisabled" |
|
|||||||
<AccessibleButton
|
<AccessibleButton
|
||||||
className="mx_SpaceBasicSettings_avatar"
|
className="mx_SpaceBasicSettings_avatar"
|
||||||
onClick={() => avatarUploadRef.current?.click()}
|
onClick={() => avatarUploadRef.current?.click()}
|
||||||
/>
|
>
|
||||||
|
<TakePhotoSolidIcon />
|
||||||
|
</AccessibleButton>
|
||||||
<AccessibleButton
|
<AccessibleButton
|
||||||
onClick={() => avatarUploadRef.current?.click()}
|
onClick={() => avatarUploadRef.current?.click()}
|
||||||
kind="link"
|
kind="link"
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import React from "react";
|
|||||||
import { type CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
|
import { type CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
|
import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
|
||||||
|
import { MicOffSolidIcon, MicOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
|
|
||||||
import SettingsStore from "../../../settings/SettingsStore";
|
import SettingsStore from "../../../settings/SettingsStore";
|
||||||
import LegacyCallHandler from "../../../LegacyCallHandler";
|
import LegacyCallHandler from "../../../LegacyCallHandler";
|
||||||
@@ -179,14 +180,14 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
|
|||||||
mx_VideoFeed_secondary: secondary,
|
mx_VideoFeed_secondary: secondary,
|
||||||
mx_VideoFeed_voice: this.state.videoMuted,
|
mx_VideoFeed_voice: this.state.videoMuted,
|
||||||
});
|
});
|
||||||
const micIconClasses = classnames("mx_VideoFeed_mic", {
|
|
||||||
mx_VideoFeed_mic_muted: this.state.audioMuted,
|
|
||||||
mx_VideoFeed_mic_unmuted: !this.state.audioMuted,
|
|
||||||
});
|
|
||||||
|
|
||||||
let micIcon;
|
let micIcon;
|
||||||
if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) {
|
if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) {
|
||||||
micIcon = <div className={micIconClasses} />;
|
micIcon = (
|
||||||
|
<div className="mx_VideoFeed_mic">
|
||||||
|
{this.state.audioMuted ? <MicOffSolidIcon /> : <MicOnSolidIcon />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let content;
|
let content;
|
||||||
|
|||||||
@@ -10,11 +10,9 @@ import React, { type JSX, useCallback, useEffect, useRef, useState } from "react
|
|||||||
import { type Room, type MatrixEvent, type RoomMember, RoomEvent, EventType } from "matrix-js-sdk/src/matrix";
|
import { type Room, type MatrixEvent, type RoomMember, RoomEvent, EventType } from "matrix-js-sdk/src/matrix";
|
||||||
import { Button, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web";
|
import { Button, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web";
|
||||||
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
|
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
|
||||||
import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
|
|
||||||
import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
|
import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
|
||||||
import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
import { CheckIcon, VoiceCallIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||||
import { AvatarWithDetails } from "@element-hq/web-shared-components";
|
import { AvatarWithDetails } from "@element-hq/web-shared-components";
|
||||||
|
|
||||||
import { _t } from "../languageHandler";
|
import { _t } from "../languageHandler";
|
||||||
@@ -127,7 +125,7 @@ function DeclineCallButtonWithNotificationEvent({
|
|||||||
kind="primary"
|
kind="primary"
|
||||||
destructive
|
destructive
|
||||||
disabled={declining}
|
disabled={declining}
|
||||||
Icon={CrossIcon}
|
Icon={CloseIcon}
|
||||||
size="sm"
|
size="sm"
|
||||||
>
|
>
|
||||||
{_t("action|decline")}
|
{_t("action|decline")}
|
||||||
@@ -332,7 +330,9 @@ export function IncomingCallToast({ notificationEvent }: Props): JSX.Element {
|
|||||||
className="mx_IncomingCallToast_closeButton"
|
className="mx_IncomingCallToast_closeButton"
|
||||||
onClick={onCloseClick}
|
onClick={onCloseClick}
|
||||||
title={_t("action|close")}
|
title={_t("action|close")}
|
||||||
/>
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</AccessibleButton>
|
||||||
</>
|
</>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -9,8 +9,25 @@ exports[`InfoTooltip should show tooltip on hover 1`] = `
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="Information"
|
aria-label="Information"
|
||||||
class="mx_InfoTooltip_icon mx_InfoTooltip_icon_info"
|
class="mx_InfoTooltip_icon"
|
||||||
/>
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
Trigger text
|
Trigger text
|
||||||
</div>
|
</div>
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
|
|||||||
+11
-2
@@ -79,9 +79,18 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
|
|||||||
>
|
>
|
||||||
Fri, Dec 17, 2021
|
Fri, Dec 17, 2021
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<svg
|
||||||
class="mx_DateSeparator_chevron"
|
class="mx_DateSeparator_chevron"
|
||||||
/>
|
fill="currentColor"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<hr
|
<hr
|
||||||
role="none"
|
role="none"
|
||||||
|
|||||||
@@ -61,7 +61,19 @@ exports[`RoomTile when message previews are enabled and there is a message in a
|
|||||||
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
/>
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
@@ -143,7 +155,19 @@ exports[`RoomTile when message previews are enabled and there is a message in th
|
|||||||
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
/>
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
@@ -206,7 +230,19 @@ exports[`RoomTile when message previews are enabled should render a room without
|
|||||||
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
/>
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
@@ -268,7 +304,19 @@ exports[`RoomTile when message previews are not enabled should render the room 1
|
|||||||
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
class="mx_AccessibleButton mx_RoomTile_menuButton"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
/>
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
|
|||||||
Reference in New Issue
Block a user