[vlc-commits] [Git][videolan/vlc][master] 10 commits: qml: try to not exceed `min(width, height) / 2` as radius in `ScrollBarExt.qml`
Steve Lhomme (@robUx4)
gitlab at videolan.org
Mon Aug 11 05:54:33 UTC 2025
Steve Lhomme pushed to branch master at VideoLAN / VLC
Commits:
d5e8b0fb by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: try to not exceed `min(width, height) / 2` as radius in `ScrollBarExt.qml`
This does not effectively change anything, as the `Rectangle` clamp it
anyway, but it still worth to have. The style wants maximum radius in
this case.
I specifically did not use `Math.min(width, height) / 2`. It can be
assumed that a horizontal scroll bar always has width greater than
height, and vertical scroll bar always has height greater than width.
Even if this is not the case (such as, when it is tiny), again the
behavior would not be different.
This came from the Qt's own implementation for its "Basic" style as is.
Ideally this should be sent to the upstream, but it is not important.
- - - - -
d42f3aee by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: divide radius by two in `ScanProgressBar.qml`
This does not effectively change anything, as the `Rectangle` clamp it
anyway, but it still worth to have.
As the documentation states in `RoundButton`, radius can not be bigger
than half of minimum of width and height:
> To create a completely circular button (the default), use a value that
> is equal to half of the width or height of the button, and make the
> button's width and height identical.
Not dividing by two can be considered a mistake. I specifically did not
use `Math.min(width, height) / 2`, as it can be assumed that this
horizontal progress bar always going to have width bigger than height.
Even if this is not the case, again the behavior would not be different.
- - - - -
f5f655ca by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: divide radius by two in `PlayCover.qml`
This does not effectively change the rounding, as the `Rectangle` clamp
it anyway, but it is necessary to have because the shadow depend on it.
As the documentation states in `RoundButton`, radius can not be bigger
than half of minimum of width and height:
> To create a completely circular button (the default), use a value that
> is equal to half of the width or height of the button, and make the
> button's width and height identical.
Not dividing by two can be considered a mistake. I specifically did not
use `Math.min(width, height) / 2`, as this rectangle is supposed to have
the same width and height (it is supposed to be a circle).
- - - - -
693ac411 by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: do not manually set the radius of shadow in `PlayButton.qml`
Instead of dividing radius by two, I just moved the
shadow for it to be a child of the outer circle, so
it can get the correct radius from its parent directly.
Since the shadow uses `z: -1` inherently, we should
not have a stacking issue here. The shadow can be
expected to always rendered under the outer (and
inner) circle.
- - - - -
8f0b7e05 by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: divide radius by two in `PlayButton.qml`
This does not effectively change the rounding, as the `Rectangle` clamp
it anyway, but it is necessary to have because the shadow depend on it.
As the documentation states in `RoundButton`, radius can not be bigger
than half of minimum of width and height:
> To create a completely circular button (the default), use a value that
> is equal to half of the width or height of the button, and make the
> button's width and height identical.
Not dividing by two can be considered a mistake. I specifically did not
use `Math.min(width, height) / 2`, as this rectangle is supposed to have
the same width and height (it is supposed to be a circle).
- - - - -
a2b9159e by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: divide radius by two in `CheckButton.qml`
This does not effectively change anything, as the `Rectangle` clamp it
anyway, but it still worth to have.
As the documentation states in `RoundButton`, radius can not be bigger
than half of minimum of width and height:
> To create a completely circular button (the default), use a value that
> is equal to half of the width or height of the button, and make the
> button's width and height identical.
Not dividing by two can be considered a mistake. I specifically did not
use `Math.min(width, height) / 2`, as this rectangle is supposed to have
the same width and height (it is supposed to be a circle).
- - - - -
9b2adf9c by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: divide radius by two in `MusicArtistDelegate.qml`
This does not effectively change the rounding, as the `ImageExt` clamp
it anyway, but it is necessary to have because shadows depend on it.
As the documentation states in `RoundButton`, radius can not be bigger
than half of minimum of width and height:
> To create a completely circular button (the default), use a value that
> is equal to half of the width or height of the button, and make the
> button's width and height identical.
Not dividing by two can be considered a mistake. I specifically did not
use `Math.min(width, height) / 2`, as this image is supposed to have the
same width and height (it is supposed to be a circle).
- - - - -
76896436 by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: fix wrong image radius in `MusicAllArtists`
`ImageExt` radius should not use picture width, as
it represents source size. Postprocessing is done
on the item itself, so it should use the item size.
This fixes the shadow appearing bugged in the
artists page.
- - - - -
959b0584 by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qt: do not divide radius by two in `RoundedRectangleShadow.frag`
I realized that this is a mistake, the shadow implementation
already operates the same way as `Rectangle` or `ImageExt` does,
so we should not need to divide by two.
I initially thought that we needed this because of unmatched
radii in `MusicAllArtists` between the shadow and the image
when I was experimenting, but turns out it was a bug in the
radius itself which is now fixed by 639a4819.
- - - - -
5df4103b by Fatih Uzunoglu at 2025-08-11T05:38:00+00:00
qml: clamp radius in `RoundedRectangleShadow.qml`
This is already done by `Rectangle` and `ImageExt`, we can also do it
here.
As the documentation states in `RoundButton`, radius can not be bigger
than half of minimum of width and height:
> To create a completely circular button (the default), use a value that
> is equal to half of the width or height of the button, and make the
> button's width and height identical.
- - - - -
10 changed files:
- modules/gui/qt/medialibrary/qml/MusicAllArtists.qml
- modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
- modules/gui/qt/player/qml/controlbarcontrols/PlayButton.qml
- modules/gui/qt/shaders/RoundedRectangleShadow.frag
- modules/gui/qt/shaders/RoundedRectangleShadow_hollow.frag
- modules/gui/qt/widgets/qml/CheckButton.qml
- modules/gui/qt/widgets/qml/PlayCover.qml
- modules/gui/qt/widgets/qml/RoundedRectangleShadow.qml
- modules/gui/qt/widgets/qml/ScanProgressBar.qml
- modules/gui/qt/widgets/qml/ScrollBarExt.qml
Changes:
=====================================
modules/gui/qt/medialibrary/qml/MusicAllArtists.qml
=====================================
@@ -135,7 +135,7 @@ MainViewLoader {
pictureWidth: artistGrid.maxPictureWidth
pictureHeight: artistGrid.maxPictureHeight
- pictureRadius: artistGrid.maxPictureWidth
+ pictureRadius: (width / 2) // "pictureWidth" is image source width, postprocessing is done on item
image: model.cover || ""
fallbackImage: VLCStyle.noArtArtistSmall
=====================================
modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
=====================================
@@ -172,7 +172,7 @@ T.ItemDelegate {
Layout.fillHeight: true
Layout.preferredWidth: height
- radius: width
+ radius: width / 2
source: (model.cover) ? model.cover
: VLCStyle.noArtArtistSmall
=====================================
modules/gui/qt/player/qml/controlbarcontrols/PlayButton.qml
=====================================
@@ -235,20 +235,6 @@ T.Control {
implicitWidth: height
implicitHeight: VLCStyle.icon_medium
- Widgets.RoundedRectangleShadow {
- id: hoverShadow
-
- visible: opacity > 0
- opacity: 0
-
- radius: parent.width
-
- blurRadius: VLCStyle.dp(9)
- yOffset: VLCStyle.dp(4)
-
- color: theme.accent.alpha(0.29)
- }
-
Widgets.AnimatedBackground {
anchors.fill: parent
anchors.margins: -border.width
@@ -261,13 +247,25 @@ T.Control {
Rectangle {
anchors.fill: parent
- radius: width
+ radius: width / 2
gradient: Gradient {
GradientStop { position: 0.0; color: "#e25b01" }
GradientStop { position: 1.0; color: "#f89a06" }
}
+ Widgets.RoundedRectangleShadow {
+ id: hoverShadow
+
+ visible: opacity > 0
+ opacity: 0
+
+ blurRadius: VLCStyle.dp(9)
+ yOffset: VLCStyle.dp(4)
+
+ color: theme.accent.alpha(0.29)
+ }
+
Rectangle {
id: innerRectangle
@@ -277,7 +275,7 @@ T.Control {
anchors.margins: _diminished ? (parent.width / 2)
: VLCStyle.dp(2)
- radius: width
+ radius: width / 2
property bool _diminished: false
=====================================
modules/gui/qt/shaders/RoundedRectangleShadow.frag
=====================================
@@ -115,7 +115,7 @@ void main()
size - compensatedOffset,
denormalCoord,
blurRadius,
- radius / 2.);
+ radius);
fragColor = color * shadow * qt_Opacity; // premultiplied
=====================================
modules/gui/qt/shaders/RoundedRectangleShadow_hollow.frag
=====================================
@@ -119,7 +119,7 @@ void main()
size - compensatedOffset,
denormalCoord,
blurRadius,
- radius / 2.);
+ radius);
fragColor = color * shadow * qt_Opacity; // premultiplied
=====================================
modules/gui/qt/widgets/qml/CheckButton.qml
=====================================
@@ -165,7 +165,7 @@ T.Switch {
anchors.margins: VLCStyle.checkButton_margins
- radius: height
+ radius: height / 2
color: root.color
@@ -194,7 +194,7 @@ T.Switch {
anchors.margins: VLCStyle.checkButton_handle_margins
- radius: height
+ radius: height / 2
color: root.colorHandle
}
=====================================
modules/gui/qt/widgets/qml/PlayCover.qml
=====================================
@@ -88,7 +88,7 @@ Item {
Rectangle {
anchors.fill: parent
- radius: width
+ radius: width / 2
color: "white"
=====================================
modules/gui/qt/widgets/qml/RoundedRectangleShadow.qml
=====================================
@@ -53,7 +53,7 @@ ShaderEffect {
property real yOffset
// Currently different xRadius/yRadius is not supported.
- property real radius: (parent ? (parent.effectiveRadius ?? parent.radius) : 0) ?? 0
+ property real radius: (parent ? Math.max(0.0, Math.min(parent.effectiveRadius ?? parent.radius ?? 0, width / 2, height / 2)) : 0) ?? 0
readonly property size size: Qt.size(width, height)
=====================================
modules/gui/qt/widgets/qml/ScanProgressBar.qml
=====================================
@@ -84,7 +84,7 @@ T.ProgressBar {
implicitHeight: VLCStyle.heightBar_xxsmall
// NOTE: We want round corners.
- radius: height
+ radius: height / 2
visible: !control.indeterminate
@@ -104,7 +104,7 @@ T.ProgressBar {
x: Math.round((parent.width - width) * position)
// NOTE: We want round corners.
- radius: height
+ radius: height / 2
visible: control.indeterminate
color: progressBarTheme.accent
=====================================
modules/gui/qt/widgets/qml/ScrollBarExt.qml
=====================================
@@ -63,7 +63,7 @@ T.ScrollBar {
background: Rectangle {
color: theme.bg.primary
- radius: width / 2
+ radius: (control.horizontal ? height : width) / 2
opacity: (control._shown && control.interacting) ? 1.0 : 0.0
@@ -76,7 +76,7 @@ T.ScrollBar {
implicitWidth: control.interacting ? VLCStyle.scrollBarInteractingSize : VLCStyle.scrollBarNonInteractingSize
implicitHeight: control.interacting ? VLCStyle.scrollBarInteractingSize : VLCStyle.scrollBarNonInteractingSize
- radius: width / 2
+ radius: (control.horizontal ? height : width) / 2
color: theme.fg.secondary
visible: (opacity > 0.0)
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/ca95d657d75ac297aedaf6da3915cf52f4cffd34...5df4103b83aef032052e6e12f959558114cbe5f5
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/ca95d657d75ac297aedaf6da3915cf52f4cffd34...5df4103b83aef032052e6e12f959558114cbe5f5
You're receiving this email because of your account on code.videolan.org.
VideoLAN code repository instance
More information about the vlc-commits
mailing list