From f932235f5ca96c84111ca1edc94d24def04704bf Mon Sep 17 00:00:00 2001 From: Michail Vourlakos Date: Sat, 31 Dec 2016 17:15:36 +0200 Subject: [PATCH] add animation and shadow for edit mode visual --- containment/contents/ui/EditModeVisual.qml | 164 +++++++++++++++++- containment/contents/ui/VisibilityManager.qml | 8 +- containment/contents/ui/main.qml | 32 ++-- 3 files changed, 187 insertions(+), 17 deletions(-) diff --git a/containment/contents/ui/EditModeVisual.qml b/containment/contents/ui/EditModeVisual.qml index 027768316..0db089660 100644 --- a/containment/contents/ui/EditModeVisual.qml +++ b/containment/contents/ui/EditModeVisual.qml @@ -1,10 +1,166 @@ import QtQuick 2.1 +import org.kde.plasma.core 2.0 as PlasmaCore +import QtGraphicalEffects 1.0 + Image{ - anchors.fill: parent + id: editVisual + width: root.isHorizontal ? parent.width : visibilityManager.thicknessNormal + height: root.isVertical ? parent.height : visibilityManager.thicknessNormal + fillMode: Image.Tile - horizontalAlignment: Image.AlignLeft - verticalAlignment: Image.AlignTop source: "../icons/blueprint.jpg" - opacity: 0.5 + opacity: 0 + + property int location: plasmoid.location + property int speed: root.durationTime*4*units.longDuration + property int thickness: visibilityManager.thicknessNormal + shadowSize + property int rootThickness: root.isHorizontal ? root.height : root.width + property int shadowSize : Math.ceil(root.iconSize / 5) + + property bool animationSent: false + property bool farEdge: (plasmoid.location===PlasmaCore.Types.BottomEdge) || (plasmoid.location===PlasmaCore.Types.RightEdge) + property bool editAnimationEnded: false + + layer.enabled: true + layer.effect: DropShadow { + radius: editVisual.shadowSize + samples: 2 * radius + color: "#ee080808" + } + + onLocationChanged:{ + initializeEditPosition(); + } + + function initializeNormalPosition() { + if (location === PlasmaCore.Types.BottomEdge) { + x = 0; + y = editVisual.rootThickness; + } else if (location === PlasmaCore.Types.RightEdge) { + x = editVisual.rootThickness; + y = 0; + } else if (location === PlasmaCore.Types.LeftEdge) { + x = -editVisual.thickness; + y = 0; + } else if (location === PlasmaCore.Types.TopEdge) { + x = 0; + y = -editVisual.thickness; + } + } + + function initializeEditPosition() { + if (root.editMode) { + if ((location === PlasmaCore.Types.LeftEdge) || (location === PlasmaCore.Types.TopEdge)){ + x = 0; + y = 0; + } else if (location === PlasmaCore.Types.BottomEdge) { + x = 0; + y = rootThickness - thickness + shadowSize; + } else if (location === PlasmaCore.Types.RightEdge) { + x = rootThickness - thickness + shadowSize; + y = 0; + } + } + } + + + //////////// States //////////////////// + + states: [ + State{ + name: "*" + when: !root.editMode + }, + + State{ + name: "edit" + when: root.editMode + } + ] + + transitions: [ + Transition{ + id: editTransition + from: "*" + to: "edit" + + SequentialAnimation{ + ScriptAction{ + script:{ + editVisual.opacity = 0 + + initializeNormalPosition(); + + if(!animationSent) { + animationSent = true; + var anim = root.animationsNeedLength+1; + root.slotAnimationsNeedLength(anim); + } + } + } + + ParallelAnimation{ + PropertyAnimation { + target: editVisual + property: "opacity" + to: 0.6 + duration: editVisual.speed / 2 + easing.type: Easing.OutQuad + } + + PropertyAnimation { + target: editVisual + property: root.isHorizontal ? "y" : "x" + to: editVisual.farEdge ? editVisual.rootThickness - editVisual.thickness + editVisual.shadowSize : 0 + duration: editVisual.speed + easing.type: Easing.OutBounce + + + } + } + + ScriptAction{ + script:{ + editVisual.editAnimationEnded = true; + visibilityManager.updateMaskArea(); + } + } + } + }, + Transition{ + from: "edit" + to: "*" + SequentialAnimation{ + ParallelAnimation{ + PropertyAnimation { + target: editVisual + property: root.isHorizontal ? "y" : "x" + to: editVisual.farEdge ? editVisual.rootThickness : -editVisual.thickness + duration: editVisual.speed + easing.type: Easing.OutBounce + } + PropertyAnimation { + target: editVisual + property: "opacity" + to: 0 + duration: editVisual.speed + easing.type: Easing.OutQuad + } + } + + ScriptAction{ + script:{ + editVisual.editAnimationEnded = false; + if (editVisual.animationSent) { + var anim = root.animationsNeedLength-1; + root.slotAnimationsNeedLength(anim); + editVisual.animationSent = false; + } + } + } + } + + } + ] } diff --git a/containment/contents/ui/VisibilityManager.qml b/containment/contents/ui/VisibilityManager.qml index 7b812102a..ee670e5ef 100644 --- a/containment/contents/ui/VisibilityManager.qml +++ b/containment/contents/ui/VisibilityManager.qml @@ -178,7 +178,13 @@ Item{ //grow only on length and not thickness if(mainLayout.animatedLength || root.editMode || (root.animationsNeedLength>0 && root.animationsNeedBothAxis === 0)) { - tempThickness = thicknessNormalOriginal; + + //this is used to fix a bug with shadow showing when the animation of edit mode + //is triggered + var editModeThickness = editModeVisual.editAnimationEnded ? thicknessNormalOriginal + editModeVisual.shadowSize : + thicknessNormalOriginal + + tempThickness = root.editMode ? editModeThickness : thicknessNormalOriginal; if (root.animationsNeedThickness > 0) { tempThickness = thicknessMidOriginal; diff --git a/containment/contents/ui/main.qml b/containment/contents/ui/main.qml index f0f79db90..a144973a7 100644 --- a/containment/contents/ui/main.qml +++ b/containment/contents/ui/main.qml @@ -65,7 +65,7 @@ DragDrop.DropArea { property int appletsAnimations: 0 //zoomed applets it is used basically on masking for magic window property int automaticIconSizeBasedSize: -1 //it is not set, this is the defautl property int iconSize: (automaticIconSizeBasedSize > 0 && !root.editMode) ? Math.min(automaticIconSizeBasedSize, plasmoid.configuration.iconSize) : - plasmoid.configuration.iconSize + plasmoid.configuration.iconSize property int iconStep: 8 property int panelEdgeSpacing: iconSize / 3 //FIXME: this is not needed any more probably @@ -79,8 +79,8 @@ DragDrop.DropArea { //property int panelAlignment: plasmoid.configuration.panelPosition !== Latte.Dock.Double ? plasmoid.configuration.panelPosition : mainLayoutPosition property int panelAlignment: !root.editMode ? plasmoid.configuration.panelPosition : - ( plasmoid.configuration.panelPosition === Latte.Dock.Double ? - Latte.Dock.Center :plasmoid.configuration.panelPosition ) + ( plasmoid.configuration.panelPosition === Latte.Dock.Double ? + Latte.Dock.Center :plasmoid.configuration.panelPosition ) property real zoomFactor: windowSystem.compositingActive ? ( 1 + (plasmoid.configuration.zoomLevel / 20) ) : 1 @@ -391,6 +391,9 @@ DragDrop.DropArea { onAppletsAnimationsChanged: visibilityManager.updateMaskArea(); onEditModeChanged: { + if (editMode) { + visibilityManager.updateMaskArea(); + } updateLayouts(); } @@ -533,9 +536,9 @@ DragDrop.DropArea { } if (plasmoid.userConfiguring) { - console.log("applets------"); + // console.log("applets------"); for (var i = 0; i < plasmoid.applets.length; ++i) { - console.log("applet:"+i); + // console.log("applet:"+i); plasmoid.applets[i].expanded = false; } if (!dragOverlay) { @@ -806,7 +809,8 @@ DragDrop.DropArea { return; } - animationsNeedBothAxis = value; + animationsNeedBothAxis = Math.max(value, 0); + visibilityManager.updateMaskArea(); } @@ -815,7 +819,8 @@ DragDrop.DropArea { return; } - animationsNeedLength = value; + animationsNeedLength = Math.max(value, 0); + visibilityManager.updateMaskArea(); } @@ -824,7 +829,8 @@ DragDrop.DropArea { return; } - animationsNeedThickness = value; + animationsNeedThickness = Math.max(value, 0); + visibilityManager.updateMaskArea(); } @@ -942,14 +948,16 @@ DragDrop.DropArea { ///////////////BEGIN UI elements - Loader{ + /*Loader{ anchors.fill: parent active: root.editMode - sourceComponent: EditModeVisual{ - } - } + sourceComponent: + }*/ + EditModeVisual{ + id:editModeVisual + } Item { id: lastSpacer