mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-29 07:47:28 +00:00
0e4a6196fc
This component is similar to a StatusRoundButton that holds an icon. However, the StatusRoundButton has a fixed number of variations based on the designs. Sometimes we need clickable icons that have a different look and feel E.g. in the chat input component. This component aims to cover that use case.
64 lines
1.5 KiB
QML
64 lines
1.5 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtGraphicalEffects 1.13
|
|
import "../../imports"
|
|
import "../../shared"
|
|
|
|
RoundButton {
|
|
id: control
|
|
|
|
property string type: "primary"
|
|
|
|
implicitHeight: 32
|
|
implicitWidth: 32
|
|
|
|
icon.height: 20
|
|
icon.width: 20
|
|
icon.color: (hovered || highlighted) ? Style.current.blue : Style.current.darkGrey
|
|
radius: Style.current.radius
|
|
|
|
onIconChanged: {
|
|
icon.source = icon.name ? "../../app/img/" + icon.name + ".svg" : ""
|
|
}
|
|
|
|
background: Rectangle {
|
|
anchors.fill: parent
|
|
color: {
|
|
if (type === "secondary") {
|
|
return "transparent"
|
|
}
|
|
return hovered || highlighted ? Style.current.lightBlue : "transparent"
|
|
}
|
|
radius: control.radius
|
|
}
|
|
|
|
contentItem: Item {
|
|
anchors.fill: parent
|
|
|
|
SVGImage {
|
|
id: iconImg
|
|
visible: false
|
|
source: control.icon.source
|
|
height: control.icon.height
|
|
width: control.icon.width
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
fillMode: Image.PreserveAspectFit
|
|
}
|
|
|
|
ColorOverlay {
|
|
anchors.fill: iconImg
|
|
source: iconImg
|
|
color: control.icon.color
|
|
antialiasing: true
|
|
smooth: true
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
cursorShape: Qt.PointingHandCursor
|
|
anchors.fill: parent
|
|
onPressed: mouse.accepted = false
|
|
}
|
|
}
|