Custom Menu to replace existing buttons

[Danny-Alexander]

Branch: feature/move-buttons-into-a-menu

Bug: The menu does not close when it loses focus or when an export button is used.

• [ ] Find out why the menu is not closing properly
  • [ ] Investigate if it's an issue caused by using collection buttons

I didn't see any forum posts about this - seems like it may not be a common issue or people don't usually use buttons like this. Buttons extension has GitHub repo.

[mulaz1]

The bug is probably not imputable to your code.

Collection buttons library is likely the culprit. Here's an example of the bug, even in official documentation. To reproduce the bug click on Table control -> Column visibility

[Danny-Alexander]

That's good to know, thanks for looking into it.

Do you have any ideas for fixes or alternatives?

[mulaz1]

I would use one of Bootstrap's dropdowns to build the menu (docs here) and use JS or jQuery for its business logic.

If you care about page loading speed you might also consider designing your own dropdown without Bootstrap or other huge components libraries, with a few lines of CSS and JS, link.

[Danny-Alexander]

Thanks for advice and links.

I was considering finding a guide/tutorial to setting up a Bootstrap based site and applying/using that here. I didn't understand what Bootstrap was when I started this.

OTOH I wonder if I'd be better off learning to use Vue instead as I've discovered some people are of the opinion it's a superior alternative to jQuery (easier to read syntax, newer). I'm curious, what are your thoughts on that vs sticking with what I've got?

[mulaz1]

I fear that the buttons library you're using at the moment isn't quite stable (i.e. if you try to create a menu without submenus it works as intended!).

Alternatively you can try to track down the bug in upstream library and/or ask the authors to fix it (I don't know if the code is open sourced) or use another dropdown library.

Vue.js is indeed a wonderful tool to have in your skillset, but it requires you to have at least a basic understanding of JavaScript, HTML and CSS.

However, to take the first steps I would use simplified tools like Bootstrap for CSS and vanilla Javascript or simple Simple frameworks javascript for easy back-end.

Then, in the future when you will learn vue.js or Node.js or others you you will always have the chance to improve it, even implementing a CSS made and customized by you. My two cents.

[Danny-Alexander]

Makes sense, thanks again Simone.

I'm intending to replace the buttons with something from Bootstrap. Feel free to code something yourself if you like - I'm open to big changes & know a lot of the code is very messy and needs rework.

[mulaz1]

Your idea is to keep the table and use boostrap only for the keys (which in any case is a good table library) or to use boostrap for both? personally I would keep the existing table. if you want I can help you.

[Danny-Alexander]

Are you on the TerraTech discord? Might be easier to msg me there to talk: DannyA#8355.

Yeah, I'm thinking to keep the table I have now.

This is my rough plan to fix this menu issue and incorporate Bootstrap: #41

Would you like to take that on?

Or if you know an example of a well designed similar site I could reference that would be useful also (though I might get that from the tutorial anyway).

I'm not really sure what I want help wise with that. I'm happy to just figure it out as I do those tutorials / courses or just have you do it if you wish.

At the moment I'm working on Process and modify data before displaying #40

[mulaz1]

I can help you in adding bootstrap to your project, but unfortunately I don't have very much time to assist you in each step, but feel free to hit me up on my GitHub email if you need some help!

[Danny-Alexander]

Ok cool, will do, thanks!