Add a new window decoration to MDISubWindows

[BaraMGB]

Okay, this is only a basis for a discussion. Reference to #2450

Greetings, Steffen

[programnoir]

I'll at least try to help dress it up nice and pretty with some suggestions by referring to the coding conventions. https://github.com/LMMS/lmms/wiki/Coding-conventions

*** please note that I am referring to your commit's new line numbers!

My suggestions for SubWindow.h:

• Please swap lines 31 and 32 so that they are sorted by name. Thank you.
• Please move line 29 so that it comes two lines after line 32. I noticed your intentions. Thank you.
• This isn't your fault, but could you please put spaces around the = signs on line 44? Thank you.

And for SubWindow.cpp:

• Please sort lines 29 through 34 by name and move line 35 to line 36. Thank you.
• Forgive me if I'm mistaken, but if lines 53 and 56 are objects, please remove the space between the name of the objects and their respective opening parenthesis. Thank you.
• From line 54 and onward, please add spaces after the commas in the parameters to make them more readable. Thank you.
• Please break line 63 into two lines so that the length doesn't go beyond 80 characters. Thank you.
• Lines 53 and 64 appear to be hard-coding colors. I understand that we're still working on CSS implementation. I'm listing it here as part of this to-do list for convenience sake.
• Please add spaces around the -> in line 67, if possible. Thank you.
• Please decrease the indentation of lines 70 through 75 and put spaces around = signs. Thank you.
• This isn't your fault, but could you fix the spacing in line 102? Please remove the space between "if" and "(". Thank you.
• Line 104 is having coding convention troubles, if you would please. Also not your fault. Thank you.

Hope this helps! Thank you.

[BaraMGB]

Okay, I've changed the suggestions you gave. Thank you.

[Umcaruje]

I fiddled around with your code, and paired it up with a custom theme + color + icons, and it looks amazing!

Here's the stuff I changed:

• I defined a new Qcolor called c, and used it to easily change the color:

QColor c("#2c974f");
QBrush brush(c);

• I also set the pen to Qt::NoPen, so the windows are borderless. I also commented out lines 60, 61 and 62, since they were no longer needed.
• I also changed the QRectF rect(0,0,width()-1,20); to QRectF rect(0,0,width(),20);, to work nicely with the borderless design.
• Made new pixel perfect icons in inkscape.
  Get them: icons.zip

[rubiefawn]

That's gorgeous!
On Jan 27, 2016 6:26 AM, "Umcaruje" [email protected] wrote:

[image: screenshot from 2016-01-27 14 07 01]
https://cloud.githubusercontent.com/assets/6282045/12614537/db4a5352-c500-11e5-922d-e1782b0c74fd.png

I fiddled around with your code, and paired it up with a custom theme +
color + icons, and it looks amazing!

Here's the stuff I changed:

• I defined a new Qcolor called c, and used it to easily change the
  color:

QColor c("#2c974f");
QBrush brush(c);

I also set the pen to Qt::NoPen, so the windows are borderless. I also
commented out lines 60, 61 and 62, since they were no longer needed.

I also changed the QRectF rect(0,0,width()-1,20); to QRectF
rect(0,0,width(),20);, to work nicely with the borderless design.

*Made new pixel perfect icons in inkscape.
Get them: icons.zip https://github.com/LMMS/lmms/files/106637/icons.zip

—
Reply to this email directly or view it on GitHub
#2516 (comment).

[zonkmachine]

👍

[RebeccaDeField]

@Umcaruje I can't tell from the screenshot, but is there any variation of the shade when the title bar is active vs inactive? That might add some more usability.

[tresf]

@Umcaruje I can't tell from the screenshot, but is there any variation of the shade when the title bar is active vs inactive? That might add some more usability.

👍 Good catch.

[Umcaruje]

@Umcaruje I can't tell from the screenshot, but is there any variation of the shade when the title bar is active vs inactive? That might add some more usability.

Nope, that needs to be implemented, and also buttons don't change on hover, but I think that'll be solved by CSS.

[BaraMGB]

Okay, I added some QPropertys which can be modified per style.css. Have a look.

[IvanMaldonado]

Tested, it works for me

Manjaro 15.12 Capella
Kernel: x86_64 Linux 4.1.18-1-MANJARO

[RebeccaDeField]

Just made a mockup for title bars that I think would suit the current default theme well. Please take a look.

[dednikko]

I like it. What will the difference be for the title bars that are IN focus
vs OUT of docs?

On Tue, Feb 23, 2016, 5:20 PM Rebecca DeField [email protected]
wrote:

Just made a mockup for title bars that I think would suit the current
default theme well. Please take a look.

[image: titlebaridea]
https://cloud.githubusercontent.com/assets/7960169/13270155/04748018-da41-11e5-9eaf-b878f227c6de.png

—
Reply to this email directly or view it on GitHub
#2516 (comment).

[dednikko]

*out of focus

On Tue, Feb 23, 2016, 5:45 PM Nikko Rocksalot [email protected]
wrote:

I like it. What will the difference be for the title bars that are IN
focus vs OUT of docs?

On Tue, Feb 23, 2016, 5:20 PM Rebecca DeField [email protected]
wrote:

Just made a mockup for title bars that I think would suit the current
default theme well. Please take a look.

[image: titlebaridea]
https://cloud.githubusercontent.com/assets/7960169/13270155/04748018-da41-11e5-9eaf-b878f227c6de.png

