Merge branch 'productionsGame' of github.com:QuasarApp/ViewSolutions into productionsGame

ViewSolutions/src/ViewSolutionsModule/ImageView.qml

@@ -10,29 +10,22 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Controls.Material
 import QtQuick.Controls.Universal
+import QtQuick.Effects
 
-Control {
+AbstractButton {
     id: root
     property string source: ""
     property alias imagesource: sourceImg
 
-    property string text: ""
-    property bool hover: false
-    property bool presed: false
-    property bool selected: false
-
     property real power: 1.0
 
     property string toolTip: ""
 
-    property color textColor: Material.color(Material.Grey)
+    property color textColor: Material.foreground
 
-    property color backgroundColor: colorPicker.pick(source)
+    property color backgroundColor: Material.background
-    property color selectedColor: "#5de2ff"
+    property color selectedColor: Material.accent
-    property color borderColor: "#00000000"
+    property color hoverColor: Material.accent
-    property color hoverColor: "#00000000"
-
-    signal clicked(var mouse);
 
     Connections {
         target: sourceImg
@@ -44,11 +37,20 @@ Control {
         }
     }
 
+    hoverEnabled: true
+
+    opacity: {
+        if (enabled) {
+            return 1
+        }
+
+        return 0.5
+    }
+
     contentItem: Control {
         id: privateData
         property int rootMinSize: Math.min(root.height, root.width)
-        anchors.margins: (root.hover && !presed)? rootMinSize * 0.01: rootMinSize * 0.1
+        bottomPadding : 8
-
         property real rx : 0
         property real ry : 0
         property real rz : 0
@@ -82,16 +84,19 @@ Control {
         }
 
         background: Rectangle {
-            color: root.backgroundColor
+            color: {
-            border.color: (root.hover)? root.hoverColor: root.selected? root.selectedColor: "#00000000"
-            border.width: 4
-            radius: border.width * 2
 
-            Behavior on border.color {
+                if (root.hovered) {
-                ColorAnimation {
+                    return root.hoverColor
-                    duration: 250
                 }
+
+                if (root.checked) {
+                    return root.selectedColor
+                }
+
+                return root.backgroundColor
             }
+            radius: 16
 
             Behavior on color {
                 ColorAnimation {
@@ -101,22 +106,45 @@ Control {
         }
 
         contentItem: ColumnLayout {
-            Image {
+            spacing: 8
-                id: sourceImg
-                source: root.source
 
-                clip: true
+
-                fillMode: Image.PreserveAspectCrop
+            MultiEffect {
-                mipmap: true
+                id: imgEffect
-                smooth: true
-                Layout.fillHeight: true
                 Layout.fillWidth: true
-                Layout.margins: 4
+                Layout.fillHeight: true
 
+                source:             Image {
+                    id: sourceImg
+                    source: root.source
 
+                    clip: true
+                    fillMode: Image.PreserveAspectCrop
 
+                    width: imgEffect.width
+                    height: imgEffect.height
+                }
+
+                maskEnabled: true
+                maskSource: ShaderEffectSource {
+                    sourceItem: Rectangle {
+                        radius: 16
+                        width: imgEffect.width
+                        height: imgEffect.height
+                        color: "Black"
+
+                        Rectangle {
+                            color: "Black"
+
+                            anchors.bottom: parent.bottom
+                            height: 20
+                            width: parent.width
+                        }
+                    }
+                }
             }
 
+
             Label {
                 text: root.text
                 visible: text.length
@@ -150,7 +178,7 @@ Control {
 
     ToolTip {
         parent: root
-        visible: root.hover && text.length
+        visible: root.hovered && text.length
         text: root.toolTip
         delay: 500
 
@@ -158,38 +186,23 @@ Control {
 
 
     MouseArea {
-
+        acceptedButtons: Qt.NoButton
         hoverEnabled: true;
 
-        onEntered: {
-            root.hover = true
-        }
-
         onExited: {
-            root.hover = false;
             privateData.ry = 0
             privateData.rx = 0
 
         }
 
         onPositionChanged: (mouse) => {
-            let fromCenter = root.width / 2
+                               let fromCenter = root.width / 2
-            privateData.ry = -((mouse.x - fromCenter) / (fromCenter * 0.05)) * root.power
+                               privateData.ry = -((mouse.x - fromCenter) / (fromCenter * 0.05)) * root.power
 
-            fromCenter = root.height / 2
+                               fromCenter = root.height / 2
-            privateData.rx = ((mouse.y - fromCenter) / (fromCenter * 0.05)) * root.power
+                               privateData.rx = ((mouse.y - fromCenter) / (fromCenter * 0.05)) * root.power
 
-        }
+                           }
-
-        onPressed: {
-            root.presed = true;
-        }
-
-        onReleased: (mouse) => {
-            root.presed = false;
-
-            root.clicked(mouse)
-        }
 
         anchors.fill: parent