public/tubearchivist
1
0
Fork 0
mirror of https://git.vectorsigma.ru/public/tubearchivist.git synced 2026-08-04 19:09:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

add filter toggle icon

Browse Source
This commit is contained in:
Simon
2025-08-12 14:27:43 +07:00
parent f2da730aa2
commit 9c5e4b599f
3 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/public/img/icon-filter.svg Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="131 -131 512 512" style="enable-background:new 131 -131 512 512;" xml:space="preserve">
<g id="XMLID_2_">
<path id="XMLID_4_" d="M640.9-116.5c3.7,10.2,2.8,18.6-4.7,25.1L456.6,87.4v270c0,10.2-4.7,17.7-14,21.4c-2.8,0.9-6.5,1.9-9.3,1.9
c-6.5,0-12.1-1.9-16.8-6.5L323.4,281c-4.7-4.7-6.5-10.2-6.5-16.8V87.4L138.2-91.4c-7.4-7.4-9.3-15.8-4.7-25.1
c3.7-9.3,11.2-14,21.4-14h464.5C629.7-131.4,636.2-126.7,640.9-116.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 603 B

77
frontend/src/components/Filterbar.tsx
View File

@@ -5,6 +5,7 @@ import iconSubstract from '/img/icon-substract.svg';
import iconGridView from '/img/icon-gridview.svg'; import iconGridView from '/img/icon-gridview.svg';
import iconListView from '/img/icon-listview.svg'; import iconListView from '/img/icon-listview.svg';
import iconTableView from '/img/icon-tableview.svg'; import iconTableView from '/img/icon-tableview.svg';
import iconFilter from '/img/icon-filter.svg';
import { useUserConfigStore } from '../stores/UserConfigStore'; import { useUserConfigStore } from '../stores/UserConfigStore';
import { ViewStyleNamesType, ViewStylesEnum } from '../configuration/constants/ViewStyle'; import { ViewStyleNamesType, ViewStylesEnum } from '../configuration/constants/ViewStyle';
import updateUserConfig, { UserConfigType } from '../api/actions/updateUserConfig'; import updateUserConfig, { UserConfigType } from '../api/actions/updateUserConfig';
@@ -27,7 +28,8 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
const { userConfig, setUserConfig } = useUserConfigStore(); const { userConfig, setUserConfig } = useUserConfigStore();
const [showHidden, setShowHidden] = useState(false); const [showHidden, setShowHidden] = useState(false);
const { filterHeight, setFilterHeight } = useFilterBarTempConf(); const { filterHeight, setFilterHeight, showFilterItems, setShowFilterItems } =
useFilterBarTempConf();
const currentViewStyle = userConfig[viewStyle]; const currentViewStyle = userConfig[viewStyle];
const isGridView = currentViewStyle === ViewStylesEnum.Grid; const isGridView = currentViewStyle === ViewStylesEnum.Grid;
@@ -55,39 +57,48 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
return ( return (
<div className="view-controls three"> <div className="view-controls three">
<div> <div className="view-icons">
<select {showFilterItems && (
value={userConfig.hide_watched === null ? '' : userConfig.hide_watched.toString()} <>
onChange={event => { <select
handleUserConfigUpdate({ value={userConfig.hide_watched === null ? '' : userConfig.hide_watched.toString()}
hide_watched: event.target.value === '' ? null : event.target.value === 'true', onChange={event => {
}); handleUserConfigUpdate({
}} hide_watched: event.target.value === '' ? null : event.target.value === 'true',
> });
<option value="">All</option> }}
<option value="true">Watched only</option> >
<option value="false">Unwatched only</option> <option value="">All watched state</option>
</select> <option value="true">Watched only</option>
{showTypeFilter && ( <option value="false">Unwatched only</option>
<select </select>
value={userConfig.vid_type_filter === null ? '' : userConfig.vid_type_filter} {showTypeFilter && (
onChange={event => { <select
handleUserConfigUpdate({ value={userConfig.vid_type_filter === null ? '' : userConfig.vid_type_filter}
vid_type_filter: onChange={event => {
event.target.value === '' ? null : (event.target.value as VideoTypes), handleUserConfigUpdate({
}); vid_type_filter:
}} event.target.value === '' ? null : (event.target.value as VideoTypes),
> });
<option value="">All Types</option> }}
<option value="videos">Videos</option> >
<option value="streams">Streams</option> <option value="">All Types</option>
<option value="shorts">Shorts</option> <option value="videos">Videos</option>
</select> <option value="streams">Streams</option>
<option value="shorts">Shorts</option>
</select>
)}
<input
placeholder="height in px"
value={filterHeight}
onChange={e => setFilterHeight(e.target.value)}
/>
</>
)} )}
<input <img
placeholder="height in px" src={iconFilter}
value={filterHeight} alt="icon filter"
onChange={e => setFilterHeight(e.target.value)} onClick={() => setShowFilterItems(!showFilterItems)}
/> />
</div> </div>

4
frontend/src/stores/FilterbarTempConf.ts
View File

@@ -5,9 +5,13 @@ import { create } from 'zustand';
interface FilterbarTempConfInterface { interface FilterbarTempConfInterface {
filterHeight: string; filterHeight: string;
setFilterHeight: (filterHeight: string) => void; setFilterHeight: (filterHeight: string) => void;
showFilterItems: boolean;
setShowFilterItems: (filterItems: boolean) => void;
} }
export const useFilterBarTempConf = create<FilterbarTempConfInterface>(set => ({ export const useFilterBarTempConf = create<FilterbarTempConfInterface>(set => ({
filterHeight: '', filterHeight: '',
setFilterHeight: (filterHeight: string) => set({ filterHeight }), setFilterHeight: (filterHeight: string) => set({ filterHeight }),
showFilterItems: false,
setShowFilterItems: (showFilterItems: boolean) => set({ showFilterItems }),
})); }));