Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature / Font size selector on PDF export #1612

Merged
merged 6 commits into from
Nov 16, 2023
Merged

Feature / Font size selector on PDF export #1612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f1183bb
Added font size selector
Nov 13, 2023
38ecb00
add of request changes
Nov 15, 2023
0429a58
Declare fontSizes constants
RodriSanchez1 Nov 16, 2023
e2a1c32
Update export messages
RodriSanchez1 Nov 16, 2023
4d0308d
Fix label font size on large grids
RodriSanchez1 Nov 16, 2023
7c6f7ba
Small fix
RodriSanchez1 Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 78 additions & 2 deletions src/components/Settings/Export/Export.component.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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