mirror
/
nheko
mirror of https://github.com/Nheko-Reborn/nheko
2
0
Fork 1
Code Issues Releases Wiki Activity

Simplify Ripple effect and make it easier to use everywhere

Browse Source
pull/899/head
Nicolas Werner 3 years ago
parent 87ba5796bc
commit 1c83ce1e79
No known key found for this signature in database
GPG Key ID: C8D75E610773F2D9
6 changed files with 97 additions and 154 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      resources/qml/Avatar.qml
  2. 7
      resources/qml/Completer.qml
  3. 2
      resources/qml/ImageButton.qml
  4. 5
      resources/qml/RoomList.qml
  5. 2
      resources/qml/components/TextButton.qml
  6. 220
      resources/qml/ui/Ripple.qml

15
resources/qml/Avatar.qml
Unescape View File

@ -47,17 +47,6 @@ Rectangle {
anchors.fill: parent
visible: Settings.useIdenticon && img.status != Image.Ready
source: Settings.useIdenticon ? ("image://jdenticon/" + (userid !== "" ? userid : roomid) + "?radius=" + (Settings.avatarCircles ? 100 : 25)) : ""
MouseArea {
anchors.fill: parent
Ripple {
rippleTarget: parent
color: Qt.rgba(Nheko.colors.alternateBase.r, Nheko.colors.alternateBase.g, Nheko.colors.alternateBase.b, 0.5)
}
}
}
Image {
@ -118,4 +107,8 @@ Rectangle {
onSingleTapped: avatar.clicked(eventPoint)
}
Ripple {
color: Qt.rgba(Nheko.colors.alternateBase.r, Nheko.colors.alternateBase.g, Nheko.colors.alternateBase.b, 0.5)
}
}

7
resources/qml/Completer.qml
Unescape View File

