variablelab/variabletime
variablelab/variabletime
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add css-order spacing

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
bin/web/js/config.js
View file

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

8
bin/web/js/layer.js
View file

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