idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 01:39:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add filter dropdown #26 (#142)

Browse source 
feat(FilterItemDropdown): added a filter dropdown component from #26 

* fix(react-multi-select-component): adjusted the component to fit in with other components when comparing across multiple browsers. (where firefox consistently handles pixels and rem's, chromium doesn't agree).

refactor(input): removed shadow from input components to match react-multi-select-component look where needed.

refactor(SwitchGroup): added a small top margin for a less dense look. cleaned up surrounding code.

refactor(DeleteModal): adjusted the background color to fit more nicely across dark/light themes. made the exclamation icon bigger and removed the circle container.

refactor(Logs): adjusted text color on the light theme. cleaned up the code.

refactor(FilterAddForm): adapted to conform with the changes.

feat(FilterItemDropdown): added a dropdown component to the filter list as proposed in #26. could use a better look, though. also, cleaned up surrounding code and got rid of pesky negative margins.

refactor(FilterListItem): made the table striped when using the dark theme. adapter for the dropdown component.

refactor(filters/details):
- removed needless border properties from remove button, which left artifacts after de-focusing the button. also, removed the shadow from the cancel button.
- added invalidation of the filter list on a delete mutation before redirecting to /filters.
- modified certain group descriptions a bit in order to make them a bit more concise.
- overall, cleaned up the surrounding code further.
This commit is contained in:
stacksmash76 2022-02-17 20:59:06 +01:00 • committed by GitHub
parent d4d9169210
commit 279d4ff7a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 356 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/src/screens/Logs.tsx
View file

@ -7,10 +7,9 @@ type LogEvent = {
message: string;
};
export default function Logs() {
const [logs, setLogs] = useState<LogEvent[]>([])
const messagesEndRef: any = useRef(null)
export const Logs = () => {
const messagesEndRef = useRef<HTMLDivElement>(null);
const [logs, setLogs] = useState<LogEvent[]>([]);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "auto" })
@ -41,12 +40,12 @@ export default function Logs() {
<div className=" overflow-y-auto p-2 rounded-lg h-96 bg-gray-100 dark:bg-gray-900">
{logs.map((a, idx) => (
<p key={idx}>
<span className="font-mono text-gray-600 mr-2">{a.time}</span>
<span className="font-mono text-gray-500 dark:text-gray-600 mr-2">{a.time}</span>
{a.level === "TRACE" && <span className="font-mono font-semibold text-purple-300">{a.level}</span>}
{a.level === "DEBUG" && <span className="font-mono font-semibold text-yellow-500">{a.level}</span>}
{a.level === "INFO" && <span className="font-mono font-semibold text-green-500">{a.level} </span>}
{a.level === "ERROR" && <span className="font-mono font-semibold text-red-500">{a.level}</span>}
<span className="ml-2 text-gray-300">{a.message}</span>
<span className="ml-2 text-black dark:text-gray-300">{a.message}</span>
</p>
))}
<div ref={messagesEndRef} />