search

monome / maiden

web based editor and repl for norns
GNU General Public License v3.0
47 stars 34 forks source link

Improve REPL console appearance in small/resized browser windows #168

Open synthetiv opened 4 years ago

synthetiv commented 4 years ago

A couple window-size-related UX issues have been bugging me lately:

  1. The matron/sc console is positioned relative to the top of the window instead of the bottom, so if you start your session with a tall window and then shrink it, the console can disappear below the bottom of the window. I feel like it should dock to the bottom of the window instead.
  2. Console output can't be scrolled horizontally, so long lines get cut off by the window edge. It looks like output does get wrapped at some point, but not based on the width of the window? I haven't looked at the code for this yet. Either wrapping earlier or scrolling would help with this.

I'll try to take these on over the weekend or the next few days.

I use Firefox on Mac OS Mojave 10.14.6, but both of these seem to apply to Safari & Chrome as well.

synthetiv commented 4 years ago

I've tried both wrapping and scrolling for long lines now, and I'm leaning toward wrapping. As a Mac user I don't mind horizontal scrolling (scrollbars disappear as soon as they're not being used), but sometimes I have to remind myself that this is what it looks like on Windows:

Screen Shot 2019-10-12 at 5 45 35 PM
ngwese commented 4 years ago

I agree on both points. Bottom relative positioning for the REPL would be better - there was some random hang up I ran into originally but it escapes me now. Wrapping long lines is also okay, bonus points for making it a configurable setting.

I’d totally love to see these changes.

synthetiv commented 4 years ago

Great! I added a PR for the first one. The thing I want to think about w/r/t config is that currently all the config settings are handed straight over to the Editor component in the editorOptions prop, but the line wrapping setting will need to be a prop for the Repl component instead. Eventually we’ll offer other REPL settings too (eg scrollback buffer size).

Is it worth changing the config data structure (and therefore file format) in order to separate out editor- and REPL-related settings? Maybe not at this point... but it also looks like the Editor component itself gets & stores settings from the session in addition to props, which complicates things, unless I’m misreading. I’ll look into it more tomorrow or Wednesday.

synthetiv commented 4 years ago

(actually, I doubt I'll get much more done this week -- I'm traveling for work and I thought I'd copied my maiden files over to my laptop from my Pi, but it seems like not everything made it over. Next week, then...)