tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

New spool icon updates

Browse Source
This commit is contained in:
Donkie
2024-06-11 17:09:54 +02:00
parent e2df888e96
commit f1b27b441d
9 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/column.tsx
View File

@@ -295,7 +295,7 @@ export function ActionsColumn<Obj extends Entity>(actionsFn: (record: Obj) => Ac
}
interface SpoolIconColumnProps<Obj extends Entity> extends FilteredQueryColumnProps<Obj> {
color: (record: Obj) => string | string[] | undefined;
color: (record: Obj) => string | { colors: string[]; vertical: boolean } | undefined;
}
export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {
@@ -342,12 +342,12 @@ export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<
},
render: (rawValue, record: Obj) => {
const value = props.transform ? props.transform(rawValue) : rawValue;
const colorStr = props.color(record);
const colorObj = props.color(record);
return (
<Row wrap={false} justify="space-around" align="middle">
{colorStr && (
{colorObj && (
<Col flex="none">
<SpoolIcon color={colorStr} />
<SpoolIcon color={colorObj} />
</Col>
)}
<Col flex="auto">{value}</Col>

2
client/src/components/multiColorPicker.tsx
View File

@@ -67,7 +67,7 @@ export function MultiColorPicker(props: {
return (
<>
<Space direction="horizontal" size="middle">
<Space direction="horizontal" size="middle" style={{ marginTop: "1em" }}>
{pickers}
{values.length < (props.max ?? Infinity) && (
<Button

24
client/src/components/spoolIcon.css
View File

@@ -1,23 +1,41 @@
.spool-icon {
display: flex;
flex-direction: column;
width: 1.5em;
height: 2.5em;
gap: 2px;
margin: 0 0.5em;
}
.spool-icon.vertical {
flex-direction: column;
}
.spool-icon.large {
width: 4em;
height: 4em;
}
.spool-icon * {
flex: 1 1 0px;
border-radius: 2px;
}
.spool-icon *:first-child {
.spool-icon.vertical *:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.spool-icon *:last-child {
.spool-icon.vertical *:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.spool-icon.horizontal *:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.spool-icon.horizontal *:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}

20
client/src/components/spoolIcon.tsx
View File

@@ -1,10 +1,24 @@
import "./spoolIcon.css";
export default function SpoolIcon(props: { color: string | string[] }) {
const cols = Array.isArray(props.color) ? props.color : [props.color];
interface Props {
color: string | { colors: string[]; vertical: boolean };
size?: "small" | "large";
}
export default function SpoolIcon(props: Props) {
let dirClass = "vertical";
let cols = [];
let size = props.size ? props.size : "small";
if (typeof props.color === "string") {
cols = [props.color];
} else {
dirClass = props.color.vertical ? "vertical" : "horizontal";
cols = props.color.colors;
}
return (
<div className="spool-icon">
<div className={"spool-icon " + dirClass + " " + size}>
{cols.map((col) => (
<div
key={col}

1
client/src/icon_spool.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" viewBox="0 0 235 500" xml:space="preserve"><desc>Created with Fabric.js 5.3.0</desc><g id="z-gD78pOtWjQii31Q-6Ze"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.5875748337 0 0 3.9476902309 197.1354865303 250.0467513161) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="qCAOML5j7kpAVIP3Df73i"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.3815761198 0 0 3.4623174046 197.1354865303 250.0467382769) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="DwEIaQUSPW4DgKfkdPWoC"><path style="stroke:#000;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z" transform="matrix(2.0736420266 0 0 3.3577085856 117.2947215155 250.0467440227) translate(-0.000005, 0)" vector-effect="non-scaling-stroke"/></g><g id="OvgM38-6CZm9R47a1TDIX" transform="matrix(0.5875748337 0 0 3.9476902309 37.4539565008 250.0467440227)"><filter id="SVGID_90" width="181.094%" height="149.483%" x="-40.547%" y="-24.742%"><feGaussianBlur in="SourceAlpha" stdDeviation="20"/><feOffset dx="30" dy="0" result="oBlur"/><feFlood flood-color="#000" flood-opacity=".8"/><feComposite in2="oBlur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1;filter:url(#SVGID_90)" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="woBV3Wt7ijQ6puNeMgAQD"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#111;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.2435597948 0 0 1.6363849628 37.4539565008 250.0467440227) translate(0, 0)" vector-effect="non-scaling-stroke"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

7
client/src/pages/filaments/list.tsx
View File

@@ -241,7 +241,12 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
id: "name",
i18ncat: "filament",
color: (record: IFilamentCollapsed) =>
record.multi_color_hexes ? record.multi_color_hexes.split(",") : record.color_hex,
record.multi_color_hexes
? {
colors: record.multi_color_hexes.split(","),
vertical: record.multi_color_direction === "longitudinal",
}
: record.color_hex,
filterValueQuery: useSpoolmanFilamentNames(),
}),
FilteredQueryColumn({

10
client/src/pages/filaments/show.tsx
View File

@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
import { EntityType, useGetFields } from "../../utils/queryFields";
import { ExtraFieldDisplay } from "../../components/extraFields";
import { useCurrency } from "../../utils/settings";
import SpoolIcon from "../../components/spoolIcon";
dayjs.extend(utc);
const { Title } = Typography;
@@ -49,6 +50,13 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
navigate(URL);
};
const colorObj = record?.multi_color_hexes
? {
colors: record.multi_color_hexes.split(","),
vertical: record.multi_color_direction === "longitudinal",
}
: record?.color_hex;
return (
<Show
isLoading={isLoading}
@@ -80,7 +88,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
<Title level={5}>{t("filament.fields.name")}</Title>
<TextField value={record?.name} />
<Title level={5}>{t("filament.fields.color_hex")}</Title>
<TextField value={record?.color_hex} />
{colorObj && <SpoolIcon color={colorObj} size="large" />}
<Title level={5}>{t("filament.fields.material")}</Title>
<TextField value={record?.material} />
<Title level={5}>{t("filament.fields.price")}</Title>

5
client/src/pages/spools/list.tsx
View File

@@ -344,7 +344,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
i18nkey: "spool.fields.filament_name",
color: (record: ISpoolCollapsed) =>
record.filament.multi_color_hexes
? record.filament.multi_color_hexes.split(",")
? {
colors: record.filament.multi_color_hexes.split(","),
vertical: record.filament.multi_color_direction === "longitudinal",
}
: record.filament.color_hex,
dataId: "filament.combined_name",
filterValueQuery: useSpoolmanFilamentFilter(),

10
client/src/pages/spools/show.tsx
View File

@@ -11,6 +11,7 @@ import { IFilament } from "../filaments/model";
import { EntityType, useGetFields } from "../../utils/queryFields";
import { ExtraFieldDisplay } from "../../components/extraFields";
import { useCurrency } from "../../utils/settings";
import SpoolIcon from "../../components/spoolIcon";
dayjs.extend(utc);
@@ -66,12 +67,19 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
});
};
const colorObj = record?.filament.multi_color_hexes
? {
colors: record.filament.multi_color_hexes.split(","),
vertical: record.filament.multi_color_direction === "longitudinal",
}
: record?.filament.color_hex;
return (
<Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
<Title level={5}>{t("spool.fields.id")}</Title>
<NumberField value={record?.id ?? ""} />
<Title level={5}>{t("spool.fields.filament")}</Title>
<TextField value={record ? filamentURL(record?.filament) : ""} />
{colorObj && <SpoolIcon color={colorObj} />} <TextField value={record ? filamentURL(record?.filament) : ""} />
<Title level={5}>{t("spool.fields.price")}</Title>
<NumberField
value={record ? spoolPrice(record) : ""}