feat: add configurable image border radius
This commit is contained in:
@@ -42,6 +42,10 @@ PLAYING]]></default>
|
|||||||
<label>Show track image when available</label>
|
<label>Show track image when available</label>
|
||||||
<default>false</default>
|
<default>false</default>
|
||||||
</entry>
|
</entry>
|
||||||
|
<entry name="imageBorderRadius" type="Int">
|
||||||
|
<label>Image border radius</label>
|
||||||
|
<default>8</default>
|
||||||
|
</entry>
|
||||||
<entry name="backgroundStyle" type="String">
|
<entry name="backgroundStyle" type="String">
|
||||||
<label>Background style</label>
|
<label>Background style</label>
|
||||||
<default>custom</default>
|
<default>custom</default>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import Qt5Compat.GraphicalEffects
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Controls as QQC2
|
import QtQuick.Controls as QQC2
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
@@ -15,6 +16,7 @@ MouseArea {
|
|||||||
property string configuredLabelPlacement: "left"
|
property string configuredLabelPlacement: "left"
|
||||||
property string configuredLabelText: "NOW\nPLAYING"
|
property string configuredLabelText: "NOW\nPLAYING"
|
||||||
property bool configuredUseLabelArtwork: false
|
property bool configuredUseLabelArtwork: false
|
||||||
|
property int configuredImageBorderRadius: 8
|
||||||
property string configuredBackgroundStyle: "custom"
|
property string configuredBackgroundStyle: "custom"
|
||||||
property string configuredBackgroundColor: "transparent"
|
property string configuredBackgroundColor: "transparent"
|
||||||
property int configuredBackgroundRadius: 0
|
property int configuredBackgroundRadius: 0
|
||||||
@@ -33,6 +35,7 @@ MouseArea {
|
|||||||
readonly property bool usesCustomBackground: configuredBackgroundStyle === "custom"
|
readonly property bool usesCustomBackground: configuredBackgroundStyle === "custom"
|
||||||
readonly property int hideModeHorizontalPadding: 8
|
readonly property int hideModeHorizontalPadding: 8
|
||||||
readonly property int labelRailWidth: 100
|
readonly property int labelRailWidth: 100
|
||||||
|
readonly property int effectiveImageBorderRadius: Math.max(0, configuredImageBorderRadius)
|
||||||
readonly property string effectiveBackgroundColor: configuredBackgroundColor || "transparent"
|
readonly property string effectiveBackgroundColor: configuredBackgroundColor || "transparent"
|
||||||
readonly property int effectiveBackgroundRadius: Math.max(0, configuredBackgroundRadius)
|
readonly property int effectiveBackgroundRadius: Math.max(0, configuredBackgroundRadius)
|
||||||
readonly property string effectiveForegroundColor: configuredForegroundColor || "white"
|
readonly property string effectiveForegroundColor: configuredForegroundColor || "white"
|
||||||
@@ -179,10 +182,24 @@ MouseArea {
|
|||||||
asynchronous: true
|
asynchronous: true
|
||||||
cache: true
|
cache: true
|
||||||
fillMode: Image.PreserveAspectCrop
|
fillMode: Image.PreserveAspectCrop
|
||||||
|
visible: false
|
||||||
source: mediaControlsMouseArea.configuredUseLabelArtwork ? player.artUrl : ""
|
source: mediaControlsMouseArea.configuredUseLabelArtwork ? player.artUrl : ""
|
||||||
sourceSize.width: mediaControlsMouseArea.labelRailWidth
|
sourceSize.width: mediaControlsMouseArea.labelRailWidth
|
||||||
sourceSize.height: mediaControlsMouseArea.labelRailWidth
|
sourceSize.height: mediaControlsMouseArea.labelRailWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
OpacityMask {
|
||||||
|
anchors.fill: parent
|
||||||
|
cached: true
|
||||||
|
source: artworkImage
|
||||||
visible: labelContent.artworkReady
|
visible: labelContent.artworkReady
|
||||||
|
|
||||||
|
maskSource: Rectangle {
|
||||||
|
width: labelContent.width
|
||||||
|
height: labelContent.height
|
||||||
|
radius: mediaControlsMouseArea.effectiveImageBorderRadius
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ KCM.SimpleKCM {
|
|||||||
property string cfg_labelPlacement
|
property string cfg_labelPlacement
|
||||||
property alias cfg_labelText: labelTextArea.text
|
property alias cfg_labelText: labelTextArea.text
|
||||||
property alias cfg_useLabelArtwork: useLabelArtworkCheckBox.checked
|
property alias cfg_useLabelArtwork: useLabelArtworkCheckBox.checked
|
||||||
|
property alias cfg_imageBorderRadius: imageBorderRadiusSpinBox.value
|
||||||
property string cfg_backgroundStyle
|
property string cfg_backgroundStyle
|
||||||
property alias cfg_backgroundColor: backgroundColorField.text
|
property alias cfg_backgroundColor: backgroundColorField.text
|
||||||
property alias cfg_backgroundRadius: backgroundRadiusSpinBox.value
|
property alias cfg_backgroundRadius: backgroundRadiusSpinBox.value
|
||||||
@@ -228,6 +229,14 @@ KCM.SimpleKCM {
|
|||||||
text: i18n("Show track image when available")
|
text: i18n("Show track image when available")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
QQC2.SpinBox {
|
||||||
|
id: imageBorderRadiusSpinBox
|
||||||
|
|
||||||
|
Kirigami.FormData.label: i18n("Image border radius:")
|
||||||
|
from: 0
|
||||||
|
to: 100
|
||||||
|
}
|
||||||
|
|
||||||
QQC2.TextArea {
|
QQC2.TextArea {
|
||||||
id: labelTextArea
|
id: labelTextArea
|
||||||
|
|
||||||
|
|||||||
@@ -29,6 +29,8 @@ PlasmoidItem {
|
|||||||
// qmllint disable missing-property
|
// qmllint disable missing-property
|
||||||
property bool configuredUseLabelArtwork: plasmoid.configuration.useLabelArtwork
|
property bool configuredUseLabelArtwork: plasmoid.configuration.useLabelArtwork
|
||||||
// qmllint disable missing-property
|
// qmllint disable missing-property
|
||||||
|
property int configuredImageBorderRadius: plasmoid.configuration.imageBorderRadius
|
||||||
|
// qmllint disable missing-property
|
||||||
property string configuredBackgroundStyle: plasmoid.configuration.backgroundStyle
|
property string configuredBackgroundStyle: plasmoid.configuration.backgroundStyle
|
||||||
// qmllint disable missing-property
|
// qmllint disable missing-property
|
||||||
property string configuredBackgroundColor: plasmoid.configuration.backgroundColor
|
property string configuredBackgroundColor: plasmoid.configuration.backgroundColor
|
||||||
@@ -86,6 +88,7 @@ PlasmoidItem {
|
|||||||
configuredLabelPlacement: root.configuredLabelPlacement
|
configuredLabelPlacement: root.configuredLabelPlacement
|
||||||
configuredLabelText: root.configuredLabelText
|
configuredLabelText: root.configuredLabelText
|
||||||
configuredUseLabelArtwork: root.configuredUseLabelArtwork
|
configuredUseLabelArtwork: root.configuredUseLabelArtwork
|
||||||
|
configuredImageBorderRadius: root.configuredImageBorderRadius
|
||||||
configuredBackgroundStyle: root.configuredBackgroundStyle
|
configuredBackgroundStyle: root.configuredBackgroundStyle
|
||||||
configuredBackgroundColor: root.configuredBackgroundColor
|
configuredBackgroundColor: root.configuredBackgroundColor
|
||||||
configuredBackgroundRadius: root.configuredBackgroundRadius
|
configuredBackgroundRadius: root.configuredBackgroundRadius
|
||||||
@@ -114,6 +117,7 @@ PlasmoidItem {
|
|||||||
configuredLabelPlacement: root.configuredLabelPlacement
|
configuredLabelPlacement: root.configuredLabelPlacement
|
||||||
configuredLabelText: root.configuredLabelText
|
configuredLabelText: root.configuredLabelText
|
||||||
configuredUseLabelArtwork: root.configuredUseLabelArtwork
|
configuredUseLabelArtwork: root.configuredUseLabelArtwork
|
||||||
|
configuredImageBorderRadius: root.configuredImageBorderRadius
|
||||||
configuredBackgroundStyle: root.configuredBackgroundStyle
|
configuredBackgroundStyle: root.configuredBackgroundStyle
|
||||||
configuredBackgroundColor: root.configuredBackgroundColor
|
configuredBackgroundColor: root.configuredBackgroundColor
|
||||||
configuredBackgroundRadius: root.configuredBackgroundRadius
|
configuredBackgroundRadius: root.configuredBackgroundRadius
|
||||||
|
|||||||
Reference in New Issue
Block a user