Visual GUI improvement about carbon-fields HOT 16 CLOSED

The change has been completed and merged in master.

We'll be testing the new CSS in production envoirenment in the next few weeks and release 1.5 version sometime in December.

from carbon-fields.

Thanks for the feedback!

You're right, meta boxes might collide with the error messages. I think we could just display them on top of the fields instead:

I agree that the CSS is not very maintainable at the moment. If this finds enough supporters I'm all in for rewriting it!

from carbon-fields.

Do you have a design mock for the changes? If so - can you share it with us?

from carbon-fields.

Not yet, but we will send you a Sketch-mockup as soon as we start if you are interested in a correspondence beforehand.

from carbon-fields.

Can you share the mockup here? Just to gossip… 😆

from carbon-fields.

Hi, I finally managed to do a redesign for this. I attached a mockup of the current and the redesigned version for comparison:

Current:

Redesign:

Pickers:

Tooltips:

Modal:

The overall goal was to streamline the appearance of the fields to match the WordPress core styles, using as many built-in components as possible.

Some notes:

• There are no date and time pickers in WordPress, so I loosely based those on the color picker styles.
• I used widget styles for the Complex fields since they have a very similar functionality (they can be reordered and toggled).
• I added a plus icon to Complex fields for adding a field above the current field (so the user doesn't have to add and then move the added field).

I also made a suggestion for a new display option for Complex fields: open in a modal window instead of toggle. This would be useful for Complex fields with many sub-fields (e.g. for page builders) – where scrolling, toggling and reordering becomes very cumbersome. This does not require any changes to the HTML structure, but simply a class on the element (to make it look like a modal) and on the body (to prevent scrolling the body).

I'm happy to share the Sketch file if needed.

from carbon-fields.

This looks gorgeous! No comments yet?

I'm just concerned about the error message on the right. It could be a problem, if there are meta boxes on the left, thus too little space left.

Please add gulp and sass support on redesign (or I will do it). Carbon Fields are awesome, but the CSS is not really good in my opinion. It's too clustered and the ID and classes are repeating all the time...

from carbon-fields.

We also find the CSS hard to maintain. A rewrite is on our roadmap, we're going to work on this in the coming month or so.

@holmar Could you please provide the source Sketch files for us?

from carbon-fields.

That's good news! Here's the Sketch file: carbon-fields-redesign.sketch.zip

from carbon-fields.

Just a quick update, we started working on the visual improvments in branch css-redo

We'll be using postcss rather than sass.

from carbon-fields.

Thanks for the heads up, looks good so far! Let me know if you need any support with this.

from carbon-fields.

Wow, this looks gorgeous, great job!

There are some minor issues with font weights & spacing and the date/time pickers don't look quite right yet, but overall I'm really impressed! I can do a pull request for these if you want.

Thanks so much for doing this, really appreciate the amount of work you guys put into this!

PS: Are you considering the "modal" display option for Complex fields that I suggested? Should I open a new issue for the feature request?

from carbon-fields.

Thanks for the feedback!

There are some minor issues with font weights & spacing ...

Please feel free to open new pull request for those.

... the date/time pickers don't look quite right yet ...

We didn't spend too much time on those since we're using jQuery libraries. Again, pull request will be appretiated!

Are you considering the "modal" display option for Complex fields that I suggested? Should I open a new issue for the feature request?

We thought about that, but at this point we prefer not to clutter the JS with this.

I think that it's a nice idea, especially for containers that don't have much real estate(e.g. widgets, nav menus). However, the tabbed-vertical layout is usable for most cases we encounter.

Additionally, popup editing has some caveats - e.g. how will nested complex fields work when the outer and the inner complex fields use the modal overlay. Another one is the validation user experience. Opening the popup after hitting the update button doesn't seem like a good idea.

We're currently considering major js refactoring on react / redux stack. Once we have that in place we might come back and experiment with this feature.

from carbon-fields.

Alright, thanks for the heads up. I understand the caveats you mentioned – these are definitely things to consider. Just one side note though: The amount of Javascript required for this (caveats aside) is marginal. I think almost all styling can be done using CSS and the collapsing logic that already exists.

I'll do a pull request for the minor issues as soon as I can!

from carbon-fields.

Both pull requests have been merged -- the contributions are greatly appriciated!

Regarding the modal -- I created new issue for that: #133

We'll experiment with the modal when we get chance.

from carbon-fields.

It would be nice if you could use add_class() and/or add_attribute('id', 'name_field') on the Text Field (this would make doing jQuery and CSS magic), in addition to things others have mentioned:

• set_type() on Text Field (email, password, hidden, url, tel, etc)
• set_placeholder('Default Text') // As mentioned above

I know that they have mentioned that they are pondering and Input Field class.

from carbon-fields.