diff --git a/src/components/Settings/Export/Export.component.js b/src/components/Settings/Export/Export.component.js index 80716804d..81704faf4 100644 --- a/src/components/Settings/Export/Export.component.js +++ b/src/components/Settings/Export/Export.component.js @@ -18,6 +18,12 @@ import FullScreenDialog from '../../UI/FullScreenDialog'; import messages from './Export.messages'; import './Export.css'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import { + LARGE_FONT_SIZE, + MEDIUM_FONT_SIZE, + SMALL_FONT_SIZE +} from './Export.constants'; const propTypes = { /** @@ -39,6 +45,7 @@ class Export extends React.Component { this.state = { exportSingleBoard: '', exportAllBoard: '', + labelFontSize: MEDIUM_FONT_SIZE, singleBoard: '', loadingSingle: false, loadingAll: false, @@ -61,6 +68,13 @@ class Export extends React.Component { }); }; + handleSizeChange = event => { + this.setState({ + boardError: false, + labelFontSize: event.target.value + }); + }; + handleAllBoardChange = event => { const doneCallback = () => { this.setState({ @@ -74,7 +88,12 @@ class Export extends React.Component { exportAllBoard: event.target.value }, () => { - this.props.onExportClick(this.state.exportAllBoard, '', doneCallback); + this.props.onExportClick( + this.state.exportAllBoard, + '', + this.state.labelFontSize, + doneCallback + ); } ); }; @@ -101,6 +120,7 @@ class Export extends React.Component { this.props.onExportClick( this.state.exportSingleBoard, this.state.singleBoard, + this.state.labelFontSize, doneCallback ); } @@ -116,7 +136,7 @@ class Export extends React.Component { title={} onClose={onClose} > - + + + + + + } + > + + } + secondary={ + + } + /> + +
+ {this.state.loadingAll && ( + + )} + + + {intl.formatMessage(messages.fontSize)} + + + +
+ + + + ); diff --git a/src/components/Settings/Export/Export.constants.js b/src/components/Settings/Export/Export.constants.js index ffb0bb917..aeb580d01 100644 --- a/src/components/Settings/Export/Export.constants.js +++ b/src/components/Settings/Export/Export.constants.js @@ -35,6 +35,9 @@ export const EMPTY_IMAGE = export const PICSEEPAL_GRID_WIDTH = 553; export const PDF_GRID_WIDTH = 800; export const PDF_BORDER_WIDTH = 2; +export const SMALL_FONT_SIZE = 9; +export const MEDIUM_FONT_SIZE = 12; +export const LARGE_FONT_SIZE = 16; export const EXPORT_CONFIG_BY_TYPE = { cboard: { diff --git a/src/components/Settings/Export/Export.container.js b/src/components/Settings/Export/Export.container.js index b401763db..8d7148b3a 100644 --- a/src/components/Settings/Export/Export.container.js +++ b/src/components/Settings/Export/Export.container.js @@ -19,6 +19,7 @@ export class ExportContainer extends PureComponent { handleExportClick = async ( type = 'cboard', singleBoard = '', + labelFontSize = '', doneCallback ) => { const exportConfig = EXPORT_CONFIG_BY_TYPE[type]; @@ -42,6 +43,7 @@ export class ExportContainer extends PureComponent { if (singleBoard) { await EXPORT_HELPERS[exportConfig.callback]( [singleBoard], + labelFontSize, intl, true ); @@ -49,18 +51,35 @@ export class ExportContainer extends PureComponent { const currentBoard = boards.filter( board => board.id === activeBoardId ); - await EXPORT_HELPERS[exportConfig.callback](currentBoard, intl, true); + await EXPORT_HELPERS[exportConfig.callback]( + currentBoard, + labelFontSize, + intl, + true + ); } } else if (type !== 'pdf' && !singleBoard) { - await EXPORT_HELPERS[exportConfig.callback](boards, intl); + await EXPORT_HELPERS[exportConfig.callback]( + boards, + labelFontSize, + intl + ); } else { if (singleBoard) { - await EXPORT_HELPERS[exportConfig.callback]([singleBoard], intl); + await EXPORT_HELPERS[exportConfig.callback]( + [singleBoard], + labelFontSize, + intl + ); } else { const currentBoard = boards.filter( board => board.id === activeBoardId ); - await EXPORT_HELPERS[exportConfig.callback](currentBoard, intl); + await EXPORT_HELPERS[exportConfig.callback]( + currentBoard, + labelFontSize, + intl + ); } } const showBoardDowloadedNotification = () => { diff --git a/src/components/Settings/Export/Export.css b/src/components/Settings/Export/Export.css index 4e0b0e461..0366fa48e 100644 --- a/src/components/Settings/Export/Export.css +++ b/src/components/Settings/Export/Export.css @@ -19,3 +19,12 @@ .Export__SelectContainer--spinner { vertical-align: middle; } + +.Export__section { + margin-bottom: 8px; +} + +.Export__List .MuiListSubheader-root { + line-height: 16px; + padding-top: 16px; +} diff --git a/src/components/Settings/Export/Export.helpers.js b/src/components/Settings/Export/Export.helpers.js index 037726117..c64140545 100644 --- a/src/components/Settings/Export/Export.helpers.js +++ b/src/components/Settings/Export/Export.helpers.js @@ -20,7 +20,9 @@ import { PDF_GRID_WIDTH, PDF_BORDER_WIDTH, PICSEEPAL_IMAGES_WIDTH, - PDF_IMAGES_WIDTH + PDF_IMAGES_WIDTH, + SMALL_FONT_SIZE, + LARGE_FONT_SIZE } from './Export.constants'; import { LABEL_POSITION_ABOVE, @@ -372,16 +374,24 @@ function getCellWidths(columns, picsee = false) { return cellWidths; } -async function generatePDFBoard(board, intl, breakPage = true, picsee = false) { +async function generatePDFBoard( + board, + intl, + breakPage = true, + picsee = false, + labelFontSize +) { const header = { absolutePosition: { x: 0, y: 5 }, text: board.name || '', alignment: 'center', fontSize: 8 }; + const columns = board.isFixed && board.grid ? board.grid.columns : CBOARD_COLUMNS; const rows = board.isFixed && board.grid ? board.grid.rows : CBOARD_ROWS; + const cellWidths = getCellWidths(columns, picsee); const table = { @@ -401,8 +411,22 @@ async function generatePDFBoard(board, intl, breakPage = true, picsee = false) { } const grid = board.isFixed - ? await generateFixedBoard(board, rows, columns, intl, picsee) - : await generateNonFixedBoard(board, rows, columns, intl, picsee); + ? await generateFixedBoard( + board, + rows, + columns, + intl, + picsee, + labelFontSize + ) + : await generateNonFixedBoard( + board, + rows, + columns, + intl, + picsee, + labelFontSize + ); const lastGridRowDiff = columns - grid[grid.length - 2].length; // labels row if (lastGridRowDiff > 0) { @@ -427,7 +451,14 @@ function chunks(array, size) { return results; } -async function generateFixedBoard(board, rows, columns, intl, picsee = false) { +async function generateFixedBoard( + board, + rows, + columns, + intl, + picsee = false, + labelFontSize +) { let currentRow = 0; let cont = 0; @@ -482,7 +513,8 @@ async function generateFixedBoard(board, rows, columns, intl, picsee = false) { columns, currentRow, pageBreak, - picsee + picsee, + labelFontSize ); cont++; } @@ -496,7 +528,8 @@ async function generateNonFixedBoard( rows, columns, intl, - picsee = false + picsee = false, + labelFontSize ) { // Do a grid with 2n rows const grid = new Array(Math.ceil(board.tiles.length / columns) * 2); @@ -526,7 +559,8 @@ async function generateNonFixedBoard( columns, currentRow, pageBreak, - picsee + picsee, + labelFontSize ); }, Promise.resolve()); return grid; @@ -540,7 +574,8 @@ const addTileToGrid = async ( columns, currentRow, pageBreak = false, - picsee = false + picsee = false, + labelFontSize ) => { const { label, image } = getPDFTileData(tile, intl); const fixedRow = currentRow * 2; @@ -598,6 +633,7 @@ const addTileToGrid = async ( const labelData = { text: label, alignment: 'center', + fontSize: labelFontSize, fillColor: hexBackgroundColor, border: PDF_GRID_BORDER[labelPosition].labelData }; @@ -606,12 +642,19 @@ const addTileToGrid = async ( imageData.width = Math.min(IMG_WIDTH.column[columns], IMG_WIDTH.row[rows]); - if (imageData.width <= 37) { - labelData.fontSize = 7; - } else if (imageData.width <= 40) { - labelData.fontSize = 8; - } else if (imageData.width <= 45) { - labelData.fontSize = 9; + if (imageData.width <= 45) { + if (imageData.width <= 37) { + labelData.fontSize = 7; + } else if (imageData.width <= 40) { + labelData.fontSize = 8; + } else if (imageData.width <= 45) { + labelData.fontSize = 9; + } + + if (labelFontSize === SMALL_FONT_SIZE) + labelData.fontSize = labelData.fontSize - 2; + if (labelFontSize === LARGE_FONT_SIZE) + labelData.fontSize = labelData.fontSize + 2; } let value1, @@ -845,9 +888,13 @@ export async function cboardExportAdapter(allBoards = [], board) { } } -export async function pdfExportAdapter(boards = [], intl, picsee = false) { +export async function pdfExportAdapter( + boards = [], + labelFontSize, + intl, + picsee = false +) { const font = definePDFfont(intl); - const docDefinition = { pageSize: 'A4', pageOrientation: 'landscape', @@ -921,7 +968,13 @@ export async function pdfExportAdapter(boards = [], intl, picsee = false) { const content = await boards.reduce(async (prev, board, i) => { const prevContent = await prev; const breakPage = i !== 0; - const boardPDFData = await generatePDFBoard(board, intl, breakPage, picsee); + const boardPDFData = await generatePDFBoard( + board, + intl, + breakPage, + picsee, + labelFontSize + ); return prevContent.concat(boardPDFData); }, Promise.resolve([])); diff --git a/src/components/Settings/Export/Export.messages.js b/src/components/Settings/Export/Export.messages.js index 39aa3a58e..eafbea065 100644 --- a/src/components/Settings/Export/Export.messages.js +++ b/src/components/Settings/Export/Export.messages.js @@ -48,5 +48,30 @@ export default defineMessages({ downloadNoConnectionError: { id: 'cboard.components.Settings.Export.downloadNoConnectionError', defaultMessage: 'Need internet connection to download the PDF.' + }, + pdfSettings: { + id: 'cboard.components.Settings.Export.pdfSettings', + defaultMessage: 'PDF Settings' + }, + fontSize: { + id: 'cboard.components.Settings.Export.fontSize', + defaultMessage: 'Font size' + }, + fontSizeSecondary: { + id: 'cboard.components.Settings.Export.fontSizeSecondary', + defaultMessage: + 'Select the desired font size. This option is useful if you have problems with the dimensions of the exported board.' + }, + small: { + id: 'cboard.components.Settings.Export.small', + defaultMessage: 'Small' + }, + medium: { + id: 'cboard.components.Settings.Export.medium', + defaultMessage: 'Medium' + }, + large: { + id: 'cboard.components.Settings.Export.large', + defaultMessage: 'Large' } }); diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json index 23ef08c15..e06cd7731 100644 --- a/src/translations/src/cboard.json +++ b/src/translations/src/cboard.json @@ -446,6 +446,12 @@ "cboard.components.Settings.Export.boardDownloadedError": "Ups..Something went wrong. Please try again", "cboard.components.Settings.Export.downloadNoConnectionError": "Need internet connection to download the PDF.", "cboard.components.Settings.Export.boards": "Boards", + "cboard.components.Settings.Export.pdfSettings": "PDF Settings", + "cboard.components.Settings.Export.fontSize": "Font size", + "cboard.components.Settings.Export.fontSizeSecondary": "Select the desired font size. This option is useful if you have problems with the dimensions of the exported board.", + "cboard.components.Settings.Export.small": "Small", + "cboard.components.Settings.Export.medium": "Medium", + "cboard.components.Settings.Export.large": "Large", "cboard.components.Settings.Import.import": "Import", "cboard.components.Settings.Import.importSecondary": "This option will import JUST the new boards detected. It WILL NOT import the default boards included on Cboard. Supported formats are {cboardLink} format or {link} format.", "cboard.components.Settings.Import.success": "Success!! {boards} boards were imported successfully.",