Class workflow rework feedback

Hey @Louis, great work with the new class workflow.

I just had a few points of feedback after my first time using it.

  1. The Classes modal window doesn’t seem to be persistent. Any time I reposition it or change the width, it gets reset the next time I go to add a class.

  2. I immediately missed not being able to select an existing class with my just my keyboard. Selecting a class requires a mouse click. Would be nice if you could use your arrow keys to select one (skipping any “no classes found” elements).

EDIT: I just noticed if you type the full class name, it will select the existing class. This actually helps quite a bit, but being able to arrow down after only typing the partial text would still be useful.

  1. In the Classes modal, I think it’d be nice to have any selected classes appear at the top of the list.

  2. I haven’t fleshed this idea out as much, but I think it’d also be useful to have the current block class listed in the Block column in the Classes modal as well. You would just need to disable the ability to remove that class. That way you could easily copy your block styles to a global class all from one place.

I think that’s it for now! Hopefully those are helpful :slight_smile:

3 Likes

Great points @sunny, thanks for opening the topic.

Q:
Is it possible to select multiple classes from the modal, like it is possible to remove multiple classes without closing the modal?

2 Likes

Yep, you just click the Stay Open text at the bottom:

Love that part!

2 Likes

Oh, how could I miss that?
Thank you, @sunny!

Indeed, this is a smart solution. It even remembers the selection. Amazing.

2 Likes

I also really like the instant class preview. It helps visualize things when you have different size & spacing utility classes.

I am not seeing show hide button

Screenshot 2023-06-02 020821

Hmm it’s quite faint in light mode, but I do see it on mine:

image

Agreed. I think that’s the main strength of this feature.
Once Tailwind is a thing in Cwicly, this will be a life saver, I’m presuming.

Could you try to clear the browser cache by performing a hard refresh?

Hi @kane,

You’ll want to make sure you remove Classes and IDs by default.

1 Like

Am I right in assuming that in the classes’ modal, only 7 classes per category are displayed without scrolling?
I think this could be improved dependent on how many rows are displayed.

For example, if everything is displayed in a single row, we should be able to make use of the entire max-height of the modal and not being limited to the class columns’ max-height.


I also think an option to toggle the class hover preview on/off could be something to consider (inside the editor settings).


While toggling between block class and block ID with a single click is a smart and straight-forward implementation, I would like to see the indicator for the ID (always or in case it’s toggled, not sure about it), when the class is currently displayed (and vice versa).

1 Like

WOW @Louis, thanks for implementing these so quick. Feels really awesome now!

P.S. I did notice a couple tiny bugs.

  1. If you try to copy the current element’s block class styling to another block class, it doesn’t seem to paste. Copying it to a global class or copying from another block class and pasting to the current block class both work through.

  2. You can’t keyboard arrow down to select an external class if there are no global classes that match your search.

Other than that, again just want to re-iterate how amazing it is that you implemented those suggestions so quickly :star_struck: The new class workflow is a huge improvement.

Hello @sunny and @Marius,

Thank you for taking the time to share your feedback and improvement suggestions.

Thank you for noticing this one. This should be fixed in the latest update.

This is a slightly more tricky one that I had left untouched until 1.2.9.7.1. I’d love to have your opinion on the implementation when you have time.

Over the last 2 years, having seen the way users interact with the different dropdown elements in the inspector window, one constant that has come up is the fact that pressing enter forces them to select an existing value, instead of being able to create a new one.

We’ve decided to go with an arrow keys/tab navigation that should allow you to navigate and selecting existing classes without requiring the mouse in most cases, but without forcing a selection from the start.

This isn’t set in stone and can evolve!

Introduced in 1.2.9.7.1. I’m getting a “told you so” from @Araminta :wink:

Correct. We kept the fixed height for the class containers as allowing a flexible one would require more logic and I did wonder if displaying more classes was counter-productive in the end.
Definitely something we can explore.

That’s interesting to hear. Do you find it too distracting when scrubbing through the classes?

This was something we spent quite some time discussing with the team. I’ll reply with a more detailed post in the feature request that was opened by @StrangeTech


Thank you once again for your feedback, really appreciated.

Cheers,

1 Like

Strangely it does seem to work for me…

Hi @yankiara, just letting you know, we tested this across multiple tabs and multiple openings of the modal and it works perfectly for us with that latest version of Cwicly.

It works perfectly after the latest update. It always reset to its initial position in both FF and Chrome in the first release (at least for me).

1 Like

Can confirm that there is no issue anymore with the latest update on my side @sunny.
Checked after your initial post and could only confirm for FF, not for any Chromium based (I use) browsers.

Minus the external class ‘bug’ that I listed above, I think how you have it now is perfect. The auto-complete before was nice, but sometimes I’d type a new class name and hitting enter would select an existing class instead of creating the new class.

I’ll need to test it more in a real workflow to confirm, but this is how I’d draw it out in my head.

Did you forget about ATA? Always trust @Araminta :wink:

Thanks for your feedback here @Louis.
I gave myself some time to try things more extensively.

Experimented a lot and came to the conclusion that, for me, the sweetspot is 9.
You are totally right, too much at once gets confusing.
Unless there is no further feedback in that regard, I think it’s perfectly fine as it is.

It’s just that I expected a freely resizable modal, e.g. like the default units one.

I’m still not sure here but will get back to this in case I have something to add.

One eventually will get to the point to know exactly what class is needed (without preview) and when focusing exclusively on the right class names, the preview in the background could potentially be distracting.