—
Reply to this email directly or view it on GitHub
#2516 (comment).

[RebeccaDeField]

Out of focus

In focus

[dednikko]

Looks clear to me! Thanks!

On Tue, Feb 23, 2016, 7:19 PM Rebecca DeField [email protected]
wrote:

[image: titlebaridea]
https://cloud.githubusercontent.com/assets/7960169/13272518/9369d2a4-da51-11e5-893f-0955b6521a39.png
Out of focus

[image: titlebaridea2]
https://cloud.githubusercontent.com/assets/7960169/13272519/936b13a8-da51-11e5-8e58-7b855a69ba5b.png
In focus

—
Reply to this email directly or view it on GitHub
#2516 (comment).

[BaraMGB]

@RebeccaDeField you have a gradient in there, right? Okay, I add that property soon. And correct the typo @Umcaruje :-)

[RebeccaDeField]

@BaraMGB 👍

[Umcaruje]

I worked on this a bit and made a new branch on my fork:
master...Umcaruje:subwindow

I simplified the code a lot, so now we only have one rectrangle for the title, also implemented @RebeccaDeField's color idea. I have yet to fix the titles and the buttons.

Screenshot:

Review and ideas welcome. I'll post around the challenges of proper title rendering and buttons a bit later.

[RebeccaDeField]

@Umcaruje Great work! 👍

My 2 cents: this may be because you have zoomed-in your screenshot, but I feel that the rounded corners are a bit jagged. Is there anything we can do to smooth the corners out a bit? If not, it might be best to keep the corners pointed/straight.

[claell]

@RebeccaDeField I noticed the same regarding the corners. I don't know, what looks best, round or pointed, but I think even pointed ones should be at least rounded a bit.

[RebeccaDeField]

@claell Perhaps a 2px radius will look better than 3px.

[claell]

Maybe, I don't know. Cannot imagine what would look better, but I guess it would be worth a try.

[RebeccaDeField]

@Umcaruje Could you try a 2px radius on the corners? If it still doesn't look enough smooth, I think we should go with straight corners.

[Umcaruje]

@RebeccaDeField are you talking about the bottom or upper corners? Since this is a hack, and we're drawing over the actual window, my control of this is very limited. I'm actually drawing non-rounded rectrangles and lines with the code.

[BaraMGB]

Okay, I have to look how this works.

[Umcaruje]

https://help.github.com/articles/adding-collaborators-to-a-personal-repository/

[BaraMGB]

Done

[Umcaruje]

Ok, done. I've fixed the identation and rephrased some of the comments to make them clearer. I'll leave open for 24 hours, if someone else has any more input, and afterwards, I'm merging 🎉

[BaraMGB]

Has someone test this on Mac and Windows?

[Umcaruje]

Has someone test this on Mac and Windows?

Nope. @tresf could you test this on a mac?

[Umcaruje]

https://drive.google.com/file/d/0B49dcRGtm8vJUGFzVElDUmxmX1U/view?usp=sharing

Here's a 32bit windows build.

[Umcaruje]

A friend of mine tested it on windows 7, all looks well:

[tresf]

👍 @Umcaruje was this Qt4 or Qt5 being tested?

[Umcaruje]

👍 @Umcaruje was this Qt4 or Qt5 being tested?

Qt4, when I tried to install the qt5 packages, my VM couldn't find them in the trusty ppa.

[midi-pascal]

@Umcaruje You can easily install Qt5 from the Qt site (This is what I did to have both).
Qt5 can be installed alongside with Qt4 with no interference.
My 2 cents 😉

[Umcaruje]

You can easily install Qt5 from the Qt site (This is what I did to have both).

Yes, I know, but this is for windows builds, which use a specific custom mingw PPA

[tresf]

If you have dated PPAs...

sudo add-apt-repository ppa:tobydox/mingw-x-trusty
sudo apt-get update
sudo apt-get install mingw32-qt5-base mingw64-qt5-base

[Umcaruje]

um, after some research, the correct packages are called mingw32-x-qt5base and mingw64-x-qt5base

I'll update the tutorial on wiki.

Edit: the current way of making qt5 executables is also wrong. You can call qt5 building by doing

../cmake/build_mingw64.sh -qt5

or

../cmake/build_mingw32.sh -qt5

I'll update this as well.

[tresf]

Edit: the current way of making qt5 executables is also wrong. You can call qt5 building by doing

Not, it is not wrong. That's just a helper to set the QT5 export.

[tresf]

The correct packages are called mingw32-x-qt5base and mingw64-x-qt5base

👍

[Umcaruje]

Ok, its been over 24 hours, this has been tested on both linux and windows, and this PR has been open for enough time for devs to make remarks. That said, the travis builds also passed, so I'm merging this.
🎉 🎉 🎉 🎉 🎉

[BaraMGB]

Thanks to all! Especially to @Umcaruje for the great help. I hope this makes a lot of people happy. 🎉

[RebeccaDeField]

Thank you to everyone who worked hard to make this a reality! I think I can speak on behalf on all of the themers when I say this feature really improves the interface :)

[IvanMaldonado]

Been waiting for this like a kid for Christmas for so much time. Thank you!

[Umcaruje]

Thanks on the kind words, but I really have to thank @BaraMGB for putting up with this PR, and @RebeccaDeField for providing the graphics. This is a prime example of teamwork and I'm very glad that we finally implemented this much wanted feature.