Skip to content

Commit

Permalink
Merge pull request #1612 from chelsouse/feature/add_font_size_selecto…
Browse files Browse the repository at this point in the history 
…r_on_pdf_export

Feature / Font size selector on PDF export
  • Loading branch information
@RodriSanchez1
RodriSanchez1 authored Nov 16, 2023
2 parents 6212e56 + 7c6f7ba commit 83406db
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 24 deletions.
80 changes: 78 additions & 2 deletions src/components/Settings/Export/Export.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
/**
Expand All @@ -39,6 +45,7 @@ class Export extends React.Component {
this.state = {
exportSingleBoard: '',
exportAllBoard: '',
labelFontSize: MEDIUM_FONT_SIZE,
singleBoard: '',
loadingSingle: false,
loadingAll: false,
Expand All @@ -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({
Expand All @@ -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
);
}
);
};
Expand All @@ -101,6 +120,7 @@ class Export extends React.Component {
this.props.onExportClick(
this.state.exportSingleBoard,
this.state.singleBoard,
this.state.labelFontSize,
doneCallback
);
}
Expand All @@ -116,7 +136,7 @@ class Export extends React.Component {
title={<FormattedMessage {...messages.export} />}
onClose={onClose}
>
<Paper>
<Paper className="Export__section">
<List>
<ListItem className="Export__ListItem">
<ListItemText
Expand Down Expand Up @@ -284,6 +304,62 @@ class Export extends React.Component {
</ListItem>
</List>
</Paper>
<Paper className="Export__section">
<List
className="Export__List"
subheader={
<ListSubheader>
<FormattedMessage {...messages.pdfSettings} />
</ListSubheader>
}
>
<ListItem>
<ListItemText
className="Export__ListItemText"
primary={<FormattedMessage {...messages.fontSize} />}
secondary={
<FormattedMessage {...messages.fontSizeSecondary} />
}
/>
<ListItemSecondaryAction>
<div className="Export__SelectContainer">
{this.state.loadingAll && (
<CircularProgress
size={25}
className="Export__SelectContainer--spinner"
thickness={7}
/>
)}
<FormControl
className="Export__SelectContainer__Select"
variant="standard"
>
<InputLabel id="export-all-select-label-size">
{intl.formatMessage(messages.fontSize)}
</InputLabel>
<Select
labelId="export-all-select-label-size"
id="export-all-select-size"
autoWidth={false}
value={this.state.labelFontSize}
onChange={this.handleSizeChange}
>
<MenuItem value={SMALL_FONT_SIZE}>
<FormattedMessage {...messages.small} />
</MenuItem>
<MenuItem value={MEDIUM_FONT_SIZE}>
<FormattedMessage {...messages.medium} />
</MenuItem>
<MenuItem value={LARGE_FONT_SIZE}>
<FormattedMessage {...messages.large} />
</MenuItem>
</Select>
</FormControl>
</div>
</ListItemSecondaryAction>
</ListItem>
</List>
</Paper>
</FullScreenDialog>
</div>
);
Expand Down
3 changes: 3 additions & 0 deletions src/components/Settings/Export/Export.constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
27 changes: 23 additions & 4 deletions src/components/Settings/Export/Export.container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export class ExportContainer extends PureComponent {
handleExportClick = async (
type = 'cboard',
singleBoard = '',
labelFontSize = '',
doneCallback
) => {
const exportConfig = EXPORT_CONFIG_BY_TYPE[type];
Expand All @@ -42,25 +43,43 @@ export class ExportContainer extends PureComponent {
if (singleBoard) {
await EXPORT_HELPERS[exportConfig.callback](
[singleBoard],
labelFontSize,
intl,
true
);
} else {
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 = () => {
Expand Down
9 changes: 9 additions & 0 deletions src/components/Settings/Export/Export.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
89 changes: 71 additions & 18 deletions src/components/Settings/Export/Export.helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 = {
Expand All @@ -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) {
Expand All @@ -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;

Expand Down Expand Up @@ -482,7 +513,8 @@ async function generateFixedBoard(board, rows, columns, intl, picsee = false) {
columns,
currentRow,
pageBreak,
picsee
picsee,
labelFontSize
);
cont++;
}
Expand All @@ -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);
Expand Down Expand Up @@ -526,7 +559,8 @@ async function generateNonFixedBoard(
columns,
currentRow,
pageBreak,
picsee
picsee,
labelFontSize
);
}, Promise.resolve());
return grid;
Expand All @@ -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;
Expand Down Expand Up @@ -598,6 +633,7 @@ const addTileToGrid = async (
const labelData = {
text: label,
alignment: 'center',
fontSize: labelFontSize,
fillColor: hexBackgroundColor,
border: PDF_GRID_BORDER[labelPosition].labelData
};
Expand All @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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([]));

Expand Down
Loading

0 comments on commit 83406db

Please sign in to comment.