From 0ed7e7e731c98511b8b48a0ce88eb2252291dea7 Mon Sep 17 00:00:00 2001 From: Michail Vourlakos Date: Wed, 8 Feb 2017 19:02:03 +0200 Subject: [PATCH] fix #153,improve tasks progress visuals --- plasmoid/contents/ui/CircleText.qml | 78 +++---- plasmoid/contents/ui/TaskIconItem.qml | 205 ++++++++++++++----- plasmoid/contents/ui/TaskProgressOverlay.qml | 52 ++--- 3 files changed, 199 insertions(+), 136 deletions(-) diff --git a/plasmoid/contents/ui/CircleText.qml b/plasmoid/contents/ui/CircleText.qml index 4c2239cef..c3dc585d8 100644 --- a/plasmoid/contents/ui/CircleText.qml +++ b/plasmoid/contents/ui/CircleText.qml @@ -1,4 +1,5 @@ /* + * Copyright 2016 Smith AR * Michail Vourlakos * @@ -21,7 +22,7 @@ import QtQuick 2.2 import QtGraphicalEffects 1.0 -Item { +Rectangle { property double proportion: 0 property double previousProportion: 0 @@ -42,10 +43,17 @@ Item { property double partSize: height / 2 property double pi2: Math.PI * 2 + property color alphaBackColor: Qt.rgba(theme.backgroundColor.r, theme.backgroundColor.g, theme.backgroundColor.b, 0.45) + property color alphaBackColor2: Qt.rgba(theme.backgroundColor.r, theme.backgroundColor.g, theme.backgroundColor.b, 0.8) + color: alphaBackColor + radius: width + border.width: Math.max(1,width/64) + border.color: alphaBackColor2 + onProportionChanged: { - console.log(previousProportion + " - "+proportion); + // console.log(previousProportion + " - "+proportion); if ((proportion - 0.03 >= previousProportion) || (proportion===1)) { - console.log("request repaint..."); + // console.log("request repaint..."); previousProportion = proportion; repaint(); } @@ -66,41 +74,30 @@ Item { // edge bleeding fix readonly property double filler: 0.01 - width: parent.width - height: parent.height - opacity: 1.0 + width: parent.width - 2 * parent.border.width + height: parent.height - 2 * parent.border.width + opacity: 0.7 + + anchors.centerIn: parent onPaint: { - var ctx = getContext('2d') - ctx.clearRect(0, 0, canvas.width, canvas.height) - ctx.fillStyle = theme.highlightColor + var ctx = getContext('2d'); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = theme.highlightColor; - var startRadian = - Math.PI / 2 + var startRadian = - Math.PI / 2; - var radians = pi2 * proportion + var radians = pi2 * proportion; ctx.beginPath(); - ctx.arc(width/2, height/2, stdThickness, startRadian, startRadian + radians + filler, false) - ctx.arc(width/2, height/2, circleThicknessAttr, startRadian + radians + filler, startRadian, true) + ctx.arc(width/2, height/2, stdThickness, startRadian, startRadian + radians + filler, false); + ctx.arc(width/2, height/2, circleThicknessAttr, startRadian + radians + filler, startRadian, true); - ctx.closePath() - ctx.fill() + ctx.closePath(); + ctx.fill(); } } - DropShadow { - anchors.fill: canvas - radius: 2 - samples: 8 - spread: 0.5 - fast: true - opacity: 0.65 - color: theme.backgroundColor - source: canvas - - enabled: root.enableShadows - } - Text { id: valueText anchors.centerIn: parent @@ -109,30 +106,5 @@ Item { color: theme.textColor visible: showNumber } - - DropShadow { - anchors.fill: valueText - radius: 2 - samples: 8 - spread: 0.6 - fast: true - opacity: 0.65 - color: theme.backgroundColor - source: valueText - visible: showNumber - - enabled: root.enableShadows - } - - Text { - id: valueTextLabel - anchors.bottom: parent.bottom - anchors.bottomMargin: -2 - anchors.right: parent.right - text: valueLabel - font.pixelSize: fontPixelSize * 0.65 - color: theme.textColor - visible: true - } } diff --git a/plasmoid/contents/ui/TaskIconItem.qml b/plasmoid/contents/ui/TaskIconItem.qml index ecccc36f1..c854d995f 100644 --- a/plasmoid/contents/ui/TaskIconItem.qml +++ b/plasmoid/contents/ui/TaskIconItem.qml @@ -18,7 +18,7 @@ * along with this program. If not, see . */ -import QtQuick 2.0 +import QtQuick 2.4 import QtQuick.Layouts 1.1 import QtGraphicalEffects 1.0 @@ -100,7 +100,7 @@ Item{ id: draggedRectangle width: iconImageBuffer.width+1 height: iconImageBuffer.height+1 - anchors.centerIn: iconImageBuffer + anchors.centerIn: iconGraphic opacity: 0 radius: 3 anchors.margins: 5 @@ -118,7 +118,7 @@ Item{ // Image{id:normalImage; visible:false} Image{ id:shadowedImage - anchors.centerIn:iconImageBuffer + anchors.centerIn:iconGraphic // anchors.horizontalCenter: iconImageBuffer.horizontalCenter //anchors.verticalCenter: iconImageBuffer.verticalCenter @@ -149,37 +149,17 @@ Item{ } /* Rectangle{ - anchors.fill: iconImageBuffer + anchors.fill: parent border.width: 1 border.color: "red" color: "transparent" - }*/ - - // KQuickControlAddons.QIconItem{ - Latte.IconItem{ - id: iconImageBuffer - - // anchors.centerIn: parent - - width: Math.round(newTempSize) //+ 2*centralItem.shadowSize - height: Math.round(width) - //icon: decoration - source: decoration - - onValidChanged: { - if (!valid && (source === decoration || source === "unknown")) - source = "application-x-executable" - } - - property int zoomedSize: root.zoomFactor * root.iconSize - - property real basicScalingWidth : wrapper.inTempScaling ? (root.iconSize * wrapper.scaleWidth) : - root.iconSize * wrapper.scale - property real basicScalingHeight : wrapper.inTempScaling ? (root.iconSize * wrapper.scaleHeight) : - root.iconSize * wrapper.scale + } */ - property real newTempSize: (wrapper.opacity == 1) ? Math.min(basicScalingWidth, basicScalingHeight) : - Math.max(basicScalingWidth, basicScalingHeight) + // KQuickControlAddons.QIconItem{ + Item{ + id: iconGraphic + width: iconImageBuffer.width + height: iconImageBuffer.height ///states for launcher animation states: [ @@ -188,7 +168,7 @@ Item{ when: !launcherAnimation.running && !newWindowAnimation.running AnchorChanges{ - target:iconImageBuffer; + target:iconGraphic; anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter; anchors.right: undefined; @@ -203,7 +183,7 @@ Item{ when: launcherAnimation.running || newWindowAnimation.running AnchorChanges{ - target:iconImageBuffer; + target:iconGraphic; anchors.horizontalCenter: undefined; anchors.verticalCenter: undefined; anchors.right: root.position === PlasmaCore.Types.LeftPositioned ? parent.right : undefined; @@ -223,27 +203,158 @@ Item{ AnchorAnimation { duration: 1.5*root.durationTime*units.longDuration } } ] + + Latte.IconItem{ + id: iconImageBuffer + + // anchors.centerIn: parent + + width: Math.round(newTempSize) //+ 2*centralItem.shadowSize + height: Math.round(width) + //icon: decoration + source: decoration + + //visible: !root.enableShadows + + onValidChanged: { + if (!valid && (source === decoration || source === "unknown")) + source = "application-x-executable" + } + + property int zoomedSize: root.zoomFactor * root.iconSize + + property real basicScalingWidth : wrapper.inTempScaling ? (root.iconSize * wrapper.scaleWidth) : + root.iconSize * wrapper.scale + property real basicScalingHeight : wrapper.inTempScaling ? (root.iconSize * wrapper.scaleHeight) : + root.iconSize * wrapper.scale + + property real newTempSize: (wrapper.opacity == 1) ? Math.min(basicScalingWidth, basicScalingHeight) : + Math.max(basicScalingWidth, basicScalingHeight) + + } + + ////// + Loader{ + anchors.fill: parent + active: (centralItem.smartLauncherEnabled && centralItem.smartLauncherItem + && centralItem.smartLauncherItem.progressVisible) + asynchronous: true + + sourceComponent: Item{ + ShaderEffect { + id: iconOverlay + enabled: false + anchors.fill: parent + property var source: ShaderEffectSource { + sourceItem: iconImageBuffer + hideSource: true + } + property var mask: ShaderEffectSource { + sourceItem: Item{ + width: iconImageBuffer.width + height: iconImageBuffer.height + Rectangle{ + id: maskRect + width: parent.width/2 + height: width + radius: width + + Rectangle{ + id: maskCorner + width:parent.width/2 + height:parent.height/2 + } + + states: [ + State { + name: "default" + when: (plasmoid.location !== PlasmaCore.Types.RightEdge) + + AnchorChanges { + target: maskRect + anchors{ top:parent.top; bottom:undefined; left:undefined; right:parent.right;} + } + AnchorChanges { + target: maskCorner + anchors{ top:parent.top; bottom:undefined; left:undefined; right:parent.right;} + } + }, + State { + name: "right" + when: (plasmoid.location === PlasmaCore.Types.RightEdge) + + AnchorChanges { + target: maskRect + anchors{ top:parent.top; bottom:undefined; left:parent.left; right:undefined;} + } + AnchorChanges { + target: maskCorner + anchors{ top:parent.top; bottom:undefined; left:parent.left; right:undefined;} + } + } + ] + + Connections{ + target: plasmoid + onLocationChanged: iconOverlay.mask.scheduleUpdate(); + } + } + //badgeMask + } + hideSource: true + live: false + } + + // onWidthChanged: mask.scheduleUpdate(); + // onHeightChanged: mask.scheduleUpdate(); + + supportsAtlasTextures: true + + fragmentShader: " + varying highp vec2 qt_TexCoord0; + uniform highp float qt_Opacity; + uniform lowp sampler2D source; + uniform lowp sampler2D mask; + void main() { + gl_FragColor = texture2D(source, qt_TexCoord0.st) * (1.0 - (texture2D(mask, qt_TexCoord0.st).a)) * qt_Opacity; + } + " + } + + TaskProgressOverlay{ + anchors.fill:parent + } + } + } + + // Loader { + // anchors.fill: parent + //// asynchronous: true + // source: "TaskProgressOverlay.qml" + // active: true + //active: (centralItem.smartLauncherEnabled && centralItem.smartLauncherItem + // && centralItem.smartLauncherItem.progressVisible) + //} } ///Shadow in tasks Loader{ - anchors.fill: iconImageBuffer + anchors.fill: iconGraphic active: root.enableShadows sourceComponent: DropShadow{ anchors.fill: parent color: "#ff080808" samples: 2 * radius - source: iconImageBuffer + source: iconGraphic radius: centralItem.shadowSize verticalOffset: 2 } } - VisualAddItem{ id: dropFilesVisual - anchors.fill: iconImageBuffer + anchors.fill: iconGraphic visible: opacity == 0 ? false : true opacity: root.dropNewLauncher && !mouseHandler.onlyLaunchers @@ -253,10 +364,10 @@ Item{ BrightnessContrast{ id:hoveredImage opacity: mainItemContainer.containsMouse ? 1 : 0 - anchors.fill: iconImageBuffer + anchors.fill: iconGraphic brightness: 0.25 - source: iconImageBuffer + source: iconGraphic Behavior on opacity { NumberAnimation { duration: root.durationTime*units.longDuration } @@ -265,16 +376,16 @@ Item{ BrightnessContrast { id: brightnessTaskEffect - anchors.fill: iconImageBuffer - source: iconImageBuffer + anchors.fill: iconGraphic + source: iconGraphic visible: clickedAnimation.running } Colorize{ id: stateColorizer - source: iconImageBuffer - anchors.fill: iconImageBuffer + source: iconGraphic + anchors.fill: iconGraphic //visible: false opacity:0 @@ -332,14 +443,6 @@ Item{ active: mainItemContainer.isStartup ? false : true } - Loader { - anchors.fill: iconImageBuffer - asynchronous: true - source: "TaskProgressOverlay.qml" - active: (centralItem.smartLauncherEnabled && centralItem.smartLauncherItem - && centralItem.smartLauncherItem.progressVisible) - } - ///////Activate animation///// SequentialAnimation{ id: clickedAnimation @@ -542,7 +645,7 @@ Item{ target: plasmoid onStatusChanged:{ if ( (plasmoid.status === PlasmaCore.Types.PassiveStatus) - && newWindowAnimation.running && (newWindowAnimation.loops > 2) ) { + && newWindowAnimation.running && (newWindowAnimation.loops > 2) ) { newWindowAnimation.clear(); } } diff --git a/plasmoid/contents/ui/TaskProgressOverlay.qml b/plasmoid/contents/ui/TaskProgressOverlay.qml index e18e0f94e..a6e724692 100644 --- a/plasmoid/contents/ui/TaskProgressOverlay.qml +++ b/plasmoid/contents/ui/TaskProgressOverlay.qml @@ -24,25 +24,20 @@ import org.kde.plasma.core 2.0 as PlasmaCore Item { id: background - anchors.fill: parent - CircleText { - id: progressCircle - width: 0.42 * parent.height + Item { + id: subRectangle + width: parent.width/ 2 height: width - numberValue: centralItem.smartLauncherItem.count - fullCircle: true - showNumber: true - proportion: centralItem.smartLauncherItem ? centralItem.smartLauncherItem.progress / 100 : 0 states: [ State { - name: "left" - when: (root.position === PlasmaCore.Types.LeftPositioned) + name: "default" + when: (root.position !== PlasmaCore.Types.RightPositioned) AnchorChanges { - target: progressCircle - anchors{ top:background.top; bottom:undefined; left:undefined; right:background.right;} + target: subRectangle + anchors{ top:parent.top; bottom:undefined; left:undefined; right:parent.right;} } }, State { @@ -50,28 +45,21 @@ Item { when: (root.position === PlasmaCore.Types.RightPositioned) AnchorChanges { - target: progressCircle - anchors{ top:background.top; bottom:undefined; left:background.left; right:undefined;} - } - }, - State { - name: "bottom" - when: (root.position === PlasmaCore.Types.BottomPositioned) - - AnchorChanges { - target: progressCircle - anchors{ top:background.top; bottom:undefined; left:undefined; right:background.right;} - } - }, - State { - name: "top" - when: (root.position === PlasmaCore.Types.TopPositioned) - - AnchorChanges { - target: progressCircle - anchors{ top:background.top; bottom:undefined; left:undefined; right:background.right;} + target: subRectangle + anchors{ top:parent.top; bottom:undefined; left:parent.left; right:undefined;} } } ] + + CircleText { + id: progressCircle + anchors.centerIn: parent + width: 0.8 * parent.width + height: width + numberValue: centralItem.smartLauncherItem.count + fullCircle: true + showNumber: true + proportion: centralItem.smartLauncherItem ? centralItem.smartLauncherItem.progress / 100 : 0 + } } }