feat: introduce StatusIconButton component

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.
This commit is contained in:
Pascal Precht 2020-09-25 14:13:40 +02:00 committed by Iuri Matias
parent bc7b825f55
commit 0e4a6196fc
2 changed files with 64 additions and 0 deletions

View File

@ -0,0 +1,63 @@
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
}
}

View File

@ -1,6 +1,7 @@
StatusButton 1.0 StatusButton.qml
StatusChatInfo 1.0 StatusChatInfo.qml
StatusChatInfoButton 1.0 StatusChatInfoButton.qml
StatusIconButton 1.0 StatusIconButton.qml
StatusImageIdenticon 1.0 StatusImageIdenticon.qml
StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml
StatusRadioButton 1.0 StatusRadioButton.qml