Commit 19e2d752 authored by Leander Schulten's avatar Leander Schulten
Browse files

UI: Add Support for dimmed or blurred backgrounds in user defined intensity....

UI: Add Support for dimmed or blurred backgrounds in user defined intensity. Add ModalPopupBackground and CenteredPopup and replace Popups through this components. Fix wrong colors in the LEDWindows, LoginView background, Popup content text and ModuleProgramView. Add UI for changing the background of a Popup. Close #66
parent 7115dfdc
Pipeline #194814 passed with stage
in 4 minutes and 46 seconds
......@@ -241,7 +241,8 @@ int main(int argc, char *argv[]) {
qmlRegisterType<CodeEditorHelper>("custom.licht",1,0,"CodeEditorHelper");
qmlRegisterType<ProgramBlockEditor>("custom.licht",1,0,"ProgramBlockEditor");
qmlRegisterType<GUI::AudioEventDataView>("custom.licht", 1, 0, "AudioEventDataView");
qmlRegisterType<SortedModelVectorView>("custom.licht",1,0,"SortedModelVectorView");
qmlRegisterType<SortedModelVectorView>("custom.licht", 1, 0, "SortedModelVectorView");
qmlRegisterType<Settings>("custom.licht", 1, 0, "PopupBackground");
qRegisterMetaType<DMXChannelFilter::Operation>("Operation");
qmlRegisterUncreatableType<UserManagment>("custom.licht",1,0,"Permission",QStringLiteral("Singletone in c++"));
qmlRegisterUncreatableMetaObject(Updater::staticMetaObject,"custom.licht",1,0,"UpdaterState",QStringLiteral("Enum in c++"));
......
......@@ -82,5 +82,7 @@
<file>qml/components/ColorSlider.qml</file>
<file>qml/AudioEventsView.qml</file>
<file>qml/ModifyThemePane.qml</file>
<file>qml/components/CenteredPopup.qml</file>
<file>qml/components/ModalPopupBackground.qml</file>
</qresource>
</RCC>
......@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.0
import custom.licht 1.0
import "../HelpSystem"
import "../components"
ControlPanel{
......@@ -155,10 +156,7 @@ ControlPanel{
onClicked: selectProgramDialog.createProgramBlock()
}
Dialog{
modal: true
x: (parent.width - width) / 2
y: (parent.height - height) / 2
CenteredPopup{
id:selectProgramDialog
property int select: ControlView.Select.Program
width:300
......
......@@ -242,12 +242,9 @@ ModelView{
}
}
Popup{
modal: true
CenteredPopup{
id:dialog
width:300
x: (parent.width - width) / 2
y: (parent.height - height) / 2
contentItem: ColumnLayout{
spacing: 10
ComboBox{
......@@ -308,5 +305,5 @@ ModelView{
}
}
} // contentItem: ColumnLayout
} // Popup
} // CenteredPopup
}
......@@ -153,12 +153,9 @@ ModelView{
text: "Hold N and click to create a new TimePoint. You can select a TimePoint to change its values. A selected TimePoint can be deleted with d. You can drag a TimePoint. Hold x while scrolling to change the zooming."
}
Popup{
modal: true
CenteredPopup{
id: dialog
width: 300
x: (parent.width - width) / 2
y: (parent.height - height) / 2
contentItem: ColumnLayout{
spacing: 10
ComboBox{
......@@ -206,5 +203,5 @@ ModelView{
} // Button
} // RowLayout
} // contentItem: ColumnLayout
} // Popup
} // CenteredPopup
}
......@@ -170,12 +170,9 @@ ModelView{
}
Popup{
modal: true
CenteredPopup{
id: dialog
width: 300
x: (parent.width - width) / 2
y: (parent.height - height) / 2
contentItem: ColumnLayout{
spacing: 10
......@@ -242,6 +239,6 @@ ModelView{
}
}
} // contentItem: ColumnLayout
} // Popup
} // CenteredPopup
}
......@@ -51,7 +51,7 @@ Item{
clip:true
width: parent.width
Component.onCompleted: {
background.color = Qt.binding(function(){ return UserManagment.currentUser === modelData ? Qt.rgba(0,0,1,.7) : "transparent"; });
background.color = Qt.binding(function(){ return UserManagment.currentUser === modelData ? Qt.rgba(0,0,1,.7) : Material.background; });
}
Behavior on height {
NumberAnimation{
......@@ -171,12 +171,9 @@ Item{
easing.type: Easing.Linear
}
Popup{
modal: true
CenteredPopup{
id:dialog
width:300
x: (parent.width - width) / 2
y: (parent.height - height) / 2
property var user;
onVisibleChanged: {
if(visible)
......@@ -214,12 +211,9 @@ Item{
}
}
}
Popup{
modal: true
CenteredPopup{
id:addUserDialog
width:300
x: (parent.width - width) / 2
y: (parent.height - height) / 2
onVisibleChanged:{
if(visible){
username.text = "";;
......
......@@ -12,6 +12,7 @@ Popup {
y: 15
width: parent.width - 30
height: parent.height - 30
Overlay.modal: ModalPopupBackground{}
function show(newUser){
user = newUser;
visible = true;
......
......@@ -5,11 +5,9 @@ import QtQuick.Layouts 1.12
import custom.licht 1.0
import "components"
GridLayout {
ColumnLayout {
id: root
columns: 2
RowLayout{
Layout.columnSpan: 2
Label{
Layout.leftMargin: 10
Layout.fillWidth: true
......@@ -33,13 +31,35 @@ GridLayout {
Settings.backgroundColor = undefined;
Settings.backgroundMaterial = undefined;
Settings.backgroundShade = undefined;
Settings.popupBackgroundEffect = undefined;
Settings.popupBackgroundEffectIntensity = undefined;
}
}
}
RowLayout{
Label{
Layout.leftMargin: 10
Layout.fillWidth: true
text: "Popup background:"
}
ComboBox{
Layout.preferredWidth: 90
model: ["Dim", "Blur"]
currentIndex: Settings.popupBackgroundEffect
onCurrentIndexChanged: Settings.popupBackgroundEffect = currentIndex
}
ComboBox{
Layout.preferredWidth: 110
Layout.rightMargin: 10
model: ["Weak", "Normal", "Strong"]
currentIndex: Settings.popupBackgroundEffectIntensity
onCurrentIndexChanged: Settings.popupBackgroundEffectIntensity = currentIndex
}
}
TabBar{
id: target
Layout.columnSpan: 2
Layout.fillWidth: true
position: TabBar.Footer
TabButton{
......@@ -69,164 +89,71 @@ GridLayout {
case 2: Settings.backgroundColor = color; break;
}
}
ListView{
property color customColor;
onCustomColorChanged: {
switch(target.currentIndex){
case 0: Settings.accentColor = customColor; break;
case 1: Settings.foregroundColor = customColor; break;
case 2: Settings.backgroundColor = customColor; break;
}
}
readonly property int numOwn: 1
property bool isMaterialColor: currentIndex >= numOwn
property int materialIndex: currentIndex - numOwn
function getColor(index){
switch(index){
case 0: return customColor;
default: return Material.color(index - numOwn);
}
}
function updateCurrentIndex(){
switch(target.currentIndex){
case 0:
customColor = Settings.accentColor;
currentIndex = Settings.accentMaterial >= 0 ? Settings.accentMaterial + numOwn : 0;
return;
case 1:
customColor = Settings.foregroundColor;
currentIndex = Settings.foregroundMaterial >= 0 ? Settings.foregroundMaterial + numOwn : 0;
return;
case 2:
customColor = Settings.backgroundColor;
currentIndex = Settings.backgroundMaterial >= 0 ? Settings.backgroundMaterial + numOwn : 0;
return;
}
console.error("Error in ModifyThemePane at customColor.currentIndex: ...")
}
Component.onCompleted: {
Settings.themeChanged.connect(updateCurrentIndex);
Settings.accentMaterialChanged.connect(updateCurrentIndex);
Settings.backgroundMaterialChanged.connect(updateCurrentIndex);
Settings.foregroundMaterialChanged.connect(updateCurrentIndex);
target.currentIndexChanged.connect(updateCurrentIndex);
updateCurrentIndex();
}
keyNavigationEnabled: true
Layout.fillHeight: true
Layout.preferredWidth: root.width/2
clip: true
id: colorSelection
model: ["Custom", "Red", "Pink", "Purple", "Deep Purple", "Indigo", "Blue", "Light Blue", "Cyan", "Teal", "Green", "Light Green", "Lime", "Yellow", "Amber", "Orange", "Deep Orange", "Brown", "Grey", "Blue Grey"]
delegate: RadioDelegate{
width: colorSelection.width
background: Rectangle{
color: colorSelection.getColor(index)
}
text: modelData;
checked: colorSelection.currentIndex === index;
onClicked: {
colorSelection.currentIndex = index;
RowLayout{
ListView{
property color customColor;
onCustomColorChanged: {
switch(target.currentIndex){
case 0: Settings.accentMaterial = index - colorSelection.numOwn; break;
case 1: Settings.foregroundMaterial = index - colorSelection.numOwn; break;
case 2: Settings.backgroundMaterial = index - colorSelection.numOwn; break;
}
root.updateColor();
}
}
maximumFlickVelocity: 600
boundsBehavior: Flickable.DragOverBounds
}
Item{
Layout.fillHeight: true
Layout.preferredWidth: root.width/2
RowLayout{
visible: !colorSelection.isMaterialColor
anchors.fill: parent
anchors.rightMargin: 15
ColorSlider{
Layout.fillHeight: true
Layout.preferredWidth: parent.width/3-2
orientation: Gradient.Vertical
value: colorSelection.customColor.hsvHue
onValueChanged: if(!colorSelection.isMaterialColor)colorSelection.customColor.hsvHue = value;
gradient: Gradient{
GradientStop{ position: 0/360; color: Qt.hsva( 0/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 60/360; color: Qt.hsva( 60/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 120/360; color: Qt.hsva(120/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 180/360; color: Qt.hsva(180/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 240/360; color: Qt.hsva(240/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 300/360; color: Qt.hsva(300/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 360/360; color: Qt.hsva(360/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
case 0: Settings.accentColor = customColor; break;
case 1: Settings.foregroundColor = customColor; break;
case 2: Settings.backgroundColor = customColor; break;
}
}
ColorSlider{
Layout.fillHeight: true
Layout.preferredWidth: parent.width/3-2
orientation: Gradient.Vertical
value: colorSelection.customColor.hsvSaturation
onValueChanged: if(!colorSelection.isMaterialColor)colorSelection.customColor.hsvSaturation = value;
gradient: Gradient{
GradientStop{ position: 0; color: Qt.hsva(colorSelection.customColor.hsvHue,0,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 1; color: Qt.hsva(colorSelection.customColor.hsvHue,1,colorSelection.customColor.hsvValue,1);}
}
}
ColorSlider{
Layout.fillHeight: true
Layout.preferredWidth: parent.width/3-2
orientation: Gradient.Vertical
value: colorSelection.customColor.hsvValue
onValueChanged: if(!colorSelection.isMaterialColor)colorSelection.customColor.hsvValue = value;
gradient: Gradient{
GradientStop{ position: 0; color: Qt.hsva(colorSelection.customColor.hsvHue,colorSelection.customColor.hsvSaturation,0,1);}
GradientStop{ position: 1; color: Qt.hsva(colorSelection.customColor.hsvHue,colorSelection.customColor.hsvSaturation,1,1);}
readonly property int numOwn: 1
property bool isMaterialColor: currentIndex >= numOwn
property int materialIndex: currentIndex - numOwn
function getColor(index){
switch(index){
case 0: return customColor;
default: return Material.color(index - numOwn);
}
}
}
ListView{
visible: colorSelection.isMaterialColor
anchors.fill: parent
enabled: colorSelection.currentIndex !== 0
keyNavigationEnabled: true
function updateCurrentIndex(){
switch(target.currentIndex){
case 0: currentIndex = Settings.accentShade >= 0 ? Settings.accentShade + 1 : 0; return;
case 1: currentIndex = Settings.foregroundShade >= 0 ? Settings.foregroundShade + 1 : 0; return;
case 2: currentIndex = Settings.backgroundShade >= 0 ? Settings.backgroundShade + 1 : 0; return;
case 0:
customColor = Settings.accentColor;
currentIndex = Settings.accentMaterial >= 0 ? Settings.accentMaterial + numOwn : 0;
return;
case 1:
customColor = Settings.foregroundColor;
currentIndex = Settings.foregroundMaterial >= 0 ? Settings.foregroundMaterial + numOwn : 0;
return;
case 2:
customColor = Settings.backgroundColor;
currentIndex = Settings.backgroundMaterial >= 0 ? Settings.backgroundMaterial + numOwn : 0;
return;
}
console.error("Error in ModifyThemePane at customColor.currentIndex: ...")
}
Component.onCompleted: {
Settings.themeChanged.connect(updateCurrentIndex);
Settings.accentShadeChanged.connect(updateCurrentIndex);
Settings.backgroundShadeChanged.connect(updateCurrentIndex);
Settings.foregroundShadeChanged.connect(updateCurrentIndex);
Settings.accentMaterialChanged.connect(updateCurrentIndex);
Settings.backgroundMaterialChanged.connect(updateCurrentIndex);
Settings.foregroundMaterialChanged.connect(updateCurrentIndex);
target.currentIndexChanged.connect(updateCurrentIndex);
updateCurrentIndex();
}
keyNavigationEnabled: true
Layout.fillHeight: true
Layout.preferredWidth: root.width/2
clip: true
id: shade
model: ["Default", "Shade 50", "Shade 100", "Shade 200", "Shade 300", "Shade 400", "Shade 500", "Shade 600", "Shade 700", "Shade 800", "Shade 900", "Shade A100", "Shade A200", "Shade A400", "Shade A700"]
id: colorSelection
model: ["Custom", "Red", "Pink", "Purple", "Deep Purple", "Indigo", "Blue", "Light Blue", "Cyan", "Teal", "Green", "Light Green", "Lime", "Yellow", "Amber", "Orange", "Deep Orange", "Brown", "Grey", "Blue Grey"]
delegate: RadioDelegate{
width: shade.width
width: colorSelection.width
background: Rectangle{
color: colorSelection.currentIndex === 0 && root.Material.theme>=0 ? "white" : index === 0 ? Material.color(colorSelection.materialIndex) : Material.color(colorSelection.materialIndex, index - 1);
color: colorSelection.getColor(index)
}
text: modelData;
checked: shade.currentIndex === index;
checked: colorSelection.currentIndex === index;
onClicked: {
shade.currentIndex = index;
colorSelection.currentIndex = index;
switch(target.currentIndex){
case 0: Settings.accentShade = index - colorSelection.numOwn; break;
case 1: Settings.foregroundShade = index - colorSelection.numOwn; break;
case 2: Settings.backgroundShade = index - colorSelection.numOwn; break;
case 0: Settings.accentMaterial = index - colorSelection.numOwn; break;
case 1: Settings.foregroundMaterial = index - colorSelection.numOwn; break;
case 2: Settings.backgroundMaterial = index - colorSelection.numOwn; break;
}
root.updateColor();
}
......@@ -234,5 +161,99 @@ GridLayout {
maximumFlickVelocity: 600
boundsBehavior: Flickable.DragOverBounds
}
Item{
Layout.fillHeight: true
Layout.preferredWidth: root.width/2
RowLayout{
visible: !colorSelection.isMaterialColor
anchors.fill: parent
anchors.rightMargin: 15
ColorSlider{
Layout.fillHeight: true
Layout.preferredWidth: parent.width/3-2
orientation: Gradient.Vertical
value: colorSelection.customColor.hsvHue
onValueChanged: if(!colorSelection.isMaterialColor)colorSelection.customColor.hsvHue = value;
gradient: Gradient{
GradientStop{ position: 0/360; color: Qt.hsva( 0/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 60/360; color: Qt.hsva( 60/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 120/360; color: Qt.hsva(120/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 180/360; color: Qt.hsva(180/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 240/360; color: Qt.hsva(240/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 300/360; color: Qt.hsva(300/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 360/360; color: Qt.hsva(360/360,colorSelection.customColor.hsvSaturation,colorSelection.customColor.hsvValue,1);}
}
}
ColorSlider{
Layout.fillHeight: true
Layout.preferredWidth: parent.width/3-2
orientation: Gradient.Vertical
value: colorSelection.customColor.hsvSaturation
onValueChanged: if(!colorSelection.isMaterialColor)colorSelection.customColor.hsvSaturation = value;
gradient: Gradient{
GradientStop{ position: 0; color: Qt.hsva(colorSelection.customColor.hsvHue,0,colorSelection.customColor.hsvValue,1);}
GradientStop{ position: 1; color: Qt.hsva(colorSelection.customColor.hsvHue,1,colorSelection.customColor.hsvValue,1);}
}
}
ColorSlider{
Layout.fillHeight: true
Layout.preferredWidth: parent.width/3-2
orientation: Gradient.Vertical
value: colorSelection.customColor.hsvValue
onValueChanged: if(!colorSelection.isMaterialColor)colorSelection.customColor.hsvValue = value;
gradient: Gradient{
GradientStop{ position: 0; color: Qt.hsva(colorSelection.customColor.hsvHue,colorSelection.customColor.hsvSaturation,0,1);}
GradientStop{ position: 1; color: Qt.hsva(colorSelection.customColor.hsvHue,colorSelection.customColor.hsvSaturation,1,1);}
}
}
}
ListView{
visible: colorSelection.isMaterialColor
anchors.fill: parent
enabled: colorSelection.currentIndex !== 0
keyNavigationEnabled: true
function updateCurrentIndex(){
switch(target.currentIndex){
case 0: currentIndex = Settings.accentShade >= 0 ? Settings.accentShade + 1 : 0; return;
case 1: currentIndex = Settings.foregroundShade >= 0 ? Settings.foregroundShade + 1 : 0; return;
case 2: currentIndex = Settings.backgroundShade >= 0 ? Settings.backgroundShade + 1 : 0; return;
}
console.error("Error in ModifyThemePane at customColor.currentIndex: ...")
}
Component.onCompleted: {
Settings.themeChanged.connect(updateCurrentIndex);
Settings.accentShadeChanged.connect(updateCurrentIndex);
Settings.backgroundShadeChanged.connect(updateCurrentIndex);
Settings.foregroundShadeChanged.connect(updateCurrentIndex);
target.currentIndexChanged.connect(updateCurrentIndex);
}
clip: true
id: shade
model: ["Default", "Shade 50", "Shade 100", "Shade 200", "Shade 300", "Shade 400", "Shade 500", "Shade 600", "Shade 700", "Shade 800", "Shade 900", "Shade A100", "Shade A200", "Shade A400", "Shade A700"]
delegate: RadioDelegate{
width: shade.width
background: Rectangle{
color: colorSelection.currentIndex === 0 && root.Material.theme>=0 ? "white" : index === 0 ? Material.color(colorSelection.materialIndex) : Material.color(colorSelection.materialIndex, index - 1);
}
text: modelData;
checked: shade.currentIndex === index;
onClicked: {
shade.currentIndex = index;
switch(target.currentIndex){
case 0: Settings.accentShade = index - colorSelection.numOwn; break;
case 1: Settings.foregroundShade = index - colorSelection.numOwn; break;
case 2: Settings.backgroundShade = index - colorSelection.numOwn; break;
}
root.updateColor();
}
}
maximumFlickVelocity: 600
boundsBehavior: Flickable.DragOverBounds
}
}
}
}
......@@ -219,6 +219,7 @@ Item{
color: "lightgrey"
Layout.fillHeight: true
width: 1
visible: programEditor.showProperties
}
ColumnLayout{
Layout.fillHeight: true
......@@ -385,10 +386,7 @@ Item{
}
}
Popup{
x: (parent.width - width) / 2
y: (parent.height - height) / 2
//modality: Qt.WindowModal
CenteredPopup{
id:addEntry
//title: "Choose entry"
width:300
......@@ -527,9 +525,7 @@ Item{
width: 500
}
Popup{
x: (parent.width - width) / 2
y: (parent.height - height) / 2
CenteredPopup{
id: popup_addConnectionAsk
property string outputName
property string inputName
......
......@@ -598,6 +598,7 @@ Item{
id: informationDialog
modal: true
standardButtons: Dialog.Ok
Overlay.modal: ModalPopupBackground{}
width: 600
margins: 50
leftPadding: header.leftPadding
......@@ -618,6 +619,7 @@ Item{
font.bold: true
onContentWidthChanged: console.log("contentWidth", contentWidth)
id: dialogText
color: Material.foreground
}
}
}
......@@ -627,6 +629,7 @@ Item{
modal: true
closePolicy: Popup.CloseOnEscape
Overlay.modal: ModalPopupBackground{}
width: 300
margins: 50
padding: 10
......
......@@ -3,12 +3,11 @@ import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import QtQuick.Controls.Material 2.3
Popup{
CenteredPopup{
property alias label: label
property alias text: label.text
property alias textFont: label.font
signal yesClicked();
modal: true
id: popup
ColumnLayout{
Label{
......@@ -40,9 +39,5 @@ Popup{
}
}
}
onAboutToShow: {
x = (parent.width - implicitWidth)/2;
y = (parent.height - implicitHeight)/2;
}
onOpened: {forceActiveFocus();deleteButton.focus = true}
}