Adding links/buttons to panel page header

Kirby 3
1

Hi,

I am trying to add a few custom buttons to the panel header on specific templates (e.g. someTemplate), like this:

image
image1243×127 3.33 KB

I couldn’t find any method to add those, so I added a custom JS file by adding this to config.php:

return [
  'panel.js' => 'assets/js/panel.js',
]

I couldn’t find any way to extend <k-button-group> in kirby/panel/src/components/Views/PageView.vue. But I am not using multiple languages, so I overwrote <k-languages-dropdown /> like this:

panel.plugin("my/plugin", {
  components: {
    'k-languages-dropdown': {
      extends: 'k-languages-dropdown',
      template: `<k-button
        v-if="window.panel.$view.props.blueprint == 'someTemplate'"
        :link="window.panel.$view.props.model.previewUrl + '.qr'"
        text="QR Code"
        icon="qr-code"
        target="_blank"
      />`
    },
  },
});

As I don’t have access to all the Vue templates and variables, I had to go through the window variable and walk down to window.panel.$view.props.blueprint and window.panel.$view.props.model.previewUrl. It works, but it looks very very hacky… So what would be the right way to add those custom buttons?

How could I add buttons without overwriting the languages dropdown?

2

You could overwrite the page view:

3

But that way I would have to replace the whole k-button-group, correct? That would mean I would have to re-add all the standard buttons.

4

Likely the whole page view, because the button group is part of the view: https://github.com/getkirby/kirby/blob/main/panel/src/components/Views/PageView.vue

Maybe it would even be possible to extend the button group conditionally, i.e. if it is inside a page view, but I’m no Vue expert.

5

Well you can certainly overwrite any element inside the view, as I did in my example on top. So the whole page view shouldn’t be necessary. I just couldn’t find any way to append a Vue template to the existing DOM.