mirror of
https://github.com/Zagrios/bs-manager.git
synced 2026-07-03 14:08:25 +02:00
[feat-216] applied ui for filter/sorting map/playlist
* also applied change to model filter ui
This commit is contained in:
silentrald
@@ -253,7 +253,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white mb-4">
|
||||
<nav className="w-full shrink-0 flex h-9 justify-center gap-2 text-main-color-1 dark:text-white mb-4">
|
||||
<BsmDropdownButton
|
||||
classNames={{
|
||||
mainContainer: "h-full relative z-[1] flex justify-center w-fit",
|
||||
@@ -264,7 +264,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
|
||||
icon="add"
|
||||
buttonColor="primary"
|
||||
text="misc.add"
|
||||
align="center"
|
||||
align="left"
|
||||
menuTranslationY="6px"
|
||||
withBar={false}
|
||||
items={addDropDownItems}
|
||||
@@ -282,30 +282,34 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
|
||||
<BsmDropdownButton className="h-full relative z-[1] flex justify-center" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1 whitespace-nowrap" icon="filter" text="pages.version-viewer.maps.search-bar.filters-btn" textClassName="whitespace-nowrap" withBar={false}>
|
||||
{(
|
||||
tabIndex === 0 ? (
|
||||
<FilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[500px] h-fit p-2 rounded-md shadow-md shadow-black" filter={mapFilter} onChange={setMapFilter} />
|
||||
<FilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[500px] h-fit p-2 rounded-full shadow-md shadow-black" filter={mapFilter} onChange={setMapFilter} />
|
||||
) : (
|
||||
<LocalPlaylistFilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[300px] h-fit p-2 rounded-md shadow-md shadow-black" filter={playlistFilter} onChange={setPlaylistFilter} />
|
||||
<LocalPlaylistFilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[300px] h-fit p-2 rounded-full shadow-md shadow-black" filter={playlistFilter} onChange={setPlaylistFilter} />
|
||||
)
|
||||
)}
|
||||
</BsmDropdownButton>
|
||||
<BsmSelect
|
||||
className="bg-theme-1 rounded-full px-1 pb-0.5 text-center cursor-pointer"
|
||||
options={sortOptions}
|
||||
selected={selectedSort}
|
||||
onChange={handleSortChange}
|
||||
/>
|
||||
<BsmButton
|
||||
className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3"
|
||||
iconClassName="transition-transform size-full ease-in-out duration-200 bg-light-main-color-1 dark:bg-main-color-3"
|
||||
iconStyle={{ transform: (tabIndex === MAP_TAB && mapSort.ascending)
|
||||
|| (tabIndex === PLAYLIST_TAB && playlistSort.ascending)
|
||||
? "rotate(360deg)" : "rotate(180deg)"}}
|
||||
icon="chevron-top"
|
||||
typeColor="primary"
|
||||
withBar={false}
|
||||
onClick={handleAscendingClick}
|
||||
/>
|
||||
<BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="center" />
|
||||
|
||||
<div className="h-full relative">
|
||||
<BsmButton
|
||||
className="h-full absolute top-0 aspect-square rounded-l-full z-[1]"
|
||||
iconClassName="transition-transform size-full ease-in-out duration-200 bg-light-main-color-2 dark:bg-main-color-2"
|
||||
iconStyle={{ transform: (tabIndex === MAP_TAB && mapSort.ascending)
|
||||
|| (tabIndex === PLAYLIST_TAB && playlistSort.ascending)
|
||||
? "rotate(0deg)" : "rotate(180deg)"}}
|
||||
icon="arrow-upward"
|
||||
withBar={false}
|
||||
onClick={handleAscendingClick}
|
||||
/>
|
||||
|
||||
<BsmSelect
|
||||
className="h-full bg-theme-2 rounded-full pl-9 cursor-pointer outline-none"
|
||||
options={sortOptions}
|
||||
selected={selectedSort}
|
||||
onChange={handleSortChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="right" />
|
||||
</nav>
|
||||
<BsContentTabPanel
|
||||
tabIndex={tabIndex}
|
||||
|
||||
@@ -133,7 +133,7 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex flex-col items-center justify-center gap-4">
|
||||
<div className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white">
|
||||
<div className="w-full shrink-0 flex h-9 justify-center gap-2 text-main-color-1 dark:text-white">
|
||||
<BsmButton
|
||||
className="flex items-center justify-center w-fit rounded-full px-2 py-1 font-bold"
|
||||
icon="add"
|
||||
@@ -149,7 +149,7 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
|
||||
<div className="h-full rounded-full bg-light-main-color-2 dark:bg-main-color-2 grow p-[6px]">
|
||||
<input type="text" className="h-full w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2" placeholder={t("models.panel.actions.search")} onChange={e => setSearch(e.target.value)} tabIndex={-1} />
|
||||
</div>
|
||||
<BsmDropdownButton items={threeDotsItems} className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} menuTranslationY="6px" align="center" />
|
||||
<BsmDropdownButton items={threeDotsItems} className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} menuTranslationY="6px" align="right" />
|
||||
</div>
|
||||
<BsContentTabPanel
|
||||
tabIndex={currentTabIndex}
|
||||
|
||||
@@ -68,10 +68,11 @@ import { BrowseIcon } from "./icons/browse-icon.component";
|
||||
import { AddFileIcon } from "./icons/add-file-icon.component";
|
||||
import { CancelIcon } from "./icons/cancel-icon.component";
|
||||
import { WarningIcon } from "./icons/warning-icon.component";
|
||||
import { ArrowUpwardIcon } from "./icons/arrow-upward-icon.component";
|
||||
|
||||
|
||||
|
||||
export type BsmIconType = SongDetailDiffCharactertistic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "web-site" | "clean" | "browse" | "add-file" | "cancel" | "warning" | "fr-FR-flag" | "es-ES-flag" | "it-IT-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag" | "ko-KR-flag" | "null" );
|
||||
export type BsmIconType = SongDetailDiffCharactertistic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "web-site" | "clean" | "browse" | "add-file" | "arrow-upward" | "cancel" | "warning" | "fr-FR-flag" | "es-ES-flag" | "it-IT-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag" | "ko-KR-flag" | "null" );
|
||||
|
||||
export const BsmIcon = memo(({ className, icon, style }: { className?: string; icon: BsmIconType; style?: CSSProperties }) => {
|
||||
// TODO : Very ugly very messy, need to find a better way to do this
|
||||
@@ -282,6 +283,10 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i
|
||||
if(icon === "add-file") {
|
||||
return <AddFileIcon className={className} style={style} />;
|
||||
}
|
||||
if(icon === "arrow-upward") {
|
||||
return <ArrowUpwardIcon className={className} style={style} />;
|
||||
}
|
||||
|
||||
if(icon === "null") {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createSvgIcon } from "../svg-icon.type";
|
||||
|
||||
export const ArrowUpwardIcon = createSvgIcon((props, ref) => {
|
||||
return (
|
||||
<svg
|
||||
ref={ref}
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M440-608 324-492q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L520-608v328q0 17-11.5 28.5T480-240q-17 0-28.5-11.5T440-280v-328Z" />
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user