Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-06 08:26:00 +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 { 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

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

@ -642,9 +642,39 @@ button.btn.favorite-button {
.scraper-menu .dropdown-menu {
min-width: 250px;
padding-top: 0;
.dropdown-divider {
border-top-color: $textfield-bg;
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;
}
}
}