Display values in "select layout" dialogue

[matthack]

How can i display the values of the layouts in the “select layout” dialogue?
Saw this image in a screenshot from a Kirby theme.

[texnixe]

That looks like a custom implementation, there is no blueprint setting for that that I’m aware of.

[thguenther]

It’s quite easy to display the values with a panel.css: Layout Field Labels? - #2 by thguenther

[matthack]

It looks like this is not possible anymore in K4?
It does work with the button itself, but it is not as nice as your solution:

.k-layout-selector-option:after {
	content: attr(value);
	font-size: 12px;
	display: block;
	color: #313740;
	position: relative;
	top: -50%;
}

[dgsiegel]

@matthack

It looks like this is not possible anymore in K4?

Indeed, @thguenther’s solution doesn’t work anymore as Kirby 4 has removed those properties. But we can add them back via a small plugin. I’ve also added the values to the layout field itself.

index.php

<?php

Kirby::plugin('custom/layout-grid-values', []);

index.js

window.panel.plugin('custom/layout-grid-values', {
  components: {
    'k-layout-column': {
      extends: 'k-layout-column',
      mounted() {
        this.$el.dataset.width = this.width;
      },
    },
  },
});

window.panel.plugin('custom/layout-grid-values', {
  components: {
    'k-layout-selector': {
      extends: 'k-layout-selector',
      mounted() {
        this.$nextTick(() => {
          Array.from(document.querySelectorAll('.k-dialog.k-layout-selector .k-layout-selector-option .k-column')).forEach(el => {
            el.dataset.width = getComputedStyle(el).getPropertyValue('--width');
          });
        });
      },
    },
  },
});

index.css

.k-layout-field .k-column.k-layout-column {
  &:after {
    content: attr(data-width);
    position: absolute;
    color: var(--color-gray-400);
    font-size: var(--font-size-tiny);
    bottom: var(--spacing-1);
    right: var(--spacing-1);
  }
}

.k-layout-selector-options .k-layout-selector-option {
  .k-column {
    align-content: center;

    &:after {
      content: attr(data-width);
      color: var(--color-gray-700);
      font-size: var(--font-size-tiny);
    }
  }
}

[GB_DESIGN]

Great! I’ve been looking for that since Kirby 4.0.
But you can simplify the code from index.js:

window.panel.plugin('custom/layout-grid-values', {
  components: {
    'k-layout-column': {
      extends: 'k-layout-column',
      mounted() {
        this.$el.dataset.width = this.width;
      },
    },
    'k-layout-selector': {
      extends: 'k-layout-selector',
      mounted() {
        this.$nextTick(() => {
          document.querySelectorAll('.k-dialog.k-layout-selector .k-layout-selector-option .k-column')
            .forEach(el => {
              el.dataset.width = getComputedStyle(el).getPropertyValue('--width');
            });
        });
      },
    },
  },
});

Both components are registered in a single window.panel.plugin declaration, which makes the code shorter and clearer.