Move the Save Button

Kirby 2 Solved ✅
1

So I’m testing out Kirby. And the first thing I noticed about the page editor is that the save button is all the way at the bottom. So if I want to edit a post that’s quite long I have to scroll all the way down, press save. Scroll all the way up if I want to edit something at the top. Which makes sense since you’d scan an article from top to bottom.

Which essentially results in this annoying up-down-up-down-up-down dynamic. It would make a lot more sense to make if the save page button was in the left in the sidebar, that way no matter if you were up or down, you can just save the page.

Or even better, a keyboard shortcut, and auto-saving would be great!

2

I think there is a keyboard shortcut. ALT+Enter or something like that???! Move your mouse over the button and keep it there for a moment without clicking and the combination should be displayed …

3

Ah yes, it says “meta+enter”. I have tried all the various combinations of Alt, Ctrl and Windows+Enter but none of them do the trick. I Was thinking more of a generic shortcut like CTRL+S.

I know this is a shortcut in most browsers, but it is not often used, and in this case it wouldn’t make much difference, saving a dynamic editing page doesn’t seem all that useful.

But in lieu of a shortcut I was rather hoping for a better solution then this: http://puu.sh/jKCRh/76e6ec6d30.png

4

Of course you’re right with the position of the save button. And you can be sure, not to be alone :wink:

http://forum.getkirby.com/t/my-panel-wishlist/50/42?u=flokosiol

1 Like
5

On a Mac, you can use Command+Enter, don’t know what it is on Windows.

6

Ah yes, I don’t know what you guys mean with panels yet. But that does sound like a good idea. If it stays in the viewport. Thanks for that info. I do hope that happens at some point :blush:

7

I’m on a Mac, too. But cmd + enter does not always work. But I’ve no idea why?!

And it took me some time to realize that I have to use enter and not return :stuck_out_tongue_winking_eye:

8

Well for me Windows + Enter starts windows narrator. Maybe that’s why it doesn’t work. That program might take priority.

9

Yes, true, it doesn’t always seem to work, to me in most cases it seems to be connected to the use of structure fields.

edit: Maybe it’s just because you need to have focus on a form field to be able to use the shortcut. So when you add a new structure item, you don’t have focus and therefore the shortcut does not work …

10

One solution would be to use a custom panel stylesheet, fix the header bar and fix the save button on top.

In your config, set the custom stylesheet for the panel:

c::set('panel.stylesheet', 'assets/css/custom-panel.css');
11

You are so right! Here we go …

[EDIT: Moved the code to gist.github.com]

2 Likes
12

Yep it works! As it turns out, this is also great for mobile.
http://puu.sh/jKJAN/a09a87c71e.png

Thanks @flokosiol and @texnixe

1 Like
13

You may want to add this bit to make successful saving more obvious:

.mainbar .btn-submit.btn-positive {
  border-color:#8dae28;
  color:#fff; 
  background:#8dae28
}
1 Like
14

Are there and downsides? Else put a pull request for it?

15

Currently testing this on a new project; I can’t see any downsides and just wonder why I didn’t think of this earlier :pensive:, probably I tend to use the shortcut rather than clicking a button. But on mobile it would be great as well.

1 Like
16

I’d love to see this change for v2.2. I’m glad someone took action on this long-standing minor annoyance!

1 Like
17

I think a better solution than this „css-hack“ would be to place the save button by default („by code“) inside the topbar. So in my opinion a pull request is not the right way to go … @bastianallgeier?

3 Likes
18

Or one inside the top bar and a second one where it is right now.

19

You got a point. As both way work it would be more correct to add it to the bar.

20

The “save” button is bugging me for a while now combined with a fixed sidebar. I’m actually working on it right now and my solution is a bit different. Up there in the topbar is a bit problematic because of the language switcher for multi-lang sites. In general I’d invest in the custom panel css for now, because this will definitely be handled in the next version :smile:

5 Likes