From 89e94fce3b635c7017527dce4b5c68aed5fdd1c0 Mon Sep 17 00:00:00 2001 From: Michail Vourlakos Date: Fri, 21 Aug 2020 17:06:22 +0300 Subject: [PATCH] initial support background custom radius/shadow --playing around with Kirigami.ShadowedRectangle in order to provide a nice beautiful custom made panel background that the user can chosen custom radius or shadow size. Colors are going to be used totally based on current plasma theme. --- containment/package/contents/config/main.xml | 8 ++ .../contents/ui/background/MultiLayered.qml | 21 ++++- containment/package/contents/ui/main.qml | 4 + .../configuration/LatteDockConfiguration.qml | 2 + .../configuration/pages/AppearanceConfig.qml | 84 +++++++++++++++++++ 5 files changed, 116 insertions(+), 3 deletions(-) diff --git a/containment/package/contents/config/main.xml b/containment/package/contents/config/main.xml index f1cf8b410..fcc3d238b 100644 --- a/containment/package/contents/config/main.xml +++ b/containment/package/contents/config/main.xml @@ -107,6 +107,14 @@ false + + -1 + + + + -1 + + true diff --git a/containment/package/contents/ui/background/MultiLayered.qml b/containment/package/contents/ui/background/MultiLayered.qml index 3647df404..3b29e0c4a 100644 --- a/containment/package/contents/ui/background/MultiLayered.qml +++ b/containment/package/contents/ui/background/MultiLayered.qml @@ -159,6 +159,13 @@ BackgroundProperties{ property int animationTime: 6*animations.speedFactor.current*animations.duration.small + readonly property bool kirigamiLibraryIsFound: LatteCore.Environment.frameworksVersion >= LatteCore.Environment.makeVersion(5,69,0) + readonly property bool customShadowIsEnabled: kirigamiLibraryIsFound && plasmoid.configuration.backgroundShadowSize >= 0 + readonly property bool customRadiusIsEnabled: kirigamiLibraryIsFound && plasmoid.configuration.backgroundRadius >= 0 + readonly property int customRadius: plasmoid.formFactor === PlasmaCore.Types.Horizontal ? + plasmoid.configuration.backgroundRadius * (solidBackground.height/2) : + plasmoid.configuration.backgroundRadius * (solidBackground.width/2) + property QtObject themeExtendedBackground: null Behavior on opacity{ @@ -222,7 +229,9 @@ BackgroundProperties{ readonly property bool hideShadow: root.behaveAsPlasmaPanel || !LatteCore.WindowSystem.compositingActive || !root.panelShadowsActive - || !themeHasShadow + || (!themeHasShadow && !customShadowIsEnabled) + || customShadowIsEnabled + || customRadiusIsEnabled Behavior on opacity { enabled: LatteCore.WindowSystem.compositingActive @@ -455,7 +464,7 @@ BackgroundProperties{ return plasmoid.configuration.panelTransparency / 100; } - if (coloredView) { + if (coloredView || customRadiusIsEnabled || customShadowIsEnabled) { return midOpacity; } @@ -465,7 +474,13 @@ BackgroundProperties{ backgroundColor: colorizerManager.backgroundColor borderWidth: 1 borderColor: backgroundColor - roundness: themeExtendedBackground ? themeExtendedBackground.roundness : 0 + roundness: { + if (customRadiusIsEnabled) { + return customRadius; + } + + return themeExtendedBackground ? themeExtendedBackground.roundness : 0 + } property real midOpacity: { if (forceSolidness) { diff --git a/containment/package/contents/ui/main.qml b/containment/package/contents/ui/main.qml index 3a3eb31e7..de3b82cc0 100644 --- a/containment/package/contents/ui/main.qml +++ b/containment/package/contents/ui/main.qml @@ -113,6 +113,10 @@ Item { return LatteCore.Types.DockView; } + if (background.customRadiusIsEnabled || background.customShadowIsEnabled) { + return LatteCore.Types.DockView; + } + var staticLayout = (plasmoid.configuration.minLength === plasmoid.configuration.maxLength); if ((plasmoid.configuration.alignment === LatteCore.Types.Justify || staticLayout) diff --git a/shell/package/contents/configuration/LatteDockConfiguration.qml b/shell/package/contents/configuration/LatteDockConfiguration.qml index 003105d6d..8ac402b2e 100644 --- a/shell/package/contents/configuration/LatteDockConfiguration.qml +++ b/shell/package/contents/configuration/LatteDockConfiguration.qml @@ -48,6 +48,8 @@ FocusScope { readonly property bool inConfigureAppletsMode: plasmoid.configuration.inConfigureAppletsMode || !LatteCore.WindowSystem.compositingActive + readonly property bool kirigamiLibraryIsFound: LatteCore.Environment.frameworksVersion >= LatteCore.Environment.makeVersion(5,69,0) + //! max size based on screen resolution //! TODO: if we can access availableScreenGeometry.height this can be improved, currently //! we use 100px. or 50px. in order to give space for othe views to be shown and to have also diff --git a/shell/package/contents/configuration/pages/AppearanceConfig.qml b/shell/package/contents/configuration/pages/AppearanceConfig.qml index b39abb12f..84f04580f 100644 --- a/shell/package/contents/configuration/pages/AppearanceConfig.qml +++ b/shell/package/contents/configuration/pages/AppearanceConfig.qml @@ -1026,6 +1026,90 @@ PlasmaComponents.Page { } } + RowLayout { + Layout.minimumWidth: dialog.optionsWidth + Layout.maximumWidth: Layout.minimumWidth + visible: dialog.kirigamiLibraryIsFound + + PlasmaComponents.Label { + text: i18n("Radius") + horizontalAlignment: Text.AlignLeft + enabled: radiusSlider.enabled + } + + LatteComponents.Slider { + id: radiusSlider + Layout.fillWidth: true + enabled: showBackground.checked + + value: plasmoid.configuration.backgroundRadius + from: -1 + to: 100 + stepSize: 1 + wheelEnabled: false + + function updateBackgroundRadius() { + if (!pressed) { + plasmoid.configuration.backgroundRadius = value + } + } + + onPressedChanged: updateBackgroundRadius(); + Component.onCompleted: valueChanged.connect(updateBackgroundRadius); + Component.onDestruction: valueChanged.disconnect(updateBackgroundRadius); + } + + PlasmaComponents.Label { + enabled: radiusSlider.enabled + text: radiusSlider.value >= 0 ? i18nc("number in percentage, e.g. 85 %","%0 %").arg(radiusSlider.value) : "---" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4 + Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4 + } + } + + RowLayout { + Layout.minimumWidth: dialog.optionsWidth + Layout.maximumWidth: Layout.minimumWidth + visible: dialog.kirigamiLibraryIsFound + + PlasmaComponents.Label { + text: i18n("Shadow") + horizontalAlignment: Text.AlignLeft + enabled: shadowSlider.enabled + } + + LatteComponents.Slider { + id: shadowSlider + Layout.fillWidth: true + enabled: showBackground.checked && panelShadows.checked + + value: plasmoid.configuration.backgroundShadowSize + from: -1 + to: 50 + stepSize: 1 + wheelEnabled: false + + function updateBackgroundShadowSize() { + if (!pressed) { + plasmoid.configuration.backgroundShadowSize = value + } + } + + onPressedChanged: updateBackgroundShadowSize(); + Component.onCompleted: valueChanged.connect(updateBackgroundShadowSize); + Component.onDestruction: valueChanged.disconnect(updateBackgroundShadowSize); + } + + PlasmaComponents.Label { + enabled: shadowSlider.enabled + text: shadowSlider.value >= 0 ? i18nc("number in pixels, e.g. 12 px.", "%0 px.").arg(shadowSlider.value) : "---" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4 + Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4 + } + } + LatteComponents.SubHeader { visible: dialog.advancedLevel isFirstSubCategory: true