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

Client: Improved layout of new spool icon

Browse Source
This commit is contained in:
Donkie
2023-07-10 12:40:32 +02:00
parent cfef2beb47
commit c8974c505d
2 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@ import {
DateField,
CloneButton,
} from "@refinedev/antd";
import { Table, Space, Button } from "antd";
import { Table, Space, Button, Row, Col } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
@@ -158,25 +158,32 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
filters={useListFiltersForField(dataSource, "name")}
filteredValue={getFiltersForField(typedFilters, "name")}
render={(value, record: IFilament) => {
return (
<>
{record.color_hex && (
<Icon
component={SpoolIcon}
style={{
color: "#" + record.color_hex,
fontSize: 40,
verticalAlign: "middle",
marginLeft: -10,
marginRight: 0,
marginTop: -20,
marginBottom: -20,
}}
/>
)}
{value}
</>
);
return {
props: {
style: {
paddingLeft: 0,
paddingTop: 0,
paddingBottom: 0,
},
},
children: (
<Row wrap={false} justify="space-around" align="middle">
{record.color_hex && (
<Col flex="none">
<Icon
component={SpoolIcon}
style={{
color: "#" + record.color_hex,
fontSize: 42,
marginRight: 0,
}}
/>
</Col>
)}
<Col flex="auto">{value}</Col>
</Row>
),
};
}}
/>
<Table.Column

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

@@ -9,7 +9,7 @@ import {
TextField,
CloneButton,
} from "@refinedev/antd";
import { Table, Space, Button } from "antd";
import { Table, Space, Button, Row, Col } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
@@ -151,25 +151,32 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
filters={useListFiltersForField(dataSource, "filament_name")}
filteredValue={getFiltersForField(typedFilters, "filament_name")}
render={(value, record: ISpool) => {
return (
<>
{record.filament.color_hex && (
<Icon
component={SpoolIcon}
style={{
color: "#" + record.filament.color_hex,
fontSize: 40,
verticalAlign: "middle",
marginLeft: -10,
marginRight: 0,
marginTop: -20,
marginBottom: -20,
}}
/>
)}
{value}
</>
);
return {
props: {
style: {
paddingLeft: 0,
paddingTop: 0,
paddingBottom: 0,
},
},
children: (
<Row wrap={false} justify="space-around" align="middle">
{record.filament.color_hex && (
<Col flex="none">
<Icon
component={SpoolIcon}
style={{
color: "#" + record.filament.color_hex,
fontSize: 42,
marginRight: 0,
}}
/>
</Col>
)}
<Col flex="auto">{value}</Col>
</Row>
),
};
}}
/>
<Table.Column