Feature suggestion: Floating value editing controls

#1

I just started trying out Subform and one of the first things that struck me was the value editing. When using computed layouts it seems you're going to be spending a lot of time editing values, and I think it would be very helpful to combine the editing fields you have now with some other user interface controls. For example stepper buttons or sliders that the user can use to quickly change the value with the mouse as well.

I had a similar problem with a lot of value fields when working on another piece of software, and I decided to add floating "hover"-sliders/steppers next to all value fields that appear only when the user hovers over a value field. While in some cases they overlap and temporarily obscure other things behind them I think this feature has greatly improved the efficiency and usability of the interface, and I think it something similar would work very well in Subform as well.

I've attached a screenshot from PatterNodes below so you can understand a little better what I mean, with the slider and stepper appearing next to the size field being edited.

#2

Generally the input should be possible in more ways than just "type here". There are several types already available in other software suites:

  • Dragging on the label left/right to increase/decrease value
  • Using the arrow keys up/down to increase/decrease, shift+arrow to move in steps of 10
  • Changing the value of a field (px / em / %) in the field itself (webflow does that beautifully)

The best representation would always be to manipulate the specific setting visually instead of changing the value in a field, which in turn changes the appearance. Imagine having two handles at the selected box that can be dragged to set the padding / margin visually. The numeric input should be displayed at the handles as well of course, right near the cursor.

#3

Gotta shoutout when we do have things implemented! Subform does support this in the current build.

I do think direct manipulation controls are an interesting idea as well for padding/margin. Illustrator CC's "Live Corners" come to mind.