From af65e8ab48663bee0cca485ae4e7770e7f90a8a3 Mon Sep 17 00:00:00 2001 From: Michail Vourlakos Date: Sat, 13 Apr 2019 08:24:47 +0300 Subject: [PATCH] flexible Tasks page --introduce android clicke animation for Plasma style --- .../contents/ui/applet/indicator/Bridge.qml | 10 - .../package/ui/BackLayer.qml | 3 +- .../package/ui/FrontLayer.qml | 191 ++++++++++++------ .../org.kde.latte.plasma/package/ui/main.qml | 7 +- .../configuration/LatteDockConfiguration.qml | 2 +- .../configuration/pages/TasksConfig.qml | 143 ++++++++----- 6 files changed, 226 insertions(+), 130 deletions(-) diff --git a/containment/package/contents/ui/applet/indicator/Bridge.qml b/containment/package/contents/ui/applet/indicator/Bridge.qml index fe2cb1aab..c34b30c6b 100644 --- a/containment/package/contents/ui/applet/indicator/Bridge.qml +++ b/containment/package/contents/ui/applet/indicator/Bridge.qml @@ -88,14 +88,4 @@ Item{ //! grouped options readonly property Item shared: indicators readonly property QtObject configuration: indicators.configuration - - Connections { - target: appletIsValid /*&& indicators.info.needsMouseEventCoordinates*/ ? appletItem : null - onMousePressed: { - console.log(x + " _ " + y); - var fixedPos = level.mapFromItem(appletItem, x, y); - console.log("f: " + fixedPos.x + " _ " + fixedPos.y); - level.mousePressed(fixedPos.x, fixedPos.y); - } - } } diff --git a/indicators/org.kde.latte.plasma/package/ui/BackLayer.qml b/indicators/org.kde.latte.plasma/package/ui/BackLayer.qml index cfdc71122..c71e0afe4 100644 --- a/indicators/org.kde.latte.plasma/package/ui/BackLayer.qml +++ b/indicators/org.kde.latte.plasma/package/ui/BackLayer.qml @@ -28,9 +28,10 @@ PlasmaCore.FrameSvgItem { property string basePrefix: "normal" imagePath: indicator.usePlasmaTabsStyle ? "widgets/tabbar" : "widgets/tasks" - rotation: indicator.shared.reversed ? 180 : 0 + opacity: state === "hovered" ? 0.5 : 1 + prefix: { if (indicator.usePlasmaTabsStyle) { if (!indicator.isActive) { diff --git a/indicators/org.kde.latte.plasma/package/ui/FrontLayer.qml b/indicators/org.kde.latte.plasma/package/ui/FrontLayer.qml index 9d483faf8..a8a2ec338 100644 --- a/indicators/org.kde.latte.plasma/package/ui/FrontLayer.qml +++ b/indicators/org.kde.latte.plasma/package/ui/FrontLayer.qml @@ -26,78 +26,143 @@ import org.kde.latte 0.2 as Latte Item { anchors.fill: parent - PlasmaCore.Svg { - id: taskSvg - imagePath: "widgets/tasks" - } - Item { - id: iconBox - anchors.centerIn: parent - width: indicator.currentIconSize - height: width + anchors.fill: parent + clip: true + + Item{ + id: clickedCenter + } + + Rectangle { + id: clickedRectangle + anchors.centerIn: clickedCenter + opacity: 0 + radius: width/2 + height: width + + color: indicator.palette.buttonFocusColor + } } + + SequentialAnimation { + id: clickedAnimation + ScriptAction{ + script: { + clickedRectangle.width = 0; + clickedRectangle.opacity = 0.85; + } + } - PlasmaCore.SvgItem { - id: arrow - - implicitWidth: 0.25 * iconBox.width - implicitHeight: implicitWidth - - svg: taskSvg - elementId: elementForLocation(plasmoid.location) - - function elementForLocation(location) { - switch (location) { - case PlasmaCore.Types.LeftEdge: - return "group-expander-left"; - case PlasmaCore.Types.TopEdge: - return "group-expander-top"; - case PlasmaCore.Types.RightEdge: - return "group-expander-right"; - case PlasmaCore.Types.BottomEdge: - default: - return "group-expander-bottom"; + ParallelAnimation{ + PropertyAnimation { + target: clickedRectangle + property: "width" + to: indicator.currentIconSize * 3 + duration: 700 + easing.type: Easing.OutQuad + } + PropertyAnimation { + target: clickedRectangle + property: "opacity" + to: 0 + duration: 700 + easing.type: Easing.OutQuad } } } - states: [ - State { - name: "bottom" - when: plasmoid.location === PlasmaCore.Types.BottomEdge - AnchorChanges { - target: arrow - anchors.top: undefined; anchors.left: undefined; anchors.right: undefined; anchors.bottom: arrow.parent.bottom; - anchors.horizontalCenter: iconBox.horizontalCenter; anchors.verticalCenter: undefined; - } - }, - State { - name: "top" - when: plasmoid.location === PlasmaCore.Types.TopEdge - AnchorChanges { - target: arrow - anchors.top: arrow.parent.top; anchors.left: undefined; anchors.right: undefined; anchors.bottom: undefined; - anchors.horizontalCenter: iconBox.horizontalCenter; anchors.verticalCenter: undefined; + Connections { + target: level + onMousePressed: { + clickedCenter.x = x; + clickedCenter.y = y; + clickedAnimation.start(); + } + } + + + Loader { + anchors.fill: parent + visible: !indicator.isApplet && indicator.isGroup + sourceComponent: Item{ + anchors.fill: parent + + PlasmaCore.Svg { + id: taskSvg + imagePath: "widgets/tasks" } - }, - State { - name: "left" - when: plasmoid.location === PlasmaCore.Types.LeftEdge - AnchorChanges { - target: arrow - anchors.top: undefined; anchors.left: arrow.parent.left; anchors.right: undefined; anchors.bottom: undefined; - anchors.horizontalCenter: undefined; anchors.verticalCenter: iconBox.verticalCenter; + + Item { + id: iconBox + anchors.centerIn: parent + width: indicator.currentIconSize + height: width } - }, - State { - name: "right" - when: plasmoid.location === PlasmaCore.Types.RightEdge - AnchorChanges { - target: arrow - anchors.top: undefined; anchors.left: undefined; anchors.right: arrow.parent.right; anchors.bottom: undefined; - anchors.horizontalCenter: undefined; anchors.verticalCenter: iconBox.verticalCenter; + + PlasmaCore.SvgItem { + id: arrow + + implicitWidth: 0.25 * iconBox.width + implicitHeight: implicitWidth + + svg: taskSvg + elementId: elementForLocation(plasmoid.location) + + + function elementForLocation(location) { + switch (location) { + case PlasmaCore.Types.LeftEdge: + return "group-expander-left"; + case PlasmaCore.Types.TopEdge: + return "group-expander-top"; + case PlasmaCore.Types.RightEdge: + return "group-expander-right"; + case PlasmaCore.Types.BottomEdge: + default: + return "group-expander-bottom"; + } + } } + + states: [ + State { + name: "bottom" + when: plasmoid.location === PlasmaCore.Types.BottomEdge + AnchorChanges { + target: arrow + anchors.top: undefined; anchors.left: undefined; anchors.right: undefined; anchors.bottom: arrow.parent.bottom; + anchors.horizontalCenter: iconBox.horizontalCenter; anchors.verticalCenter: undefined; + } + }, + State { + name: "top" + when: plasmoid.location === PlasmaCore.Types.TopEdge + AnchorChanges { + target: arrow + anchors.top: arrow.parent.top; anchors.left: undefined; anchors.right: undefined; anchors.bottom: undefined; + anchors.horizontalCenter: iconBox.horizontalCenter; anchors.verticalCenter: undefined; + } + }, + State { + name: "left" + when: plasmoid.location === PlasmaCore.Types.LeftEdge + AnchorChanges { + target: arrow + anchors.top: undefined; anchors.left: arrow.parent.left; anchors.right: undefined; anchors.bottom: undefined; + anchors.horizontalCenter: undefined; anchors.verticalCenter: iconBox.verticalCenter; + } + }, + State { + name: "right" + when: plasmoid.location === PlasmaCore.Types.RightEdge + AnchorChanges { + target: arrow + anchors.top: undefined; anchors.left: undefined; anchors.right: arrow.parent.right; anchors.bottom: undefined; + anchors.horizontalCenter: undefined; anchors.verticalCenter: iconBox.verticalCenter; + } + } + ] } - ] + } } diff --git a/indicators/org.kde.latte.plasma/package/ui/main.qml b/indicators/org.kde.latte.plasma/package/ui/main.qml index 5ad6884e5..a92fc8a56 100644 --- a/indicators/org.kde.latte.plasma/package/ui/main.qml +++ b/indicators/org.kde.latte.plasma/package/ui/main.qml @@ -25,6 +25,11 @@ import org.kde.latte 0.2 as Latte import org.kde.latte.components 1.0 as LatteComponents LatteComponents.IndicatorItem { + id: root + + readonly property bool needsMouseEventCoordinates: true + readonly property bool providesClickedAnimation: true + readonly property bool providesHoveredAnimation: true readonly property bool providesFrontLayer: true //! Background Layer @@ -40,7 +45,7 @@ LatteComponents.IndicatorItem { Loader{ id: frontLayer anchors.fill: parent - active: level.isForeground && !indicator.isApplet && indicator.isGroup + active: level.isForeground //&& !indicator.isApplet && indicator.isGroup sourceComponent: FrontLayer{} } diff --git a/shell/package/contents/configuration/LatteDockConfiguration.qml b/shell/package/contents/configuration/LatteDockConfiguration.qml index cc4a53eef..686bf8a73 100644 --- a/shell/package/contents/configuration/LatteDockConfiguration.qml +++ b/shell/package/contents/configuration/LatteDockConfiguration.qml @@ -68,7 +68,7 @@ FocusScope { property int chosenWidth: userScaleWidth !== 1 ? userScaleWidth * proposedWidth : proposedWidth property int chosenHeight: userScaleHeight !== 1 ? userScaleHeight * heightLevel * proposedHeight : heightLevel * proposedHeight - readonly property int optionsWidth: appliedWidth - units.smallSpacing * 9 + readonly property int optionsWidth: appliedWidth - units.smallSpacing * 10 //! user set scales based on its preference, e.g. 96% of the proposed size property real userScaleWidth: 1 diff --git a/shell/package/contents/configuration/pages/TasksConfig.qml b/shell/package/contents/configuration/pages/TasksConfig.qml index 04ce19330..4b8291b00 100644 --- a/shell/package/contents/configuration/pages/TasksConfig.qml +++ b/shell/package/contents/configuration/pages/TasksConfig.qml @@ -60,7 +60,8 @@ PlasmaComponents.Page { Layout.leftMargin: units.smallSpacing * 2 Layout.rightMargin: units.smallSpacing * 2 - PlasmaComponents.CheckBox { + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Unread messages from tasks") checked: plasmoid.configuration.showInfoBadge tooltip: i18n("Show unread messages or information from tasks") @@ -70,7 +71,8 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Progress information for tasks") checked: plasmoid.configuration.showProgressBadge tooltip: i18n("Show a progress animation for tasks e.g. when copying files with Dolphin") @@ -80,7 +82,8 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Audio playing from tasks") checked: plasmoid.configuration.showAudioBadge tooltip: i18n("Show audio playing from tasks") @@ -90,7 +93,8 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Change volume when scrolling audio badge") checked: plasmoid.configuration.audioBadgeActionsEnabled enabled: plasmoid.configuration.showAudioBadge @@ -117,8 +121,8 @@ PlasmaComponents.Page { Layout.leftMargin: units.smallSpacing * 2 Layout.rightMargin: units.smallSpacing * 2 - PlasmaComponents.CheckBox { - + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Add launchers only in the Tasks Area") checked: plasmoid.configuration.addLaunchersInTaskManager tooltip: i18n("Launchers are added only in the taskmanager and not as plasma applets") @@ -128,8 +132,9 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { + LatteComponents.CheckBox { id: windowActionsChk + Layout.maximumWidth: dialog.optionsWidth text: i18n("Show window actions in the context menu") checked: plasmoid.configuration.showWindowActions visible: dialog.highLevel @@ -140,8 +145,9 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { + LatteComponents.CheckBox { id: unifyGlobalShortcutsChk + Layout.maximumWidth: dialog.optionsWidth text: i18n("🅰 Based on position shortcuts apply only for tasks") checked: !plasmoid.configuration.unifiedGlobalShortcuts tooltip: i18n("Based on position global shortcuts are enabled only for tasks and not for applets") @@ -169,9 +175,8 @@ PlasmaComponents.Page { Layout.leftMargin: units.smallSpacing * 2 Layout.rightMargin: units.smallSpacing * 2 - PlasmaComponents.CheckBox { - id: showOnlyCurrentScreen - + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Show only tasks from the current screen") checked: plasmoid.configuration.showOnlyCurrentScreen @@ -180,8 +185,8 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { - id: showOnlyCurrentDesktop + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Show only tasks from the current desktop") checked: plasmoid.configuration.showOnlyCurrentDesktop @@ -190,8 +195,8 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { - id: showOnlyCurrentActivity + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Show only tasks from the current activity") checked: plasmoid.configuration.showOnlyCurrentActivity @@ -200,8 +205,8 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { - id: showWindowsOnlyFromLaunchersChk + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Show only tasks from launchers") checked: plasmoid.configuration.showWindowsOnlyFromLaunchers visible: dialog.highLevel @@ -211,8 +216,8 @@ PlasmaComponents.Page { } } - PlasmaComponents.CheckBox { - id: groupTasksChk + LatteComponents.CheckBox { + Layout.maximumWidth: dialog.optionsWidth text: i18n("Group tasks of the same application") checked: plasmoid.configuration.groupTasksByDefault tooltip: i18n("By default group tasks of the same application") @@ -252,6 +257,9 @@ PlasmaComponents.Page { property int group: plasmoid.configuration.launchersGroup + readonly property int buttonsCount: layoutGroupButton.visible ? 3 : 2 + readonly property int buttonSize: (dialog.optionsWidth - (spacing * buttonsCount-1)) / buttonsCount + ExclusiveGroup { id: launchersGroup onCurrentChanged: { @@ -263,7 +271,8 @@ PlasmaComponents.Page { } PlasmaComponents.Button { - Layout.fillWidth: true + Layout.minimumWidth: parent.buttonSize + Layout.maximumWidth: Layout.minimumWidth text: i18nc("unique launchers group","Unique") checked: parent.group === group checkable: true @@ -274,7 +283,9 @@ PlasmaComponents.Page { } PlasmaComponents.Button { - Layout.fillWidth: true + id: layoutGroupButton + Layout.minimumWidth: parent.buttonSize + Layout.maximumWidth: Layout.minimumWidth text: i18nc("layout launchers group","Layout") checked: parent.group === group checkable: true @@ -287,7 +298,8 @@ PlasmaComponents.Page { } PlasmaComponents.Button { - Layout.fillWidth: true + Layout.minimumWidth: parent.buttonSize + Layout.maximumWidth: Layout.minimumWidth text: i18nc("global launchers group","Global") checked: parent.group === group checkable: true @@ -317,6 +329,8 @@ PlasmaComponents.Page { GridLayout { columns: 2 + Layout.minimumWidth: dialog.optionsWidth + Layout.maximumWidth: Layout.minimumWidth Layout.topMargin: units.smallSpacing enabled: !disableAllWindowsFunctionality @@ -361,6 +375,7 @@ PlasmaComponents.Page { } PlasmaComponents.Label { + id: middleClickText text: i18n("Middle Click") } @@ -426,49 +441,68 @@ PlasmaComponents.Page { } } } - } - RowLayout { - Layout.topMargin: units.smallSpacing - spacing: units.smallSpacing - enabled: !disableAllWindowsFunctionality + RowLayout { + spacing: units.smallSpacing + enabled: !disableAllWindowsFunctionality - LatteComponents.ComboBox { - id: modifier - Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 5 - model: ["Shift", "Ctrl", "Alt", "Meta"] + Layout.minimumWidth: middleClickText.width + Layout.maximumWidth: middleClickText.width - currentIndex: plasmoid.configuration.modifier - onCurrentIndexChanged: plasmoid.configuration.modifier = currentIndex - } + LatteComponents.ComboBox { + id: modifier + Layout.fillWidth: true + model: ["Shift", "Ctrl", "Alt", "Meta"] - PlasmaComponents.Label { - text: "+" + currentIndex: plasmoid.configuration.modifier + onCurrentIndexChanged: plasmoid.configuration.modifier = currentIndex + } + + PlasmaComponents.Label { + text: "+" + } } - LatteComponents.ComboBox { - id: modifierClick - Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 10 - model: [i18n("Left Click"), i18n("Middle Click"), i18n("Right Click")] + RowLayout { + spacing: units.smallSpacing + enabled: !disableAllWindowsFunctionality - currentIndex: plasmoid.configuration.modifierClick - onCurrentIndexChanged: plasmoid.configuration.modifierClick = currentIndex - } + readonly property int maxSize: 0.4 * dialog.optionsWidth - PlasmaComponents.Label { - text: "=" - } + LatteComponents.ComboBox { + id: modifierClick + Layout.preferredWidth: 0.7 * parent.maxSize + Layout.maximumWidth: parent.maxSize + model: [i18n("Left Click"), i18n("Middle Click"), i18n("Right Click")] - LatteComponents.ComboBox { - id: modifierClickAction - Layout.fillWidth: true - model: [i18nc("The click action", "None"), i18n("Close Window or Group"), - i18n("New Instance"), i18n("Minimize/Restore Window or Group"), i18n("Cycle Through Tasks"), i18n("Toggle Task Grouping")] + currentIndex: plasmoid.configuration.modifierClick + onCurrentIndexChanged: plasmoid.configuration.modifierClick = currentIndex + } + + PlasmaComponents.Label { + text: "=" + } + + LatteComponents.ComboBox { + id: modifierClickAction + Layout.fillWidth: true + model: [i18nc("The click action", "None"), i18n("Close Window or Group"), + i18n("New Instance"), i18n("Minimize/Restore Window or Group"), i18n("Cycle Through Tasks"), i18n("Toggle Task Grouping")] - currentIndex: plasmoid.configuration.modifierClickAction - onCurrentIndexChanged: plasmoid.configuration.modifierClickAction = currentIndex + currentIndex: plasmoid.configuration.modifierClickAction + onCurrentIndexChanged: plasmoid.configuration.modifierClickAction = currentIndex + } } } + + RowLayout { + Layout.minimumWidth: dialog.optionsWidth + Layout.maximumWidth: Layout.minimumWidth + Layout.topMargin: units.smallSpacing + spacing: units.smallSpacing + enabled: !disableAllWindowsFunctionality + + } } } //! END: Actions @@ -483,10 +517,11 @@ PlasmaComponents.Page { } PlasmaComponents.Button { + Layout.minimumWidth: dialog.optionsWidth + Layout.maximumWidth: Layout.minimumWidth Layout.leftMargin: units.smallSpacing * 2 Layout.rightMargin: units.smallSpacing * 2 Layout.topMargin: units.smallSpacing - Layout.fillWidth: true text: i18n("Remove Latte Tasks Applet") enabled: latteView.latteTasksArePresent