Re-work on the top bar menu

[jojo535275]

So as discussed at the end https://github.com/FPGAwars/icestudio/issues/563 This is an issue for brainstorming! So please everybody give your toughs, and ideas

We are thinking about the possibility of removing the blocks pickup from the top tool bar menu.

Of course, this "simplification" implies that the basic menu should remain in the toolbar (for now)

[jojo535275]

mSlider wrote " Maybe if we remove that block tool bar, we can put there the shortcut buttons... do you see as a good place for that? Or prefer put next to plugin manager menu at the left-bottom of the app? Or other suggestion..."

i agree with you Alex (mslider) if possible, it may be better to not "overload the workspace" . We may even put the plug-in manager on this top menu bar ? eg between the "tools" and the "help" menu

Let us prepare some mock ups (with the help of paint.exe) !

[jojo535275]

Original, as it is now: First proposal:

[mSlider]

I think the first is optimal, but here we put the proposals discussed with @cavearr in other comments.

Second proposal: Third proposal:

[cavearr]

Guys! give me the weekend to think in it, is awesome the proposals.

In the beginninf i'm maintain the topbar for compatibility but i dont use never with the collection manager.

In fact basic i think should disappear and maybe we could put this basic blocks near the shorcuts .

Give me some time to thinking in it.

Thanks a lot!

[mSlider]

Take your time Carlos... good to hear you are alive!!! Jajajaj

[mSlider]

Hi Guys,

I've been playing a little to make the third proposal shortcut plugin and to learn how the plugins works... This is the results:

Carlos, I supose that when you make a custom plugin (correct me if I'm wrong), there's a must of no have to coding outside your plugin's folder. But for this time (ex: shortcuts-plugin I've made) I had to add a function in the menu.js, is this right???

Regards!

Alex (mSlider)

[Obijuan]

Love it!!😍😍😍

[jojo535275]

Congratulations Alex,

It was not my favourite choice (due to the fact that it eats a bit of space on the workspaces), But i most admit that the result is very good. And "modern" Looking ;-)

For me you solution is good for implementation, But has someone mentioned recently, We will need a setting somewhere to launch this plug-in automatically at icestudio startup ! (like we have to do for the collection manager plugin)

Muchas gracias

[mSlider]

Thanks Jo, Juan,

At the moment I'm just learning and experimenting with the plugin mechanism and how are the things working internally!

For the shortcut menu I think is better to implement the first proposal and internally without plugins, but when the collection manager can launch by default at the start up.

[mSlider]

put the plug-in manager on this top menu bar ?

Jo, yeah, is a good option put the plugin manager in the top bar menu like a dropdown list or a pop-up window (for launch/configure plugins). Because of this the interface is cleaner!!! Like it!

[jojo535275]

Ok Alex and Juan,

Let us see what Carlos and other people think! Than beginning of next week we can make "final" choice or vote for solution before implementation!

Thanks

[cavearr]

Hi ! the third version is the best for me but wait a little , i'm thinking in other solution.

I think this toolbar should be implemented for the moment directly in icestudio without plugin, i think is necessary experiment with this feature until complex the solution.

Give me the weekend to finish of thinking in it!

Good work!!

[cavearr]

Hi Team! i'm launching my proposal! taking your ideas and cooking a little.

icons is only for the mockup if you like this option i work in a good set of icons.

The idea is the next:

1) Reduce the top height menu and minimize font fron 14px to 13px, i think this bar take a lot of space and is not usefull. 2) Reduce the bottom height bar 3) Collection manager start at startup. 4) At the left, appear a new bar with opacity at 50% to give the sensation of transparent and dont reduce visually the work area. 5) The first icons will be the basic primitives.(input, output, labels....) 6) At the end of the left bar appear the icons for verify , builld and upload. 7) At the end appears an icon , for exaple like the gnome 3 left bar (9 points), that when you click, opens like gnome 3 desktop a list of available plugins.

The idea is if you launch a plugin, this appear in the middle of the left bar , like the system bar in windows or linux, and permit you to pin this plugin to the left bar. The idea is make similar to the operating systems that we use .

I'm attaching a mockup , and an screenshot of the gnome 3 app search that is like i'm imaging the plugin list.

What do you think?

[jojo535275]

Hola Carlos,

So, for me:

