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
+215 −24
Merged

Feature / Font size selector on PDF export #1612

Show file tree
Hide file tree
Changes from 1 commit
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
54 changes: 53 additions & 1 deletion src/components/Settings/Export/Export.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ class Export extends React.Component {
this.state = {
exportSingleBoard: '',
exportAllBoard: '',
exportAllBoardSize: '16',
chelsouse marked this conversation as resolved.
Show resolved Hide resolved
singleBoard: '',
loadingSingle: false,
loadingAll: false,
Expand All @@ -61,6 +62,13 @@ class Export extends React.Component {
});
};

handleSizeChange = event => {
this.setState({
boardError: false,
exportAllBoardSize: event.target.value
});
};

handleAllBoardChange = event => {
const doneCallback = () => {
this.setState({
Expand All @@ -74,7 +82,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.exportAllBoardSize,
doneCallback
);
}
);
};
Expand All @@ -101,6 +114,7 @@ class Export extends React.Component {
this.props.onExportClick(
this.state.exportSingleBoard,
this.state.singleBoard,
this.state.exportAllBoardSize,
doneCallback
);
}
Expand Down Expand Up @@ -282,6 +296,44 @@ class Export extends React.Component {
</div>
</ListItemSecondaryAction>
</ListItem>
<Divider />
chelsouse marked this conversation as resolved.
Show resolved Hide resolved
<ListItem>
<ListItemText
className="Export__ListItemText"
primary={<FormattedMessage {...messages.properties} />}
secondary={<FormattedMessage {...messages.propertiesSize} />}
/>
<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.size)}
</InputLabel>
<Select
labelId="export-all-select-label-size"
id="export-all-select-size"
autoWidth={false}
value={this.state.exportAllBoardSize}
onChange={this.handleSizeChange}
>
<MenuItem value="12">Small</MenuItem>
chelsouse marked this conversation as resolved.
Show resolved Hide resolved
<MenuItem value="16">Medium</MenuItem>
<MenuItem value="22">Large</MenuItem>
</Select>
</FormControl>
</div>
</ListItemSecondaryAction>
</ListItem>
</List>
</Paper>
</FullScreenDialog>
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 = '',
exportAllBoardSize = '',
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],
exportAllBoardSize,
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,
exportAllBoardSize,
intl,
true
);
}
} else if (type !== 'pdf' && !singleBoard) {
await EXPORT_HELPERS[exportConfig.callback](boards, intl);
await EXPORT_HELPERS[exportConfig.callback](
boards,
exportAllBoardSize,
intl
);
} else {
if (singleBoard) {
await EXPORT_HELPERS[exportConfig.callback]([singleBoard], intl);
await EXPORT_HELPERS[exportConfig.callback](
[singleBoard],
exportAllBoardSize,
intl
);
} else {
const currentBoard = boards.filter(
board => board.id === activeBoardId
);
await EXPORT_HELPERS[exportConfig.callback](currentBoard, intl);
await EXPORT_HELPERS[exportConfig.callback](
currentBoard,
exportAllBoardSize,
intl
);
}
}
const showBoardDowloadedNotification = () => {
Expand Down
69 changes: 58 additions & 11 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 @@ -372,16 +372,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,
exportAllBoardSize
) {
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 +409,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,
exportAllBoardSize
)
: await generateNonFixedBoard(
board,
rows,
columns,
intl,
picsee,
exportAllBoardSize
);

const lastGridRowDiff = columns - grid[grid.length - 2].length; // labels row
if (lastGridRowDiff > 0) {
Expand All @@ -427,7 +449,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,
exportAllBoardSize
) {
let currentRow = 0;
let cont = 0;

Expand Down Expand Up @@ -482,7 +511,8 @@ async function generateFixedBoard(board, rows, columns, intl, picsee = false) {
columns,
currentRow,
pageBreak,
picsee
picsee,
exportAllBoardSize
);
cont++;
}
Expand All @@ -496,7 +526,8 @@ async function generateNonFixedBoard(
rows,
columns,
intl,
picsee = false
picsee = false,
exportAllBoardSize
) {
// Do a grid with 2n rows
const grid = new Array(Math.ceil(board.tiles.length / columns) * 2);
Expand Down Expand Up @@ -526,7 +557,8 @@ async function generateNonFixedBoard(
columns,
currentRow,
pageBreak,
picsee
picsee,
exportAllBoardSize
);
}, Promise.resolve());
return grid;
Expand All @@ -540,7 +572,8 @@ const addTileToGrid = async (
columns,
currentRow,
pageBreak = false,
picsee = false
picsee = false,
exportAllBoardSize
) => {
const { label, image } = getPDFTileData(tile, intl);
const fixedRow = currentRow * 2;
Expand Down Expand Up @@ -598,6 +631,7 @@ const addTileToGrid = async (
const labelData = {
text: label,
alignment: 'center',
fontSize: exportAllBoardSize,
chelsouse marked this conversation as resolved.
Show resolved Hide resolved
fillColor: hexBackgroundColor,
border: PDF_GRID_BORDER[labelPosition].labelData
};
Expand Down Expand Up @@ -845,9 +879,13 @@ export async function cboardExportAdapter(allBoards = [], board) {
}
}

export async function pdfExportAdapter(boards = [], intl, picsee = false) {
export async function pdfExportAdapter(
boards = [],
exportAllBoardSize,
intl,
picsee = false
) {
const font = definePDFfont(intl);

const docDefinition = {
pageSize: 'A4',
pageOrientation: 'landscape',
Expand All @@ -858,6 +896,9 @@ export async function pdfExportAdapter(boards = [], intl, picsee = false) {
}
};
if (picsee) {
//exportAllBoardSize = exportAllBoardSize - 4;
chelsouse marked this conversation as resolved.
Show resolved Hide resolved
exportAllBoardSize =
exportAllBoardSize > 20 ? exportAllBoardSize - 3 : exportAllBoardSize;
docDefinition.background = function() {
return {
stack: [
Expand Down Expand Up @@ -921,7 +962,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,
exportAllBoardSize
);
return prevContent.concat(boardPDFData);
}, Promise.resolve([]));

Expand Down
12 changes: 12 additions & 0 deletions src/components/Settings/Export/Export.messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,18 @@ export default defineMessages({
id: 'cboard.components.Settings.Export.exportAll',
defaultMessage: 'Export All Boards'
},
properties: {
id: 'cboard.components.Settings.Export.properties',
defaultMessage: 'Settings'
},
propertiesSize: {
id: 'cboard.components.Settings.Export.propertiesSize',
defaultMessage: 'General PDF settings'
},
size: {
id: 'cboard.components.Settings.Export.size',
defaultMessage: 'Font size'
},
exportAllSecondary: {
id: 'cboard.components.Settings.Export.exportAllSecondary',
defaultMessage:
Expand Down