Updating Reload Scrapers formatting (#5235)

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
2 changed files with 48 additions and 20 deletions

View File

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