1. great
2. great if the height of the bar resizes automatically to show all the FPGA resources when the size of the window changes (we have that function actually)
3. Super great :-)
4. great, yes opacity required ( with an optimal trimming )
5. great; Maybe we can add some reactive tooltips when the mouse passes over the icons.
6. Fine, if when we are in full-screen mode there is no confusion between this button and the OS launch button (gnome button) my brain can loose the track easily ;-)

Thanks a lot Carlos for that mock-up

Joaquim

[Obijuan]

I love it!! 😍😍😍

[mSlider]

Hi Carlos,

For me:

1. Good to minimize font size, and the bar a little.
2. The bottom height I think is correct now for show all the info, including Project Name, Resources info, Board, etc... (may be a rework on resources tab is needed.
3. Collection manager at startup is a must (if we eliminate "collection blocks" in the top nav-bar
4. With the left bar for picking "basic's" I'm a bit uncomfortable, and I don't like "left" bars for recurrent work. Prefer top left or bottom. (I'm right-handed) And when working with the mouse is more comfortable for me "top" and "right" that "left" and "bottom" access. May be can be place-configurable???
5. Ok with the basics icons. Then if we see is overloaded may be we can put "retractable" tabs.
6. Yes, "quick access" buttons same thing as the "basic's" buttons.
7. It sounds good to me. A plugins pop up is necessary no only for launching plugins, also for configure the options, and other stuff related with the plugins. The pin function sounds really good!

In conclusion, leaving aside the "left-nav bar" for quick access buttons, all the other concepts are as good that makes me want to work in it.

By the way you inspired me to make a mockup and I will show you.

Point here some comments about it:

8. The Collection Manager tab can be "retractable" for have more room when you are not working with the collection's blocks.
9. Collection Manager features: "search field" at the top, and "view & name/description" at the bottom for the block you are "hovering"/"selecting".
10. Plugin Manager popup as I said from @cavearr concept I think is better his way as described.
11. "Quick Acces" Basic's buttons and "Verify, Build, Upload" at the top, for me is more fast and comfortable than in the left side.

Like to see more concepts and ideas, please!

Keep it the good works guys, love icestudio!

Alex (mSlider)

[cavearr]

Hi @mslider Good work!! your are in the right way!

The "info panel" down the collection manager is in my workside, i have some advances in it, and the same with the search bar t the top, but if you want to help me with it great!

The plugin list i think is better in a way simiilar that i propose because i think , when the plugin api will be closed and documented, i think a lot of plugins emerged and in this way, we can scale at the infinitum.

The retractable pane is a great idea. The idea will be do this work to create a set of widgets for future plugins (panes, popups, trees, forms...) great!

The icons at topbar for me is perfect, but in this case we dont have strecth the menu, or we have to do very small the icons (this is a possibility).

I think the resources wasted by the fpga, should be a bottom panel that rises when build or verify and you could close or open when you want (like a retractile bottom pane). I think we should reduce both top and bottom bars.

The idea of in some way have the basis blocks very easy to access go through you could pick it without two clicks way.

I think this should be like build, verify and upload, a one click way items. we could put all in the topbar one with each others with small icons. or a retractile o similar bottom toolbar.

Maybe we could experiment with a transparent bottom toolbar (or transparent floating icons).

If we think very well the toolbars we could do configurables like the windows or linux toolbar.

I'm working in the new version of configuration panes, that permit us will be very flexible.

Although we spend time in discuss it until program, it is very important, thanks a log guys for this great ideas and efforts.

In resume we need more ideas about:

1) How work with the basis blocks 2) Rethink fpga resources pane 3) Where to put the plugin list button

Thinks that will be consolidated:

1) shortcuts at topbar ¿in small icons? 2) Reduction of topbar and bottom bar height and font. 3) Plugin list as overlay fullscreen like gnome 3 4) Right pane collapsable 5) Search bar for collection manager 6) block Info are for collectoin manager

Tell me if i forget something.

[jojo535275]

Hello guys,

-For the basic menu -And for the height of the top menu bar, if it is not too complicate to implement into code !? . Here is a variant of Alex version with the top menu height of Carlos :

[cavearr]

Tell me time to think in it @jojo535275 its not a bad idea but i dont know if is scalable (for example if we want to add new buttons)and for strech screens i dont know if is a lot of information in the top bar.

Give me some time because i'm exploring some interfaces from other progras to view how solve this kind of problems.

[jojo535275]

You are right Carlos, Maybe this one :

• with an almost transparent toolbar background and no border (i just draw a fake dashed border to materialise the buttons area)

We are feeling like at primary school these days :-)

[mSlider]

Hi @jojo535275

