UI improvements/tiny fixes

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

UI improvements/tiny fixes

Post by drakinite »

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.
Image
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.
Image

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. :P
Image
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:
Image

Code: Select all

/* skin_checkbox_add.less */

/* Checkbox background-color transition animation */
.animCheck input[type="checkbox"]:checked {
	transition: none;
}
.animCheck input[type="checkbox"] {
	border-radius: @checkBoxBorderRadius;
	transition: background-color @animationTime ease-in-out;
}

/* Checkbox border transition animation */
input[type="checkbox"]:before {
	transition-property: transform, height, width, top, left, border-color;
	transition-duration: @animationTime;
	transition-timing-function: ease-in-out;
	transition-delay: 0s;
	border-radius: @checkBoxBorderRadius;
	opacity: 0;
}
input[type="checkbox"]:checked:before {
	transform: rotate(-45deg); // scale(0.9);
	height: @checkboxSize/3;
	width: @checkboxSize*0.85;
	top: @checkboxSize*0.15;		
	left: 0;
	border-color: @baseColor;
	border-top-style: none;
	border-right-style: none;	 
	opacity: 1;
}

/* Radio buttons */
input[type="radio"]:checked:before {
	height: @checkboxSizeOuter/2;
	width: @checkboxSizeOuter/2;
	top: -0.5px;
	left: 0;
	border-color: @baseColor;		
}
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Ludek
Posts: 4945
Joined: Fri Mar 09, 2007 9:00 am

Re: UI improvements/tiny fixes

Post by Ludek »

Thanks,
added as https://www.ventismedia.com/mantis/view.php?id=17085 and going to incorporate the suggested changes.
Ludek
Posts: 4945
Joined: Fri Mar 09, 2007 9:00 am

Re: UI improvements/tiny fixes

Post by Ludek »

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?
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: UI improvements/tiny fixes

Post by drakinite »

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
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Ludek
Posts: 4945
Joined: Fri Mar 09, 2007 9:00 am

Re: UI improvements/tiny fixes

Post by Ludek »

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
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: UI improvements/tiny fixes

Post by drakinite »

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?
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Ludek
Posts: 4945
Joined: Fri Mar 09, 2007 9:00 am

Re: UI improvements/tiny fixes

Post by Ludek »

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
Ludek
Posts: 4945
Joined: Fri Mar 09, 2007 9:00 am

Re: UI improvements/tiny fixes

Post by Ludek »

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 ;-)
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: UI improvements/tiny fixes

Post by drakinite »

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.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: UI improvements/tiny fixes

Post by drakinite »

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! :grinning:
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. :slight_smile:

Image

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
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Ludek
Posts: 4945
Joined: Fri Mar 09, 2007 9:00 am

Re: UI improvements/tiny fixes

Post by Ludek »

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!
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: UI improvements/tiny fixes

Post by drakinite »

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

Just wondering, what does SVN stand for?
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Peke
Posts: 17446
Joined: Tue Jun 10, 2003 7:21 pm
Location: Earth
Contact:

Re: UI improvements/tiny fixes

Post by Peke »

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/
Best regards,
Peke
MediaMonkey Team lead QA/Tech Support guru
Admin of Free MediaMonkey addon Site HappyMonkeying
Image
Image
Image
How to attach PICTURE/SCREENSHOTS to forum posts
dtsig
Posts: 3588
Joined: Mon Jan 24, 2011 6:34 pm

Re: UI improvements/tiny fixes

Post by dtsig »

So you use Subversion rather than Git? Any reason?
Where's the db and ini stored
Reporting Bugs
Where tags are stored

Not affiliated with MediaMonkey ... just a RABID user/lover
DTSig
Peke
Posts: 17446
Joined: Tue Jun 10, 2003 7:21 pm
Location: Earth
Contact:

Re: UI improvements/tiny fixes

Post by Peke »

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.
Best regards,
Peke
MediaMonkey Team lead QA/Tech Support guru
Admin of Free MediaMonkey addon Site HappyMonkeying
Image
Image
Image
How to attach PICTURE/SCREENSHOTS to forum posts
Post Reply