UI improvements

emericg · Sep 15, 2023 · 594ac9c · 594ac9c
1 parent b914f45
commit 594ac9c
Show file tree

Hide file tree

Showing 19 changed files with 247 additions and 118 deletions.
diff --git a/qml/MediaDetailTelemetry.qml b/qml/MediaDetailTelemetry.qml
@@ -5,7 +5,8 @@ import QtCharts
 import QtLocation
 import QtPositioning
 
-import ThemeEngine 1.0
+import ThemeEngine
+
 import "qrc:/js/UtilsString.js" as UtilsString
 
 Item {

diff --git a/qml/components_generic/ActionMenuItem.qml b/qml/components_generic/ActionMenuItem.qml
@@ -45,7 +45,7 @@ T.Button {
             //Behavior on color { ColorAnimation { duration: 133 } }
 
             opacity: control.hovered ? 1 : 0
-            Behavior on opacity { OpacityAnimator { duration: 233 } }
+            //Behavior on opacity { OpacityAnimator { duration: 233 } }
         }
 
         RippleThemed {

diff --git a/qml/components_generic/ButtonWireframe.qml b/qml/components_generic/ButtonWireframe.qml
@@ -19,7 +19,7 @@ T.Button {
     rightPadding: 12
 
     font.pixelSize: Theme.componentFontSize
-    font.bold: fullColor ? true : false
+    font.bold: false
 
     focusPolicy: Qt.NoFocus
 

diff --git a/qml/components_generic/ButtonWireframeIcon.qml b/qml/components_generic/ButtonWireframeIcon.qml
@@ -21,7 +21,7 @@ T.Button {
     spacing: 6
 
     font.pixelSize: Theme.componentFontSize
-    font.bold: fullColor ? true : false
+    font.bold: false
 
     focusPolicy: Qt.NoFocus
 

diff --git a/qml/components_generic/ButtonWireframeIconCentered.qml b/qml/components_generic/ButtonWireframeIconCentered.qml
@@ -21,7 +21,7 @@ T.Button {
     spacing: 6
 
     font.pixelSize: Theme.componentFontSize
-    font.bold: fullColor ? true : false
+    font.bold: false
 
     focusPolicy: Qt.NoFocus
 

diff --git a/qml/components_themed/RangeSliderThemed.qml b/qml/components_themed/RangeSliderThemed.qml
@@ -68,7 +68,7 @@ T.RangeSlider {
                 anchors.fill: parent
                 radius: width
                 color: Theme.colorPrimary
-                opacity: (first.pressed || first.containsMouse) ? 0.2 : 0
+                opacity: (first.pressed || parent.containsMouse) ? 0.2 : 0
                 Behavior on opacity { NumberAnimation { duration: 233 } }
             }
         }
@@ -101,7 +101,7 @@ T.RangeSlider {
                 anchors.fill: parent
                 radius: width
                 color: Theme.colorPrimary
-                opacity: (second.pressed || second.containsMouse) ? 0.2 : 0
+                opacity: (second.pressed || parent.containsMouse) ? 0.2 : 0
                 Behavior on opacity { NumberAnimation { duration: 233 } }
             }
         }

diff --git a/qml/components_themed/SpinBoxThemed_desktop.qml b/qml/components_themed/SpinBoxThemed_desktop.qml
@@ -75,7 +75,7 @@ T.SpinBox {
 
         Row {
             anchors.centerIn: parent
-            spacing: 2
+            spacing: 4
 
             TextInput {
                 height: control.height

diff --git a/qml/components_themed/SpinBoxThemed_mobile.qml b/qml/components_themed/SpinBoxThemed_mobile.qml
@@ -70,7 +70,7 @@ T.SpinBox {
     contentItem: Item {
         Row {
             anchors.centerIn: parent
-            spacing: 2
+            spacing: 4
 
             TextInput {
                 height: control.height

diff --git a/qml/components_themed/TextFieldThemed.qml b/qml/components_themed/TextFieldThemed.qml
@@ -38,7 +38,7 @@ T.TextField {
     property string colorBorder: Theme.colorComponentBorder
     property string colorBackground: Theme.colorComponentBackground
     property string colorSelection: Theme.colorPrimary
-    property string colorSelectedText: Theme.colorHighContrast
+    property string colorSelectedText: "white"
 
     ////////////////
 

diff --git a/qml/popups/PopupDate.qml b/qml/popups/PopupDate.qml
@@ -1,11 +1,14 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+
+import ThemeEngine
 
-import ThemeEngine 1.0
 import "qrc:/js/UtilsNumber.js" as UtilsNumber
 
 Popup {
     id: popupDate
+
     x: (appWindow.width / 2) - (width / 2) - (appSidebar.width / 2)
     y: (appWindow.height / 2) - (height / 2)
     width: 720
@@ -20,7 +23,7 @@ Popup {
     ////////
 
     property var qdateFirst: new Date(2001, 1, 1, 0, 0, 0)
-    property var qdateToday: new Date();
+    property var qdateToday: new Date()
 
     property var qdateFile
     property var qdateMetadata
@@ -62,15 +65,25 @@ Popup {
     ////////////////////////////////////////////////////////////////////////////
 
     enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } }
-    exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 233; } }
 
-    ////////////////////////////////////////////////////////////////////////////
+    background: Item {
+        Rectangle {
+            id: bgrect
+            anchors.fill: parent
 
-    background: Rectangle {
-        color: Theme.colorBackground
-        radius: Theme.componentRadius
-        border.width: Theme.componentBorderWidth
-        border.color: Theme.colorComponentBorder
+            radius: Theme.componentRadius
+            color: Theme.colorBackground
+            border.color: Theme.colorSeparator
+            border.width: Theme.componentBorderWidth
+        }
+        DropShadow {
+            anchors.fill: parent
+            source: bgrect
+            color: "#60000000"
+            radius: 24
+            samples: radius*2+1
+            cached: true
+        }
     }
 
     ////////////////////////////////////////////////////////////////////////////

diff --git a/qml/popups/PopupDelete.qml b/qml/popups/PopupDelete.qml
@@ -1,10 +1,12 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 Popup {
     id: popupDelete
+
     x: (appWindow.width / 2) - (width / 2) - (appSidebar.width / 2)
     y: (appWindow.height / 2) - (height / 2)
     width: 720
@@ -86,15 +88,25 @@ Popup {
     ////////////////////////////////////////////////////////////////////////////
 
     enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } }
-    exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 233; } }
 
-    ////////////////////////////////////////////////////////////////////////////
+    background: Item {
+        Rectangle {
+            id: bgrect
+            anchors.fill: parent
 
-    background: Rectangle {
-        color: recapOpened ? Theme.colorForeground : Theme.colorBackground
-        radius: Theme.componentRadius
-        border.width: Theme.componentBorderWidth
-        border.color: Theme.colorComponentBorder
+            radius: Theme.componentRadius
+            color: Theme.colorBackground
+            border.color: Theme.colorSeparator
+            border.width: Theme.componentBorderWidth
+        }
+        DropShadow {
+            anchors.fill: parent
+            source: bgrect
+            color: "#60000000"
+            radius: 24
+            samples: radius*2+1
+            cached: true
+        }
     }
 
     ////////////////////////////////////////////////////////////////////////////

diff --git a/qml/popups/PopupEncoding.qml b/qml/popups/PopupEncoding.qml
@@ -1,16 +1,19 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+
+import ThemeEngine
+import StorageUtils
+import ShotUtils
 
-import ThemeEngine 1.0
-import ShotUtils 1.0
-import StorageUtils 1.0
 import "qrc:/js/UtilsMedia.js" as UtilsMedia
 import "qrc:/js/UtilsNumber.js" as UtilsNumber
 import "qrc:/js/UtilsString.js" as UtilsString
 import "qrc:/js/UtilsPath.js" as UtilsPath
 
 Popup {
     id: popupEncoding
+
     x: (appWindow.width / 2) - (width / 2) - (appSidebar.width / 2)
     y: (appWindow.height / 2) - (height / 2)
     width: 720
@@ -317,15 +320,25 @@ Popup {
     ////////////////////////////////////////////////////////////////////////////
 
     enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } }
-    exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 233; } }
 
-    ////////////////////////////////////////////////////////////////////////////
+    background: Item {
+        Rectangle {
+            id: bgrect
+            anchors.fill: parent
 
-    background: Rectangle {
-        color: recapOpened ? Theme.colorForeground : Theme.colorBackground
-        radius: Theme.componentRadius
-        border.width: Theme.componentBorderWidth
-        border.color: Theme.colorComponentBorder
+            radius: Theme.componentRadius
+            color: Theme.colorBackground
+            border.color: Theme.colorSeparator
+            border.width: Theme.componentBorderWidth
+        }
+        DropShadow {
+            anchors.fill: parent
+            source: bgrect
+            color: "#60000000"
+            radius: 24
+            samples: radius*2+1
+            cached: true
+        }
     }
 
     ////////////////////////////////////////////////////////////////////////////

diff --git a/qml/popups/PopupExit.qml b/qml/popups/PopupExit.qml
@@ -1,10 +1,12 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 Popup {
     id: popupExit
+
     x: (appWindow.width / 2) - (width / 2) - (appSidebar.width / 2)
     y: (appWindow.height / 2) - (height / 2)
     width: 720
@@ -19,15 +21,25 @@ Popup {
     ////////////////////////////////////////////////////////////////////////////
 
     enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } }
-    exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 233; } }
 
-    ////////////////////////////////////////////////////////////////////////////
+    background: Item {
+        Rectangle {
+            id: bgrect
+            anchors.fill: parent
 
-    background: Rectangle {
-        color: Theme.colorBackground
-        radius: Theme.componentRadius
-        border.width: Theme.componentBorderWidth
-        border.color: Theme.colorComponentBorder
+            radius: Theme.componentRadius
+            color: Theme.colorBackground
+            border.color: Theme.colorSeparator
+            border.width: Theme.componentBorderWidth
+        }
+        DropShadow {
+            anchors.fill: parent
+            source: bgrect
+            color: "#60000000"
+            radius: 24
+            samples: radius*2+1
+            cached: true
+        }
     }
 
     ////////////////////////////////////////////////////////////////////////////

diff --git a/qml/popups/PopupFirmware.qml b/qml/popups/PopupFirmware.qml
@@ -1,13 +1,16 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+
+import ThemeEngine
+import StorageUtils
 
-import ThemeEngine 1.0
-import StorageUtils 1.0
 import "qrc:/js/UtilsString.js" as UtilsString
 import "qrc:/js/UtilsPath.js" as UtilsPath
 
 Popup {
     id: popupFirmware
+
     x: (appWindow.width / 2) - (width / 2) - (appSidebar.width / 2)
     y: (appWindow.height / 2) - (height / 2)
     width: 720
@@ -45,15 +48,25 @@ Popup {
     ////////////////////////////////////////////////////////////////////////////
 
     enter: Transition { NumberAnimation { property: "opacity"; from: 0.5; to: 1.0; duration: 133; } }
-    exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 233; } }
 
-    ////////////////////////////////////////////////////////////////////////////
+    background: Item {
+        Rectangle {
+            id: bgrect
+            anchors.fill: parent
 
-    background: Rectangle {
-        color: Theme.colorBackground
-        radius: Theme.componentRadius
-        border.width: Theme.componentBorderWidth
-        border.color: Theme.colorComponentBorder
+            radius: Theme.componentRadius
+            color: Theme.colorBackground
+            border.color: Theme.colorSeparator
+            border.width: Theme.componentBorderWidth
+        }
+        DropShadow {
+            anchors.fill: parent
+            source: bgrect
+            color: "#60000000"
+            radius: 24
+            samples: radius*2+1
+            cached: true
+        }
     }
 
     ////////////////////////////////////////////////////////////////////////////