MPA

In the new MPA, we will different UI for the OS X and Windows versions.
The UI difference will affect mainly the side bar and top bar.

For each version, we are going to use the system traffic icons, and get rid of the app's window frame.

Notes:
We should use the traffic icons from the OS, if no icons are provided by the OS, let me know and i'll ask the designer for icons.

Also, in the sketch files you will find several versions of the side menu, we are going for the version with the logo on the top and the user avatar at the bottom.
You can also see those in the screenshots below.

The sketch file to use is:
https://www.dropbox.com/s/so30xk9ojhdmo48/Desktop%20app%20new.sketch?dl=0

On Mac:
This app top bar goes away, the traffic icons are included within the app itself.
On Mac, the logo of the side menu is slightly moved down in order to leave some space for the traffic icons, the side menu's categories positions are also adjusted accordingly. 

This bar goes away:


New layout:



On Windows:
The traffic icons are also included in the default position, and the system app top bar is removed.
On Windows, the position of the logo in the side menu is centered in the top of the side menu, like it was before making the changes to the side menu.


To-do:

1. Use of the system icons:
If possible we should use the icons provided by the OS.

2. Add flag for different versions:
We should add a flag so that the OS X and Windows versions are use the different layouts and icons.

3. Side menu modifications:
To support those new UI's, the user icons which were located in the top bar should now be located in the side menu (Orange vertical bar) 

Also, the size of the side menu (width) should be increased to match the design of the sketch file.

One more detail, the gradient of the side menu has been inverted, the bright section is now on the top and the dark section is on the bottom.

The juce framework doesn't provide the ability to use native buttons.
so there are 2 solutions, please choose one: 
1- Use custom component  with custom buttons: one style for mac and another one for Windows

2- Native: 
macOS 10.10 and above provide native api by which we can make the title bar transparent.
screenshot:


I haven't checked the windows native api, and I am not sure but I think that there is a chance to do same thing for windows.
Windows 10 title bar example:


Windows 7 title bar example:

I would need to know about your researches of the Windows API in order to take the final decision.
Meanwhile below are some questions:

Is it possible to use 2 different solutions for Mac and Windows, for example solution 2 for Mac and solution 1 for Windows?

What would happen with build being used in version prior to OS X 10.10?
Is it just going to display a non transparent tittle bar, or should we make special adjustments to the layout to cover this case? (or do we need to provide separate builds for OS X 10.10 and earlier versions?)

1- Windows: 
it turned out that is doesn't provide any api for that. there is some way to draw over title bar for some version of windows, but it will be very hard to introduce that into juce framework, and may require changing the juce implementations.
2- use 2 different solutions
yes, I think it's possible. by using flags at compile time
3- OS X 10.10
hmm, very good question.
actually I haven't changed the osx target version when I tested transparent tittle bar, so the same build should work on previous versions. but we should check it out (I can send you a build if you have old version of osx, or I can install it on virtual machine)
4- special adjustments
yes, the special adjustments are needed based on the osx version.
this type of adjustments is defined based on what solution we will use when v. osx < 10.10.
if we will use the native title bar then current layout will be used and the left menu will not be moved down.
if custom, then native buttons will be replaced by custom buttons.

Ok so let's proceed with the 2 different solutions:

• Native for OSX
• Custom components with custom buttons for Windows.

I will send you the icons for Windows shortly.
I think i have a 10.8 OS X to test the result on older OS X versions.

done

Feedback:

Beside moving the user icons to the side menu, other small adjustments are needed:

Adjust size of icons:

The logo and categories sizes should be slightly increased, please compare with the sketch file.

Adjust margins:

The traffic icons positions (OS X) should be moved down by a few pixel.
They should be approx 15 px below the top line of the app:


Invert gradient:

The gradient of the side bar should be inverted, this is needed because the red traffic icon on OS X is not well visible in the orange section of the side menu

Feedback 2:

1. Windows version:
Let's complete the windows version by compiling the latest changes.
Also, the color of the traffic icons should be adjusted, and the should vertically centered in the middle of the top bar.

2. Fix search bar: (done)
In the search bar, it is not possible to drag the mouse to highlight the text entered, this moves the app around.
See if you can fix this. 

3. Align traffic icons on OS X:
In Daniel's branch, we have made some changes to the app layout.
We should now align the traffic icons to the top bar items.
The traffic icons should be aligned with the "sound library" tittle and all the other elements of the top bar.
See the screenshot below.


4. Align logo on Windows:
In the Windows version, the logo should be aligned with the rest of the top bar elements.
The categories icons (sound library, projects) should also be adjusted so that the white square of the sound library starts exactly below the top bar.

Expected:


Currently:

done