@ -129,10 +129,9 @@ Popup {
if (popup.completerName == "room")
popup.completionSelected(model.roomid);
}
Ripple {
rippleTarget: mouseArea
color: Qt.rgba(Nheko.colors.base.r, Nheko.colors.base.g, Nheko.colors.base.b, 0.5)
}
}
Ripple {
color: Qt.rgba(Nheko.colors.base.r, Nheko.colors.base.g, Nheko.colors.base.b, 0.5)
}
DelegateChooser {

2
resources/qml/ImageButton.qml
Unescape View File

@ -39,8 +39,6 @@ AbstractButton {
Ripple {
color: Qt.rgba(buttonTextColor.r, buttonTextColor.g, buttonTextColor.b, 0.5)
clip: false
rippleTarget: button
}
}

5
resources/qml/RoomList.qml
Unescape View File

@ -4,6 +4,7 @@
// SPDX-License-Identifier: GPL-3.0-or-later
import "./dialogs"
import "./ui"
import Qt.labs.platform 1.1 as Platform
import QtQml 2.12
import QtQuick 2.15
@ -137,6 +138,10 @@ Page {
required property bool isDirect
required property string directChatOtherUserId
Ripple {
color: Qt.rgba(Nheko.colors.dark.r, Nheko.colors.dark.g, Nheko.colors.dark.b, 0.5)
}
height: avatarSize + 2 * Nheko.paddingMedium
width: ListView.view.width
state: "normal"

2
resources/qml/components/TextButton.qml
Unescape View File

@ -42,8 +42,6 @@ AbstractButton {
Ripple {
color: Qt.rgba(buttonTextColor.r, buttonTextColor.g, buttonTextColor.b, 0.5)
clip: false
rippleTarget: button
}
}

220
resources/qml/ui/Ripple.qml
Unescape View File

@ -4,179 +4,129 @@
// SPDX-License-Identifier: GPL-3.0-or-later
import QtGraphicalEffects 1.0
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick 2.15
import QtQuick.Controls 2.15
Item {
id: ripple
property alias clip: backgroundLayer.clip
property real radius: 0
property color color: "#22000000"
property real maxRadius: Math.max(width, height)
readonly property real radiusAnimationRate: 0.05
readonly property real radiusTailAnimationRate: 0.5
readonly property real opacityAnimationDuration: 300
readonly property real diameter: radius * 2
property real centerX
property real centerY
property var rippleTarget: parent
function start() {
console.log("Starting ripple animation");
ripple.state = "ACTIVE";
}
function stop() {
console.log("Stopping ripple animation");
ripple.state = "NORMAL";
}
anchors.fill: parent
state: "NORMAL"
states: [
State {
name: "NORMAL"
},
State {
name: "ACTIVE"
}
]
transitions: [
Transition {
from: "NORMAL"
to: "ACTIVE"
SequentialAnimation {
ScriptAction {
script: {
ripple.opacity = 1;
ripple.visible = true;
}
}
NumberAnimation {
id: radius_animation
PointHandler {
id: ph
target: ripple
properties: "radius"
from: 0
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusAnimationRate
easing {
type: Easing.OutQuad
}
onGrabChanged: {
circle.centerX = point.position.x
circle.centerY = point.position.y
}
}
target: Rectangle {
id: backgroundLayer
parent: rippleTarget
}
anchors.fill: parent
color: "transparent"
clip: true
},
Transition {
from: "ACTIVE"
to: "NORMAL"
Rectangle {
id: circle
SequentialAnimation {
ParallelAnimation {
NumberAnimation {
id: radius_tail_animation
property real centerX
property real centerY
target: ripple
properties: "radius"
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusTailAnimationRate
x: centerX - radius
y: centerY - radius
easing {
type: Easing.Linear
}
height: radius*2
width: radius*2
radius: 0
color: ripple.color
state: ph.active ? "ACTIVE" : "NORMAL"
states: [
State {
name: "NORMAL"
},
State {
name: "ACTIVE"
}
]
transitions: [
Transition {
from: "NORMAL"
to: "ACTIVE"
NumberAnimation {
id: opacity_animation
SequentialAnimation {
//PropertyAction { target: circle; property: "centerX"; value: ph.point.position.x }
//PropertyAction { target: circle; property: "centerY"; value: ph.point.position.y }
PropertyAction { target: circle; property: "visible"; value: true }
PropertyAction { target: circle; property: "opacity"; value: 1 }
target: ripple
properties: "opacity"
to: 0
duration: ripple.opacityAnimationDuration
NumberAnimation {
id: radius_animation
easing {
type: Easing.InQuad
}
target: circle
properties: "radius"
from: 0
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusAnimationRate
}
}
easing {
type: Easing.OutQuad
}
ScriptAction {
script: {
ripple.visible = false;
}
}
}
}
}
}
]
Connections {
// Button
// Default to center
function onPressed(mouse) {
// MouseArea
if (mouse) {
ripple.centerX = mouse.x;
ripple.centerY = mouse.y;
} else if (rippleTarget.pressX) {
ripple.centerX = rippleTarget.pressX;
ripple.centerY = rippleTarget.pressY;
} else {
ripple.centerX = width / 2;
ripple.centerY = height / 2;
}
ripple.start();
}
},
Transition {
from: "ACTIVE"
to: "NORMAL"
function onReleased() {
ripple.stop();
}
SequentialAnimation {
ParallelAnimation {
NumberAnimation {
id: radius_tail_animation
function onExited() {
ripple.stop();
}
target: circle
properties: "radius"
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusTailAnimationRate
function onCanceled() {
ripple.stop();
}
easing {
type: Easing.Linear
}
function onClicked() {
ripple.stop();
}
}
target: rippleTarget
ignoreUnknownSignals: true
}
NumberAnimation {
id: opacity_animation
Rectangle {
id: backgroundLayer
target: ripple
properties: "opacity"
to: 0
duration: ripple.opacityAnimationDuration
anchors.fill: parent
color: "transparent"
clip: true
easing {
type: Easing.InQuad
}
Rectangle {
id: circle
}
x: ripple.centerX - ripple.radius
y: ripple.centerY - ripple.radius
height: ripple.diameter
width: ripple.diameter
radius: ripple.radius
color: ripple.color
}
PropertyAction { target: circle; property: "visible"; value: false }
}
}
]
}
}
}
}

Write Preview
Loading…
Cancel
Save