update
This commit is contained in:
Ваше Имя
193
themes/sm1tee/components/IconButton.qml
Normal file
193
themes/sm1tee/components/IconButton.qml
Normal file
@@ -0,0 +1,193 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Effects
|
||||
import QtQuick.Layouts
|
||||
|
||||
Item {
|
||||
id: iconButton
|
||||
|
||||
signal clicked
|
||||
|
||||
property bool active: false
|
||||
readonly property bool isActive: active || focus || mouseArea.pressed || mouseArea.containsMouse
|
||||
property string icon: ""
|
||||
property int iconSize: 16
|
||||
property color contentColor: "#FFFFFF"
|
||||
property color activeContentColor: "#FFFFFF"
|
||||
property string label: ""
|
||||
property bool showLabel: true
|
||||
property string fontFamily: "RedHatDisplay"
|
||||
property int fontWeight: 400
|
||||
property int fontSize: 12
|
||||
property color backgroundColor: "#FFFFFF"
|
||||
property double backgroundOpacity: 0.0
|
||||
property color activeBackgroundColor: "#FFFFFF"
|
||||
property double activeBackgroundOpacity: 0.15
|
||||
property string tooltipText: ""
|
||||
property int borderRadius: 10
|
||||
property int borderRadiusLeft: borderRadius
|
||||
property int borderRadiusRight: borderRadius
|
||||
property int borderSize: 0
|
||||
property color borderColor: isActive ? iconButton.activeContentColor : iconButton.contentColor
|
||||
property int preferredWidth: -1
|
||||
|
||||
width: preferredWidth !== -1 ? preferredWidth : buttonContentRow.width
|
||||
height: iconSize * 2
|
||||
|
||||
Rectangle {
|
||||
id: buttonBackground
|
||||
anchors.fill: parent
|
||||
color: iconButton.isActive ? iconButton.activeBackgroundColor : iconButton.backgroundColor
|
||||
opacity: iconButton.isActive ? iconButton.activeBackgroundOpacity : iconButton.backgroundOpacity
|
||||
topLeftRadius: iconButton.borderRadiusLeft
|
||||
topRightRadius: iconButton.borderRadiusRight
|
||||
bottomLeftRadius: iconButton.borderRadiusLeft
|
||||
bottomRightRadius: iconButton.borderRadiusRight
|
||||
|
||||
Behavior on opacity {
|
||||
enabled: Config.enableAnimations
|
||||
NumberAnimation {
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
enabled: Config.enableAnimations
|
||||
ColorAnimation {
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: buttonBorder
|
||||
color: "transparent"
|
||||
topLeftRadius: iconButton.borderRadiusLeft
|
||||
topRightRadius: iconButton.borderRadiusRight
|
||||
bottomLeftRadius: iconButton.borderRadiusLeft
|
||||
bottomRightRadius: iconButton.borderRadiusRight
|
||||
anchors.fill: parent
|
||||
visible: iconButton.borderSize > 0 || iconButton.focus
|
||||
border {
|
||||
color: iconButton.borderColor
|
||||
width: iconButton.focus ? iconButton.borderSize || 2 : (iconButton.borderSize > 0 ? iconButton.borderSize : 0)
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: buttonContentRow
|
||||
height: parent.height
|
||||
spacing: 0
|
||||
|
||||
Item {
|
||||
id: iconContainer
|
||||
Layout.preferredWidth: parent.height
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
// Скрытая иконка-источник для MultiEffect
|
||||
Image {
|
||||
id: iconSource
|
||||
source: iconButton.icon
|
||||
anchors.centerIn: parent
|
||||
width: iconButton.iconSize
|
||||
height: width
|
||||
sourceSize: Qt.size(width, height)
|
||||
fillMode: Image.PreserveAspectFit
|
||||
visible: false // Скрываем оригинал
|
||||
}
|
||||
|
||||
// Применяем эффект к скрытому источнику
|
||||
MultiEffect {
|
||||
id: iconEffect
|
||||
source: iconSource
|
||||
anchors.fill: iconSource
|
||||
colorization: 1.0
|
||||
colorizationColor: iconButton.isActive ? iconButton.activeContentColor : iconButton.contentColor
|
||||
opacity: iconButton.enabled ? 1.0 : 0.3
|
||||
|
||||
// Добавляем анимацию для плавного перехода цвета
|
||||
Behavior on colorizationColor {
|
||||
enabled: Config.enableAnimations
|
||||
ColorAnimation {
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
enabled: Config.enableAnimations
|
||||
NumberAnimation {
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: buttonLabel
|
||||
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
|
||||
Layout.fillWidth: true
|
||||
elide: Text.ElideRight
|
||||
text: iconButton.label
|
||||
visible: iconButton.showLabel && text !== ""
|
||||
font.family: iconButton.fontFamily
|
||||
font.pixelSize: iconButton.fontSize
|
||||
font.weight: iconButton.fontWeight
|
||||
rightPadding: 10
|
||||
color: iconButton.isActive ? iconButton.activeContentColor : iconButton.contentColor
|
||||
opacity: iconButton.enabled ? 1.0 : 0.5
|
||||
|
||||
Behavior on color {
|
||||
enabled: Config.enableAnimations
|
||||
ColorAnimation {
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
enabled: Config.enableAnimations
|
||||
NumberAnimation {
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
if (iconButton.preferredWidth !== -1) {
|
||||
Layout.preferredWidth = iconButton.width - iconContainer.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: parent.enabled
|
||||
onClicked: iconButton.clicked()
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
ToolTip {
|
||||
parent: mouseArea
|
||||
enabled: Config.tooltipsEnable
|
||||
property bool shouldShow: enabled && mouseArea.containsMouse && iconButton.tooltipText !== "" || enabled && iconButton.focus && iconButton.tooltipText !== ""
|
||||
visible: shouldShow
|
||||
delay: 300
|
||||
contentItem: Text {
|
||||
font.family: Config.tooltipsFontFamily
|
||||
font.pixelSize: Config.tooltipsFontSize
|
||||
text: iconButton.tooltipText
|
||||
color: Config.tooltipsContentColor
|
||||
}
|
||||
background: Rectangle {
|
||||
color: Config.tooltipsBackgroundColor
|
||||
opacity: Config.tooltipsBackgroundOpacity
|
||||
border.width: 0
|
||||
radius: Config.tooltipsBorderRadius
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onPressed: function (event) {
|
||||
if (event.key == Qt.Key_Return || event.key == Qt.Key_Enter || event.key === Qt.Key_Space) {
|
||||
iconButton.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user