mirror of https://github.com/status-im/StatusQ.git
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 {
|
||||
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
|
||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||
|
|
Loading…
Reference in New Issue