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

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

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