mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-04-03 20:32:07 -04:00
Leverage DankCircularImage for profile pic
This commit is contained in:
bbedward
@@ -25,25 +25,15 @@ Rectangle {
|
||||
Item {
|
||||
id: profileImageContainer
|
||||
|
||||
property bool hasImage: profileImageSource.status === Image.Ready
|
||||
|
||||
width: 80
|
||||
height: 80
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Rectangle {
|
||||
DankCircularImage {
|
||||
id: profileImage
|
||||
|
||||
anchors.fill: parent
|
||||
radius: width / 2
|
||||
color: "transparent"
|
||||
border.color: Theme.primary
|
||||
border.width: 1
|
||||
visible: parent.hasImage
|
||||
}
|
||||
|
||||
Image {
|
||||
id: profileImageSource
|
||||
|
||||
source: {
|
||||
imageSource: {
|
||||
if (PortalService.profileImage === "") {
|
||||
return "";
|
||||
}
|
||||
@@ -52,55 +42,7 @@ Rectangle {
|
||||
}
|
||||
return PortalService.profileImage;
|
||||
}
|
||||
smooth: true
|
||||
asynchronous: true
|
||||
mipmap: true
|
||||
cache: true
|
||||
visible: false
|
||||
}
|
||||
|
||||
MultiEffect {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 5
|
||||
source: profileImageSource
|
||||
maskEnabled: true
|
||||
maskSource: profileCircularMask
|
||||
visible: profileImageContainer.hasImage
|
||||
maskThresholdMin: 0.5
|
||||
maskSpreadAtMin: 1
|
||||
}
|
||||
|
||||
Item {
|
||||
id: profileCircularMask
|
||||
|
||||
width: 70
|
||||
height: 70
|
||||
layer.enabled: true
|
||||
layer.smooth: true
|
||||
visible: false
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: width / 2
|
||||
color: "black"
|
||||
antialiasing: true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: width / 2
|
||||
color: Theme.primary
|
||||
visible: !parent.hasImage
|
||||
|
||||
DankIcon {
|
||||
anchors.centerIn: parent
|
||||
name: "person"
|
||||
size: Theme.iconSizeLarge
|
||||
color: Theme.primaryText
|
||||
}
|
||||
|
||||
fallbackIcon: "person"
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
@@ -147,7 +89,7 @@ Rectangle {
|
||||
height: 28
|
||||
radius: 14
|
||||
color: Qt.rgba(255, 255, 255, 0.9)
|
||||
visible: profileImageContainer.hasImage
|
||||
visible: profileImage.hasImage
|
||||
|
||||
DankIcon {
|
||||
anchors.centerIn: parent
|
||||
|
||||
@@ -123,100 +123,28 @@ DankPopout {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
anchors.rightMargin: Theme.spacingL
|
||||
spacing: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Item {
|
||||
DankCircularImage {
|
||||
id: avatarContainer
|
||||
|
||||
property bool hasImage: profileImageLoader.status === Image.Ready
|
||||
|
||||
width: 64
|
||||
height: 64
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: width / 2
|
||||
color: "transparent"
|
||||
border.color: Theme.primary
|
||||
border.width: 1
|
||||
visible: parent.hasImage
|
||||
}
|
||||
|
||||
Image {
|
||||
id: profileImageLoader
|
||||
|
||||
source: {
|
||||
imageSource: {
|
||||
if (PortalService.profileImage === "")
|
||||
return ""
|
||||
|
||||
if (PortalService.profileImage.startsWith(
|
||||
"/"))
|
||||
if (PortalService.profileImage.startsWith("/"))
|
||||
return "file://" + PortalService.profileImage
|
||||
|
||||
return PortalService.profileImage
|
||||
}
|
||||
smooth: true
|
||||
asynchronous: true
|
||||
mipmap: true
|
||||
cache: true
|
||||
visible: false
|
||||
}
|
||||
|
||||
MultiEffect {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 5
|
||||
source: profileImageLoader
|
||||
maskEnabled: true
|
||||
maskSource: circularMask
|
||||
visible: avatarContainer.hasImage
|
||||
maskThresholdMin: 0.5
|
||||
maskSpreadAtMin: 1
|
||||
}
|
||||
|
||||
Item {
|
||||
id: circularMask
|
||||
|
||||
width: 64 - 10
|
||||
height: 64 - 10
|
||||
layer.enabled: true
|
||||
layer.smooth: true
|
||||
visible: false
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: width / 2
|
||||
color: "black"
|
||||
antialiasing: true
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: width / 2
|
||||
color: Theme.primary
|
||||
visible: !parent.hasImage
|
||||
|
||||
DankIcon {
|
||||
anchors.centerIn: parent
|
||||
name: "person"
|
||||
size: Theme.iconSize + 8
|
||||
color: Theme.primaryText
|
||||
}
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
anchors.centerIn: parent
|
||||
name: "warning"
|
||||
size: Theme.iconSize + 8
|
||||
color: Theme.primaryText
|
||||
visible: PortalService.profileImage !== ""
|
||||
&& profileImageLoader.status === Image.Error
|
||||
}
|
||||
fallbackIcon: "person"
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingXS
|
||||
spacing: 2
|
||||
|
||||
StyledText {
|
||||
text: UserInfoService.fullName
|
||||
@@ -236,21 +164,25 @@ DankPopout {
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
Rectangle {
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: Theme.spacingL
|
||||
spacing: Theme.spacingS
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
width: actionButtonsRow.implicitWidth + Theme.spacingM * 2
|
||||
height: 48
|
||||
radius: Theme.cornerRadius + 2
|
||||
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.6)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
|
||||
border.width: 1
|
||||
|
||||
Rectangle {
|
||||
width: batteryContentRow.implicitWidth + Theme.spacingS * 2
|
||||
height: 40
|
||||
radius: Theme.cornerRadius
|
||||
color: batteryMouseArea.containsMouse ? Qt.rgba(
|
||||
Theme.primary.r,
|
||||
Theme.primary.g,
|
||||
Theme.primary.b,
|
||||
0.12) : "transparent"
|
||||
Row {
|
||||
id: actionButtonsRow
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
Item {
|
||||
width: batteryContentRow.implicitWidth
|
||||
height: 36
|
||||
visible: BatteryService.batteryAvailable
|
||||
|
||||
Row {
|
||||
@@ -260,7 +192,7 @@ DankPopout {
|
||||
|
||||
DankIcon {
|
||||
name: Theme.getBatteryIcon(BatteryService.batteryLevel, BatteryService.isCharging, BatteryService.batteryAvailable)
|
||||
size: Theme.iconSize - 2
|
||||
size: Theme.iconSize - 4
|
||||
color: {
|
||||
if (batteryMouseArea.containsMouse) {
|
||||
return Theme.primary
|
||||
@@ -318,9 +250,9 @@ DankPopout {
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
buttonSize: 40
|
||||
buttonSize: 36
|
||||
iconName: "lock"
|
||||
iconSize: Theme.iconSize - 2
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: Theme.surfaceText
|
||||
backgroundColor: "transparent"
|
||||
onClicked: {
|
||||
@@ -330,21 +262,20 @@ DankPopout {
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
buttonSize: 40
|
||||
buttonSize: 36
|
||||
iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
|
||||
iconSize: Theme.iconSize - 2
|
||||
iconColor: Theme.surfaceText
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: root.powerOptionsExpanded ? Theme.primary : Theme.surfaceText
|
||||
backgroundColor: "transparent"
|
||||
onClicked: {
|
||||
root.powerOptionsExpanded = !root.powerOptionsExpanded
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
buttonSize: 40
|
||||
buttonSize: 36
|
||||
iconName: "settings"
|
||||
iconSize: Theme.iconSize - 2
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: Theme.surfaceText
|
||||
backgroundColor: "transparent"
|
||||
onClicked: {
|
||||
@@ -354,6 +285,7 @@ DankPopout {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
|
||||
Reference in New Issue
Block a user