Reduce vertical spacing in the passage dialog to benefit smaller screens

[hhrichards]

Is your feature request related to a problem? Please describe.

On a small screen a lot of valuable space is wasted in a passage dialog around the toolbar and the tags. This means that when multiple dialogs are open, there's minimum space for editing. We'd have more space if the UI was a little smaller & had less padding. You can see from my screenshot below that opening 4 passages only gives 3 lines of text each (I've seen screenshots from smaller screens where this is worse).

Removing the gaps (roughly highlighted in red) would give more space for typing.

Describe the solution you'd like.

The gaps to be smaller, at least on smaller screens, or when there's more than 3 passages per screen.

Describe alternatives you've considered.

The toolbar could be collapsible, or moved back into the passage map like in 2.3.
Or limit the amount of open dialogs.

Additional context on this suggestion.

No response

Presubmission checklist

• [ ] I am interested in working on code that would implement this feature request. (This is not required to submit a suggestion.)
• [X] I have done a search and believe that an issue does not already exist for this idea in the GitHub repository.
• [X] I have read and agree to abide by this project's Code of Conduct.

[hituro]

Example of smaller screen where this is worse (also Harlowe's toolbar forces content down another line). As you can see no text is visible on a tagged passage, and there is no UI element to allow you to reach it.

related to : https://github.com/klembot/twinejs/issues/1219 and https://github.com/klembot/twinejs/issues/1177

[webbedspace]

I have a better proposal: make it so that unfocused dialogs do not have any toolbars. The act of focusing a dialog pops the toolbar back into visibility. Leave only the tag bar visible when a dialog is unfocused.

[klembot]

Agree that when you have tags and a format toolbar, there's a lot of dialog chrome, and you're right that it's too airy.

My current thought on this is to add tabs to the passage dialog toolbars, Edit / Tag / [Format Name]. We already have tabs in the top toolbar so I'm thinking we may as well re-use a UI pattern people use if we can. I want to explore a bit to see if it's viable to put these tabs directly in the dialog title bar area, or if that will cut off passage names too much. I want to do this for the Prefs dialog too because it's starting to get a bit like a junk drawer in terms of organization.

[webbedspace]

Off the top, I don't like the idea because the prospect of having to click twice (once to open, another for the "tag" tab) to see exactly which tags are in use in a passage seems quite dreadful, especially if you're using the tags for story-relevant computation.

Incisive question: what will be the default exposed toolbar: the format's toolbar, or Edit?

[hituro]

Despite the beauty of Harlowe's toolbar, I think the edit needs to be the default, since it's the universal one. I could imagine a story format with 1 or 2 items only, for example

[klembot]

I don't know yet re: default toolbar tab because I want to try it out and see what the experience is like.

[hhrichards]

I don't like the idea of introducing an extra click for the Rename and Tags though, because I use those features constantly. It would be quite a burden.

[hituro]

Maybe the best answer for the tags is a total rethink of the tag bar to be more like how a number of other tools do tags. Basically you can type directly in the tag row, and pressing space or return creates a tag. Tag suggestions can appear as a drop-down as you type.

Here's an example of this sort of interface (from Deviantart).

Advantages:

• Add tags quicker by getting rid of the click -> dialog -> choose -> add workflow
• Removes the need for the tag button
• More intuitive
• Gets rid of the "I have 1000 tags" issue I mentioned before (https://github.com/klembot/twinejs/issues/1201)

[hituro]

@webbedspace Just thinking about the idea for unfocussed passage dialogs to not have bars. Wouldn't that lead to "passage jank" where clicking the text area visible on screen causes it to jump to a new position (as the bar appears) potentially causing the text to go offscreen, or for the insertion point to end up in the wrong place?

[hhrichards]

I agree with @hituro that a typed tag would be a faster workflow. I found it a lot faster back in 2.3 when it was typed, but the addition of a dropdown which shows existing tags would be best of both approaches. I also agree that showing a hidden toolbar on focus would look janky. I don't like that idea. Could the formatting options be in a floating bar like when writing a post on patreon?

[klembot]

Appreciate the thoughts on tagging but I'd like to keep this issue related to the amount of space the toolbars take up (I get that these are related issues, though).

Posting some UI explorations I did on this subject for discussion; I can't say I fell in love with any of them, but they might spur some thoughts that get us somewhere interesting.

Here's what splitting each toolbar into a tab looks like. Upside (I see): maximum space conserved. Downside: extra click to do things, tags are not glanceable, users will not likely know what to expect out of a tab named "Harlowe" or "Chapbook".

A different take, adding a Passage tab and renaming the format extensions tab to Format. (I was also playing with dialog widths--that's why this screenshot has them wider, it's not intrinsic to the design.) The default tab now just relates to editing the passage text itself. I added a Link button that isn't present in actual Twine to this default tab, because it hit me that we have no UI to do that.

Another variation, this time where the default passage toolbar and any story format extensions are melded together (forgot to put it in, but there would also be a Passage tab). The thought I had was, story format toolbars are geared around editing passage text, so why not put them with the Undo/Redo buttons?

So yeah, I am not yet won over completely by any of these, and it almost makes me wonder if the solution lies in a different direction.

[hituro]

Some great ideas there! I like naming the Format after the format in use, it's a nice indication that you should expect to find format specific stuff there.

I think the third option, even though it uses more vertical space, is a better look. A default tab that just shows undo/redo/link would rapidly irritate people actually using the format buttons, and there's nothing to stop a format extension from using multiple lines anyway, so adding the undo/redo there isn't a big change — though I would say that they don't ned the words, the icons alone would be fine on the format bar.

[webbedspace]

Something I really want you to try is putting the tags here: IMHO it's very important that tags are always visible, even if this means the passage name itself gets a bit less space.

Obviously having loads of tags, and/or having a passage name of more than 30ish characters, would force some of the tags or some of the name to be elided with "...", but it's not like there aren't already problems with long passage names in 2.x. In that case, try making it so that hovering/tapping the overflowing area shows a floating panel with the full list or the full name (mockup below)

[klembot]

Closing this as the introduction of the passage editor stack in 2.6.0 is intended to address this issue.