feat(Components): introduce StatusRoundedImage
A component that renders an image as a circle, given some URL. Usage: ``` StatusRoundedImage { image.source: "..." // some url } ``` Closes #32
This commit is contained in:
parent
996ceb2b68
commit
09876c1f67
|
@ -17,4 +17,8 @@ GridLayout {
|
||||||
StatusLetterIdenticon {
|
StatusLetterIdenticon {
|
||||||
name: "#status"
|
name: "#status"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
StatusRoundedImage {
|
||||||
|
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import QtGraphicalEffects 1.0
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: statusRoundImage
|
||||||
|
property alias image: image
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
color: "transparent"
|
||||||
|
radius: width / 2
|
||||||
|
layer.enabled: true
|
||||||
|
layer.effect: OpacityMask {
|
||||||
|
maskSource: Rectangle {
|
||||||
|
x: statusRoundImage.x; y: statusRoundImage.y
|
||||||
|
width: statusRoundImage.width
|
||||||
|
height: statusRoundImage.height
|
||||||
|
radius: statusRoundImage.radius
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: image
|
||||||
|
sourceSize.width: parent.implicitWidth
|
||||||
|
sourceSize.height: parent.implicitHeight
|
||||||
|
fillMode: Image.PreserveAspectFit
|
||||||
|
cache: true
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,3 +2,4 @@ module StatusQ.Components
|
||||||
|
|
||||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||||
|
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||||
|
|
Loading…
Reference in New Issue