Frontend panel bar

To add my two cents to the discussion :blush: : While a page edit button makes sense for single pages like a blog articles etc., it is quite useless if pages are made up of different modules. I would therefore prefer edit buttons right where the content that needs to be edited is (like it is implemented in Joomla).

1 Like

The magic happens in the Kirby CMS core, specifically in kirby.php:672. The resulting variables are then being merged with the passed custom data in tpl.php:21.

In your panelbar code above, you are using the variables in the method itself, so that’s a totally different issue.

I combine inline buttons with bar

I actually have that kind of buttons on my site right now, in combination with a bar with an edit button for the current page.

Inline buttons mess up CSS

I started to not like the “inline” edit buttons for my subpages in my archive (which is what I have). That is because they mess upp my CSS a little bit. I prefer to click on the subpage and then edit it from the bar.

Page modules as subpages?

I don’t know what you mean by modules. If you mean that one module is one page that is not visitable by itself (just a part of a page) I think it would be better to have that in a structure field or so. If a module is a subpage like in an archive, then I think an edit button on it can be good but I prefer visiting it and then editing it by the bar.

Edit subpages in the bar

If a panelbar is flexible enough, it would be possible to add subpages to it, like a select / dropdown to edit a page from the bar. The advantage would be to separate admin stuff with the frontend stuff.

Current state of my code:

Installation:

  1. Copy directory as panel-bar to the site/plugins folder.
  2. Include this line in your file (prob header snippet):
<?php echo panelbar::show(); ?>

Not sure if getting the panel font and icon font would be a good idea (performance).

2 Likes

Totally get your point. Sadly without any meta information it won’t be possible for such a bar to point to the correct panel edit page.

Also, these types of bars are the first thing I switch off myself. Especially in Wordpress. But I still thing it’s fun to try to create a working plugin for such a (questionable?) need :wink:

1 Like

I presented some time ago another solution for the connection of the frontend and backend for users of the panels that is inspired by Drupal 7 core module “Contextual links”:

  1. HowTo: Working with contextual links to the panel
  2. HowTo: Use a special sitemap, for admins/panel user with many links, e.g. for former WordPress-user

May be that this is a solution for some of you.

Right now, I define the icons through CSS:

.panelbar__btn--panel > a:before {
  content: "\f085";
}

Problem: How to define icons for custom added elements? Any ideas?
(using data-attributes doesn’t seem to work for the font awesome codes, e.g. \f085)

Final result for this little sprint:

Disclaimer: Not really nice CSS stuff going on.

2 Likes

Maybe add a config setting to stick the panel bar to the bottom if the navigation is fixed to the top? Of course that can be changed in the css, but maybe it is easier with a config setting.

1 Like

I changed the the category from “questions” to “plugins”, cause that’s where it is heading; seems to fit better, @jenstornell?

2 Likes

Added! Just set:

c::set('panelbar.position', 'bottom');

Also a first toggle element (though you will be send to the modal in the panel atm):

2 Likes

Feedback

For most part I think it works fine. I will not write everything that works but good work so far.

Github

I added some changes to github directly. Here is just a summery of that.

  • Bug with <?
  • Bug with assets path
  • Removed underline from links
  • Fixed problem with vertical centering with links

Discussion

Edit icon

The edit icon is not the Kirby edit icon. Any reason for that?

Dotted line

Same as above. Kirby admin does have a solid line. On the bar it’s dotted.

Docs missing

Can you give an example how c::set('panelbar.elements') work? As well as adding custom stuff and put links to the left or right?

Feature requests

Toggle bar

Now I know why I always turn off the bar in WordPress. It’s often in the way at the top and adds too much bloat in the HTML.

I still belive in a panel bar if it’s flexible as hell.

Make it possible to hide it whenever you want with a “+” toggle-button or so. When hidden, just leave a fixed toggle-button to be able to show it when ever needed.

Make use of panelbar::hide(). When using this function the panel can be hidden on load. Just a toggle-button visible. When using panelbar:show() it can be visible on load.

Thanks for all the feedback!

First, I saw your edits and included them - good points, especially regarding PHP backward compatibility.

Documentation
An initial documentation can be found on GitHub now: https://github.com/distantnative/panel-bar

Visual things
Not really, besides that I liked the pencil with the box better at the moment. But I will look into making the panel bar more consistent with the panel (maybe also making the dropdown white as in the panel).

Toggle bar
Nice idea! Will look into this. Only problem I see, is that I would need to include jQuery, without being able to check if it’s already loaded. On the other hand jQuery might be handy to realize some other “hacks” - to do some admin actions right from the panel bar.

EDIT: Facing a problem that panelbar:: isn’t available in the config.php. Ideas?

Good point. I try not to use jQuery on the front-end if possible.
Can’t you test with something like:

window.jQuery || your code here

Alternatively, if by default the Panel bar is visible, it is not a critical issue imho if the toggle button doesn’t work.

About jQuery. There are other solution for just toggle the panelbar.

Here is one example:

http://cferdinandi.github.io/houdini/

I have not tried it. Might be more, probably better solutions out there as well.

Other solution:

Since I do not want to increase the page load any further (the plugin already does by loading the panel font and icon font), the plugin now only checks if jquery is already loaded and if not, simply hides the toggle switch.

Tested it

I’ve done some testing on the plugin by @distantnative, reported bugs, fixed bugs (a few at least), added some feature requests.

A bar to use

I think it’s going to be awesome. A bar we will actually use without it getting in the way. Flexible as hell.

Not yet ready - but maybe soon

I feel it’s a great start but not ready for every day use just yet. Some things should be added and some things fixed.

My guess is that it should be “stable” and useful in a few days (Nico works fast). But that’s not my call to make. Nico, you can correct me if I’m wrong or fill in if something should be added.

Summery

I was about to create this panel bar myself at first but I’m happy that Nico did. It feels like my own and that’s a good thing.

Thanks, @jenstornell!

Quite a bit from what we started yesterday. Just tagged/released v0.3 of Panel Bar:

To make it more reliable and enhance it, please test it and make suggestions. I am open to a lot of changes, as Jens knows. Due to the fast coding, the code is not the cleanest yet and has some pitfalls. I will try to clean the code and reduce all the little errors over the next days.

2 Likes

Version 2.0 is approaching - more information in the beta announcement: panelBar 2.0 beta - Testers and Contributors

1 Like