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:
parent
bc7b825f55
commit
0e4a6196fc
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
StatusButton 1.0 StatusButton.qml
|
StatusButton 1.0 StatusButton.qml
|
||||||
StatusChatInfo 1.0 StatusChatInfo.qml
|
StatusChatInfo 1.0 StatusChatInfo.qml
|
||||||
StatusChatInfoButton 1.0 StatusChatInfoButton.qml
|
StatusChatInfoButton 1.0 StatusChatInfoButton.qml
|
||||||
|
StatusIconButton 1.0 StatusIconButton.qml
|
||||||
StatusImageIdenticon 1.0 StatusImageIdenticon.qml
|
StatusImageIdenticon 1.0 StatusImageIdenticon.qml
|
||||||
StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml
|
StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml
|
||||||
StatusRadioButton 1.0 StatusRadioButton.qml
|
StatusRadioButton 1.0 StatusRadioButton.qml
|
||||||
|
|
Loading…
Reference in New Issue