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 {
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
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
StatusRoundIcon 0.1 StatusRoundIcon.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
StatusIcon 0.1 StatusIcon.qml
StatusIconSettings 0.1 StatusIconSettings.qml