feat(Components): introduce `StatusRoundIcon` component
This commit introduces a `StatusRoundIcon` component which renders a `StatusIcon` inside a rounded rectangle. This is similar to `StatusRoundButton`, just that it isn't a clickable component. With these changes, we also introduce a new `StatusIconSettings` config object that can be used across component that need icon configuration. The configuration includes the following properties: - `name` - Name of the icon and used to locate the asset - `width` - `height` Closes #53
This commit is contained in:
parent
8b7911cff9
commit
9cbdf4fa97
|
@ -34,4 +34,8 @@ GridLayout {
|
||||||
StatusBadge {
|
StatusBadge {
|
||||||
value: 100
|
value: 100
|
||||||
}
|
}
|
||||||
|
|
||||||
|
StatusRoundIcon {
|
||||||
|
icon.name: "info"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
import QtQuick 2.14
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: statusRoundedIcon
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
radius: width / 2;
|
||||||
|
|
||||||
|
color: Theme.palette.primaryColor3;
|
||||||
|
property StatusIconSettings icon: StatusIconSettings {
|
||||||
|
width: 24
|
||||||
|
height: 24
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusIcon {
|
||||||
|
id: statusIcon
|
||||||
|
anchors.centerIn: parent
|
||||||
|
|
||||||
|
width: statusRoundedIcon.icon.width
|
||||||
|
height: statusRoundedIcon.icon.height
|
||||||
|
|
||||||
|
color: Theme.palette.primaryColor1
|
||||||
|
icon: statusRoundedIcon.icon.name
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,4 +3,5 @@ module StatusQ.Components
|
||||||
StatusBadge 0.1 StatusBadge.qml
|
StatusBadge 0.1 StatusBadge.qml
|
||||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||||
|
StatusRoundIcon 0.1 StatusRoundIcon.qml
|
||||||
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
id: statusIconSettings
|
||||||
|
|
||||||
|
property string name
|
||||||
|
property real width
|
||||||
|
property real height
|
||||||
|
property color color
|
||||||
|
property url source
|
||||||
|
}
|
|
@ -2,4 +2,5 @@ module StatusQ.Core
|
||||||
|
|
||||||
StatusBaseText 0.1 StatusBaseText.qml
|
StatusBaseText 0.1 StatusBaseText.qml
|
||||||
StatusIcon 0.1 StatusIcon.qml
|
StatusIcon 0.1 StatusIcon.qml
|
||||||
|
StatusIconSettings 0.1 StatusIconSettings.qml
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue