zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

add proper filter icon

Browse Source
This commit is contained in:
MathieuG-P
2022-12-11 23:37:41 +01:00
parent efe03f41b9
commit 66f113ae45
4 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ export function MapsPlaylistsPanel({version}: Props) {
<div className="h-full rounded-full bg-main-color-2 grow p-[6px]">
<input type="text" className="h-full w-full bg-main-color-1 rounded-full px-2" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={tabIndex === 0 ? mapSearch : playlistSearch} onChange={e => handleSearch(e.target.value)}/>
</div>
<BsmDropdownButton className="h-full relative z-[1] flex justify-center" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1" icon="search" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
<BsmDropdownButton className="h-full relative z-[1] flex justify-center" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1" icon="filter" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
<FilterPanel className="absolute top-[calc(100%+3px)] bg-main-color-3 origin-top w-[500px] h-fit p-2 rounded-md shadow-md shadow-black" filter={mapFilter} onChange={setMapFilter}/>
</BsmDropdownButton>
<BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="center"/>
src/renderer/components/modal/modal-types/download-maps-modal.component.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ export const DownloadMapsModal: ModalComponent<void, BSVersion> = ({data}) => {
return (
<form className="text-gray-800 dark:text-gray-200 flex flex-col max-w-[95vw] w-[970px] h-[85vh] gap-3" onSubmit={e => {e.preventDefault(); handleSearch()}}>
<div className="flex h-9 gap-2 shrink-0">
<BsmDropdownButton className="shrink-0 h-full relative z-[1] flex justify-start" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1 !bg-main-color-1" icon="search" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
<BsmDropdownButton className="shrink-0 h-full relative z-[1] flex justify-start" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1 !bg-main-color-1" icon="filter" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
<FilterPanel className="absolute top-[calc(100%+3px)] bg-main-color-3 origin-top w-[450px] h-fit p-2 rounded-md shadow-md shadow-black" filter={filter} onChange={setFilter}/>
</BsmDropdownButton>
<input className="h-full bg-main-color-1 rounded-full px-2 grow pb-0.5" type="text" name="" id="" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={query} onChange={e => setQuery(e.target.value)}/>
src/renderer/components/svgs/bsm-icon.component.tsx
+3 -1
View File
@@ -42,11 +42,12 @@ import { ThreeSixtyDegreeIcon } from "./icons/three-sixty-degree-icon.component"
import { LinkIcon } from "./icons/link-icon.component";
import { UnlinkIcon } from "./icons/unlink-icon.component";
import { DownloadIcon } from "./icons/download-icon.component";
import { FilterIcon } from "./icons/filter-icon.component";
export type BsmIconType = BsvMapCharacteristic | (
"settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|
"terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|
"copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|
"copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|"filter"|
"fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
);
@@ -95,6 +96,7 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
if(icon === "link"){ return <LinkIcon className={className} style={style}/> }
if(icon === "unlink"){ return <UnlinkIcon className={className} style={style}/> }
if(icon === "download"){ return <DownloadIcon className={className} style={style}/> }
if(icon === "filter"){ return <FilterIcon className={className} style={style}/> }
return <TrashIcon className={className} style={style}/>
}
src/renderer/components/svgs/icons/filter-icon.component.tsx
+9
View File
@@ -0,0 +1,9 @@
import { CSSProperties } from "react";
export function FilterIcon(props: {className?: string, style?: CSSProperties}) {
return (
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path fill="currentColor" d="M18.333 33.333q-.708 0-1.187-.479-.479-.479-.479-1.187v-10L6.792 9.083q-.584-.75-.167-1.583.417-.833 1.375-.833h24q.958 0 1.375.833.417.833-.167 1.583l-9.875 12.584v10q0 .708-.479 1.187-.479.479-1.187.479ZM20 21.375l9.417-11.917H10.583Zm0 0Z"/>
</svg>
)
}