search

htmlburger / carbon-fields

WordPress Custom Fields Library ✨
https://carbonfields.net/
Other
1.38k stars 244 forks source link

Visual GUI improvement #63

Closed georgknabl closed 7 years ago

georgknabl commented 8 years ago

Some developers and designers at our agency would like to enhance the overall UI of the plugin by styling the CSS accordingly. If you are open for those improvements we'd like to issue a pull request once we are done. However, this only makes sense for us if the changes will be integrated into your main repository in the long run. Please let us know if this is ok for you.

emohamed commented 8 years ago

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

georgknabl commented 8 years ago

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

doup commented 8 years ago

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

holmar commented 8 years ago

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

Current: 0_current

Redesign: 1_redesign

Pickers: 2_pickers

Tooltips: 3_tooltips

Modal: 4_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:

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.

AlexBa commented 8 years ago

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...

holmar commented 8 years ago

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:

error-on-top

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

emohamed commented 8 years ago

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?

holmar commented 8 years ago

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

emohamed commented 7 years ago

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

We'll be using postcss rather than sass.

holmar commented 7 years ago

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

emohamed commented 7 years ago

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.

holmar commented 7 years ago

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?

emohamed commented 7 years ago

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.

holmar commented 7 years ago

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!

emohamed commented 7 years ago

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

Regarding the modal -- I created new issue for that: https://github.com/htmlburger/carbon-fields/issues/133

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

dmhendricks commented 7 years ago

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:

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