Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-06 16:34:02 +01:00
Code Issues Projects Releases Wiki Activity

Updating Reload Scrapers formatting (#5235)

Browse source 
Per convo with people on Discord. I have updated the Reload Scrapers UI. It now adds a button if the filter box appears and then the button extends and takes up the whole space if the filter box does not exist.
---------
Co-authored-by: CJ <tedabed@gmail.com>
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
This commit is contained in:
Gykes 2024-09-09 21:54:15 -07:00 committed by GitHub
parent a2153ced52
commit 653cd16eb2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 48 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
ui/v2.5/src/components/Shared/ScraperMenu.tsx
View file

@ -1,14 +1,12 @@
import React, { useMemo, useState } from "react"; import React, { useMemo, useState } from "react";
import { Dropdown } from "react-bootstrap"; import { Dropdown, Button } from "react-bootstrap";
import { FormattedMessage, useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { Icon } from "./Icon"; import { Icon } from "./Icon";
import { stashboxDisplayName } from "src/utils/stashbox"; import { stashboxDisplayName } from "src/utils/stashbox";
import { ScraperSourceInput, StashBox } from "src/core/generated-graphql"; import { ScraperSourceInput, StashBox } from "src/core/generated-graphql";
import { faSyncAlt } from "@fortawesome/free-solid-svg-icons"; import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
import { ClearableInput } from "./ClearableInput"; import { ClearableInput } from "./ClearableInput";
const minFilteredScrapers = 5;
export const ScraperMenu: React.FC<{ export const ScraperMenu: React.FC<{
toggle: React.ReactNode; toggle: React.ReactNode;
variant?: string; variant?: string;
@ -54,22 +52,22 @@ export const ScraperMenu: React.FC<{
<Dropdown.Toggle variant={variant}>{toggle}</Dropdown.Toggle> <Dropdown.Toggle variant={variant}>{toggle}</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item onClick={() => onReloadScrapers()}> <div className="scraper-filter-container">
<span className="fa-icon"> <div className="btn-group">
<Icon icon={faSyncAlt} /> <ClearableInput
</span> placeholder={`${intl.formatMessage({ id: "filter" })}...`}
<span> value={filter}
<FormattedMessage id="actions.reload_scrapers" /> setValue={setFilter}
</span> />
</Dropdown.Item> <Button
onClick={onReloadScrapers}
{(stashBoxes?.length ?? 0) + scrapers.length > minFilteredScrapers && ( className="reload-button"
<ClearableInput title={intl.formatMessage({ id: "actions.reload_scrapers" })}
placeholder={`${intl.formatMessage({ id: "filter" })}...`} >
value={filter} <Icon icon={faSyncAlt} />
setValue={setFilter} </Button>
/> </div>
)} </div>
{filteredStashboxes.map((s, index) => ( {filteredStashboxes.map((s, index) => (
<Dropdown.Item <Dropdown.Item

30
ui/v2.5/src/components/Shared/styles.scss
View file

@ -642,9 +642,39 @@ button.btn.favorite-button {
.scraper-menu .dropdown-menu { .scraper-menu .dropdown-menu {
min-width: 250px; min-width: 250px;
padding-top: 0;
.dropdown-divider { .dropdown-divider {
border-top-color: $textfield-bg; border-top-color: $textfield-bg;
margin: 0; margin: 0;
} }
.scraper-filter-container {
background-color: $secondary;
border-bottom: solid 1px $textfield-bg;
padding: 5px;
position: sticky;
top: 0;
z-index: 1;
.btn-group {
border: solid 1px $textfield-bg;
border-radius: 5px;
width: 100%;
}
.clearable-text-field {
background-color: $textfield-bg;
}
.clearable-text-field-clear {
background-color: unset;
border: unset;
}
.reload-button.btn {
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
}
} }