Redesign room search interface (#12677)
* Extract SearchInfo interface and SearchScope enum Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix in-progress and update behaviour of RoomSearchView Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove search button from legacy header Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Move search from aux panel to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Wire up Cmd/Ctrl F for moved search field Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use cpd space tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove stale props Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix ctrl/cmd f search shortcut Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update Compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert the back button for now Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Cancel search on escape Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix missing X Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Extract SearchScope and SearchInfo into Searching Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to icon button for cancel search Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * yarn.lock Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * lint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update locators Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots * Discard changes to package.json * i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Handle narrow viewports Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert copy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
596ad38260
commit
2a26afe438
33 changed files with 675 additions and 499 deletions
|
|
@ -177,9 +177,9 @@ a:visited {
|
|||
color: $accent-alt;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="search"],
|
||||
input[type="password"] {
|
||||
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="text"],
|
||||
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="search"],
|
||||
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="password"] {
|
||||
padding: 9px;
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
|
|
|
|||
|
|
@ -306,10 +306,10 @@
|
|||
@import "./views/rooms/_RoomListHeader.pcss";
|
||||
@import "./views/rooms/_RoomPreviewBar.pcss";
|
||||
@import "./views/rooms/_RoomPreviewCard.pcss";
|
||||
@import "./views/rooms/_RoomSearchAuxPanel.pcss";
|
||||
@import "./views/rooms/_RoomSublist.pcss";
|
||||
@import "./views/rooms/_RoomTile.pcss";
|
||||
@import "./views/rooms/_RoomUpgradeWarningBar.pcss";
|
||||
@import "./views/rooms/_SearchBar.pcss";
|
||||
@import "./views/rooms/_SendMessageComposer.pcss";
|
||||
@import "./views/rooms/_SpaceScopeHeader.pcss";
|
||||
@import "./views/rooms/_Stickers.pcss";
|
||||
|
|
|
|||
|
|
@ -238,25 +238,12 @@ limitations under the License.
|
|||
padding: 15px 12px;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_search input {
|
||||
/* Overriding very broad CSS rules */
|
||||
border: 0 !important;
|
||||
margin: 0 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mx_RoomSummaryCard_search {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
.mx_RoomSummaryCard_searchBtn {
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
color: var(--cpd-color-icon-primary);
|
||||
border: 1px solid var(--cpd-color-gray-400);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: var(--cpd-space-2x);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
display: unset; /* override _common.pcss which inhibits this */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
72
res/css/views/rooms/_RoomSearchAuxPanel.pcss
Normal file
72
res/css/views/rooms/_RoomSearchAuxPanel.pcss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
Copyright 2024 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomSearchAuxPanel {
|
||||
/* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
|
||||
min-height: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-color: var(--cpd-color-bg-canvas-default);
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
padding: var(--cpd-space-3x);
|
||||
box-sizing: border-box;
|
||||
gap: var(--cpd-space-2x);
|
||||
|
||||
.mx_RoomSearchAuxPanel_summary {
|
||||
flex-grow: 1;
|
||||
display: inherit; /* flex */
|
||||
gap: var(--cpd-space-2x);
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
> svg {
|
||||
padding: var(--cpd-space-2x);
|
||||
border-radius: var(--cpd-space-2x);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSearchAuxPanel_summary_text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-22px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SearchWarning {
|
||||
display: contents;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-20px;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSearchAuxPanel_buttons {
|
||||
display: inherit; /* flex */
|
||||
gap: var(--cpd-space-6x);
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_SearchBar {
|
||||
/* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
|
||||
.mx_SearchBar_input {
|
||||
--size-button-search: 37px; /* size of the search button inside `input` element */
|
||||
|
||||
/* border: 1px solid $input-border-color; */
|
||||
/* font-size: $font-15px; */
|
||||
flex: 1 1 0;
|
||||
margin-left: 22px;
|
||||
|
||||
/* do not allow the input element to shrink below the width needed for the placeholder 'Search…'
|
||||
and the search button */
|
||||
min-width: calc(7em + var(--size-button-search));
|
||||
|
||||
input {
|
||||
box-sizing: border-box; /* include padding value into width calculation */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SearchBar_searchButton {
|
||||
cursor: pointer;
|
||||
width: var(--size-button-search);
|
||||
height: var(--size-button-search);
|
||||
background-color: $accent;
|
||||
mask: url("$(res)/img/feather-customised/search-input.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_SearchBar_buttons {
|
||||
display: inherit; /* flex */
|
||||
min-width: 0; /* have the close button displayed even on a very narrow timeline */
|
||||
}
|
||||
|
||||
.mx_SearchBar_button {
|
||||
border: 0;
|
||||
margin: 0 0 0 22px;
|
||||
padding: 5px;
|
||||
font-size: $font-15px;
|
||||
cursor: pointer;
|
||||
color: $primary-content;
|
||||
border-bottom: 2px solid $accent;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
word-break: break-all; /* prevent the input area and cancel button from being overlapped by BaseCard */
|
||||
}
|
||||
|
||||
.mx_SearchBar_unselected {
|
||||
color: $input-darker-fg-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.mx_SearchBar_cancel {
|
||||
background-color: $alert;
|
||||
mask: url("$(res)/img/cancel.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 14px;
|
||||
padding: 9px;
|
||||
margin: 0 12px 0 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue