mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-28 15:32:50 -05:00
Leverage DankCircularImage for profile pic
This commit is contained in:
bbedward
@@ -25,25 +25,15 @@ Rectangle {
|
|||||||
Item {
|
Item {
|
||||||
id: profileImageContainer
|
id: profileImageContainer
|
||||||
|
|
||||||
property bool hasImage: profileImageSource.status === Image.Ready
|
|
||||||
|
|
||||||
width: 80
|
width: 80
|
||||||
height: 80
|
height: 80
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
Rectangle {
|
DankCircularImage {
|
||||||
|
id: profileImage
|
||||||
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: width / 2
|
imageSource: {
|
||||||
color: "transparent"
|
|
||||||
border.color: Theme.primary
|
|
||||||
border.width: 1
|
|
||||||
visible: parent.hasImage
|
|
||||||
}
|
|
||||||
|
|
||||||
Image {
|
|
||||||
id: profileImageSource
|
|
||||||
|
|
||||||
source: {
|
|
||||||
if (PortalService.profileImage === "") {
|
if (PortalService.profileImage === "") {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
@@ -52,55 +42,7 @@ Rectangle {
|
|||||||
}
|
}
|
||||||
return PortalService.profileImage;
|
return PortalService.profileImage;
|
||||||
}
|
}
|
||||||
smooth: true
|
fallbackIcon: "person"
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
@@ -147,7 +89,7 @@ Rectangle {
|
|||||||
height: 28
|
height: 28
|
||||||
radius: 14
|
radius: 14
|
||||||
color: Qt.rgba(255, 255, 255, 0.9)
|
color: Qt.rgba(255, 255, 255, 0.9)
|
||||||
visible: profileImageContainer.hasImage
|
visible: profileImage.hasImage
|
||||||
|
|
||||||
DankIcon {
|
DankIcon {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
|
|||||||
@@ -123,100 +123,28 @@ DankPopout {
|
|||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.leftMargin: Theme.spacingL
|
anchors.leftMargin: Theme.spacingL
|
||||||
anchors.rightMargin: Theme.spacingL
|
anchors.rightMargin: Theme.spacingL
|
||||||
spacing: Theme.spacingL
|
spacing: Theme.spacingM
|
||||||
|
|
||||||
Item {
|
DankCircularImage {
|
||||||
id: avatarContainer
|
id: avatarContainer
|
||||||
|
|
||||||
property bool hasImage: profileImageLoader.status === Image.Ready
|
|
||||||
|
|
||||||
width: 64
|
width: 64
|
||||||
height: 64
|
height: 64
|
||||||
|
imageSource: {
|
||||||
|
if (PortalService.profileImage === "")
|
||||||
|
return ""
|
||||||
|
|
||||||
Rectangle {
|
if (PortalService.profileImage.startsWith("/"))
|
||||||
anchors.fill: parent
|
return "file://" + PortalService.profileImage
|
||||||
radius: width / 2
|
|
||||||
color: "transparent"
|
return PortalService.profileImage
|
||||||
border.color: Theme.primary
|
|
||||||
border.width: 1
|
|
||||||
visible: parent.hasImage
|
|
||||||
}
|
|
||||||
|
|
||||||
Image {
|
|
||||||
id: profileImageLoader
|
|
||||||
|
|
||||||
source: {
|
|
||||||
if (PortalService.profileImage === "")
|
|
||||||
return ""
|
|
||||||
|
|
||||||
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 {
|
Column {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
spacing: Theme.spacingXS
|
spacing: 2
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
text: UserInfoService.fullName
|
text: UserInfoService.fullName
|
||||||
@@ -236,120 +164,124 @@ DankPopout {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Row {
|
Rectangle {
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.rightMargin: Theme.spacingL
|
anchors.rightMargin: Theme.spacingM
|
||||||
spacing: Theme.spacingS
|
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 {
|
Row {
|
||||||
width: batteryContentRow.implicitWidth + Theme.spacingS * 2
|
id: actionButtonsRow
|
||||||
height: 40
|
anchors.centerIn: parent
|
||||||
radius: Theme.cornerRadius
|
spacing: Theme.spacingXS
|
||||||
color: batteryMouseArea.containsMouse ? Qt.rgba(
|
|
||||||
Theme.primary.r,
|
|
||||||
Theme.primary.g,
|
|
||||||
Theme.primary.b,
|
|
||||||
0.12) : "transparent"
|
|
||||||
visible: BatteryService.batteryAvailable
|
|
||||||
|
|
||||||
Row {
|
Item {
|
||||||
id: batteryContentRow
|
width: batteryContentRow.implicitWidth
|
||||||
anchors.centerIn: parent
|
height: 36
|
||||||
spacing: Theme.spacingXS
|
visible: BatteryService.batteryAvailable
|
||||||
|
|
||||||
DankIcon {
|
Row {
|
||||||
name: Theme.getBatteryIcon(BatteryService.batteryLevel, BatteryService.isCharging, BatteryService.batteryAvailable)
|
id: batteryContentRow
|
||||||
size: Theme.iconSize - 2
|
anchors.centerIn: parent
|
||||||
color: {
|
spacing: Theme.spacingXS
|
||||||
if (batteryMouseArea.containsMouse) {
|
|
||||||
return Theme.primary
|
DankIcon {
|
||||||
|
name: Theme.getBatteryIcon(BatteryService.batteryLevel, BatteryService.isCharging, BatteryService.batteryAvailable)
|
||||||
|
size: Theme.iconSize - 4
|
||||||
|
color: {
|
||||||
|
if (batteryMouseArea.containsMouse) {
|
||||||
|
return Theme.primary
|
||||||
|
}
|
||||||
|
if (BatteryService.isLowBattery && !BatteryService.isCharging) {
|
||||||
|
return Theme.error
|
||||||
|
}
|
||||||
|
if (BatteryService.isCharging || BatteryService.isPluggedIn) {
|
||||||
|
return Theme.primary
|
||||||
|
}
|
||||||
|
return Theme.surfaceText
|
||||||
}
|
}
|
||||||
if (BatteryService.isLowBattery && !BatteryService.isCharging) {
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
return Theme.error
|
}
|
||||||
}
|
|
||||||
if (BatteryService.isCharging || BatteryService.isPluggedIn) {
|
StyledText {
|
||||||
return Theme.primary
|
text: `${BatteryService.batteryLevel}%`
|
||||||
}
|
font.pixelSize: Theme.fontSizeSmall
|
||||||
return Theme.surfaceText
|
font.weight: Font.Medium
|
||||||
|
color: {
|
||||||
|
if (batteryMouseArea.containsMouse) {
|
||||||
|
return Theme.primary
|
||||||
|
}
|
||||||
|
if (BatteryService.isLowBattery && !BatteryService.isCharging) {
|
||||||
|
return Theme.error
|
||||||
|
}
|
||||||
|
if (BatteryService.isCharging) {
|
||||||
|
return Theme.primary
|
||||||
|
}
|
||||||
|
return Theme.surfaceText
|
||||||
|
}
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledText {
|
MouseArea {
|
||||||
text: `${BatteryService.batteryLevel}%`
|
id: batteryMouseArea
|
||||||
font.pixelSize: Theme.fontSizeSmall
|
anchors.fill: parent
|
||||||
font.weight: Font.Medium
|
hoverEnabled: true
|
||||||
color: {
|
cursorShape: Qt.PointingHandCursor
|
||||||
if (batteryMouseArea.containsMouse) {
|
onClicked: {
|
||||||
return Theme.primary
|
const globalPos = mapToGlobal(0, 0)
|
||||||
|
const currentScreen = root.triggerScreen || Screen
|
||||||
|
const screenX = currentScreen.x || 0
|
||||||
|
const relativeX = globalPos.x - screenX
|
||||||
|
controlCenterBatteryPopout.setTriggerPosition(relativeX, 123 + Theme.spacingXS, width, "right", currentScreen)
|
||||||
|
|
||||||
|
if (controlCenterBatteryPopout.shouldBeVisible) {
|
||||||
|
controlCenterBatteryPopout.close()
|
||||||
|
} else {
|
||||||
|
controlCenterBatteryPopout.open()
|
||||||
}
|
}
|
||||||
if (BatteryService.isLowBattery && !BatteryService.isCharging) {
|
|
||||||
return Theme.error
|
|
||||||
}
|
|
||||||
if (BatteryService.isCharging) {
|
|
||||||
return Theme.primary
|
|
||||||
}
|
|
||||||
return Theme.surfaceText
|
|
||||||
}
|
}
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
DankActionButton {
|
||||||
id: batteryMouseArea
|
buttonSize: 36
|
||||||
anchors.fill: parent
|
iconName: "lock"
|
||||||
hoverEnabled: true
|
iconSize: Theme.iconSize - 4
|
||||||
cursorShape: Qt.PointingHandCursor
|
iconColor: Theme.surfaceText
|
||||||
|
backgroundColor: "transparent"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
const globalPos = mapToGlobal(0, 0)
|
root.close()
|
||||||
const currentScreen = root.triggerScreen || Screen
|
root.lockRequested()
|
||||||
const screenX = currentScreen.x || 0
|
|
||||||
const relativeX = globalPos.x - screenX
|
|
||||||
controlCenterBatteryPopout.setTriggerPosition(relativeX, 123 + Theme.spacingXS, width, "right", currentScreen)
|
|
||||||
|
|
||||||
if (controlCenterBatteryPopout.shouldBeVisible) {
|
|
||||||
controlCenterBatteryPopout.close()
|
|
||||||
} else {
|
|
||||||
controlCenterBatteryPopout.open()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
DankActionButton {
|
DankActionButton {
|
||||||
buttonSize: 40
|
buttonSize: 36
|
||||||
iconName: "lock"
|
iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
|
||||||
iconSize: Theme.iconSize - 2
|
iconSize: Theme.iconSize - 4
|
||||||
iconColor: Theme.surfaceText
|
iconColor: root.powerOptionsExpanded ? Theme.primary : Theme.surfaceText
|
||||||
backgroundColor: "transparent"
|
backgroundColor: "transparent"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
root.close()
|
root.powerOptionsExpanded = !root.powerOptionsExpanded
|
||||||
root.lockRequested()
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
DankActionButton {
|
|
||||||
buttonSize: 40
|
|
||||||
iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
|
|
||||||
iconSize: Theme.iconSize - 2
|
|
||||||
iconColor: Theme.surfaceText
|
|
||||||
backgroundColor: "transparent"
|
|
||||||
onClicked: {
|
|
||||||
root.powerOptionsExpanded = !root.powerOptionsExpanded
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
DankActionButton {
|
||||||
|
buttonSize: 36
|
||||||
DankActionButton {
|
iconName: "settings"
|
||||||
buttonSize: 40
|
iconSize: Theme.iconSize - 4
|
||||||
iconName: "settings"
|
iconColor: Theme.surfaceText
|
||||||
iconSize: Theme.iconSize - 2
|
backgroundColor: "transparent"
|
||||||
iconColor: Theme.surfaceText
|
onClicked: {
|
||||||
backgroundColor: "transparent"
|
root.close()
|
||||||
onClicked: {
|
settingsModal.show()
|
||||||
root.close()
|
}
|
||||||
settingsModal.show()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user