Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix timeline search bar being overlapped by the right panel #10809

Merged
merged 11 commits into from
May 15, 2023
Merged

Fix timeline search bar being overlapped by the right panel #10809

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a8a073d
Set zero min-width to prevent input area blowout
luixxiul May 6, 2023
e5fec03
Set min-width values to mx_SearchBar_input and mx_SearchBar_button
luixxiul May 6, 2023
e1dce82
Prevent the input area and cancel button from being overlapped by Bas…
luixxiul May 6, 2023
07661aa
Use custom properties: --size-button-search
luixxiul May 6, 2023
c2e47a3
Take Percy snapshot of mx_SearchBar
luixxiul May 6, 2023
ccd68d3
Apply suggestions from code review
luixxiul May 10, 2023
38df1b1
Edit a comment
luixxiul May 10, 2023
12ac717
Feedback
luixxiul May 10, 2023
97b1528
Edit a comment
luixxiul May 11, 2023
250949f
Merge branch 'develop' into SearchBar2
luixxiul May 11, 2023
e4be4a1
Update cypress/e2e/timeline/timeline.spec.ts
luixxiul May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion cypress/e2e/timeline/timeline.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -715,7 +715,8 @@ describe("Timeline", () => {
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();

cy.get(".mx_SearchBar").percySnapshotElement("Search bar on the timeline", {
widths: [320, 640], // Emulate narrow timeline (cf. decryption-failure.spec.ts)
// Emulate narrow timeline (apply the same values used on decryption-failure.spec.ts)
luixxiul marked this conversation as resolved.
Show resolved Hide resolved
widths: [320, 640],
});

cy.get(".mx_SearchBar_input input").type("Message{enter}");
Expand Down
17 changes: 8 additions & 9 deletions res/css/views/rooms/_SearchBar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,22 @@ limitations under the License.
*/

.mx_SearchBar {
min-height: 56px; /* for wrapped mx_SearchBar_button making the area tall */
/* 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-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;

/* retain space for the input bar. 7em is a magic number to retain space for the placeholder 'Search…' */
/* 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 {
Expand All @@ -37,12 +39,9 @@ limitations under the License.
}

.mx_SearchBar_searchButton {
--size: var(--size-button-search); /* square */

cursor: pointer;
width: var(--size);
min-width: var(--size);
height: var(--size);
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;
Expand All @@ -51,7 +50,7 @@ limitations under the License.

.mx_SearchBar_buttons {
display: inherit; /* flex */
min-width: 0;
min-width: 0; /* have the close button displayed even on a very narrow timeline */
}

.mx_SearchBar_button {
Expand Down