Help us test a new composer style


(Jeff Atwood) #36

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

(Sam Saffron) #37

1400px wide new composer

1400px wide old composer

(David Taylor) #38

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:

Help us test select-kit

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.


(Jeff Atwood) #40

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.

(Felix Freiberger) #41

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:

(Daniela) #43

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

(Joe) #44

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.

(Joffrey Jaffeux) #46

The css used on select-kit is applied everywhere in the application, is this expected @awesomerobot ?

(Kris) #47

Yes, I should have mentioned it in the original post — since I was already styling some composer inputs, I changed the select-kit styles instead of overriding them for the composer. We covered it in this topic a little bit:

The goal is to simplify all the inputs to one consistent style so they’re easier to theme/maintain.

(Michael Kwon) #49

This is really cool~ :face_with_monocle: Very interested to see how this will evolve and develop over time! :smiley:

//edit: whoops, originally, I accidentally posted this post in the wrong topic lolz :laughing:

(Pad Pors) #51

just a suggestion:

putting the topic title in the preview, since title seems to be important to be reviewed by author:

rather than this:


Don’t you think that clicking anywhere outside of the composer should collapse it?

(Gurjyot Singh) #53

The new composer seriously looks good. I think it’s way better than before. But can you give slightly more space to “Hide arrow” in mobile. It’s very cramped to click such a small thing without much space in mobile.

I am using Moto G5 Plus on Android 7.0 with latest Google Chrome browser to access Discourse.

(Vinoth Kannan) #54

Not an issue. A suggestion.

Every post content’s maximum width is 690px. And maximum width of our composer preview output is 675px. If it also increased to 690 then it will be better. So the preview and live outputs will be similar.

(Jeff Atwood) #55

Uh, absolutely not, how would you quote any posts? You can even navigate to different topics while the composer is up.

(Kris) #56

Thanks for the continued feedback, everyone.

Some small adjustments today:

(Gurjyot Singh) #57

The link pop-up is too big for mobile. I reported this yesterday as well on a separate topic. Can this also be fixed?

(Sam Saffron) #58

Where is this scrollbar coming from? New topic, and make window a bit narrow.

(Stephen Chung) #59

Collapsing the the composer window (via cancel or v) causes a slight flicker.

This is caused by the content of the window first becoming invisible, after which the window quickly collapses in height. The small time gap between the window contents becoming invisible (therefore the window became all white) and the window collapsing is causing a flicker effect.

It does not seem to happen on opening of the window where the height expands. It looks quite smooth expanding. That is because the content first appears (when the height is zero) and then scales out together with the window itself.

There must be a slight timing glitch in the animation sequence.

I’m testing on FireFox 58 Developers Edition.