Make window shadow larger

This commit is contained in:
Alex Spataru 2021-11-09 15:01:30 -06:00
parent adf09ccd15
commit 56fa5dc4a3
8 changed files with 41 additions and 37 deletions

View File

@ -76,7 +76,7 @@ Item {
isExternalWindow: true isExternalWindow: true
widgetIndex: root.widgetIndex widgetIndex: root.widgetIndex
widgetVisible: externalWindow.visible widgetVisible: externalWindow.visible
anchors.margins: externalWindow.margin anchors.margins: externalWindow.shadowMargin
anchors.topMargin: externalWindow.titlebar.height anchors.topMargin: externalWindow.titlebar.height
MouseArea { MouseArea {

View File

@ -40,7 +40,7 @@ Window {
// //
// Window radius control // Window radius control
// //
readonly property int handleSize: radius + 5 + margin readonly property int handleSize: radius + 5 + shadowMargin
readonly property int radius: ((root.visibility === Window.Maximized && maximizeEnabled) || fullScreen) ? 0 : 10 readonly property int radius: ((root.visibility === Window.Maximized && maximizeEnabled) || fullScreen) ? 0 : 10
// //
@ -70,10 +70,14 @@ Window {
// //
property alias titlebar: border property alias titlebar: border
//
// Size of the shadow object
//
property int shadowMargin: root.radius > 0 ? 20 : 0
// //
// Background color of the window & the titlebar // Background color of the window & the titlebar
// //
property int margin: root.radius > 0 ? 10 : 0
property color borderColor: Cpp_ThemeManager.highlight property color borderColor: Cpp_ThemeManager.highlight
property color backgroundColor: Cpp_ThemeManager.window property color backgroundColor: Cpp_ThemeManager.window
property color titlebarText: Cpp_ThemeManager.brightText property color titlebarText: Cpp_ThemeManager.brightText
@ -95,14 +99,14 @@ Window {
spread: 0.2 spread: 0.2
anchors.fill: bg anchors.fill: bg
color: Qt.rgba(0,0,0,0.5) color: Qt.rgba(0,0,0,0.5)
glowRadius: root.margin / 2 glowRadius: root.shadowMargin / 2
cornerRadius: bg.radius + glowRadius cornerRadius: bg.radius + glowRadius
} Rectangle { } Rectangle {
id: bg id: bg
color: "transparent" color: "transparent"
radius: root.radius radius: root.radius
anchors.fill: parent anchors.fill: parent
anchors.margins: root.margin anchors.margins: root.shadowMargin
} }
// //
@ -115,7 +119,7 @@ Window {
radius: root.radius radius: root.radius
color: "transparent" color: "transparent"
anchors.fill: parent anchors.fill: parent
anchors.margins: root.margin - 1 anchors.margins: root.shadowMargin - 1
border.color: root.borderColor border.color: root.borderColor
} }
@ -138,7 +142,7 @@ Window {
top: parent.top top: parent.top
left: parent.left left: parent.left
right: parent.right right: parent.right
margins: root.margin margins: root.shadowMargin
} }
} }

View File

@ -43,10 +43,10 @@ FramelessWindow.CustomWindow {
height: minimumHeight height: minimumHeight
x: (Screen.desktopAvailableWidth - width) / 2 x: (Screen.desktopAvailableWidth - width) / 2
y: (Screen.desktopAvailableHeight - height) / 2 y: (Screen.desktopAvailableHeight - height) / 2
minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
// //
// Titlebar options // Titlebar options
@ -65,8 +65,8 @@ FramelessWindow.CustomWindow {
Page { Page {
anchors { anchors {
fill: parent fill: parent
margins: root.margin margins: root.shadowMargin
topMargin: titlebar.height + root.margin topMargin: titlebar.height + root.shadowMargin
} }
palette.text: Cpp_ThemeManager.text palette.text: Cpp_ThemeManager.text

View File

@ -45,10 +45,10 @@ FramelessWindow.CustomWindow {
y: (Screen.desktopAvailableHeight - height) / 2 y: (Screen.desktopAvailableHeight - height) / 2
titlebarColor: Cpp_ThemeManager.dialogBackground titlebarColor: Cpp_ThemeManager.dialogBackground
backgroundColor: Cpp_ThemeManager.dialogBackground backgroundColor: Cpp_ThemeManager.dialogBackground
minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
// //
// Use page item to set application palette // Use page item to set application palette
@ -56,8 +56,8 @@ FramelessWindow.CustomWindow {
Page { Page {
anchors { anchors {
fill: parent fill: parent
margins: root.margin margins: root.shadowMargin
topMargin: titlebar.height + root.margin topMargin: titlebar.height + root.shadowMargin
} }
palette.text: Cpp_ThemeManager.text palette.text: Cpp_ThemeManager.text

View File

@ -45,10 +45,10 @@ FramelessWindow.CustomWindow {
y: (Screen.desktopAvailableHeight - height) / 2 y: (Screen.desktopAvailableHeight - height) / 2
titlebarColor: Cpp_ThemeManager.dialogBackground titlebarColor: Cpp_ThemeManager.dialogBackground
backgroundColor: Cpp_ThemeManager.dialogBackground backgroundColor: Cpp_ThemeManager.dialogBackground
minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
// //
// Close CSV file when window is closed // Close CSV file when window is closed
@ -64,8 +64,8 @@ FramelessWindow.CustomWindow {
Page { Page {
anchors { anchors {
fill: parent fill: parent
margins: root.margin margins: root.shadowMargin
topMargin: titlebar.height + root.margin topMargin: titlebar.height + root.shadowMargin
} }
palette.text: Cpp_ThemeManager.text palette.text: Cpp_ThemeManager.text

View File

@ -46,10 +46,10 @@ FramelessWindow.CustomWindow {
y: (Screen.desktopAvailableHeight - height) / 2 y: (Screen.desktopAvailableHeight - height) / 2
titlebarColor: Cpp_ThemeManager.dialogBackground titlebarColor: Cpp_ThemeManager.dialogBackground
backgroundColor: Cpp_ThemeManager.dialogBackground backgroundColor: Cpp_ThemeManager.dialogBackground
minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.shadowMargin
minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.shadowMargin
// //
// Custom properties // Custom properties
@ -95,8 +95,8 @@ FramelessWindow.CustomWindow {
Page { Page {
anchors { anchors {
fill: parent fill: parent
margins: root.margin margins: root.shadowMargin
topMargin: titlebar.height + root.margin topMargin: titlebar.height + root.shadowMargin
} }
palette.text: Cpp_ThemeManager.text palette.text: Cpp_ThemeManager.text

View File

@ -78,11 +78,11 @@ FramelessWindow.CustomWindow {
Page { Page {
clip: true clip: true
anchors.fill: parent anchors.fill: parent
anchors.margins: root.margin anchors.margins: root.shadowMargin
palette.text: Cpp_ThemeManager.text palette.text: Cpp_ThemeManager.text
palette.buttonText: Cpp_ThemeManager.text palette.buttonText: Cpp_ThemeManager.text
palette.windowText: Cpp_ThemeManager.text palette.windowText: Cpp_ThemeManager.text
anchors.topMargin: titlebar.height + root.margin anchors.topMargin: titlebar.height + root.shadowMargin
palette.window: Cpp_ThemeManager.dialogBackground palette.window: Cpp_ThemeManager.dialogBackground
background: Rectangle { background: Rectangle {

View File

@ -136,9 +136,9 @@ FramelessWindow.CustomWindow {
title: Cpp_AppName title: Cpp_AppName
width: minimumWidth width: minimumWidth
height: minimumHeight height: minimumHeight
minimumWidth: 1250 + 2 * root.margin minimumWidth: 1250 + 2 * root.shadowMargin
backgroundColor: Cpp_ThemeManager.windowBackground backgroundColor: Cpp_ThemeManager.windowBackground
minimumHeight: 720 + 2 * root.margin + root.titlebar.height minimumHeight: 720 + 2 * root.shadowMargin + root.titlebar.height
// //
// Startup code // Startup code
@ -251,11 +251,11 @@ FramelessWindow.CustomWindow {
Page { Page {
clip: true clip: true
anchors.fill: parent anchors.fill: parent
anchors.margins: root.margin anchors.margins: root.shadowMargin
palette.text: Cpp_ThemeManager.text palette.text: Cpp_ThemeManager.text
palette.buttonText: Cpp_ThemeManager.text palette.buttonText: Cpp_ThemeManager.text
palette.windowText: Cpp_ThemeManager.text palette.windowText: Cpp_ThemeManager.text
anchors.topMargin: titlebar.height + root.margin anchors.topMargin: titlebar.height + root.shadowMargin
background: Rectangle { background: Rectangle {
radius: root.radius radius: root.radius