UI with tabs

[pedro-mendonca]

Brand new PR to substitute the old #135 (comment) that was getting too long and intrincate so sync with changes from both sides.

This adds exactly the same simple code bits, and it's now on top of latest master branch.

[johnclause]

Nice, thank you, Pedro! Do you have WP_DEBUG on in wp-config.php? If not, turn it on next time you develop. I got a few notices, like "Undefined variable: qtx_admin_section_4 in on line", on the first try of page http://w.marina.soutyrine.com/wp/wp-admin/options-general.php?page=qtranslate-x, right after the pull, but this is ok, I will clean it up.

Is there a way to make tabs look a bit fancier, like maybe rounded a little bit? Some kind of 3D look? Also blue rectangle around active tab might look better if it has 3 sides only, without bottom? Just something to play with if you have time, otherwise it is not important.

It is much more convenient and up-to-the-state-of-art this way. Thank you very much 👍

[pedro-mendonca]

This was a start, some code can be deleted, but I've just commented it for further review and minimize commitdiffs.
For example, qtx_configuration.php line 623, 635-641, 1454-1460.
One reason I didn't delete it is because there are functions that should also be deleted, like qtranxj_readShowHideCookie, and I thought that you might want to review it before delete, and also you might want to rewrite the function that manage the tab switching.

Some stuff that I would also like to remind you, of course I hope you already checked all this before merging.

• I've made a simple list for tabs titles for future reference and easy editing, in // Set Admin Sections Names.
• The tabs titles have an alt text Click to switch to %s that is ready for translation.
• I've included a jquery launcher in // Launch jQuery - not sure if necessary as WordPress loads jQuery but as I've commented, I'm not sure if it's needed because I think that WordPress includes a simple version of jQuery, and this might be redundant. Can you check on this?
• As you have the settings in these two files, I had to create two separate wraps <div class="tabs-content"><!-- tabs-container -->. It's not ideal, but it respects your original structure.
• I've based this in native WordPress css for tabs and the jQuery script was based on wp-maintenance-mode plugin. It's not according your functions structure and is written right above where it is needed. It might be rewritten to put it together with the other funcions and even with some other scripting more look-a-like to your other functions, not depending on jQuery.
  This was a suggestion, feel free to improve it as you wish :)

[pedro-mendonca]

Do you have WP_DEBUG on in wp-config.php?

Well, no. I'll check on this later. About that variable, I just replicated the code as you can see. Probably it's somehow related to it being on other file. One thing I must say, in one of my first attemps to clean the code before I started to implement the tabs, I did put the Import/Export section within the same file, without the need to use the include. It worked well, but it would be much difficult to understand the pull request. The code would benefit a bit with a parcial cleanup on that file.

Is there a way to make tabs look a bit fancier, like maybe rounded a little bit? Some kind of 3D look?

I'm sure that there is a way to do that, I just did a simple mechanism, and for plugin settings and configuration I do prefer a perfectly integrated with it's native mother framework, usually it allows it to grow together with core WordPress. If it changes the native admin CSS, qTranslate-X will keep in perfect harmony with it, with no need to override stylesheets.

It is much more convenient and up-to-the-state-of-art this way. Thank you very much 👍

Much more comfortable to navigate and a lot less mouse scrolling :)

[johnclause]

Pedro, I cleaned it up and pushed. I added functionality:

• to set general tab on load of url without tab specified or with an erroneous tab specified.
• to stay on the same tab after submitting.
• re-arranged the code to be able to add new tabs dynamically, like tab "service", for example, which is currently disabled. More tabs, like 'Slug', for example, will come soon. It was previously done in the way that a new section could be added without changing the main code, by just including an appropriate php file, which would make use of some actions or filters only. So, I preserved this functionality too.

The most difficult part for me would be to figure out the proper CSS for tabs, which you did perfectly - thank you again. I did not know that WP has some pre-arranged CSS for tabs. If so, indeed we should stick with their version, this is the safest and the simplest way.

Pedro, @Grafcom, @Gunu, could you please try to test it now as much as you can, switching, pressing buttons, making sure it does what it is supposed to do?

[pedro-mendonca]

Hi
Somehow I've failed to push another change this last time, it's about going back in to Languages tab when pressing "back to configuration page". It would need just the <?php echo admin_url('options-general.php?page=qtranslate-x#languages'); ?> in qtx_configuration.php line 1009.
The other changes you've made are a lot for me to track each one closely. I think the behaviour is correct, it's working all the same, but with code cleaned 👍

I did not know that WP has some pre-arranged CSS for tabs. If so, indeed we should stick with their version, this is the safest and the simplest way.

I found that in some plugins and I in some WordPress API info that I cannot find right now, but yes, it's the most safest/simplest version you can get.

As far as I tested, it looks fine now.
I've made the PR #157 to correct this link.

[johnclause]

Thank you, Pedro!

[pedro-mendonca]

Here is one of the links on CSS of the WordPress backend. It's not in the oficial codex site, and the behaviour is not the same, as it pushes the form on each tab pressed, but the css is the same:

http://code.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-5-tabbed-navigation-for-your-settings-page--wp-24971

[johnclause]

Thanks! This is useful to know.