Consider moving properties to right side on large monitors

[mikebell]

On a 1920x1200 monitor a full keyboard layout still leaves white space the to the right.

Would you be willing to shift the properties section up to the right on full desktop. It should be possible to move it back down on lower resolutions.

I'm trying to have a go at it on my local version but having issues with the install process.

[ijprest]

I'm stuck at 1600x1200, so I don't have enough extra room, myself, to put the properties section on the right. But I share the concern about the UI; it's getting pretty cluttered.

I'm open to suggestions, but I think it'll require a more thorough redesign than just moving the form around.

(Also, don't forget about the color swatches & character picker, which also live on the 'Properties' tab... they eat up a lot of space.)

[mikebell]

Here is a very dirty mockup of what I was talking about.

I'm trying to get a working proof of concept but the make file keeps failing because it's looking for bower_components in the wrong directory.

[mikebell]

This is at 980px width, ignore the keyboard going out of the frame it's just the way firefox captures screenshots.

This is at 1280px width, it's totally broken :/

This is at 1600px which is totally workable.

This is at 1920px.

Barring the fact the that the properties form is a total mess I think it's workable.

Couple of points:

• At 1280px it should revert to underneath the editor window but I'm not sure how to do that.
• At 1920px the properties column should be wider
• I'm wildly assuming that no one creates a keyboard wider than an existing full one, this could cause an issue.
• At the moment the code I have doesn't handle the colours but my intention is to put them at the bottom of the properties window.
• Properties could be re-labled Key Properties.

I'm tracking these changes in my fork of the repo so if you want to check it out go for it.

[ijprest]

The mockup looks good.

I'm personally not too worried about anything below 1280px... I don't expect anything smaller than that to be very usable. (1280px currently can't even fit a full ANSI-104 layout. But it's close... I could probably make it work by tweaking margins or something.)

Maybe this (horizontal vs. vertical layout) should be an option, rather than something we decide solely based on screen width? Someone working on a really tall layout might prefer the side-by-side layout even on a smaller screen, or vice-versa. (We might even get more control of the layout this way, rather than just relying on CSS & Bootstrap's grid.)

In the side-by-side layout, I think it'd be nice if both sections were independently scrollable. In the top-bottom layout, I think it makes sense to fix the "form" in place, and only scroll the layout. (Thoughts on this?)

[iandoug]

Yes, I was a bit confused by the code catering for small screens and wondered if anybody was going to try to use this on a cell phone...
Regarding max width, I have seen at least one design on Deskthority that was wider than standard 104.
Regarding tall boards, here's some to shock:
http://deskthority.net/keyboards-f2/how-many-rows-should-a-keyboard-have-t11096.html

[skullydazed]

Oh. My. Yes! I need this when working on layouts like this: http://www.keyboard-layout-editor.com/#/gists/4de8adb88cb4c45c2f43

Some scattered thoughts from a user perspective:

• Having the properties be fixed in place and scrolling only the keyboard canvas make a lot of sense, no matter where the properties panel ends up.
• Not breaking horizontal scrolling is important. I often grab my 11" computer to futz around with in the mornings. This entire layout was created on that (1366x768) screen: http://www.keyboard-layout-editor.com/#/gists/7d8b964cefc496fb4baa
• Maybe this shouldn't be an either/or, but both? Move some tools to the right/left hand side and leave others in the current location.
• A lot of this functionality could be handled by context menus (right clicking keys/groups) which may obviate the need for a lot of stuff in the properties panel.

[iandoug]

Your first layout has some interesting ideas :-)
I started thinking about frames but I guess that's a no-no. Then I pondered the possibility of independently scrolling divs or iframes ... ie split the screen in two horizontally, and can scroll both sections independently. SIzes would need to be adjustable.
Regarding right-clicking, isn't that a problem area where you bump into the browser?
(I'm just throwing ideas into the hat. Maybe will trigger solutions in someone else :-) )

[skullydazed]

Right clicking can be overridden in javascript, I'm not sure entirely how but EG google maps does this.

[iandoug]

@skullydazed ... are those layouts of yours 'shareable' or private?
Also, your bamboo layout .. is that using the Engravers font? I can't see any other font specified.

thanks, iandoug

[skullydazed]

They're sharable, I wouldn't have posted that in a public place if they weren't. :) It's using whatever font is default when you set the key profile to SA.