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
5 changes: 5 additions & 0 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,6 +713,11 @@ describe("Timeline", () => {
cy.visit("/#/room/" + roomId);

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)
richvdh marked this conversation as resolved.
Show resolved Hide resolved
});

cy.get(".mx_SearchBar_input input").type("Message{enter}");

cy.get(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight").should("exist");
Expand Down
22 changes: 18 additions & 4 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,30 +15,43 @@ limitations under the License.
*/

.mx_SearchBar {
height: 56px;
min-height: 56px; /* for wrapped mx_SearchBar_button making the area tall */
luixxiul marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
align-items: center;
border-bottom: 1px solid $primary-hairline-color;

.mx_SearchBar_input {
--size-button-search: 37px;
richvdh marked this conversation as resolved.
Show resolved Hide resolved

/* 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…' */
richvdh marked this conversation as resolved.
Show resolved Hide resolved
min-width: calc(7em + var(--size-button-search));

input {
box-sizing: border-box; /* include padding value into width calculation */
}
}

.mx_SearchBar_searchButton {
--size: var(--size-button-search); /* square */
richvdh marked this conversation as resolved.
Show resolved Hide resolved

cursor: pointer;
width: 37px;
height: 37px;
width: var(--size);
min-width: var(--size);
richvdh marked this conversation as resolved.
Show resolved Hide resolved
height: var(--size);
background-color: $accent;
mask: url("$(res)/img/feather-customised/search-input.svg");
mask-repeat: no-repeat;
mask-position: center;
}

.mx_SearchBar_buttons {
display: inherit;
display: inherit; /* flex */
min-width: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This min-width declaration is needed as this mx_SearchBar_buttons itself is a flex button.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand, I'm afraid. What happens if this is not present?

Copy link
Contributor Author

@luixxiul luixxiul May 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is necessary to have the close button displayed even on a very narrow timeline.

1.mp4

I think the buttons should rather be wrapped like on this extreme case, but it is not the theme of this PR (design input should be required too).

The name of this selector makes it really difficult to understand what is and not really needed. I will address the issue with another PR.

}

.mx_SearchBar_button {
Expand All @@ -50,6 +63,7 @@ limitations under the License.
color: $primary-content;
border-bottom: 2px solid $accent;
font-weight: var(--font-semi-bold);
word-break: break-all; /* prevent the input area and cancel button from being overlapped by BaseCard */
}

.mx_SearchBar_unselected {
Expand Down