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 committed by Michał Cieślak
parent 8b7911cff9
commit 9cbdf4fa97
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