add css-order spacing

This commit is contained in:
jrkb 2023-10-01 15:21:33 +02:00
parent 4cb5742afb
commit 64b3d26384
2 changed files with 5 additions and 4 deletions

View file

@ -45,6 +45,7 @@ const config = {
'color',
'letterDelays',
],
orderSpacing: 2,
friendlyNames: {
'fontFamily': 'Font Family',
'textAlignButtonsHorizontal': '',

View file

@ -512,7 +512,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
const panelPropContainer = tp.getPanelPropContainer(panelPropTitle);
if (panelPropContainer !== null) {
panelPropContainers[propKey] = panelPropContainer;
const order_index = panelOrder.indexOf(propKey);
const order_index = panelOrder.indexOf(propKey) * config.layer.orderSpacing;
panelPropContainer.style.order = order_index;
if (propKey === 'fontVariationAxes'
|| propKey === 'letterDelays') {
@ -585,7 +585,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
alignCenterButton.innerHTML = `<img src="/web/assets/align-center-horizontal.svg" alt="alignCenter" />`;
alignRightButton.innerHTML = `<img src="/web/assets/align-right.svg" alt="alignRight" />`;
panelControlsWrapper.append(alignButtons);
const order_index = panelOrder.indexOf('alignButtonsHorizontal');
const order_index = panelOrder.indexOf('alignButtonsHorizontal') * config.layer.orderSpacing;
alignButtons.style.order = order_index;
alignButtons.classList.add('alignButtons');
alignButtons.classList.add('alignButtonsHorizontal');
@ -640,7 +640,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
alignCenterButton.innerHTML = `<img src="/web/assets/align-center-vertical.svg" alt="alignCenter" />`;
alignBottomButton.innerHTML = `<img src="/web/assets/align-bottom.svg" alt="alignBottom" />`;
panelControlsWrapper.append(alignButtons);
const order_index = panelOrder.indexOf('alignButtonsVertical');
const order_index = panelOrder.indexOf('alignButtonsVertical') * config.layer.orderSpacing;
alignButtons.style.order = order_index;
alignButtons.classList.add('alignButtons');
alignButtons.classList.add('alignButtonsVertical');
@ -708,7 +708,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
textAlignCenterButton.innerHTML = `<img src="/web/assets/align-text-center.svg" alt="textAlignCenter" />`;
textAlignRightButton.innerHTML = `<img src="/web/assets/align-text-right.svg" alt="textAlignRight" />`;
textWrappingButton.innerHTML = `<img src="/web/assets/text-wrapping.svg" alt="textWrapping" />`;
const order_index = panelOrder.indexOf('textAlignButtonsHorizontal');
const order_index = panelOrder.indexOf('textAlignButtonsHorizontal') * config.layer.orderSpacing;
textAlignButtons.style.order = order_index;
panelControlsWrapper.append(textAlignButtons);
textAlignButtons.classList.add('textAlignButtons');