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

[chore] add map and playlist icon + init the new svg system

Browse Source
This commit is contained in:
MathieuG-P
2024-01-07 14:36:01 +01:00
parent 073061c8e5
commit cc42f0a978
11 changed files with 77 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+4 -2
View File
@@ -13,6 +13,8 @@ import { VersionFolderLinkerService, VersionLinkerActionListener } from "rendere
import { useService } from "renderer/hooks/use-service.hook";
import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component";
import { BsmButton } from "../shared/bsm-button.component";
import { MapIcon } from "../svgs/icons/map-icon.component";
import { PlaylistIcon } from "../svgs/icons/playlist-icon.component";
type Props = {
version?: BSVersion;
@@ -114,7 +116,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
tabs={[
{
text: "misc.maps",
icon: "trash",
icon: MapIcon,
onClick: () => setTabIndex(0),
linkProps: version ? {
state$: mapsService.$mapsFolderLinkState(version),
@@ -123,7 +125,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
},
{
text: "misc.playlists",
icon: "trash",
icon: PlaylistIcon,
onClick: () => setTabIndex(1),
},
]}
src/renderer/components/models-management/models-panel.component.tsx
+21 -1
View File
@@ -18,6 +18,11 @@ import { FolderLinkState } from "renderer/services/version-folder-linker.service
import { BsContentTabItemProps } from "../shared/bs-content-tab-panel/bs-content-tab-item.component";
import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component";
import { LinkBtnProps } from "../maps-mangement-components/link-button.component";
import { ModelTypeAvatarIcon } from "../svgs/icons/model-type-avatar-icon.component";
import { SvgIcon } from "../svgs/svg-icon.type";
import { ModelTypeSaberIcon } from "../svgs/icons/model-type-saber-icon.component";
import { ModelTypePlatformIcon } from "../svgs/icons/model-type-platform-icon.component";
import { ModelTypeBloqIcon } from "../svgs/icons/model-type-bloq-icon.component";
export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersion; isActive: boolean; goToMods?: () => void }) {
const modelsManager = useService(ModelsManagerService);
@@ -114,9 +119,24 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
onClick,
} : undefined;
const getModelIcon = (model: MSModelType): SvgIcon => {
switch (model) {
case MSModelType.Avatar:
return ModelTypeAvatarIcon;
case MSModelType.Saber:
return ModelTypeSaberIcon;
case MSModelType.Platfrom:
return ModelTypePlatformIcon;
case MSModelType.Bloq:
return ModelTypeBloqIcon;
default:
return ModelTypeAvatarIcon;
}
}
return {
text: `models.types.plural.${model}`,
icon: model,
icon: getModelIcon(model),
onClick: () => setModelTypeTab(model),
linkProps
}
src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx
+4 -4
View File
@@ -1,10 +1,10 @@
import { LinkBtnProps, LinkButton } from "renderer/components/maps-mangement-components/link-button.component";
import { BsmIcon, BsmIconType } from "renderer/components/svgs/bsm-icon.component";
import { SvgIcon } from "renderer/components/svgs/svg-icon.type";
import { useTranslation } from "renderer/hooks/use-translation.hook";
export type BsContentTabItemProps<T = unknown> = {
text: string;
icon: BsmIconType;
icon: SvgIcon;
active?: boolean;
value?: T;
linkProps?: LinkBtnProps;
@@ -13,7 +13,7 @@ export type BsContentTabItemProps<T = unknown> = {
type BsContentTabItemComponent<T = unknown> = ({text, icon, active, value, linkProps, onClick}: BsContentTabItemProps<T>) => JSX.Element;
export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon, active, value, linkProps, onClick }) => {
export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon: Icon, active, value, linkProps, onClick }) => {
const t = useTranslation();
@@ -26,7 +26,7 @@ export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon, active
return (
<li className={`relative w-full cursor-pointer flex-1 text-center text-lg font-bold flex justify-center items-center content-center px-7 bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-1 dark:hover:bg-main-color-1 ${active && "!bg-light-main-color-1 dark:!bg-main-color-1"}`} onClick={handleClick}>
<div className="flex flex-col gap-0.5 justify-start items-center text-main-color-1 dark:text-gray-200">
<BsmIcon icon={icon} className="w-7 h-7" />
<Icon className="w-7 h-7"/>
<span className=" font-thin italic text-xs">{t(text)}</span>
</div>
{linkProps && (
src/renderer/components/svgs/bsm-icon.component.tsx
+2 -19
View File
@@ -56,20 +56,16 @@ import { RussianIcon } from "./flags/russian-icon.component";
import { ChineseIcon } from "./flags/chinese-icon.component";
import { ChineseTraditionalIcon } from "./flags/chineseTraditional-icon.component";
import { JapanIcon } from "./flags/japan-icon.component";
import { MSModelType } from "shared/models/models/model-saber.model";
import { ModelTypeAvatarIcon } from "./icons/model-type-avatar-icon.component";
import { ModelTypeSaberIcon } from "./icons/model-type-saber-icon.component";
import { ModelTypePlatformIcon } from "./icons/model-type-platform-icon.component";
import { ModelTypeBloqIcon } from "./icons/model-type-bloq-icon.component";
import { ChevronTopIcon } from "./icons/chevron-top-icon.component";
import { EyeCrossIcon } from "./icons/eye-cross-icon.component";
import { ShortcutIcon } from "./icons/shortcut-icon.component";
import { BackupRestoreIcon } from "./icons/backup-restore-icon.component";
export type BsmIconType = BsvMapCharacteristic | MSModelType | ("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" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");
export type BsmIconType = BsvMapCharacteristic | ("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" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");
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
// the rework have started, see `svg-icon.type.ts`
const renderIcon = () => {
if (icon === "settings") {
@@ -254,19 +250,6 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i
if (icon === "backup-restore") {
return <BackupRestoreIcon className={className} style={style} />;
}
if (icon === MSModelType.Avatar) {
return <ModelTypeAvatarIcon className={className} style={style} />;
}
if (icon === MSModelType.Saber) {
return <ModelTypeSaberIcon className={className} style={style} />;
}
if (icon === MSModelType.Platfrom) {
return <ModelTypePlatformIcon className={className} style={style} />;
}
if (icon === MSModelType.Bloq) {
return <ModelTypeBloqIcon className={className} style={style} />;
}
return <TrashIcon className={className} style={style} />;
};
src/renderer/components/svgs/icons/map-icon.component.tsx
+9
View File
@@ -0,0 +1,9 @@
import { createSvgIcon } from "../svg-icon.type";
export const MapIcon = createSvgIcon((props, ref) => {
return (
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
<path d="m574-129-214-75-186 72q-10 4-19.5 2.5T137-136q-8-5-12.5-13.5T120-169v-561q0-13 7.5-23t20.5-15l186-63q6-2 12.5-3t13.5-1q7 0 13.5 1t12.5 3l214 75 186-72q10-4 19.5-2.5T823-824q8 5 12.5 13.5T840-791v561q0 13-7.5 23T812-192l-186 63q-6 2-12.5 3t-13.5 1q-7 0-13.5-1t-12.5-3Zm-14-89v-468l-160-56v468l160 56Z"/>
</svg>
)
});
src/renderer/components/svgs/icons/model-type-avatar-icon.component.tsx
+5 -5
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypeAvatarIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypeAvatarIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
<path d="M64 416L168.6 180.7c15.3-34.4 40.3-63.5 72-83.7l146.9-94c3-1.9 6.5-2.9 10-2.9C407.7 0 416 8.3 416 18.6v1.6c0 2.6-.5 5.1-1.4 7.5L354.8 176.9c-1.9 4.7-2.8 9.7-2.8 14.7c0 5.5 1.2 11 3.4 16.1L448 416H240.9l11.8-35.4 40.4-13.5c6.5-2.2 10.9-8.3 10.9-15.2s-4.4-13-10.9-15.2l-40.4-13.5-13.5-40.4C237 276.4 230.9 272 224 272s-13 4.4-15.2 10.9l-13.5 40.4-40.4 13.5C148.4 339 144 345.1 144 352s4.4 13 10.9 15.2l40.4 13.5L207.1 416H64zM279.6 141.5c-1.1-3.3-4.1-5.5-7.6-5.5s-6.5 2.2-7.6 5.5l-6.7 20.2-20.2 6.7c-3.3 1.1-5.5 4.1-5.5 7.6s2.2 6.5 5.5 7.6l20.2 6.7 6.7 20.2c1.1 3.3 4.1 5.5 7.6 5.5s6.5-2.2 7.6-5.5l6.7-20.2 20.2-6.7c3.3-1.1 5.5-4.1 5.5-7.6s-2.2-6.5-5.5-7.6l-20.2-6.7-6.7-20.2zM32 448H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
</svg>
);
}
)
});
src/renderer/components/svgs/icons/model-type-bloq-icon.component.tsx
+4 -4
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypeBloqIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypeBloqIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" id="Bloq" viewBox="0 0 300 300" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" id="Bloq" viewBox="0 0 300 300" fill="currentColor">
<path d="M264,0H36.05A36,36,0,0,0,0,36.05V264A36,36,0,0,0,36.05,300H264A36,36,0,0,0,300,264V36.05A36,36,0,0,0,264,0Zm2.38,52.68a5.86,5.86,0,0,1-3.53,5.37L152.08,106a5.87,5.87,0,0,1-4.7,0L39.19,58.07a5.87,5.87,0,0,1-3.48-5.35V36.46a5.85,5.85,0,0,1,5.86-5.85H260.48a5.85,5.85,0,0,1,5.85,5.85Z" />
</svg>
);
}
});
src/renderer/components/svgs/icons/model-type-platform-icon.component.tsx
+4 -4
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypePlatformIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypePlatformIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
<path d="M0 80c0 26.5 21.5 48 48 48H64v64h64V128h96v64h64V128h96v64h64V128h16c26.5 0 48-21.5 48-48V13.4C512 6 506 0 498.6 0c-1.7 0-3.4 .3-5 1l-49 19.6C425.7 28.1 405.5 32 385.2 32H126.8c-20.4 0-40.5-3.9-59.4-11.4L18.4 1c-1.6-.6-3.3-1-5-1C6 0 0 6 0 13.4V80zM64 288V480c0 17.7 14.3 32 32 32s32-14.3 32-32V288H384V480c0 17.7 14.3 32 32 32s32-14.3 32-32V288h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H64z" />
</svg>
);
}
});
src/renderer/components/svgs/icons/model-type-saber-icon.component.tsx
+5 -5
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypeSaberIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypeSaberIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
<path d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z" />
</svg>
);
}
)
});
src/renderer/components/svgs/icons/playlist-icon.component.tsx
+9
View File
@@ -0,0 +1,9 @@
import { createSvgIcon } from "../svg-icon.type";
export const PlaylistIcon = createSvgIcon((props, ref) => {
return (
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
<path d="M500-360q42 0 71-29t29-71v-220h80q17 0 28.5-11.5T720-720q0-17-11.5-28.5T680-760h-80q-17 0-28.5 11.5T560-720v180q-13-10-28-15t-32-5q-42 0-71 29t-29 71q0 42 29 71t71 29ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-520q0-17 11.5-28.5T120-720q17 0 28.5 11.5T160-680v520h520q17 0 28.5 11.5T720-120q0 17-11.5 28.5T680-80H160Z"/>
</svg>
)
})
src/renderer/components/svgs/svg-icon.type.ts
+10
View File
@@ -0,0 +1,10 @@
// These types and functions are meant replace the current clunky SVG system (the one with `bsm-icon.component.tsx`)
import { ForwardedRef, forwardRef } from "react"
export type SvgIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
export type SvgRenderFunction = (props: React.SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => JSX.Element;
export function createSvgIcon(render: SvgRenderFunction): SvgIcon {
return forwardRef(render);
}