Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 04:14:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Separate filter buttons from query field (#2668)

Browse Source
This commit is contained in:
WithoutPants
2022-06-15 11:51:05 +10:00
committed by GitHub
parent 75a795b2e6
commit c2f7617952
4 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/v2.5/src/components/Changelog/versions/v0160.md
View File

@@ -2,6 +2,9 @@
* Added support for customizing recommendations on home page. ([#2592](https://github.com/stashapp/stash/pull/2592))
* Support submitting stash-box scene updates for scenes with stash ids. ([#2577](https://github.com/stashapp/stash/pull/2577))
### 🎨 Improvements
* Moved Filter and Saved Filters buttons out of the query input field. ([#2668](https://github.com/stashapp/stash/pull/2668))
### 🐛 Bug fixes
* Fix portrait videos orienting incorrectly in full-screen mode. ([#2665](https://github.com/stashapp/stash/pull/2665))
* Fix scene scrubber stopping scrolling after editing scene or marker. ([#2600](https://github.com/stashapp/stash/pull/2600))

79
ui/v2.5/src/components/List/ListFilter.tsx
View File

@@ -208,27 +208,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
return (
<>
<div className="d-flex mb-1">
<InputGroup className="mr-2 flex-grow-1">
<InputGroup.Prepend>
<Dropdown>
<OverlayTrigger
placement="top"
overlay={
<Tooltip id="filter-tooltip">
<FormattedMessage id="search_filter.saved_filters" />
</Tooltip>
}
>
<Dropdown.Toggle variant="secondary">
<Icon icon="bookmark" />
</Dropdown.Toggle>
</OverlayTrigger>
<Dropdown.Menu
as={SavedFilterDropdown}
className="saved-filter-list-menu"
/>
</Dropdown>
</InputGroup.Prepend>
<div className="mr-2 flex-grow-1 query-text-field-group">
<FormControl
ref={queryRef}
placeholder={`${intl.formatMessage({ id: "actions.search" })}…`}
@@ -247,27 +227,46 @@ export const ListFilter: React.FC<IListFilterProps> = ({
>
<Icon icon="times" />
</Button>
<InputGroup.Append>
<OverlayTrigger
placement="top"
overlay={
<Tooltip id="filter-tooltip">
<FormattedMessage id="search_filter.name" />
</Tooltip>
}
>
<Button
variant="secondary"
onClick={() => openFilterDialog()}
active={filterDialogOpen}
>
<Icon icon="filter" />
</Button>
</OverlayTrigger>
</InputGroup.Append>
</InputGroup>
</div>
</div>
<ButtonGroup className="mr-2 mb-1">
<Dropdown>
<OverlayTrigger
placement="top"
overlay={
<Tooltip id="filter-tooltip">
<FormattedMessage id="search_filter.saved_filters" />
</Tooltip>
}
>
<Dropdown.Toggle variant="secondary">
<Icon icon="bookmark" />
</Dropdown.Toggle>
</OverlayTrigger>
<Dropdown.Menu
as={SavedFilterDropdown}
className="saved-filter-list-menu"
/>
</Dropdown>
<OverlayTrigger
placement="top"
overlay={
<Tooltip id="filter-tooltip">
<FormattedMessage id="search_filter.name" />
</Tooltip>
}
>
<Button
variant="secondary"
onClick={() => openFilterDialog()}
active={filterDialogOpen}
>
<Icon icon="filter" />
</Button>
</OverlayTrigger>
</ButtonGroup>
<Dropdown as={ButtonGroup} className="mr-2 mb-1">
<InputGroup.Prepend>
<Dropdown.Toggle variant="secondary">

9
ui/v2.5/src/components/List/styles.scss
View File

@@ -29,6 +29,13 @@ input[type="range"].zoom-slider {
padding-right: 0;
}
.query-text-field-group {
align-items: stretch;
display: flex;
flex-wrap: wrap;
position: relative;
}
.query-text-field {
border: 0;
width: 50%;
@@ -41,7 +48,7 @@ input[type="range"].zoom-slider {
margin: $btn-padding-y $btn-padding-x;
padding: 0;
position: absolute;
right: 3em;
right: 0;
z-index: 4;
&:hover,

6
ui/v2.5/src/index.scss
View File

@@ -800,6 +800,12 @@ div.dropdown-menu {
}
}
// workaround for dropdown button in button group
.btn-group > .dropdown:not(:last-child) > .btn {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
dl.details-list {
display: grid;
grid-column-gap: 10px;