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:
Pascal Precht 2021-05-21 14:32:23 +02:00
parent 6a92ff6823
commit 8639e8ccba
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
5 changed files with 45 additions and 0 deletions

View File

@ -34,4 +34,8 @@ GridLayout {
StatusBadge { StatusBadge {
value: 100 value: 100
} }
StatusRoundIcon {
icon.name: "info"
}
} }

View File

@ -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
}
}

View File

@ -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

View File

@ -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
}

View File

@ -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