Improvements of the menu bar

adamtool / webinterface

The web interface for the tool Adam (AdamMC and AdamSYNT) providing an intuitive, visual definition of Petri nets with transits and Petri games, and an interactive interface to the algorithms of AdamMC and AdamSYNT. Contains the repos (as submodules): libs, framework, logics, modelchecking, examples, synthesizer, high-level, webinterface-backend.

http://adam.informatik.uni-oldenburg.de:4567/

GNU General Public License v3.0

5 stars 2 forks source link

Improvements of the menu bar #75

Closed mgieseking closed 4 years ago

mgieseking commented 4 years ago

There are some ideas to improve the bar:

that the menu bar takes the complete width
the name of the tool complete to the left (if possible with a separator | ) that draws more attention
when there are children the item has an arrow (one could just use the ascii sign I guess ▼)
a link to the github page
having a help button leading to the documentation
a home button
then I would move help, github, about, home in this order to the right

annyanich commented 4 years ago

Try and do the quick and easy improvements to this today. If something is too hard, leave it.

annyanich commented 4 years ago

Home button takes you back tot he main page

mgieseking commented 4 years ago

When I currently see the old screen shots I'm not sure if it will look nice when the name is to the left, since it is too long. When I remember correctly you said that centered is not possible? Currently, I don't know what's the best.

mgieseking commented 4 years ago

I added some of the parts quite hacky. Obviously, you can do what ever you want with this. Otherwise further improvements would be:

make the middle item not selectable
replace GitHub, ?, and, X with icons
Lower the main content a little bit (especially for large MC formulas the menu bar is overlapping the tabs)

annyanich commented 4 years ago

I like what you did here, it makes it a bit closer to the standard Material Design web app UI when the bar stretches across the whole screen.

I had a look at implementing your 3 ideas:

I think it will be difficult to make the middle item unselectable. The library I made the menu with seems not to be made with that use case in mind. If I had a lot of time on my hands, I could monkey patch it, but I probably won't get to it before we turn in the artifact.
Putting icons in the menu items also seems to be quite difficult without patching the library. The text is strictly a string; see the line {{label}} in this file https://github.com/michitaro/vue-menu/blob/master/src/menubaritem/index.vue. We would have to patch the DOM to insert a SVG element there instead.
I did lower the main content :) in 08aaa30c00d6025d4ad670bc9be1d5554d5da649

mgieseking commented 4 years ago

* I think it will be difficult to make the middle item unselectable.  The library I made the menu with seems not to be made with that use case in mind.  If I had a lot of time on my hands, I could monkey patch it, but I probably won't get to it before we turn in the artifact.

OK, this sounds intricate, but would it be possible to change the css for hover over, so that it don't changes the color ;)?

annyanich commented 4 years ago

U are right, I did it :) thanks for the idea

annyanich commented 4 years ago

Possibly with CSS tricks I can do the github icon as well, but I will save that for later.