Make that distribution is no problem... but I have an idea for make it neat and minimalist. If I have time today I'll show you...

[jojo535275]

Great Alex, i do not think that you need it guys! but here is a source of inspiration ;-)

Sorry, voy a salir ;-)

[cavearr]

jajajaj @jojo we could launch the icestudio baroque edition XD

[cavearr]

Researching in some apps, i found "Krita" very interesting. Krita is a digital painting software very impressive https://krita.org/es/

and have a concept that i like it very much.

The idea is taht with the middle mouse button, appear in this case a circle with shortcuts tools, in this way you dont need to use space for it in the workspace and when you need you have in any place.

Maybe we could put the basis blocks into the collection manager that could be renamed as "block manager" for all the people that needs a physical place to it and implement a beautiful "shortcut circle" with basis and build, verify and upload.

What do you think?

[jojo535275]

Hola Carlos

For the "block manager" window i like the idea.

For the middle mouse floating toolbar, it is also a good idea! but users have to be equipped with a good mouse.

In my case, my middle button is the mouse wheel (it is a bit too force resistant, i have low pressure in my finger :-) ) But i can ask my lady to offer me a good quality mouse for Christmas :-)

for that "mouse sticked " tool bar, we can have 7 user customisable buttons (eg:)

With some luck we can find a piece of code to implement that toolbar without to much effort! Or as kritta is open source, maybe we can modify their code to make our simpler toolbar!

[cavearr]

dont worry for the layout , when we have the idea clear, we define graphics, mockups etc we dont need to copy code for this!

Instead middle button we could use right mouse button because in icestudio we dont use for anything.

The most important thing is that we define the best concept.

[jojo535275]

I am using the right button for navigating in the workspace (dragging left/right/up/down).

In fact, for the toolbar which open under the mouse, it is difficult to say if i will, easily, get used to-it !

And I am sure that i will like a fixed toolbar, (potentially movable to another place automatically switching from horizontal to vertical depending at which board of the window you place it).

So, i thinks it is a "safer" starting point for me!

Let's see the idea Alex is preparing for us !

Have a good evening guys!

[cavearr]

yes! all your feedback is fantastic, we build together a great tool! like Steve Jobs sais: “Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.”

[mSlider]

Hi guys,

This is what I have in my head about the "basic" buttons... 1-click access and color-match with the "real" blocks, desaturate colors when no hover for no distraction. *the icons can be dead simple circles as little as we want that when hover shows down the real block.

Another idea in the line of @cavearr and @jojo535275 is like an "apple-dock" but in the top bar... with dimable and/or scalable icons.

• About using the middle or right mouse button, prefer the right button, but only for experienced users, for beginners I think is better to have visually the menu in the screen.

Have a good night!

[cavearr]

Good night! i need to thinking in it. The way is good but i don't like it 100%. Give me some time to review with a designer friend, ok?

[mSlider]

Don't worry @cavearr these are only brainstorming mockups... for take ideas and see if it can work or not.

Finally sure we find something that most of all will be comfortable with.

Have a nice day guys!

[jojo535275]

Hola Guys,

@Carlos: Yes, "Making things simple is difficult but worst-it" is exactly my state of thinking these days! To reach this same objective, I' am also working hard about the "information panels" but it is another story, in another thread ;-)

@ Alex: Once Again, your graphic design are really nice! The colours of your basic buttons are not disturbing at all! Perfect! i think there is no need to move a bit down the "circle buttons" when the mouse passes over ( showing the real block "as a tooltip" is sufficient). This will help for keeping the menu-bar height small (as Carlos thought well). In the following light-rework of last Alex version, i also made the menu bar translucent (to see a bit the circuit design behind, But i am not sure that this is better/needed)

Well now, we are starting to have a lot of choices! Personally i think i will now refrain myself to add fuel :-) All these designs are already better than the one we are using in icestudio now ! So i am ready to contribute to the final choice/vote/...

Have a good day!

[cavearr]

Hi guys! after thinking and trying different ways with your ideas i closed with the last WIP option, i hope this like you!

The problem is that we need to maintain the current "style" to make with a coherence style. With this kind of changes the possibiliy of convert icestudio in iceFrankenstein is very hight!

I'm putting finally the shortcuts for verify, build and upload in the bottom-right in the footer bar, because i think this is the "natural place" in this bar we put the board info, the board selected.... i think this is the logic place for "board actions"

Icons are a proposal while we don't have any better icon.

Here in action!:

For the toolbox, in the same way than before, has no sense of use other "language" that we are using, for this i think the better option is to use the sema dialog that current basis menu, but floating.

You can activate with CTRL+SPACE (if you prefer other combination tell me! but i think in short we need to define a configurator for customize shortcuts, for this i only think in a soft shortcut for the moment).

I think this is a goof way for this toolbox, because if you have a big screen, witch of other ways (topbar, leftbar...) are not usefull because you need to go far away from you are in the design to do click, with this option you have your basis toolbox where you have the mouse.

This is a proposal that i think will be usefull to try, if you dont like it , we could remove it or change.

For last i reduced the height of the topbar.

Now i'm working in the collection manager, for searching and panel hidding, in short i'll commit the new changes!

[mSlider]

HI @cavearr,

Good work!!! This morning when I wake up I think about it and arrive at the same conclusion (why if we try to put the "basic" menu in a popup?). Jajajaja... I think is because I'm working in the "search label" popup and it is very handy.

The Icons for the "verify", "Build" and "upload" I think are perfect, and the place too. Now the top bar right will be "empty" with a neat looking. (When the collection manager can be initialized at startup)

I'll will try it as soon as posible and comment if there is something... this always encourage to continue working in icestudio!

Alex (mSlider)

[cavearr]

Thanks @mSlider ! syncrhonized minds! :)

Work hard in the search tool this is a very important and useful feature, this days i'm thinking in it. Work hard, but enjoy! this is the most important thing!

I'm labeling this issue as "WIP" ok? maintain open for future comments.

If you want you could open a new issue with the taskbar to follow your advances or comment when you want. I think is very useful maintain this kind of threads for thinking and future ideas, is very easy to follow the thinker process.

[mSlider]

Hi @cavearr,

OK, yes these kind of post are really illustrative...

At the moment I've just installed the new WIP, and try your mods... it's awesome the "basics" popup. Super fast!!!

The only thing I've noticed is in the light theme, the color of text is still clear. Put a pic to show you.

Nothing a little css can't fix! /styles/menu.css -> Line 198 -> color: rgb(3,3,3);

I continue with the "Label finder"...

[mSlider]

Now seems like the light theme is ok but the dark theme shows greyed.

I'll fix it and make a new pull request ASAP.

Alex (mSlider)

[jojo535275]

Hola Carlos,

So i tried you wip and it is great, opening the "basic" pop-up at mouse positions is really cool! But i have few comments;

• For the Shortcuts for verify, build and upload in the bottom-right in the footer bar it is a good idea. But as the icons may not be "straightforward" for beginners, it will be nice to add some tooltips with the texts "Verify", "Build" and "Upload" (which appear when mouse is over the buttons)

• Also if we add new functions with new shortcuts, it will be nice to add those function to the top menu. for example: if we do this, we can fully remove the basic menu on the right of the toolbar.

• that being said,to open the basic menu i will prefer a short click on the right button ( mouse down, time<300ms, mouse up ) remark: the right button is already used for navigation in workspace butt with a different "mouse sequence" (mouse down mouse move, mouse up)

• and to close that basic menu, it will be nice to have a cross in the top right of that menu

• The closing of this pop-up windows (basic menu, label finder) could also be done with the Escape key. With a logic : "Last opened = first closed (by the next "escape key" press). "Escape" option comes in addition of other closing options (not a replacement)

All these are just ideas they do not take in account any kind of implementation difficulties :-) But for some of those point i should be able to update the code myself. So if you guys want i can try to give an hand for implementing some changes

have a good night

Joaquim

[cavearr]

Hi Alex,Joaquim! your feedback is very welcome! never fails! ;)

I'll try to reply all your points:

1) Tooltips are a good idea, ¡next to implement!

2) The basis option in menu will be removed in the next collection manager version (in next days), i'm putting this blocks into the collection manager, for the moment i don't remove for people that don't know the new context menu.

3) The mouse actions was my first attemp to implement, i think first in a left double click over the sandbox, the problem is that mouse management is not very well implemented and could be conflicts with current joint.js events (the graphics library used currently), i have wip with this feature and when will be stable i'm pulling it.!

4) This is a good idea!

5) This is a good idea to implement with all goes through plugin api, for the moment the code will be very "ugly" to do this, but it is a great idea for next steps!

Thanks a lot! and dont stop to think in how to improve Icestudio!

[Obijuan]

I think this issue can be closed now. Feel free to reopen it again if you consider it needs more discussion