PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Change highlighting around the room list filter

Browse source
This commit is contained in:
Michael Telatynski 2020-08-17 16:59:29 +01:00
parent b9f22aa569
commit a4d11cc190
7 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
res/css/structures/_LeftPanel.scss
View file

@ -97,16 +97,18 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
display: flex; display: flex;
align-items: center; align-items: center;
.mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton { .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
// Cheaty way to return the occupied space to the filter input & + .mx_LeftPanel_exploreButton {
flex-basis: 0; // Cheaty way to return the occupied space to the filter input
margin: 0; flex-basis: 0;
width: 0; margin: 0;
width: 0;
// Don't forget to hide the masked ::before icon, // Don't forget to hide the masked ::before icon,
// using display:none or visibility:hidden would break accessibility // using display:none or visibility:hidden would break accessibility
&::before { &::before {
content: none; content: none;
}
} }
} }

15
res/css/structures/_RoomSearch.scss
View file

@ -19,6 +19,8 @@ limitations under the License.
flex: 1; flex: 1;
border-radius: 8px; border-radius: 8px;
background-color: $roomlist-button-bg-color; background-color: $roomlist-button-bg-color;
// keep border thickness consistent to prevent movement
border: 1px solid transparent;
height: 28px; height: 28px;
padding: 2px; padding: 2px;
@ -50,7 +52,18 @@ limitations under the License.
} }
} }
&.mx_RoomSearch_expanded { &.mx_RoomSearch_hasQuery {
border-color: $secondary-fg-color;
}
&.mx_RoomSearch_focused {
box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
border-color: transparent;
}
&.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
background-color: $roomlist-filter-active-bg-color;
.mx_RoomSearch_clearButton { .mx_RoomSearch_clearButton {
width: 16px; width: 16px;
height: 16px; height: 16px;

1
res/themes/dark/css/_dark.scss
View file

@ -114,6 +114,7 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $bg-color;
$roomlist-bg-color: rgba(33, 38, 44, 0.90); $roomlist-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: $tertiary-fg-color; $roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color; $roomsublist-divider-color: $primary-fg-color;

1
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -111,6 +111,7 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color; $roomlist-bg-color: $header-panel-bg-color;
$roomsublist-divider-color: $primary-fg-color; $roomsublist-divider-color: $primary-fg-color;

1
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -178,6 +178,7 @@ $header-divider-color: #91a1c0;
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color; $roomlist-bg-color: $header-panel-bg-color;
$roomlist-header-color: $primary-fg-color; $roomlist-header-color: $primary-fg-color;
$roomsublist-divider-color: $primary-fg-color; $roomsublist-divider-color: $primary-fg-color;

1
res/themes/light/css/_light.scss
View file

@ -172,6 +172,7 @@ $header-divider-color: #91A1C0;
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: #ffffff;
$roomlist-bg-color: rgba(245, 245, 245, 0.90); $roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomlist-header-color: $tertiary-fg-color; $roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color; $roomsublist-divider-color: $primary-fg-color;

3
src/components/structures/RoomSearch.tsx
View file

@ -126,7 +126,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
public render(): React.ReactNode { public render(): React.ReactNode {
const classes = classNames({ const classes = classNames({
'mx_RoomSearch': true, 'mx_RoomSearch': true,
'mx_RoomSearch_expanded': this.state.query || this.state.focused, 'mx_RoomSearch_hasQuery': this.state.query,
'mx_RoomSearch_focused': this.state.focused,
'mx_RoomSearch_minimized': this.props.isMinimized, 'mx_RoomSearch_minimized': this.props.isMinimized,
}); });