Hi,
When attempting to fix various problems on the sidebar (by turning elements into flex GitHub - CollaboraOnline/online at private/pedro/jssidebar-fix-use-cssclasses and failed to avoid the need for special cases) I discovered that wouldn’t solve it and led me to conclude that we would greatly benefit from having a simpler generated html structure, more flexible and easier to maintain. As recommended by @szyklos I’m pasting this somewhere before it gets lost/forgotten.
Note: I’m not talking about the JSON that comes from core side (vcl/jsdialog/jsdialogbuilder.cxx). What I’m referring to is the conversion from that to HTML elements that happens on online:JS side. Currently using a mix of Tables, Divs, etc. (browser/src/control/Control.JSDialogBuilder.js)
Main goals:
- Have no need for hard coded corners cases (be that on the JS or CSS side)
- And related bugs
- Reduce the number of HTML elements we are creating and all the code around to access their children
I didn’t manage to further this, but it seems _gridHandler on Control.JSDialogBuilder.js would be a nice spot to try this out.
Here is a minimal proof of concept using CSS grid layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="testgrid.css">
</head>
<body>
<div id="app"></div>
<script src="testgrid.js"></script>
</body>
</html>
/* testgrid.js */
var appEl = document.getElementById('app');
/* Easy to set number of rows and number of columns
just by setting the grid-template */
var rowT = 6;
var colT = 2;
var cellT = rowT + colT
var gridEl = '<div class="grid" style=" \
grid-template-rows: repeat(' + rowT + ', auto); \
grid-template-columns: repeat(' + colT + ', auto); ">';
for (var i = 0; i < cellT; i++) {
gridEl += '<div class="cell">cell ' + i + '</div>';
}
gridEl += '</div>';
appEl.insertAdjacentHTML('afterend', gridEl);
/* testgrid.css */
.grid {
display: grid;
}
.cell {
border: 1px solid #000;
padding: 10px;
}