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
6a92ff6823
commit
8639e8ccba
|
@ -34,4 +34,8 @@ GridLayout {
|
|||
StatusBadge {
|
||||
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
|
||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||
StatusRoundIcon 0.1 StatusRoundIcon.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
|
||||
StatusIcon 0.1 StatusIcon.qml
|
||||
StatusIconSettings 0.1 StatusIconSettings.qml
|
||||
|
||||
|
|
Loading…
Reference in New Issue