Merge pull request #3349 from MerginMaps/rework-fix-colors

Fix editor and input icon colours
MerginMaps · Apr 19, 2024 · 56cddd0 · 56cddd0
2 parents adf1b8c + 14d8e79
commit 56cddd0
Show file tree

Hide file tree

Showing 17 changed files with 83 additions and 32 deletions.
diff --git a/app/qml/components/MMSwitch.qml b/app/qml/components/MMSwitch.qml
@@ -13,10 +13,9 @@ import QtQuick.Controls
 Switch {
   id: root
 
+  property color checkedBgColor: enabled ? __style.grassColor : __style.mediumGreenColor
   property color uncheckedBgColor: __style.polarColor
-  property color checkedBgColor: __style.grassColor
-  property color disabledFgColor: __style.mediumGreenColor
-  property color enabledFgColor: __style.forestColor
+  property color handleColor: enabled ? __style.forestColor : __style.mediumGreyColor
 
   topPadding: 0
   rightPadding: 0
@@ -26,7 +25,7 @@ Switch {
   contentItem: Text {
     text: root.text
     font: __style.p5
-    color: root.enabled ? root.enabledFgColor : root.disabledFgColor
+    color: root.handleColor
     verticalAlignment: Text.AlignVCenter
     leftPadding: root.indicator.width + ( text ? root.spacing : 0 )
   }
@@ -45,7 +44,7 @@ Switch {
       width: 20 * __dp
       height: width
       radius: width / 2
-      color: root.enabled ? root.enabledFgColor : root.disabledFgColor
+      color: root.handleColor
       anchors.verticalCenter: parent.verticalCenter
     }
   }

diff --git a/app/qml/components/private/MMBaseSingleLineInput.qml b/app/qml/components/private/MMBaseSingleLineInput.qml
@@ -39,6 +39,15 @@ MMBaseInput {
   property bool rightContentVisible: rightContentGroup.children.length > 0
   property bool leftContentVisible: leftContentGroup.children.length > 0
 
+  // IconColor is not used in this file directly, but derived components can use it
+  // as precalculated color for icons to avoid repeating the same text over and over.
+  property color iconColor: {
+    if ( root.editState !== "enabled" ) return __style.mediumGreyColor
+    if ( root.validationState === "error" ) return __style.grapeColor
+    if ( root.validationState === "warning" ) return __style.earthColor
+    return __style.forestColor
+  }
+
   signal textEdited( string text )
   signal textClicked()
   signal leftContentClicked()

diff --git a/app/qml/form/components/photo/MMPhotoPreview.qml b/app/qml/form/components/photo/MMPhotoPreview.qml
@@ -30,7 +30,7 @@ Popup {
   contentItem: Item {
     anchors.fill: parent
 
-    MMBusyIndicator {
+    MMComponents.MMBusyIndicator {
       anchors.centerIn: parent
       visible: true
     }

diff --git a/app/qml/form/editors/MMFormCalendarEditor.qml b/app/qml/form/editors/MMFormCalendarEditor.qml
@@ -72,7 +72,7 @@ MMPrivateComponents.MMBaseSingleLineInput {
 
     size: __style.icon24
     source: __style.calendarIcon
-    color: root.editState === "enabled" ? __style.forestColor : __style.mediumGreenColor
+    color: root.iconColor
   }
 
   Loader {

diff --git a/app/qml/form/editors/MMFormComboboxBaseEditor.qml b/app/qml/form/editors/MMFormComboboxBaseEditor.qml
@@ -34,7 +34,7 @@ MMPrivateComponents.MMBaseSingleLineInput {
   rightContent: MMComponents.MMIcon {
     size: __style.icon24
     source: __style.arrowDownIcon
-    color: root.editState === "enabled" ? __style.forestColor : __style.mediumGreenColor
+    color: root.iconColor
   }
 
   onRightContentClicked: openDrawer()

diff --git a/app/qml/form/editors/MMFormNumberEditor.qml b/app/qml/form/editors/MMFormNumberEditor.qml
@@ -58,7 +58,19 @@ MMPrivateComponents.MMBaseSingleLineInput {
 
     size: __style.icon24
     source: __style.minusIcon
-    color: root.editState === "enabled" && internal.canSubtractStep ? __style.forestColor : __style.mediumGreenColor
+    color: {
+      if ( root.editState !== "enabled" ) return __style.mediumGreyColor
+      if ( internal.canSubtractStep ) {
+        if ( root.validationState === "error" ) return __style.grapeColor
+        if ( root.validationState === "warning" ) return __style.earthColor
+        return __style.forestColor
+      }
+      else {
+        if ( root.validationState === "error" ) return __style.negativeColor
+        if ( root.validationState === "warning" ) return __style.warningColor
+        return __style.mediumGreyColor
+      }
+    }
   }
 
   textField {
@@ -99,7 +111,19 @@ MMPrivateComponents.MMBaseSingleLineInput {
 
     size: __style.icon24
     source: __style.plusIcon
-    color: root.editState === "enabled" && internal.canAddStep ? __style.forestColor : __style.mediumGreenColor
+    color: {
+      if ( root.editState !== "enabled" ) return __style.mediumGreyColor
+      if ( internal.canAddStep ) {
+        if ( root.validationState === "error" ) return __style.grapeColor
+        if ( root.validationState === "warning" ) return __style.earthColor
+        return __style.forestColor
+      }
+      else {
+        if ( root.validationState === "error" ) return __style.negativeColor
+        if ( root.validationState === "warning" ) return __style.warningColor
+        return __style.mediumGreyColor
+      }
+    }
   }
 
   onLeftContentClicked: {

diff --git a/app/qml/form/editors/MMFormRelationEditor.qml b/app/qml/form/editors/MMFormRelationEditor.qml
@@ -37,8 +37,8 @@ MMPrivateComponents.MMBaseInput {
   signal openLinkedFeature( var linkedFeature )
   signal createLinkedFeature( var parentFeature, var relation )
 
-  Component.onCompleted: root.recalculate()
-  onWidthChanged: root.recalculate()
+  Component.onCompleted: root.recalculateVisibleItems()
+  onWidthChanged: root.recalculateVisibleItems()
 
   title: _fieldShouldShowTitle ? _fieldTitle : ""
 

diff --git a/app/qml/form/editors/MMFormRelationReferenceEditor.qml b/app/qml/form/editors/MMFormRelationReferenceEditor.qml
@@ -66,7 +66,7 @@ MMPrivateComponents.MMBaseSingleLineInput {
   rightContent: MMComponents.MMIcon {
     size: __style.icon24
     source: __style.linkIcon
-    color: root.editState === "enabled" ? __style.forestColor : __style.mediumGreyColor
+    color: root.iconColor
   }
 
   onRightContentClicked: {

diff --git a/app/qml/form/editors/MMFormScannerEditor.qml b/app/qml/form/editors/MMFormScannerEditor.qml
@@ -63,7 +63,7 @@ MMPrivateComponents.MMBaseSingleLineInput  {
 
     size: __style.icon24
     source: __style.qrCodeIcon
-    color: root.editState === "enabled" ? __style.forestColor : __style.mediumGreenColor
+    color: root.iconColor
   }
 
   onRightContentClicked: {

diff --git a/app/qml/form/editors/MMFormSliderEditor.qml b/app/qml/form/editors/MMFormSliderEditor.qml
@@ -83,14 +83,18 @@ MMPrivateComponents.MMBaseSingleLineInput {
       height: __style.row4
       radius: __style.radius2
 
-      color: __style.lightGreenColor
+      color: {
+        if ( root.validationState === "error" ) return __style.negativeColor
+        if ( root.validationState === "warning" ) return __style.warningColor
+        return __style.lightGreenColor
+      }
 
       Rectangle {
         // fill indicator
         height: parent.height
         width: slider.visualPosition * parent.width
 
-        color: internal.indicatorColor
+        color: root.iconColor
 
         radius: __style.radius2
       }
@@ -104,7 +108,7 @@ MMPrivateComponents.MMBaseSingleLineInput {
 
       radius: height / 2
 
-      color: internal.indicatorColor
+      color: root.iconColor
     }
   }
 
@@ -120,13 +124,6 @@ MMPrivateComponents.MMBaseSingleLineInput {
     property real step: _fieldConfig["Step"] ? _fieldConfig["Step"] : 1
     property string suffix: _fieldConfig["Suffix"] ? _fieldConfig["Suffix"] : ""
 
-    property color indicatorColor: {
-      if ( root.editState !== "enabled" ) return __style.mediumGreyColor
-      if ( root.validationState === "error" ) return __style.grapeColor
-      if ( root.validationState === "warning" ) return __style.earthColor
-      return __style.forestColor
-    }
-
     readonly property int intMax: 2000000000 // https://doc.qt.io/qt-5/qml-int.html
 
     function fixRange( rangeValue ) {

diff --git a/app/qml/inputs/MMComboboxInput.qml b/app/qml/inputs/MMComboboxInput.qml
@@ -46,7 +46,7 @@ MMPrivateComponents.MMBaseSingleLineInput {
 
     size: __style.icon24
     source: drawerLoader.active ? __style.arrowUpIcon : __style.arrowDownIcon
-    color: root.editState === "enabled" ? __style.forestColor : __style.mediumGreenColor
+    color: root.iconColor
   }
 
   Loader {

diff --git a/app/qml/inputs/MMPasswordInput.qml b/app/qml/inputs/MMPasswordInput.qml
@@ -26,7 +26,7 @@ MMPrivateComponents.MMBaseSingleLineInput {
 
     size: __style.icon24
     source: pressed ? __style.hideIcon : __style.showIcon
-    color: root.editState === "enabled" ? __style.forestColor : __style.mediumGreenColor
+    color: root.iconColor
   }
 
   onRightContentClicked: eyeButton.pressed = !eyeButton.pressed

diff --git a/app/qml/inputs/MMSearchInput.qml b/app/qml/inputs/MMSearchInput.qml
@@ -25,15 +25,20 @@ MMPrivateComponents.MMBaseSingleLineInput {
 
     size: __style.icon24
     source: __style.searchIcon
-    color: root.enabled ? __style.nightColor : __style.mediumGreenColor
+    color: {
+      if ( root.editState === "disabled" ) return __style.mediumGreyColor
+      if ( root.validationState === "error" ) return __style.grapeColor
+      if ( root.validationState === "warning" ) return __style.earthColor
+      return __style.nightColor
+    }
   }
 
   rightContent: MMComponents.MMIcon {
     id: rightIcon
 
     size: __style.icon24
     source: __style.closeIcon
-    color: root.enabled ? __style.forestColor : __style.mediumGreenColor
+    color: root.iconColor
   }
 
   rightContentVisible: root.showClearIcon && textField.activeFocus && root.text.length > 0

diff --git a/app/qml/inputs/MMSwitchInput.qml b/app/qml/inputs/MMSwitchInput.qml
@@ -30,7 +30,21 @@ MMPrivateComponents.MMBaseSingleLineInput {
   rightContent: MMComponents.MMSwitch {
     id: switchComponent
 
-    uncheckedBgColor: __style.lightGreenColor
+    uncheckedBgColor: {
+      if ( root.editState !== "enabled" ) return __style.lightGreenColor
+      if ( root.validationState === "error" ) return __style.negativeLightColor
+      if ( root.validationState === "warning" ) return __style.sandColor
+      return __style.lightGreenColor
+    }
+
+    checkedBgColor: {
+      if ( root.editState !== "enabled" ) return __style.mediumGreenColor
+      if ( root.validationState === "error" ) return __style.negativeColor
+      if ( root.validationState === "warning" ) return __style.warningColor
+      return __style.grassColor
+    }
+
+    handleColor: root.iconColor
   }
 
   onTextClicked: toggleSwitchComponent()

diff --git a/app/qml/inputs/MMTextInput.qml b/app/qml/inputs/MMTextInput.qml
@@ -29,7 +29,7 @@ MMPrivateComponents.MMBaseSingleLineInput {
   rightContent: MMComponents.MMIcon {
     size: __style.icon24
     source: __style.closeIcon
-    color: root.editState === "enabled" ? __style.forestColor : __style.mediumGreenColor
+    color: root.iconColor
   }
 
   rightContentVisible: root.showClearIcon && textField.activeFocus && textField.text.length > 0

diff --git a/gallery/qml/pages/ChecksPage.qml b/gallery/qml/pages/ChecksPage.qml
@@ -188,6 +188,11 @@ Column {
         enabled: false
         checked: false
       }
+      MMComponents.MMSwitch {
+        text: "disabled"
+        enabled: false
+        checked: true
+      }
     }
   }
 }
diff --git a/gallery/qml/pages/EditorsPage.qml b/gallery/qml/pages/EditorsPage.qml
@@ -229,9 +229,7 @@ ScrollView {
             id: dateTimeCalendar
 
             text: "yyyy-MM-dd hh:mm"
-            enabled: checkbox.checked
             width: parent.width
-            warningMsg: text.length > 0 ? "" : "Press button to open Calendar"
 
             fieldIsDate: false
             includesTime: true