From 3662d8957505b08a2de3ffd329f675659de3c0dc Mon Sep 17 00:00:00 2001 From: Donkie Date: Sat, 12 Aug 2023 15:03:22 +0200 Subject: [PATCH] Client: Cleaned up layout form with collapsibles --- client/public/locales/en/common.json | 10 +- client/public/locales/sv/common.json | 12 +- .../components/printing/printingDialog.tsx | 586 +++++++++--------- 3 files changed, 322 insertions(+), 286 deletions(-) diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index 0213a8a..6a31a2e 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -56,7 +56,9 @@ "printing": { "generic": { "title": "Printing", - "description": "Tune in the settings below to get the desired print layout. Keep in mind that printers and your OS may apply it's own margins and scaling, so you may need to perform some trial-and-error before it's all correct. Test it on a piece of regular paper before printing on the actual labels.\nThe \"Margin\" fields should be configured to match your label paper and printer, changing these will affect the size of the entire grid.\nThe \"Safe-Zone\" fields should be set to how close to the paper edge your printer can print, changing these will not affect the entire grid.", + "description": "Tune in the settings below to get the desired print layout. Keep in mind that printers and your OS may apply it's own margins and scaling, so you may need to perform some trial-and-error before it's all correct. Test it on a piece of regular paper before printing on the actual labels.", + "helpMargin": "Margins should be configured to match your label paper and printer, changing these will affect the size of the entire grid.", + "helpPrinterMargin": "Safe-Zone should be set to how close to the paper edge your printer can print, changing these will not affect the entire grid.", "print": "Print", "columns": "Columns", "rows": "Rows", @@ -64,6 +66,8 @@ "showBorder": "Show Border", "previewScale": "Preview Scale", "skipItems": "Skip Items", + "contentSettings": "Content Settings", + "layoutSettings": "Layout Settings", "marginLeft": "Left Margin", "marginRight": "Right Margin", "marginTop": "Top Margin", @@ -72,10 +76,6 @@ "printerMarginRight": "Safe-Zone Right", "printerMarginTop": "Safe-Zone Top", "printerMarginBottom": "Safe-Zone Bottom", - "blockRowsTop": "Block Rows Top", - "blockRowsBottom": "Block Rows Bottom", - "blockColumnsLeft": "Block Columns Left", - "blockColumnsRight": "Block Columns Right", "borders": { "none": "None", "border": "Border", diff --git a/client/public/locales/sv/common.json b/client/public/locales/sv/common.json index e9de4a4..6b709d3 100644 --- a/client/public/locales/sv/common.json +++ b/client/public/locales/sv/common.json @@ -57,20 +57,24 @@ "generic": { "title": "Utskrift", "description": "Justera inställningarna nedan för att få önskat utskriftslayout. Kom ihåg att skrivare och ditt operativsystem kan tillämpa sina egna marginaler och skalning, så du kan behöva justera inställningarna därefter. Testa på ett vanligt papper innan du skriver ut på de faktiska etiketterna.", + "helpMargin": "Marginaler bör konfigureras för att matcha ditt etikettpapper och skrivare, ändringar av dessa kommer att påverka storleken på hela rutnätet.", + "helpPrinterMargin": "Säkerhetszon bör ställas in på hur nära papperskanten din skrivare kan skriva ut, ändringar av dessa kommer inte att påverka hela rutnätet.", "print": "Skriv ut", "columns": "Kolumner", "rows": "Rader", "paperSize": "Papperstyp", "showBorder": "Visa ram", "previewScale": "Skala förhandsgranskning", + "contentSettings": "Innehållsinställningar", + "layoutSettings": "Layoutinställningar", "marginLeft": "Marginal - vänster", "marginRight": "Marginal - höger", "marginTop": "Marginal - topp", "marginBottom": "Marginal - botten", - "blockRowsTop": "Blockera rader - topp", - "blockRowsBottom": "Blockera rader - botten", - "blockColumnsLeft": "Blockera kolumner - vänster", - "blockColumnsRight": "Blockera kolumner - höger", + "printerMarginLeft": "Säkerhetszon - vänster", + "printerMarginRight": "Säkerhetszon - höger", + "printerMarginTop": "Säkerhetszon - topp", + "printerMarginBottom": "Säkerhetszon - botten", "borders": { "none": "Ingen", "border": "Ram", diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx index b91f0fe..96dd08d 100644 --- a/client/src/components/printing/printingDialog.tsx +++ b/client/src/components/printing/printingDialog.tsx @@ -1,5 +1,18 @@ import React, { useRef } from "react"; -import { Modal, Slider, Button, Select, Row, Col, Form, Divider, RadioChangeEvent, Radio, InputNumber } from "antd"; +import { + Modal, + Slider, + Button, + Select, + Row, + Col, + Form, + Divider, + RadioChangeEvent, + Radio, + InputNumber, + Collapse, +} from "antd"; import ReactToPrint from "react-to-print"; import { useSavedState } from "../../utils/saveload"; import { useTranslate } from "@refinedev/core"; @@ -48,6 +61,7 @@ const paperDimensions: { [key: string]: PaperDimensions } = { const PrintingDialog: React.FC = ({ items, style, extraSettings, visible, onCancel, title }) => { const t = useTranslate(); + const [collapseState, setCollapseState] = useSavedState("print-collapseState", []); const [marginLeft, setMarginLeft] = useSavedState("print-marginLeft", 10); const [marginTop, setMarginTop] = useSavedState("print-marginTop", 10); const [marginRight, setMarginRight] = useSavedState("print-marginRight", 10); @@ -224,270 +238,6 @@ const PrintingDialog: React.FC = ({ items, style, extraSett
- - - - `${value} mm` }} - value={marginLeft} - onChange={(value) => { - setMarginLeft(value); - }} - /> - - - { - setMarginLeft(value ?? 0); - }} - /> - - - - - - - `${value} mm` }} - value={marginTop} - onChange={(value) => { - setMarginTop(value); - }} - /> - - - { - setMarginTop(value ?? 0); - }} - /> - - - - - - - `${value} mm` }} - value={marginRight} - onChange={(value) => { - setMarginRight(value); - }} - /> - - - { - setMarginRight(value ?? 0); - }} - /> - - - - - - - `${value} mm` }} - value={marginBottom} - onChange={(value) => { - setMarginBottom(value); - }} - /> - - - { - setMarginBottom(value ?? 0); - }} - /> - - - - - - - `${value} mm` }} - value={printerMarginLeft} - onChange={(value) => { - setPrinterMarginLeft(value); - }} - /> - - - { - setPrinterMarginLeft(value ?? 0); - }} - /> - - - - - - - `${value} mm` }} - value={printerMarginTop} - onChange={(value) => { - setPrinterMarginTop(value); - }} - /> - - - { - setPrinterMarginTop(value ?? 0); - }} - /> - - - - - - - `${value} mm` }} - value={printerMarginRight} - onChange={(value) => { - setPrinterMarginRight(value); - }} - /> - - - { - setPrinterMarginRight(value ?? 0); - }} - /> - - - - - - - `${value} mm` }} - value={printerMarginBottom} - onChange={(value) => { - setPrinterMarginBottom(value); - }} - /> - - - { - setPrinterMarginBottom(value ?? 0); - }} - /> - - - - - - - { - setPaperColumns(value); - }} - /> - - - { - setPaperColumns(value ?? 1); - }} - /> - - - - - - - { - setPaperRows(value); - }} - /> - - - { - setPaperRows(value ?? 1); - }} - /> - - - @@ -512,15 +262,6 @@ const PrintingDialog: React.FC = ({ items, style, extraSett - - - = ({ items, style, extraSett buttonStyle="solid" /> - {extraSettings && } - {extraSettings} - @@ -569,6 +307,300 @@ const PrintingDialog: React.FC = ({ items, style, extraSett + + { + if (Array.isArray(key)) { + setCollapseState(key); + } + }} + > + + {extraSettings} + + + + + + + + + { + setPaperColumns(value); + }} + /> + + + { + setPaperColumns(value ?? 1); + }} + /> + + + + + + + { + setPaperRows(value); + }} + /> + + + { + setPaperRows(value ?? 1); + }} + /> + + + + +

{t("printing.generic.helpMargin")}

+ + + + `${value} mm` }} + value={marginLeft} + onChange={(value) => { + setMarginLeft(value); + }} + /> + + + { + setMarginLeft(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={marginTop} + onChange={(value) => { + setMarginTop(value); + }} + /> + + + { + setMarginTop(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={marginRight} + onChange={(value) => { + setMarginRight(value); + }} + /> + + + { + setMarginRight(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={marginBottom} + onChange={(value) => { + setMarginBottom(value); + }} + /> + + + { + setMarginBottom(value ?? 0); + }} + /> + + + + +

{t("printing.generic.helpPrinterMargin")}

+ + + + `${value} mm` }} + value={printerMarginLeft} + onChange={(value) => { + setPrinterMarginLeft(value); + }} + /> + + + { + setPrinterMarginLeft(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={printerMarginTop} + onChange={(value) => { + setPrinterMarginTop(value); + }} + /> + + + { + setPrinterMarginTop(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={printerMarginRight} + onChange={(value) => { + setPrinterMarginRight(value); + }} + /> + + + { + setPrinterMarginRight(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={printerMarginBottom} + onChange={(value) => { + setPrinterMarginBottom(value); + }} + /> + + + { + setPrinterMarginBottom(value ?? 0); + }} + /> + + + + +