matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-31 13:44:28 +03:00
Code Activity

Fix Shortcut prompt for Search showing in minimized Roomlist (#9014)

Browse Source
This commit is contained in:
Janne Mareike Koschinski
2022-07-08 10:50:06 +02:00
committed by GitHub
parent 4844cc14bd
commit 39816f67e4
4 changed files with 41 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
res/css/structures/_LeftPanel.scss
View File

@ -122,38 +122,6 @@ $roomListCollapsedWidth: 68px;
margin-top: 12px;
}
.mx_RoomSearch_shortcutPrompt {
border-radius: 6px;
background-color: $panel-actions;
padding: 2px 4px;
user-select: none;
font-size: $font-12px;
line-height: $font-15px;
font-weight: $font-semi-bold;
color: $light-fg-color;
margin-right: 6px;
}
.mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
.mx_RoomSearch_shortcutPrompt {
display: none;
}
& + .mx_LeftPanel_exploreButton,
& + .mx_LeftPanel_recentsButton {
// Cheaty way to return the occupied space to the filter input
flex-basis: 0;
margin: 0;
width: 0;
// Don't forget to hide the masked ::before icon,
// using display:none or visibility:hidden would break accessibility
&::before {
content: none;
}
}
}
.mx_LeftPanel_dialPadButton {
width: 32px;
height: 32px;

68
res/css/structures/_RoomSearch.scss
View File

@ -17,6 +17,7 @@ limitations under the License.
// Note: this component expects to be contained within a flexbox
.mx_RoomSearch {
flex: 1;
min-width: 0;
border-radius: 8px;
background-color: $panel-actions;
// keep border thickness consistent to prevent movement
@ -28,6 +29,8 @@ limitations under the License.
display: flex;
align-items: center;
cursor: pointer;
.mx_RoomSearch_icon {
width: 16px;
height: 16px;
@ -36,11 +39,35 @@ limitations under the License.
background-color: $secondary-content;
margin-left: 7px;
margin-bottom: 2px;
flex-shrink: 0;
}
.mx_RoomSearch_spotlightTriggerText {
font-size: $font-12px;
line-height: $font-16px;
color: $tertiary-content;
flex: 1;
min-width: 0;
// the following rules are to match that of a real input field
overflow: hidden;
margin: 9px;
font-weight: $font-semi-bold;
}
.mx_RoomSearch_shortcutPrompt {
border-radius: 6px;
background-color: $panel-actions;
padding: 2px 4px;
user-select: none;
font-size: $font-12px;
line-height: $font-15px;
font-family: inherit;
font-weight: $font-semi-bold;
color: $light-fg-color;
margin-right: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.mx_RoomSearch_minimized {
@ -55,44 +82,25 @@ limitations under the License.
align-self: center;
}
&:hover {
background-color: $tertiary-content;
.mx_RoomSearch_icon {
background-color: $background;
}
.mx_RoomSearch_shortcutPrompt {
display: none;
}
}
&.mx_RoomSearch_spotlightTrigger {
cursor: pointer;
min-width: 0;
&:hover {
background-color: $tertiary-content;
.mx_RoomSearch_spotlightTriggerText {
color: $tertiary-content;
flex: 1;
min-width: 0;
// the following rules are to match that of a real input field
overflow: hidden;
margin: 9px;
font-weight: $font-semi-bold;
color: $background;
}
&:hover {
background-color: $tertiary-content;
.mx_RoomSearch_shortcutPrompt {
background-color: $background;
color: $secondary-content;
}
.mx_RoomSearch_spotlightTriggerText {
color: $background;
}
.mx_RoomSearch_shortcutPrompt {
background-color: $background;
color: $secondary-content;
}
.mx_RoomSearch_icon {
background-color: $background;
}
.mx_RoomSearch_icon {
background-color: $background;
}
}
}