MediaMonkey forum

Since I've been spending a lot of my free time on MM and exploring the code, I'll probably end up making a bunch of little mini-fixes on the UI, so I thought I'd just make a thread of these for y'all.

First up: On the Material Design skins, the animated checkboxes get an odd "flashing" appearance when they're being unchecked. At first I thought this was because an animation was playing twice by mistake, but it seems to have been caused by the checkbox's top + right borders being animated back into view while it's rotating.

I changed the transition property to be everything except for opacity, and gave the unchecked item an opacity of 0 and checked an opacity of 1.
This makes the opacity immediately change to 0 when it's unchecked, removing the animation. I then added a background-color transition to the checkbox itself, which only plays during the unchecking process, so it gets a nice fade-out. I think it's much better now.


And then, I made a very small tweak to the radio buttons. They are slightly off center, which was mildly irritating enough to fix it.

All I had to do was change their height and width to @checkboxSizeOuter/2 instead of @checkboxSize - 2*@checkboxBorderSize; and give them top: -0.5px. Now it's perfectly centered:

Thanks,
added as https://www.ventismedia.com/mantis/view.php?id=17085 and going to incorporate the suggested changes.

Can you please share whole skin_checkbox_add.less for the MD skin?

I cannot get the same results with your code as on your screenshots above.
Also, for me radio buttons are perfectly centered and when I add your tweak then it gets slightly off center.
I believe that calculation @checkboxSize - 2*@checkboxBorderSize; is correct.
Can you explain why you used top: -0.5px; and @checkboxSizeOuter/2; for height and width ??
I guess that -0.5px won't work for a different @units1_0 value? i.e. different font sizes etc.

I am testing on 1920/1080px display with 'Make text size bigger' and 'Make everything bigger' set both to 100% -- could this be the difference?
My suspicious is that you have the radio button sligtly off-centrer just because rounding a pixel value up or down when calculating the width?
Could you try to use our original code for radio buttons but change
@checkboxSize : @units1_0 - @checkboxBorderSize;
to an integer value or rounding it up or down whether it makes the difference?

Hmmmm. I believe your suspicions are correct, it is probably due to subpixel rounding. And yeah, I just checked on 100% scaling and it is perfectly centered then...

The reason I did @checkboxSizeOuter/2 was because the radio buttons' height and width were 15px, so I figured it would need to have a size exactly half of @checkboxSizeOuter. Now I'm not sure how to get it centered on all scaling options. Maybe the checkbox outer size should be 16px, so it's more evenly divisible?

Also, with the @checkboxSize : @units1_0 - @checkboxBorderSize: That's what I already have in the code at the moment.

Here is my skin_checkbox_add.less: https://puu.sh/GNvLl/af6a8b081a.less

Hmm, by evidence the "Make text size bigger" windows settings does the difference.
- at 100% the radio buttons are perfectly centered.
- at 125% they are slightly off center (like on your screenshot)
- at 150% thaey are perfecly centered again

Yup.

I just did a little bit more testing, and it looks like giving input[type="radio"]:checked:before a top: and left: of 0.15px seems to do the trick. Looks perfectly centered to me on all scaling modes. Let me know if you see the same.
Do the checkboxes work for you?

Thanks, testing with you code now and the checkboxes really looks better, I will definetelly use it

I see that you commented out your code for radio buttons.
I guess you are right that @checkboxSizeOuter should be always even value, which currently isn't at 125% where it is 15px (odd)
I will fix this, thx

Hmm, setting checkBoxSize to even value does not solve anything as the value is same for all scalings (and just internally multiplied by the scaling coeficient) :-/
Your trick with top/left 0.15px seems quite add hoc and also does not work for all the scaling values either (e.g. at 109% it is still a little bit off center), but because 109% is not a common value then I guess I will use it as a temporal workaround for the issue

Oh, jeez, I didn't realize it was possible to scale with values other than 100/125/150/175/200.

At that rate I suppose the best thing that can be done is whatever looks the best on as many scaling values as possible.

Thanks for taking my suggestions; Hopefully there's something that at least works with as many scaling modes as possible. The
0.15px one is definitely ad-hoc, but that's the best I could come up with so far. Also I just saw your reply about the checkboxes - I'm glad you like it!
I've also got a new one (I was in the middle of writing it when you replied initially)

Another improvement on skins - The top-right window buttons could only be clicked properly when you mouse over the icons themselves, instead of the entire space that they are contained by. The miniplayer switch button already had a 7px vertical padding that let it be clicked from the entire top bar, so I gave the sysbutton class the same amount of padding (and took away its margins). This makes the window buttons much more easily clickable. In addition, I gave the material design skins some Windows-like hover colors, to make it feel more native.

For some reason, the buttonsContainer class had a "right" attribute of 2px, which meant that you could not click the exit button when dragging the mouse all the way to the top-right corner of the screen (which all other apps can do). Removing that bit of margin makes it much nicer in my opinion. The Black Monkey and Monkey Groove skins could also benefit from a similar hover color, but I'm not as familiar with those designs so I don't know what would look good on those skins. But since I changed skin_mainwindow, they still have better clickability with the modification.



windowtitle.html (changes are commented): https://puu.sh/GNwXZ/fe5291750b.html
skin_mainwindow.less (changes are commented): https://puu.sh/GNwQV/4c07829dd5.less
Material Design Dark skin_mainwindow_add.less: https://puu.sh/GNwSV/d277950b6d.less
Material Design skin_mainwindow_add.less: https://puu.sh/GNwQ4/1fc20a76be.less

I like your changes to the sys buttons!
So I commited the changes to SVN (will be in build 2275) together with your comments.

Thanks for contributing!

You're welcome, I'm glad you like them!

Just wondering, what does SVN stand for?

drakinite wrote: ↑Sat Nov 14, 2020 3:37 pm Just wondering, what does SVN stand for?

SVN = https://subversion.apache.org/ One of most recent reads https://blog.codota.com/svn-vs-git/ and https://svnvsgit.com/

So you use Subversion rather than Git? Any reason?

Hi,
That is question for Jiri. I guess Git was not available at time MM started to develop and it worked since with no issues. It is easy to navigate and check changes/revisions and debug for regressions.