mirror of
https://github.com/Nheko-Reborn/nheko.git
synced 2024-11-21 18:50:47 +03:00
Merge f1ce494b74
into ae9d8ba4ae
This commit is contained in:
commit
d1ac6a943b
17 changed files with 200 additions and 137 deletions
|
@ -805,6 +805,7 @@ set(QML_SOURCES
|
|||
resources/qml/pages/WelcomePage.qml
|
||||
resources/qml/ui/NhekoSlider.qml
|
||||
resources/qml/ui/Ripple.qml
|
||||
resources/qml/ui/RippleImpl.qml
|
||||
resources/qml/ui/Snackbar.qml
|
||||
resources/qml/ui/Spinner.qml
|
||||
resources/qml/ui/animations/BlinkAnimation.qml
|
||||
|
|
|
@ -79,6 +79,7 @@ ColumnLayout {
|
|||
from: ""
|
||||
reversible: true
|
||||
to: "focused"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
NumberAnimation {
|
||||
alwaysRunToEnd: true
|
||||
|
@ -164,6 +165,7 @@ ColumnLayout {
|
|||
from: ""
|
||||
reversible: true
|
||||
to: "focused"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
NumberAnimation {
|
||||
alwaysRunToEnd: true
|
||||
|
|
|
@ -335,6 +335,7 @@ Rectangle {
|
|||
y: messageInput.positionToRectangle(messageInput.completerTriggeredAt).y - height
|
||||
|
||||
enter: Transition {
|
||||
enabled: !Settings.reducedMotion
|
||||
NumberAnimation {
|
||||
duration: 100
|
||||
from: 0
|
||||
|
@ -343,6 +344,7 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
exit: Transition {
|
||||
enabled: !Settings.reducedMotion
|
||||
NumberAnimation {
|
||||
duration: 100
|
||||
from: 1
|
||||
|
|
|
@ -686,6 +686,7 @@ Item {
|
|||
from: ""
|
||||
reversible: true
|
||||
to: "shown"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
PauseAnimation {
|
||||
|
|
|
@ -68,6 +68,7 @@ Item {
|
|||
from: "Invisible"
|
||||
reversible: true
|
||||
to: "Visible"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
NumberAnimation {
|
||||
|
|
|
@ -430,6 +430,7 @@ Pane {
|
|||
|
||||
Transition {
|
||||
id: reducedMotionTransitionExit
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
PropertyAnimation {
|
||||
duration: 200
|
||||
|
@ -440,6 +441,7 @@ Pane {
|
|||
}
|
||||
Transition {
|
||||
id: reducedMotionTransitionEnter
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
PropertyAction {
|
||||
|
|
|
@ -107,6 +107,7 @@ TimelineEvent {
|
|||
transitions: Transition {
|
||||
from: ""
|
||||
to: "revealed"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
PropertyAnimation {
|
||||
|
|
|
@ -107,6 +107,7 @@ TimelineEvent {
|
|||
transitions: Transition {
|
||||
from: ""
|
||||
to: "revealed"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
PropertyAnimation {
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
import QtQuick 2.5
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import im.nheko 1.0
|
||||
|
||||
Switch {
|
||||
id: toggleButton
|
||||
|
@ -66,6 +67,7 @@ Switch {
|
|||
Transition {
|
||||
reversible: true
|
||||
to: "off"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
|
|
|
@ -74,6 +74,7 @@ AbstractButton {
|
|||
from: "ImageVisible"
|
||||
to: "BlurhashVisible"
|
||||
reversible: true
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
PropertyAction {
|
||||
|
|
|
@ -2,128 +2,18 @@
|
|||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import QtQuick
|
||||
import QtQuick 2.15
|
||||
import im.nheko 1.0
|
||||
|
||||
Item {
|
||||
id: wrapper
|
||||
property color color
|
||||
|
||||
Loader {
|
||||
Component {
|
||||
id: ripple
|
||||
|
||||
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
|
||||
property var rippleTarget: parent
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
PointHandler {
|
||||
id: ph
|
||||
|
||||
onGrabChanged: (_, point) => {
|
||||
circle.centerX = point.position.x
|
||||
circle.centerY = point.position.y
|
||||
}
|
||||
|
||||
target: Rectangle {
|
||||
id: backgroundLayer
|
||||
parent: rippleTarget
|
||||
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
clip: true
|
||||
|
||||
Rectangle {
|
||||
id: circle
|
||||
|
||||
property real centerX
|
||||
property real centerY
|
||||
|
||||
x: centerX - radius
|
||||
y: centerY - radius
|
||||
|
||||
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"
|
||||
|
||||
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 }
|
||||
|
||||
NumberAnimation {
|
||||
id: radius_animation
|
||||
|
||||
target: circle
|
||||
properties: "radius"
|
||||
from: 0
|
||||
to: ripple.maxRadius
|
||||
duration: ripple.maxRadius / ripple.radiusAnimationRate
|
||||
|
||||
easing {
|
||||
type: Easing.OutQuad
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
Transition {
|
||||
from: "ACTIVE"
|
||||
to: "NORMAL"
|
||||
|
||||
SequentialAnimation {
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
id: radius_tail_animation
|
||||
|
||||
target: circle
|
||||
properties: "radius"
|
||||
to: ripple.maxRadius
|
||||
duration: ripple.maxRadius / ripple.radiusTailAnimationRate
|
||||
|
||||
easing {
|
||||
type: Easing.Linear
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
id: opacity_animation
|
||||
|
||||
target: circle
|
||||
properties: "opacity"
|
||||
to: 0
|
||||
duration: ripple.opacityAnimationDuration
|
||||
|
||||
easing {
|
||||
type: Easing.InQuad
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
PropertyAction { target: circle; property: "visible"; value: false }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
RippleImpl { color: color; parent: wrapper.parent; }
|
||||
}
|
||||
sourceComponent: !Settings.reducedMotion ? ripple : undefined
|
||||
}
|
||||
}
|
||||
|
|
131
resources/qml/ui/RippleImpl.qml
Normal file
131
resources/qml/ui/RippleImpl.qml
Normal file
|
@ -0,0 +1,131 @@
|
|||
// SPDX-FileCopyrightText: Nheko Contributors
|
||||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.15
|
||||
|
||||
Item {
|
||||
id: ripple
|
||||
|
||||
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
|
||||
property var rippleTarget: parent
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
PointHandler {
|
||||
id: ph
|
||||
|
||||
onGrabChanged: (_, point) => {
|
||||
circle.centerX = point.position.x
|
||||
circle.centerY = point.position.y
|
||||
}
|
||||
|
||||
target: Rectangle {
|
||||
id: backgroundLayer
|
||||
parent: rippleTarget
|
||||
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
clip: true
|
||||
|
||||
Rectangle {
|
||||
id: circle
|
||||
|
||||
property real centerX
|
||||
property real centerY
|
||||
|
||||
x: centerX - radius
|
||||
y: centerY - radius
|
||||
|
||||
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"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
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 }
|
||||
|
||||
NumberAnimation {
|
||||
id: radius_animation
|
||||
|
||||
target: circle
|
||||
properties: "radius"
|
||||
from: 0
|
||||
to: ripple.maxRadius
|
||||
duration: ripple.maxRadius / ripple.radiusAnimationRate
|
||||
|
||||
easing {
|
||||
type: Easing.OutQuad
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
Transition {
|
||||
from: "ACTIVE"
|
||||
to: "NORMAL"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
id: radius_tail_animation
|
||||
|
||||
target: circle
|
||||
properties: "radius"
|
||||
to: ripple.maxRadius
|
||||
duration: ripple.maxRadius / ripple.radiusTailAnimationRate
|
||||
|
||||
easing {
|
||||
type: Easing.Linear
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
id: opacity_animation
|
||||
|
||||
target: circle
|
||||
properties: "opacity"
|
||||
to: 0
|
||||
duration: ripple.opacityAnimationDuration
|
||||
|
||||
easing {
|
||||
type: Easing.InQuad
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
PropertyAction { target: circle; property: "visible"; value: false }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -61,6 +61,7 @@ Popup {
|
|||
}
|
||||
|
||||
enter: Transition {
|
||||
enabled: !Settings.reducedMotion
|
||||
NumberAnimation {
|
||||
target: snackbar
|
||||
property: "opacity"
|
||||
|
@ -79,6 +80,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
exit: Transition {
|
||||
enabled: !Settings.reducedMotion
|
||||
NumberAnimation {
|
||||
target: snackbar
|
||||
property: "opacity"
|
||||
|
|
|
@ -146,6 +146,7 @@ Rectangle {
|
|||
Transition {
|
||||
from: ""
|
||||
to: "shown"
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
PauseAnimation {
|
||||
|
@ -163,6 +164,7 @@ Rectangle {
|
|||
Transition {
|
||||
from: "shown"
|
||||
to: ""
|
||||
enabled: !Settings.reducedMotion
|
||||
|
||||
SequentialAnimation {
|
||||
PauseAnimation {
|
||||
|
|
|
@ -55,21 +55,21 @@ Nheko::inactiveColors() const
|
|||
auto theme = UserSettings::instance()->theme();
|
||||
if (theme == QLatin1String("light")) {
|
||||
static QPalette lightInactive = [] {
|
||||
auto lightInactive = Theme::paletteFromTheme(u"light");
|
||||
auto lightInactive = Theme::paletteFromTheme(Theme::Kind::Light);
|
||||
lightInactive.setCurrentColorGroup(QPalette::ColorGroup::Inactive);
|
||||
return lightInactive;
|
||||
}();
|
||||
return lightInactive;
|
||||
} else if (theme == QLatin1String("dark")) {
|
||||
static QPalette darkInactive = [] {
|
||||
auto darkInactive = Theme::paletteFromTheme(u"dark");
|
||||
auto darkInactive = Theme::paletteFromTheme(Theme::Kind::Dark);
|
||||
darkInactive.setCurrentColorGroup(QPalette::ColorGroup::Inactive);
|
||||
return darkInactive;
|
||||
}();
|
||||
return darkInactive;
|
||||
} else {
|
||||
static QPalette originalInactive = [] {
|
||||
auto originalInactive = Theme::paletteFromTheme(u"system");
|
||||
auto originalInactive = Theme::paletteFromTheme(Theme::Kind::System);
|
||||
originalInactive.setCurrentColorGroup(QPalette::ColorGroup::Inactive);
|
||||
return originalInactive;
|
||||
}();
|
||||
|
@ -80,7 +80,7 @@ Nheko::inactiveColors() const
|
|||
Theme
|
||||
Nheko::theme() const
|
||||
{
|
||||
return Theme(UserSettings::instance()->theme());
|
||||
return Theme(Theme::kindFromString(UserSettings::instance()->theme()));
|
||||
}
|
||||
|
||||
int
|
||||
|
|
|
@ -5,10 +5,10 @@
|
|||
#include "Theme.h"
|
||||
|
||||
QPalette
|
||||
Theme::paletteFromTheme(QStringView theme)
|
||||
Theme::paletteFromTheme(Theme::Kind theme)
|
||||
{
|
||||
static QPalette original;
|
||||
if (theme == u"light") {
|
||||
if (theme == Kind::Light) {
|
||||
static QPalette lightActive = [] {
|
||||
QPalette lightActive(
|
||||
/*windowText*/ QColor(0x33, 0x33, 0x33),
|
||||
|
@ -30,7 +30,7 @@ Theme::paletteFromTheme(QStringView theme)
|
|||
return lightActive;
|
||||
}();
|
||||
return lightActive;
|
||||
} else if (theme == u"dark") {
|
||||
} else if (theme == Kind::Dark) {
|
||||
static QPalette darkActive = [] {
|
||||
QPalette darkActive(
|
||||
/*windowText*/ QColor(0xca, 0xcc, 0xd1),
|
||||
|
@ -57,27 +57,30 @@ Theme::paletteFromTheme(QStringView theme)
|
|||
}
|
||||
}
|
||||
|
||||
Theme::Theme(QStringView theme)
|
||||
QPalette
|
||||
Theme::paletteFromTheme(QStringView theme)
|
||||
{
|
||||
return paletteFromTheme(kindFromString(theme));
|
||||
}
|
||||
|
||||
Theme::Theme(Theme::Kind theme)
|
||||
{
|
||||
auto p = paletteFromTheme(theme);
|
||||
separator_ = p.mid().color();
|
||||
if (theme == u"light") {
|
||||
if (theme == Kind::Light) {
|
||||
sidebarBackground_ = QColor(0x23, 0x36, 0x49);
|
||||
alternateButton_ = QColor(0xcc, 0xcc, 0xcc);
|
||||
red_ = QColor(0xa8, 0x23, 0x53);
|
||||
green_ = QColor(QColorConstants::Svg::green);
|
||||
orange_ = QColor(0xfc, 0xbe, 0x05);
|
||||
error_ = QColor(0xdd, 0x3d, 0x3d);
|
||||
} else if (theme == u"dark") {
|
||||
} else if (theme == Kind::Dark) {
|
||||
sidebarBackground_ = QColor(0x2d, 0x31, 0x39);
|
||||
alternateButton_ = QColor(0x41, 0x4A, 0x59);
|
||||
red_ = QColor(0xa8, 0x23, 0x53);
|
||||
green_ = QColor(QColorConstants::Svg::green);
|
||||
orange_ = QColor(0xfc, 0xc5, 0x3a);
|
||||
error_ = QColor(0xdd, 0x3d, 0x3d);
|
||||
} else {
|
||||
sidebarBackground_ = p.window().color();
|
||||
alternateButton_ = p.dark().color();
|
||||
red_ = QColor(QColorConstants::Svg::red);
|
||||
green_ = QColor(QColorConstants::Svg::green);
|
||||
orange_ = QColor(QColorConstants::Svg::orange); // SVG orange
|
||||
|
@ -85,4 +88,18 @@ Theme::Theme(QStringView theme)
|
|||
}
|
||||
}
|
||||
|
||||
Theme::Kind
|
||||
Theme::kindFromString(QStringView kind)
|
||||
{
|
||||
if (kind == u"light") {
|
||||
return Kind::Light;
|
||||
} else if (kind == u"dark") {
|
||||
return Kind::Dark;
|
||||
} else if (kind == u"system") {
|
||||
return Kind::System;
|
||||
} else {
|
||||
throw std::invalid_argument("Unknown theme kind: " + kind.toString().toStdString());
|
||||
}
|
||||
}
|
||||
|
||||
#include "moc_Theme.cpp"
|
||||
|
|
|
@ -14,7 +14,6 @@ class Theme final : public QPalette
|
|||
QML_ANONYMOUS
|
||||
|
||||
Q_PROPERTY(QColor sidebarBackground READ sidebarBackground CONSTANT)
|
||||
Q_PROPERTY(QColor alternateButton READ alternateButton CONSTANT)
|
||||
Q_PROPERTY(QColor separator READ separator CONSTANT)
|
||||
Q_PROPERTY(QColor red READ red CONSTANT)
|
||||
Q_PROPERTY(QColor green READ green CONSTANT)
|
||||
|
@ -23,12 +22,20 @@ class Theme final : public QPalette
|
|||
Q_PROPERTY(QColor online READ online CONSTANT)
|
||||
Q_PROPERTY(QColor unavailable READ unavailable CONSTANT)
|
||||
public:
|
||||
Theme() {}
|
||||
explicit Theme(QStringView theme);
|
||||
enum class Kind {
|
||||
Light,
|
||||
Dark,
|
||||
System,
|
||||
};
|
||||
static Kind kindFromString(QStringView kind);
|
||||
|
||||
static QPalette paletteFromTheme(Kind theme);
|
||||
static QPalette paletteFromTheme(QStringView theme);
|
||||
|
||||
Theme() {}
|
||||
explicit Theme(Kind theme);
|
||||
|
||||
QColor sidebarBackground() const { return sidebarBackground_; }
|
||||
QColor alternateButton() const { return alternateButton_; }
|
||||
QColor separator() const { return separator_; }
|
||||
QColor red() const { return red_; }
|
||||
QColor green() const { return green_; }
|
||||
|
@ -38,5 +45,5 @@ public:
|
|||
QColor unavailable() const { return QColor(0xff, 0x99, 0x33); }
|
||||
|
||||
private:
|
||||
QColor sidebarBackground_, separator_, red_, green_, error_, orange_, alternateButton_;
|
||||
QColor sidebarBackground_, separator_, red_, green_, error_, orange_;
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue