menu icon feature

[selul]

@contactashish13 i would like to build a module for menu icons.

The module slug will be menu-icons, will be placed in obfx_modules. The module will need to be built according to this guideline: https://github.com/Codeinwp/themeisle-companion/blob/master/docs/MODULE.md

What the module will introduce:

1) on this page, http://prntscr.com/gz9a3d in the left of the text, for each menu, will add a icon, the icon is not important, you can use a simple dashicon as we will later on change. 2) When this will be click, will open a picker for selecting a custom icon, from a set. The set needs to be easily configurable from php. We can search also thru icons, by having a simple text box. I think we can use select 2 for that picker, if you have any other solution, let me know. 3) Once a icon will be picked it will be associated with that menu item and displayed in the front-end.

You can have a look also over this plugin to understand the functionality: https://wordpress.org/plugins/menu-icons/

Also, the icon details can be saved as post meta, as the menu items is a specific post_type.

[contactashish13]

@selul I got stuck and it seems that the code could be incomplete. Are all modules of this working? The reason I ask is because according to the code the reports module cannot (and does not) load the JS files because here https://github.com/Codeinwp/themeisle-companion/blob/master/core/app/class-orbit-fox-admin.php#L108 it fires the enqueue action only on the orbit fox settings page. As you can see in the screenshot below, the dashboard widget is empty and stats.js is not loaded in the resources.

[selul]

yes, you are right, it the do_action call should be outside the if, but the orbit fox admin script should be on the orbit fox page only.

You can do this fix also when sending the pr.

[contactashish13]

@selul the example plugins loads the media modal. There does not exist a simple component that can add images to drop downs (neither select2 nor choice). Maybe we should create a new type of "attachment" and load the media modal too?

[selul]

No, no, i know that they use modal, but im wondering if we add a more simpler solution, like the one ive told you.

[contactashish13]

@selul here are a few options:

1. http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html
2. http://designwithpc.com/Plugins/ddSlick#demo

[contactashish13]

@selul let me know which option you think is best. Also, how would users add their own icons?

[selul]

something like this wont work: https://farbelous.github.io/fontawesome-iconpicker/ ??

i like the component integration -> http://prntscr.com/h0ss01

For the moment we wont provide custom icons, only fontawesome and dashicons.

what do you think ?

[contactashish13]

@selul it depends on bootstrap css and js files. These files impact the WP admin UI as well. I don't think this component will work

[selul]

@contactashish13 maybe we can get the bootstrap bundle only with popover http://getbootstrap.com/docs/3.3/customize/ or we can use this one ? https://codeb.it/fonticonpicker/

[contactashish13]

@selul PR: https://github.com/Codeinwp/themeisle-companion/pull/86

I've tried to customize the bootsrap bundle but I can't seem to go beyond what I've checked in. It still impacts the admin section a bit in terms of the font and the background color.

[abaicus]

@contactashish13 Looks really good until now! 👍 I think we can use, as @selul suggested, this one: https://codeb.it/fonticonpicker

[contactashish13]

@abaicus I have used the component that seemed most flexible

[abaicus]

@contactashish13 My mistake! Couldn't make it drop down. I think you omitted to commit some of the files and they error out with 404.

[contactashish13]

@abaicus oops, I forgot the vendor files :) Have pushed them in now.

[abaicus]

@contactashish13 Thanks! Looks really good! A nice touch would be a search input to the iconpicker to filter the icons. Do you think that's possible? Some bootstrap CSS should still be removed so the dashboard won't be affected by it.

[contactashish13]

@abaicus forgot about the search box. Have added it now. Also, the default icon I've chosen is a "gear" as I cannot use an empty icon. So if you choose a gear (which is auto selected), it will be as if no icon has been chosen.

Regarding the bootstrap CSS, some elements might need to be manually removed.

[abaicus]

@contactashish13 Looks good! :D

There are also some z-index issues with the popover.

Is there any possibility to add a dashicons-plus icon as default and add a class to it so we can style the fact that there's no icon selected differently?

I think you're right about the bootstrap CSS, it can only be cleaned manually.

[abaicus]

@contactashish13 I think you can remove the bootstrap.min.css alltogether. Seems to look decent enough without it. I'll further style it after the backend is done 👍

[contactashish13]

@abaicus have incorporated your suggestions.

[abaicus]

@contactashish13 Thank you! Let me know when you push everything 👍

[contactashish13]

@abaicus already done

[abaicus]

@contactashish13 Are you sure? I get nothing when I pull :D

[contactashish13]

@abaicus have synced again. can you try?

[abaicus]

@contactashish13 Looks Awesome! :D Thank you!

[selul]

@contactashish13 i have checked the current state of this module and it seems when i first add the item in the menu, there is no option to add the link, can we bind it in this case also ? After page refresh all is showing ok.

Here you have a video which outlines this.

https://drive.google.com/file/d/1Rk08ldEwu8drgNcZom4_b83oU26DbH9Q/view

Please fetch the development upstream branch and work starting from there.

[contactashish13]

@selul PR: https://github.com/Codeinwp/themeisle-companion/pull/95