mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-30 00:12:50 -05:00
rendering: improve rendering of popouts and modals
This commit is contained in:
bbedward
@@ -67,27 +67,32 @@ PanelWindow {
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
id: contentRect
|
||||
layer.enabled: true
|
||||
layer.smooth: true
|
||||
layer.textureSize: Qt.size(width * Math.max(2, root.modelData?.devicePixelRatio || 1), height * Math.max(2, root.modelData?.devicePixelRatio || 1))
|
||||
layer.samples: 4
|
||||
|
||||
Item {
|
||||
id: slideContainer
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.right: parent.right
|
||||
width: expandable && expandedWidth ? expandedWidthValue : slideoutWidth
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b,
|
||||
customTransparency >= 0 ? customTransparency : SettingsData.popupTransparency)
|
||||
border.color: Theme.outlineMedium
|
||||
border.width: 1
|
||||
radius: Theme.cornerRadius
|
||||
visible: isVisible || slideAnimation.running
|
||||
|
||||
transform: Translate {
|
||||
id: slideTransform
|
||||
x: isVisible ? 0 : contentRect.width
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
duration: 250
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
id: contentRect
|
||||
readonly property real dpr: root.modelData?.devicePixelRatio || 1
|
||||
layer.enabled: true
|
||||
layer.smooth: false
|
||||
layer.textureSize: Qt.size(width * dpr, height * dpr)
|
||||
layer.textureMirroring: ShaderEffectSource.NoMirroring
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
x: isVisible ? 0 : parent.width
|
||||
|
||||
Behavior on x {
|
||||
NumberAnimation {
|
||||
@@ -102,85 +107,84 @@ PanelWindow {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b,
|
||||
customTransparency >= 0 ? customTransparency : SettingsData.popupTransparency)
|
||||
border.color: Theme.outlineMedium
|
||||
border.width: 1
|
||||
radius: Theme.cornerRadius
|
||||
visible: isVisible || slideAnimation.running
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
duration: 250
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: headerColumn
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
visible: root.title !== ""
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
height: 32
|
||||
|
||||
Column {
|
||||
width: parent.width - buttonRow.width
|
||||
spacing: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
StyledText {
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
}
|
||||
Column {
|
||||
id: headerColumn
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
visible: root.title !== ""
|
||||
|
||||
Row {
|
||||
id: buttonRow
|
||||
spacing: Theme.spacingXS
|
||||
width: parent.width
|
||||
height: 32
|
||||
|
||||
DankActionButton {
|
||||
id: expandButton
|
||||
iconName: root.expandedWidth ? "unfold_less" : "unfold_more"
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: Theme.surfaceText
|
||||
visible: root.expandable
|
||||
onClicked: root.expandedWidth = !root.expandedWidth
|
||||
Column {
|
||||
width: parent.width - buttonRow.width
|
||||
spacing: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
transform: Rotation {
|
||||
angle: 90
|
||||
origin.x: expandButton.width / 2
|
||||
origin.y: expandButton.height / 2
|
||||
StyledText {
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
id: closeButton
|
||||
iconName: "close"
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: Theme.surfaceText
|
||||
onClicked: root.hide()
|
||||
Row {
|
||||
id: buttonRow
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
DankActionButton {
|
||||
id: expandButton
|
||||
iconName: root.expandedWidth ? "unfold_less" : "unfold_more"
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: Theme.surfaceText
|
||||
visible: root.expandable
|
||||
onClicked: root.expandedWidth = !root.expandedWidth
|
||||
|
||||
transform: Rotation {
|
||||
angle: 90
|
||||
origin.x: expandButton.width / 2
|
||||
origin.y: expandButton.height / 2
|
||||
}
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
id: closeButton
|
||||
iconName: "close"
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: Theme.surfaceText
|
||||
onClicked: root.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: contentContainer
|
||||
anchors.top: root.title !== "" ? headerColumn.bottom : parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.topMargin: root.title !== "" ? 0 : Theme.spacingL
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
anchors.rightMargin: Theme.spacingL
|
||||
anchors.bottomMargin: Theme.spacingL
|
||||
Item {
|
||||
id: contentContainer
|
||||
anchors.top: root.title !== "" ? headerColumn.bottom : parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.topMargin: root.title !== "" ? 0 : Theme.spacingL
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
anchors.rightMargin: Theme.spacingL
|
||||
anchors.bottomMargin: Theme.spacingL
|
||||
|
||||
Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: root.content
|
||||
Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: root.content
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user