mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-09-18 08:22:33 +02:00
Add custom background blur for popups
This commit is contained in:
parent
157823739d
commit
0f44db0b68
@ -125,6 +125,7 @@ set(QML
|
||||
qml/Create/WizardsFiles/QMLWidgetMain.qml
|
||||
qml/Create/WizardsFiles/QMLWallpaperMain.qml
|
||||
qml/Common/LicenseSelector.qml
|
||||
qml/Common/ModalBackgroundBlur.qml
|
||||
qml/Common/Util.js
|
||||
qml/Common/Dialogs/CriticalError.qml
|
||||
qml/Common/ColorPicker.qml
|
||||
|
@ -20,14 +20,14 @@ ApplicationWindow {
|
||||
function setTheme(theme) {
|
||||
switch (theme) {
|
||||
case Settings.System:
|
||||
root.Material.theme = Material.System;
|
||||
break;
|
||||
root.Material.theme = Material.System
|
||||
break
|
||||
case Settings.Dark:
|
||||
root.Material.theme = Material.Dark;
|
||||
break;
|
||||
root.Material.theme = Material.Dark
|
||||
break
|
||||
case Settings.Light:
|
||||
root.Material.theme = Material.Light;
|
||||
break;
|
||||
root.Material.theme = Material.Light
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,7 +47,8 @@ ApplicationWindow {
|
||||
sidebar.state = "inactive"
|
||||
}
|
||||
|
||||
color: Material.theme === Material.Dark ? Qt.darker(Material.background) : Material.background
|
||||
color: Material.theme === Material.Dark ? Qt.darker(
|
||||
Material.background) : Material.background
|
||||
// Set visible if the -silent parameter was not set (see app.cpp end of constructor).
|
||||
visible: false
|
||||
width: 1400
|
||||
@ -55,15 +56,14 @@ ApplicationWindow {
|
||||
title: "ScreenPlay Alpha - " + ScreenPlay.version()
|
||||
minimumHeight: 450
|
||||
minimumWidth: 1050
|
||||
flags: Qt.FramelessWindowHint |Qt.Window
|
||||
flags: Qt.FramelessWindowHint | Qt.Window
|
||||
|
||||
// Partial workaround for
|
||||
// https://bugreports.qt.io/browse/QTBUG-86047
|
||||
Material.accent: Material.color(Material.Orange)
|
||||
onVisibilityChanged: {
|
||||
if (root.visibility === 2)
|
||||
ScreenPlay.installedListModel.reset();
|
||||
|
||||
ScreenPlay.installedListModel.reset()
|
||||
}
|
||||
onClosing: {
|
||||
if (ScreenPlay.screenPlayManager.activeWallpaperCounter === 0
|
||||
@ -72,24 +72,22 @@ ApplicationWindow {
|
||||
}
|
||||
}
|
||||
Component.onCompleted: {
|
||||
setTheme(ScreenPlay.settings.theme);
|
||||
setTheme(ScreenPlay.settings.theme)
|
||||
stackView.push("qrc:/ScreenPlay/qml/Installed/Installed.qml", {
|
||||
"sidebar": sidebar
|
||||
})
|
||||
"sidebar": sidebar
|
||||
})
|
||||
if (!ScreenPlay.settings.silentStart)
|
||||
root.show();
|
||||
|
||||
root.show()
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 1
|
||||
|
||||
|
||||
Item {
|
||||
id: content
|
||||
anchors.fill: parent
|
||||
anchors.margins: 1
|
||||
|
||||
Connections {
|
||||
function onThemeChanged(theme) {
|
||||
setTheme(theme);
|
||||
setTheme(theme)
|
||||
}
|
||||
|
||||
target: ScreenPlay.settings
|
||||
@ -97,7 +95,7 @@ ApplicationWindow {
|
||||
|
||||
Connections {
|
||||
function onRequestNavigation(nav) {
|
||||
switchPage(nav);
|
||||
switchPage(nav)
|
||||
}
|
||||
|
||||
target: ScreenPlay.util
|
||||
@ -105,7 +103,7 @@ ApplicationWindow {
|
||||
|
||||
Connections {
|
||||
function onRequestRaise() {
|
||||
root.show();
|
||||
root.show()
|
||||
}
|
||||
|
||||
target: ScreenPlay.screenPlayManager
|
||||
@ -113,13 +111,16 @@ ApplicationWindow {
|
||||
|
||||
Dialogs.SteamNotAvailable {
|
||||
id: dialogSteam
|
||||
modalSource: content
|
||||
}
|
||||
|
||||
Dialogs.MonitorConfiguration {
|
||||
modalSource: content
|
||||
}
|
||||
|
||||
Dialogs.CriticalError {
|
||||
window: root
|
||||
modalSource: content
|
||||
}
|
||||
|
||||
Common.TrayIcon {
|
||||
@ -152,7 +153,6 @@ ApplicationWindow {
|
||||
duration: stackView.duration
|
||||
easing.type: Easing.InOutQuart
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
replaceExit: Transition {
|
||||
@ -169,24 +169,22 @@ ApplicationWindow {
|
||||
duration: stackView.duration
|
||||
easing.type: Easing.InOutQuart
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Connections {
|
||||
function onSetSidebarActive(active) {
|
||||
if (active)
|
||||
sidebar.state = "active";
|
||||
sidebar.state = "active"
|
||||
else
|
||||
sidebar.state = "inactive";
|
||||
sidebar.state = "inactive"
|
||||
}
|
||||
|
||||
function onSetNavigationItem(pos) {
|
||||
if (pos === 0)
|
||||
nav.onPageChanged("Create");
|
||||
nav.onPageChanged("Create")
|
||||
else
|
||||
nav.onPageChanged("Workshop");
|
||||
nav.onPageChanged("Workshop")
|
||||
}
|
||||
|
||||
target: stackView.currentItem
|
||||
@ -203,79 +201,75 @@ ApplicationWindow {
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Navigation.Navigation {
|
||||
id: nav
|
||||
window: root
|
||||
width:parent.width
|
||||
width: parent.width
|
||||
modalSource: content
|
||||
anchors {
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
onChangePage: (name)=> {
|
||||
monitors.close();
|
||||
switchPage(name);
|
||||
onChangePage: function (name) {
|
||||
monitors.close()
|
||||
switchPage(name)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Monitors.Monitors {
|
||||
id: monitors
|
||||
modalSource: content
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1
|
||||
color:"#222"
|
||||
anchors{
|
||||
top:parent.top
|
||||
right:parent.right
|
||||
left:parent.left
|
||||
color: "#222"
|
||||
anchors {
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
height: 1
|
||||
color:"#222"
|
||||
anchors{
|
||||
bottom:parent.bottom
|
||||
right:parent.right
|
||||
left:parent.left
|
||||
color: "#222"
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
width: 1
|
||||
color:"#222"
|
||||
anchors{
|
||||
left:parent.left
|
||||
bottom:parent.bottom
|
||||
top:parent.top
|
||||
color: "#222"
|
||||
anchors {
|
||||
left: parent.left
|
||||
bottom: parent.bottom
|
||||
top: parent.top
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
width: 1
|
||||
color:"#222"
|
||||
anchors{
|
||||
right:parent.right
|
||||
bottom:parent.bottom
|
||||
top:parent.top
|
||||
color: "#222"
|
||||
anchors {
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
top: parent.top
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 15
|
||||
height:width
|
||||
color:"#555"
|
||||
anchors{
|
||||
right:parent.right
|
||||
bottom:parent.bottom
|
||||
height: width
|
||||
color: "#555"
|
||||
anchors {
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
margins: 1
|
||||
}
|
||||
MouseArea {
|
||||
@ -285,24 +279,24 @@ ApplicationWindow {
|
||||
property point clickPosition
|
||||
property size originalSize
|
||||
onPressed: {
|
||||
maResize.clickPosition = Qt.point(maResize.mouseX, maResize.mouseY);
|
||||
maResize.clickPosition = maResize.mapToGlobal(maResize.clickPosition.x , maResize.clickPosition.y )
|
||||
maResize.clickPosition = Qt.point(maResize.mouseX,
|
||||
maResize.mouseY)
|
||||
maResize.clickPosition = maResize.mapToGlobal(
|
||||
maResize.clickPosition.x, maResize.clickPosition.y)
|
||||
maResize.originalSize = Qt.size(root.width, root.height)
|
||||
}
|
||||
onPositionChanged: {
|
||||
if (maResize.pressed){
|
||||
let newPos = maResize.mapToGlobal(maResize.mouseX, maResize.mouseY)
|
||||
if (maResize.pressed) {
|
||||
let newPos = maResize.mapToGlobal(maResize.mouseX,
|
||||
maResize.mouseY)
|
||||
let newPosX = newPos.x - maResize.clickPosition.x
|
||||
let newPosY = newPos.y - maResize.clickPosition.y
|
||||
|
||||
root.setGeometry(root.x,root.y, maResize.originalSize.width + newPosX,
|
||||
root.setGeometry(root.x, root.y,
|
||||
maResize.originalSize.width + newPosX,
|
||||
maResize.originalSize.height + newPosY)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -5,14 +5,18 @@ import QtQuick.Controls.Material
|
||||
import QtQuick.Window
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import ScreenPlay 1.0
|
||||
import "../"
|
||||
|
||||
Dialog {
|
||||
id: root
|
||||
|
||||
property ApplicationWindow window
|
||||
property string message
|
||||
property var modalSource
|
||||
|
||||
modal: true
|
||||
Overlay.modal: ModalBackgroundBlur {
|
||||
sourceItem: root.modalSource
|
||||
}
|
||||
anchors.centerIn: Overlay.overlay
|
||||
standardButtons: Dialog.Ok | Dialog.Help
|
||||
onHelpRequested: {
|
||||
|
@ -3,15 +3,22 @@ import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls.Material
|
||||
import ScreenPlay 1.0
|
||||
import "../"
|
||||
|
||||
Dialog {
|
||||
id: dialogMonitorConfigurationChanged
|
||||
|
||||
property var modalSource
|
||||
modal: true
|
||||
|
||||
anchors.centerIn: Overlay.overlay
|
||||
standardButtons: Dialog.Ok
|
||||
contentHeight: 250
|
||||
|
||||
Overlay.modal: ModalBackgroundBlur {
|
||||
sourceItem: root.modalSource
|
||||
}
|
||||
|
||||
Connections {
|
||||
function onMonitorConfigurationChanged() {
|
||||
dialogMonitorConfigurationChanged.open();
|
||||
@ -50,3 +57,4 @@ Dialog {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -1,12 +1,18 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import "../"
|
||||
|
||||
Dialog {
|
||||
id: dialogSteam
|
||||
id: root
|
||||
property var modalSource
|
||||
|
||||
modal: true
|
||||
anchors.centerIn: Overlay.overlay
|
||||
standardButtons: Dialog.Ok
|
||||
title: qsTr("Could not load steam integration!")
|
||||
|
||||
Overlay.modal: ModalBackgroundBlur {
|
||||
sourceItem: root.modalSource
|
||||
}
|
||||
}
|
||||
|
24
ScreenPlay/qml/Common/ModalBackgroundBlur.qml
Normal file
24
ScreenPlay/qml/Common/ModalBackgroundBlur.qml
Normal file
@ -0,0 +1,24 @@
|
||||
import QtQuick
|
||||
import Qt5Compat.GraphicalEffects
|
||||
|
||||
FastBlur {
|
||||
id: root
|
||||
property var sourceItem
|
||||
source: ShaderEffectSource {
|
||||
sourceItem: root.sourceItem
|
||||
live: false
|
||||
}
|
||||
radius: 64
|
||||
transparentBorder: true
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
opacity: 0.5
|
||||
color: "black"
|
||||
}
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
opacity: 0.1
|
||||
source: "qrc:/assets/images/noisy-texture-3.png"
|
||||
fillMode: Image.Tile
|
||||
}
|
||||
}
|
@ -9,7 +9,7 @@ import ScreenPlay.Enums.SearchType 1.0
|
||||
import "../Common" as Common
|
||||
|
||||
Item {
|
||||
id: navWrapper
|
||||
id: root
|
||||
|
||||
state: "out"
|
||||
height: 52
|
||||
@ -182,7 +182,7 @@ Item {
|
||||
name: "out"
|
||||
|
||||
PropertyChanges {
|
||||
target: navWrapper
|
||||
target: root
|
||||
anchors.topMargin: -115
|
||||
}
|
||||
|
||||
@ -191,7 +191,7 @@ Item {
|
||||
name: "in"
|
||||
|
||||
PropertyChanges {
|
||||
target: navWrapper
|
||||
target: root
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
|
||||
@ -203,7 +203,7 @@ Item {
|
||||
to: "in"
|
||||
|
||||
NumberAnimation {
|
||||
target: navWrapper
|
||||
target: root
|
||||
property: "anchors.topMargin"
|
||||
duration: 400
|
||||
easing.type: Easing.InOutQuart
|
||||
|
@ -9,10 +9,15 @@ import ScreenPlay.Enums.InstalledType 1.0
|
||||
import "../Common/" as SP
|
||||
|
||||
Popup {
|
||||
id: monitors
|
||||
id: root
|
||||
|
||||
property string activeMonitorName: ""
|
||||
property int activeMonitorIndex
|
||||
property var modalSource
|
||||
|
||||
Overlay.modal: SP.ModalBackgroundBlur {
|
||||
sourceItem: root.modalSource
|
||||
}
|
||||
|
||||
width: 1000
|
||||
height: 500
|
||||
@ -26,7 +31,7 @@ Popup {
|
||||
|
||||
Connections {
|
||||
function onRequestToggleWallpaperConfiguration() {
|
||||
monitors.open();
|
||||
root.open();
|
||||
}
|
||||
|
||||
target: ScreenPlay.util
|
||||
@ -152,7 +157,7 @@ Popup {
|
||||
if (!ScreenPlay.screenPlayManager.removeAllWallpapers())
|
||||
print("Unable to close all wallpaper!");
|
||||
|
||||
monitors.close();
|
||||
root.close();
|
||||
}
|
||||
}
|
||||
|
||||
@ -169,7 +174,7 @@ Popup {
|
||||
if (!ScreenPlay.screenPlayManager.removeAllWidgets())
|
||||
print("Unable to close all widgets!");
|
||||
|
||||
monitors.close();
|
||||
root.close();
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,7 +200,7 @@ Popup {
|
||||
DefaultVideoControls {
|
||||
id: videoControlWrapper
|
||||
|
||||
activeMonitorIndex: monitors.activeMonitorIndex
|
||||
activeMonitorIndex: root.activeMonitorIndex
|
||||
state: "hidden"
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
@ -246,7 +251,7 @@ Popup {
|
||||
icon.height: 16
|
||||
icon.source: "qrc:/assets/icons/font-awsome/close.svg"
|
||||
icon.color: Material.iconColor
|
||||
onClicked: monitors.close()
|
||||
onClicked: root.close()
|
||||
|
||||
anchors {
|
||||
top: parent.top
|
||||
@ -262,7 +267,7 @@ Popup {
|
||||
|
||||
Connections {
|
||||
function onProfilesSaved() {
|
||||
if (monitors.opened)
|
||||
if (root.opened)
|
||||
saveNotification.open();
|
||||
|
||||
}
|
||||
|
@ -16,9 +16,11 @@ Rectangle {
|
||||
property var navArray: [navCreate, navWorkshop, navInstalled, navSettings, navCommunity]
|
||||
property bool navActive: true
|
||||
property ApplicationWindow window
|
||||
property var modalSource
|
||||
property int iconWidth: 16
|
||||
property int iconHeight: iconWidth
|
||||
|
||||
|
||||
signal changePage(string name)
|
||||
|
||||
function setActive(active) {
|
||||
@ -345,6 +347,10 @@ Rectangle {
|
||||
Dialog {
|
||||
id: dialog
|
||||
anchors.centerIn: Overlay.overlay
|
||||
|
||||
Overlay.modal: ModalBackgroundBlur {
|
||||
sourceItem: root.modalSource
|
||||
}
|
||||
title: qsTr("Are you sure you want to exit ScreenPlay? \nThis will shut down all Wallpaper and Widgets.")
|
||||
standardButtons: Dialog.Ok | Dialog.Cancel
|
||||
onAccepted: Qt.quit()
|
||||
|
Loading…
Reference in New Issue
Block a user