feat(StatusIconTextButton): Created new control

It defines a button composed with an icon and plain text.
It has been documented and added to sandbox.
This commit is contained in:
Noelia 2022-07-04 13:12:48 +02:00 committed by Noelia
parent 016a0eac46
commit c98f144fd8
5 changed files with 108 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -31,6 +31,7 @@
\li \l{StatusSlider} \li \l{StatusSlider}
\li \l{StatusSelect} \li \l{StatusSelect}
\li \l{StatusBaseInput} \li \l{StatusBaseInput}
\li \l{StatusIconTextButton}
\li \l{StatusIdenticonRing} \li \l{StatusIdenticonRing}
\li \l{StatusInput} \li \l{StatusInput}
\li \l{StatusItemPicker} \li \l{StatusItemPicker}

View File

@ -343,4 +343,26 @@ Column {
text: "Button with Emoji" text: "Button with Emoji"
icon.emoji: "🖼️️" icon.emoji: "🖼️️"
} }
RowLayout {
spacing: 20
StatusIconTextButton {
Layout.alignment: Qt.AlignVCenter
spacing: 0
statusIcon: "next"
icon.width: 24
icon.height: 24
iconRotation: 180
text: "Previous page"
font.pixelSize: 15
onClicked: testText.visible = !testText.visible
}
StatusBaseText {
id: testText
Layout.alignment: Qt.AlignVCenter
text: "Click and hide!"
font.pixelSize: 15
}
}
} }

View File

@ -0,0 +1,83 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
/*!
\qmltype StatusIconTextButton
\inherits Item
\inqmlmodule StatusQ.Controls
\since StatusQ.Controls 0.1
\brief It presents an icon + plain text button. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html}{AbstractButton}.
The \c StatusIconTextButton is a clickable icon + text control.
NOTE: It only contemplates `display` property as `AbstractButton.TextBesideIcon`.
Example of how the component looks like:
\image status_icon_text_button.png
Example of how to use it:
\qml
StatusIconTextButton {
spacing: 0
statusIcon: "next"
iconRotation: 180
icon.width: 12
icon.height: 12
text: qsTr("Back")
onClicked: console.log("Clicked!")
}
\endqml
For a list of components available see StatusQ.
*/
AbstractButton {
id: root
/*!
\qmlproperty string StatusIconTextButton::statusIcon
This property holds the status icon name.
*/
property string statusIcon
/*!
\qmlproperty int StatusIconTextButton::iconRotation
This property holds the status icon rotation.
*/
property int iconRotation
/*!
\qmlproperty color StatusIconTextButton::textColor
This property holds the text color.
*/
property color textColor: Theme.palette.primaryColor1
icon.color: Theme.palette.primaryColor1
icon.height: 24
icon.width: 24
font.pixelSize: 13
contentItem: RowLayout {
spacing: root.spacing
StatusIcon {
Layout.alignment: Qt.AlignVCenter
icon: root.statusIcon
color: root.icon.color
width: root.icon.width
height: root.icon.height
rotation: root.iconRotation
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: root.text
color: root.textColor
font.pixelSize: root.font.pixelSize
}
}
// TODO: To remove when switch to Qt 5.15
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.NoButton
hoverEnabled: true
}
}

View File

@ -45,3 +45,5 @@ StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
StatusImageCrop 0.1 StatusImageCrop.qml StatusImageCrop 0.1 StatusImageCrop.qml
StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
StatusDropdown 0.1 StatusDropdown.qml
StatusIconTextButton 0.1 StatusIconTextButton.qml