Skip to content

Commit

Permalink
Make document search available in entity preview (#3879)
Browse files Browse the repository at this point in the history
* Make document search available in entity preview

Document search has always been a little difficult to discover, as it's hidden in entity previews. Additionally, when coming from a global search, searching for the same search query inside of a specific document requires more interactions than necessary (first need to expand the entity, then copy/paste the search query into the document search input.

As a first step, this commit moves the search bar from the `PdfViewer` component up into the tab list in the `EntityViews` component. This makes it always available, no matter whether the entity is displayed in preview mode or not. This also saves some vertical space.

* Resolve overflow issues

I can’t say that I fully understood why these styles where applied in the first place, so I'm not entirely sure this isn't breaking anything, but at first look everything seems okay.

* Do not clip search input focus outline

* Set document search field value based on URL

* Refactor `EntityViews` component

The `render` method for this component was huge. I’ve decided to split it up which should make it easier to understand what’s going on and to make changes.

* Use `icon` shorthand property instead of `Icon` component

This removes unnecessary indentation levels and just makes the code a little easier to read.

* Refactor PDF search mode

The previous solution was manually rendering just the markup for a tab panel outside of the `Tabs` component (because we don’t want a visible tab button in addition to the search input).

This solution is a little more resilient, as it doesn’t rely on manually rendering HTML markup but uses the `Tab` component instead. Also, it provides a label for the search tab that can be used by assistive technology.

* Disable tab indicator animations

* Remove unused `activeMode` property on `PdfViewerSearch`

* Remove unnecessary guard clause

This should be unnecessary as the reference modes aren't rendered in the first place in the top-level `render` method if `references` hasn't been loaded yet.

* Remove unused import
  • Loading branch information
tillprochaska authored Nov 4, 2024
1 parent c8df8f2 commit d93a04b
Show file tree
Hide file tree
Showing 10 changed files with 411 additions and 301 deletions.
1 change: 0 additions & 1 deletion ui/src/components/Document/DocumentViewMode.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

.outer {
flex: 2;
padding: ($aleph-grid-size * 0.5);

.inner {
background: white;
Expand Down
4 changes: 0 additions & 4 deletions ui/src/components/Entity/EntityPreview.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ $preview-padding: $aleph-grid-size * 1.5;
overflow: visible;
}

.info-tabs-padding {
padding: $preview-padding 0;
}

.#{$bp-ns}-drawer-header {
padding: 0 $aleph-grid-size * 0.5;
box-shadow: 0 1px 2px rgba(16, 22, 26, 0.15);
Expand Down
Loading

0 comments on commit d93a04b

Please sign in to comment.