My wish would be to be able to see at first glance which CSS commands are currently being applied to an element, e.g. in the “Advanced” area.
This way, experienced users can immediately grasp what styles have been applied to complex layouts.
Something like Breakdance may be? You click on a button and it shows all the edited properties for a block.
Brakedance has no tabs like in Cwicly, if I remember correctly. Because it is certainly not a function for every user, I thought of a field in the tab “Advanced” in the area thats currently labeled “Custom CSS”. This renaming as “CSS” or so.
There then two areas for “Generated CSS” and “Custom CSS” – just a suggestion.
This would make these two related things visually close to each other.
How practical some implementation is, usually turns out only later, during use.
These info needs to be visible/accessible regardless of which block inspector tab is currently active.
Some suggestions, feel free to add more:
- On the bottom of each panel with the ability to resize the area horizontally
- An icon / shortcut which triggers a pinned modal which can freely be moved and resized
Needs to be available from anywhere in an instant.
2-3 clicks to reach info which I then have to remember while making changes sounds like a cumbersome task to me.
Although it might not be related to this feature request, since I think this is a separate topic, I find this a very interesting idea.
A list which shows all modified properties at once - with the ability to make changes directly.
I think I read this somewhere else already.
Breakdance does have options wrapped under tabs. It differs from element to element. They don’t have a standard implementation. They have made it very confusing to make it simple for users. There is no fixed place to find something.
Yes. This goes as a separate request. I was confused about the request. I like @Jugibur idea. He wants an area where all the css applied from block inspector options can be seen. We make a quick modification there and that also carries over to the same property in the block inspector options. But I feel this feature will consume a lot of time of the team to be perfected.
Edit: A separate feature request for this feature. Show all modified properties by clicking a button
1 Like
Honestly, I even thought of your suggestion too, since I’m not a fan of many clicks either. I just assumed that this is rather a “nerd” feature and could irritate the actual target group of Cwicly, since the actual (real css) properties in Cwicly are as good as always hidden.
Ist this really the case? From my understanding this request is about a read-only option - which currently makes the most sense imo. Well, at least my thoughts were made based on this assumption.
Writing own CSS inside a specific block inspector area, which then transfers automatically to the block options properties, imagine this is possible at some day.
But as you already pointed out, I also think this is a very complex topic and I’m not sure if this can be implemented in a reliable working way. In the end, it needs to work vice versa, right?
Got your point.
Well, there are the global options or the role editor that are able to take care of such scenarios.
My guess is, that from all relevant/popular builders, Cwicly has one of the highest proportion of nerds.
But I also share your view that the general user shouldn’t be confused with advanced stuff which is present all the time across the editor.
Oh that would be at least my dream for the future!
I agree that it would be very complex to interpret the written CSS and to transfer it into the Cwicly input masks.
So thats the reason why for now my wish is just an overview (read-only)
This has been brought up by @yankiara in the past Spotlight.
We already received that in the form of the Quick Code editor, which even syncs the code with the UI (and vice versa), which in fact is a gigantic feature (and which hopefully will be further enhanced).
A list that shows all modified properties from the advanced panel in the block inspector (by category) would indeed add another layer of convenience and workflow improvement.
Apparently, that could easily go hand in hand with a property search functionality.
Cwicly is the tool which would require a search functionality the least, but I can see it’s highly requested.
@anon32808828 posted a good example above how this could be implemented.
Adding a search and a modified property list would be another step to complement the block inspector.
1 Like
Thanks for bringing it up again, @Marius. I understand that Louis is working according to his plan and vision, which is great as always. However, if these features are prioritized, the user experience will be much better.
1 Like
Agreed @anon32808828.
I think the block inspector has come to a state where things like these could finally be addressed.
It wasn’t crucial, since the UI is highly efficient anyway, so I understand that it hasn’t been tackled yet as a priority.
With the new panel navigation, this is something to consider implementing right at the beginning.
I hope these small, but necessary tweaks, will be part of the approach to make Cwicly more accessible.
These are the QOL improvements which should be focused on, before working on new dedicated features.
This functionality, which makes most sense when being exclusive to the Design tab, is important for the user, especially when the design was not created by oneself (this can be either a user who is grabbing stuff from the design library, a team member, or your client that wants to tweak some things), to have a GUI overview to see what’s going on in a snap.
Also, when returning to a block at a later point in terms of editing, it’s much more efficient to have all information in one place at the same time.
This imo should include also pseudo classes/elements and Relative Styling items in a smart way, like showing everything related combined (like we already have with colors) or next to each other, instead of at different places (like first showing all default styles, then comes the pseudo stuff, then RS… that’s not really efficient).
So basically a toggle to show all properties that have applied values by displaying all applicable panels in an opened state as a list view.
I always thought this is important, but didn’t make any sense with the tabbed navigation.
Many users would be grateful if this option was considered @Louis.
Yes, we have the wonderful Quick Code functionality. But please think in the new, accessible way.
Thank you.
PS:
2 Likes
Hello @Marius,
Thanks for bringing this up.
Perfectly valid points and quite necessary basic features you’ve exposed.
Might push back the next update a bit so that we can get all of this nicely packaged as a whole.
2 Likes
Love your positive feedback and also that you see the need for this @Louis.
Whatever you think is best 
1 Like
Hello @Louis.
What’s been presented today in this regard is most likely the sweet spot and the best compromise to display everything at one place, and to achieve/maintain a clear and efficient overview.
Another big advantage of this is that the user is led into the familiar environment of the block inspector. Everything is in its accustomed place, and no additional instance is introduced (I think this problem used to exist with global classes at some point).
I’m all in for this general approach, so big thumbs up for it, and really love to see you recognize the value of this idea.
You may have already considered this aspect, I just wanted to share a few thoughts:
I am a bit concerned that if multiple property changes are necessary, the constant back and forth can become a little fiddly and exhausting, and potentially could defeat the very purpose of this functionality.
So how about an option to display both instances
- the overview with all properties in action as a read-only list
- the destination after clicking on the desired property
at the same time?
This also has the advantage that when you are in the process of making a change, you can already plan your next step, as you have everything else in view simultaneously - without going back first and then looking for the next required property.
An option to open the overview / “quick view” in a modal would not only fit perfectly into the overall UI/UX concept, it would also solve this specific problem.
It could be considered as optional , as:
- this approach would not be as efficient for a single change to a value
- many users would not want to make use of it for various reasons, like
- not hiding areas of the canvas when making changes
- prefer staying within the main panel
- etc.
The possibility of having both instances side-by-side would be a massive efficiency boost.
1 Like
The modal for the modified properties “quick view” seems most propitious and incredibly efficient. I’ll be working on this over the next few days and hopefully can share the advancement.
Thanks for the great input @Marius, as always!
1 Like