Top Down - Help

Hello Astro,
I was wondering if you might lend me a hand with your awesome CSS-Fu.
I think its time to start refactoring some of the top level and framework parts.  I would also always appreciate your UX-design-Fu as well.

This is nav.html

#1 - should the thing that opens the side nav (currently a hamburger?) be moved up into the top nav ?  Or should it be a handle on the left like a sliding drawer ?   Should it have a sliding draw handle ?

#2 - I started refactoring by cleaning out stuff from the top nav.  My general mantra for web stuff is the fewer tags, and classes the better.  When I started looking into some of the html pages & css I saw way too much stuff.  Can you make it slim and still look nice ?

#3 - I think the tool tip is silly - what are your thoughts?  That UI drop down has given me a lot of grief in the past, but I suspect the correct thing to do is make one as I talked about for notifications - which I've started with the bell and badge.

Right now I've created a branch called webgui_work

https://github.com/MyRobotLab/myrobotlab/tree/webgui_work

If your interested perhaps you could checkout this branch and we can work on it together.

Once the top level and framework stuff is done we can then begin incorporating more of Gael's work.

perhaps this would be a good place to have a bread-crumb too ?


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
astro's picture

Oh Yes. Challenge

Oh Yes.
Challenge accepted!

Give me time to understand what this is all about. I just asked Gael how I can work like you do.
I repeat the question here:

...........

Gael: You can find all the files here:
https://github.com/MyRobotLab/InMoov2/tree/master/resource/WebGui/app/service

How can I work like you do?

I found this but it is from 2011
http://myrobotlab.org/quick_start

An this is from 2018
http://myrobotlab.org/content/myrobotlab-local-maven-compilation

I don't know if it works for the current version and with that I can see everything you are doing in Angular. I want to see if I can do the same as Gael to try to help in that way.

 

astro's picture

Grog. Forget about that, I

Grog. Forget about that, I just saw the Building Project instructions in your link.
I make a coffee and I get on with it.

GroG's picture

Great ! I'll update it with

Great !

I'll update it with Building with Eclipse and other hopefully helpful details

astro's picture

Well I was able to install

Well I was able to install Maven, Java, Git, clone and compile.
It took 39 minutes to compile.

Now I have to install Eclipse or can you recommend something easier?

How do you guys edit a thing and test it?
Do I have to compile and wait 39 minutes every time I change a thing?
Or with Eclipse I can make a change on the fly and see it instantly?

Bear with me.

astro's picture

I was able to install Eclipse

I was able to install Eclipse and find your message, but that's as far as I could go. It won't let me edit the code above, so tomorrow I'm going to look for some Eclipse tutorial.

I don't want you to waste time trying to explain. If I see that it is complicated I will go for plan B and I will use the Chrome F12 to make changes as I have been doing and uploading working examples on the server of my work.

#1 Yes, the handle seems like a good resource to me.

#2 I don't know what that is for. Do we need to see it all the time? Perhaps it can be hidden or shown elsewhere.

#3 Yes, remove the tooltip, it doesn't make sense.

...the correct thing to do is make one as I talked about for notifications - which I've started with the bell and badge
Yes, totally agree.

I was thinking about the bread-crumb, maybe it would be nice to have it with the functionality of being able to hide it, to have a cleaner view, and to be able to show it in the same way as the sidenav with a handle when needed.

GroG's picture

Hi Astro,  I made a webgui

Hi Astro, 

I made a webgui development page - unless you really want to jump into Java development, I think it would be the fastest way you can Gael could work (step by step)

http://myrobotlab.org/content/how-do-webgui-development

The only important tools you'll need to work with is git and Chrome dev tools (or a js/html/css editor of your choice)

I'll continue updating the other Java development guide - but that will take some time

hairygael's picture

Hello Astro,The way I work

Hello Astro,

The way I work is rather simple.

C:\Myrobotlab\resource\webgui\app\service\views

C:\Myrobotlab\resource\webgui\app\service\css

C:\Myrobotlab\resource\webgui\app\service\js

If you run INMOOV2_INSTALLER.bat it automatically installs the latest InMoov zip.

INMOOV2_INSTALLER.bat  and START_INMOOV2.bat need to be in root directory next to the myrobotlab.jar.

You can find these two files in C:\Myrobotlab\resource\InMoov2

  1. edit the HTML, CSS, JS in an editor. (I am using sublime text)
  2. launch START_INMOOV2.bat, this opens a chrome tab and starts InMoov services
  3. make the modifications in the editor and refresh the browser to see the results
astro's picture

Oh! Thank you!!!

Oh! Thank you!!!