Help us test a new composer style

Is this title even required? I’d say that it’s fairly obvious from context that you’re creating a new topic; the placeholder text for the title can be tweaked to make this clearer, perhaps. Maybe it could read “Type a title or paste a link for your new topic here”

2 Likes

A few tweaks I recommend:

Changes I made:

  • I added spacing at the top. The top is WAY too tight as is… when looking at it, I feel like I am wearing a t-shirt that is one size too small. Yes fine I should lose some weight but my point stands. More breathing room is needed at the top for sure.

  • Having a grey background for preview is a bit problematic, as it buries quotes and is just more “stuff”. I think it’s fine to have it be clear / transparent and float. The “hide preview” text is right under it, so there’s no possible confusion as to what that area is. And it looks good to me, floating, no border needed?

  • I made “hide preview” grey to de-emphasize it. There is a fair bit more blue now with the blue bar, so we risk burying the blue reply button which is the primary action … there’s no way “hide preview” needs to be full blue drawing all that attention to itself, as we’ve definitely used up our blue ink attention budget.

(looking at this a bit more I am not sure the topic title should be in blue, either… and definitely not “Create new topic” text)

Overall I am a HUGE HUGE fan of this change, I think it looks so much better, and it’s long overdue!! :+1:

15 Likes

6 posts were split to a new topic: Move hide preview button to line between composer and preview

On a good note, it works properly with Grammarly now.

9 Likes

Looking at this again, I do feel we should bury the blue both in the top (make “create new topic” or “reply to {blah}” grey), and at the bottom right (make “hide preview” grey). Mockup:

This is nice because now only the exact right two things we want to pop, actually pop:

  • the bar “hey pay attention the editor is up man! and you can resize me yay!”

  • the action buttons “hey, do you want to post this? or not?”

That looks really good to me @awesomerobot … dare I say super sweet

11 Likes

2 posts were split to a new topic: Restrict width of the composer when the preview is hidden

Thanks for the feedback so far everyone; I made a first round of updates based on some of the above

13 Likes

Nice! It looks classy :man_in_tuxedo:

The old grey slab felt a bit nineties PC

download

Also, the absolute positioning of the old composer was a bit tricky to work with. Nested flexboxes are an improvement.

8 Likes

One thing I am noticing is that the “expansion” effect is not super smooth, I see a fair bit of flashing and moving around when I move from collapsed composer to expanded. Is there any way to make it smoother?

The changes you made definitely improved this quite a lot!

4 Likes

This video was captured on chrome desktop at 60fps, where are you seeing scroll bar flashes?

1 Like

This happens only when composer is empty due to overflow-x: hidden. Ideally if we can start off with overflow: hidden on the text area and then remove it once expanded it will look much better.

1 Like

One thing I would like improved is giving composing and preview more space on desktop.

We are not using entire browser width for preview like we used to do, even when the area used for composer is less wide than the post we are going to end up posting.

This all ends up feeling needlessly cramped.

I get to “full width” at 1800px width, previously we were there at 1460px, so this is forcing me to have much wider windows to avoid:

1 Like

Err, no repro? Here’s full width screenshots on a 4k monitor using retina settings, old vs new… those sizings look identical to me?

1400px wide new composer

1400px wide old composer

5 Likes

This is awesome - looks so much more modern :smiley:

I noticed a very small thing on iOS 11 (iPhone 7). The top “title” input field has rounded corners, so it doesn’t quite match the styling of the rest of the inputs.

The spacing to the right of the “upload” link also doesn’t feel quite right. It’s a bit cramped against the side. Or maybe I’m imagining that :man_shrugging:

6 Likes

Just an opinion here. I apologize if this is out of the scope of this topic, but I think it would be great to have a “hide editor” option in addition to “hide preview” that would display the preview at the exact defined width of topics to give the member a more true representation of their topic/reply. In a reply setting it could even align to the rest of the replies.

Example:

2 Likes

That is out of scope, however, you could make a pretty convincing case that hiding the preview should make the actual width of the editor pretty close to the actual width of the posts, rather than double plus megawide as it does now – but that was also mentioned upstream.

6 Likes

This is looking awesome!

One change I’d like to see is having a bit more spacing between Reply and cancel, maybe like this:

Also, the grabber for resizing the composer still reacts to neither touch nor pen input :sadpanda:

11 Likes

Win10 and Firefox 57

When you create a new topic and you click on emoji, the selector covers the editor. If I want to add an emoji to the end of a line, the emoji panel hides it.

To put it correctly over the editor I have to manually reduce it a lot but the selector still cover the “create new topic” part.

If you reply to a topic, the emoji selector moves up correctly, but covers the title of the topic you are responding to

4 Likes

Love the new design! Looks very clean :heart_eyes:

One thing I’d like to mention is that box-shadow used to give the depth effect.

#reply-control { box-shadow: 0 -2px 40px rgba(34,34,34,0.12); }

It’s looks very nice but 40px seems a little bit excessive for the blur. I remember blur being an issue for scroll performance a few years ago.

I believe using a combination shadow spread and more transparency in the rgba value and maybe a tiny bit of blur (4-5 px) might come very close to the 40px blur effect, but I’ll be the first to admit it won’t be an exact match.