Increased contrast for better visibility of ui elements

PhilInTheGaps · Nov 13, 2023 · 72cf9d9 · 72cf9d9
1 parent d4dcb4b
commit 72cf9d9
Show file tree

Hide file tree

Showing 32 changed files with 201 additions and 258 deletions.
diff --git a/app/main.cpp b/app/main.cpp
@@ -75,7 +75,7 @@ void setPalette()
     palette.setColor(QPalette::ColorRole::AlternateBase, "#343a43"_L1);
     palette.setColor(QPalette::ColorRole::Window, "#2e2e2e"_L1);
     palette.setColor(QPalette::ColorRole::WindowText, "#f6f7f8"_L1);
-    palette.setColor(QPalette::ColorRole::Button, "#3f4957"_L1);
+    palette.setColor(QPalette::ColorRole::Button, "#8f9aa9"_L1); // 3f4957
     palette.setColor(QPalette::ColorRole::ButtonText, "#f6f7f8"_L1);
     palette.setColor(QPalette::ColorRole::Light, "#ebedef"_L1);
     palette.setColor(QPalette::ColorRole::Midlight, "#d5dade"_L1);

diff --git a/app/ui/Colors.qml b/app/ui/Colors.qml
@@ -1,9 +1,9 @@
 pragma Singleton
-
 import QtQuick
 
 QtObject {
     readonly property color border: "#3f4957"
     readonly property color borderFocus: "#586679"
     readonly property color menuSeparator: "#A0f1f2f4"
+    readonly property color buttonPressed: "#737e8c"
 }
diff --git a/app/ui/CustomComponents/CCColors.qml b/app/ui/CustomComponents/CCColors.qml
@@ -1,7 +1,8 @@
 pragma Singleton
-
 import QtQuick
 
 QtObject {
     readonly property color focus: "#f6f7f8"
+    readonly property color borderFocus: "#586679"
+    readonly property color buttonPressed: "#737e8c"
 }
diff --git a/app/ui/CustomComponents/CustomButton.qml b/app/ui/CustomComponents/CustomButton.qml
@@ -24,6 +24,7 @@ Control {
     property color backgroundColor: palette.dark
     property bool transparentBackground: false
     property int borderWidth: 1
+    property bool forceBorderVisible: false
 
     // Layout
     property bool usesFixedWidth: true
@@ -42,10 +43,8 @@ Control {
         id: main_row
         spacing: 10
 
-        property int spacingCount: icon_item.visible
-                                   && text_item.visible ? 1 : 0
-        property int contentWidth: (icon_item.visible ? icon_item.width : 0)
-                                   + (text_item.visible ? text_item.width : 0) + spacingCount
+        property int spacingCount: icon_item.visible && text_item.visible ? 1 : 0
+        property int contentWidth: (icon_item.visible ? icon_item.width : 0) + (text_item.visible ? text_item.width : 0) + spacingCount
 
         padding: root.centering ? (width - contentWidth) / 2 : 0
 
@@ -90,8 +89,8 @@ Control {
     background: Rectangle {
         visible: !root.transparentBackground
         color: root.backgroundColor
-        border.color: palette.button
-        border.width: mouse_area.containsMouse ? root.borderWidth : 0
+        border.color: root.pressed ? CCColors.buttonPressed : palette.button
+        border.width: mouse_area.containsMouse || root.forceBorderVisible ? root.borderWidth : 0
     }
 
     ToolTip.text: root.toolTipText
@@ -107,9 +106,9 @@ Control {
 
         onClicked: function (mouse) {
             if (mouse.button === Qt.LeftButton) {
-                root.clicked(root.buttonText)
+                root.clicked(root.buttonText);
             } else if (mouse.button === Qt.RightButton) {
-                root.rightClicked(root.buttonText)
+                root.rightClicked(root.buttonText);
             }
         }
     }

diff --git a/app/ui/CustomComponents/CustomTextEdit.qml b/app/ui/CustomComponents/CustomTextEdit.qml
@@ -18,7 +18,7 @@ Rectangle {
     signal linkClicked(string link)
 
     color: palette.dark
-    border.color: root.enabled ? palette.button : palette.dark
+    border.color: root.enabled ? (area.activeFocus ? CCColors.borderFocus : palette.button) : palette.dark
     border.width: root.enabled && area.activeFocus ? 2 : 1
 
     ScrollView {

diff --git a/app/ui/Style/Button.qml b/app/ui/Style/Button.qml
@@ -4,27 +4,21 @@ import QtQuick.Templates as T
 T.Button {
     id: control
 
-    implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 6
     leftPadding: padding + 2
     rightPadding: padding + 2
     hoverEnabled: true
 
-    font.bold: control.hovered
+    font.bold: control.enabled && control.hovered
 
     contentItem: Text {
         text: control.text
         font: control.font
-        opacity: enabled || control.highlighted || control.checked ? 1 : 0.3
-        color: control.checked
-               || control.highlighted ? StyleColors.focus : (control.visualFocus ? StyleColors.focus : (control.down ? StyleColors.textDisabled : palette.text))
+        color: control.enabled ? (control.checked || control.highlighted ? StyleColors.focus : (control.visualFocus ? StyleColors.focus : (control.down ? StyleColors.textDisabled : palette.text))) : StyleColors.textDisabled
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
@@ -33,10 +27,9 @@ T.Button {
     background: Rectangle {
         implicitWidth: 100
         implicitHeight: 40
-        visible: !control.flat || control.down || control.checked
-                 || control.highlighted
+        visible: !control.flat || control.down || control.checked || control.highlighted
         color: palette.dark
-        border.color: palette.button
-        border.width: control.visualFocus || control.hovered ? 1 : 0
+        border.color: control.down ? StyleColors.buttonPressed : palette.button
+        border.width: control.enabled && (control.visualFocus || control.hovered) ? 1 : 0
     }
 }
diff --git a/app/ui/Style/CMakeLists.txt b/app/ui/Style/CMakeLists.txt
@@ -44,6 +44,7 @@ qt_add_qml_module(gm-companion-ui-style
         RadioIndicator.qml
         ScrollBar.qml
         ScrollIndicator.qml
+        ScrollView.qml
         Slider.qml
         SpinBox.qml
         SplitView.qml

diff --git a/app/ui/Style/CheckIndicator.qml b/app/ui/Style/CheckIndicator.qml
@@ -10,10 +10,9 @@ Label {
     required property int checkState
 
     font.pixelSize: control.height > 26 ? 26 : control.height
-    x: root.control.text ? (root.control.mirrored ? root.control.width - width - root.control.rightPadding : root.control.leftPadding) : root.control.leftPadding
-                           + (root.control.availableWidth - width) / 2
+    x: root.control.text ? (root.control.mirrored ? root.control.width - width - root.control.rightPadding : root.control.leftPadding) : root.control.leftPadding + (root.control.availableWidth - width) / 2
     y: parent.height / 2 - height / 2
-    color: StyleColors.border
+    color: root.control.down ? StyleColors.buttonPressed : palette.button
 
     text: FontAwesome.square
     font.family: FontAwesome.fontRegular.family

diff --git a/app/ui/Style/ComboBox.qml b/app/ui/Style/ComboBox.qml
@@ -56,16 +56,16 @@ T.ComboBox {
         validator: control.validator
 
         font: control.font
-        color: !control.editable && control.visualFocus ? StyleColors.focus : palette.text
-        selectionColor: StyleColors.focus
+        color: !control.editable && control.visualFocus ? palette.button : palette.text
+        selectionColor: palette.button
         selectedTextColor: palette.highlightedText
         verticalAlignment: Text.AlignVCenter
         opacity: control.enabled ? 1 : 0.3
 
         background: Rectangle {
             visible: control.editable && !control.flat
             border.width: parent && parent.activeFocus ? 2 : 1
-            border.color: parent && parent.activeFocus ? StyleColors.focus : StyleColors.border
+            border.color: palette.button
             implicitHeight: 40
         }
     }
@@ -75,7 +75,7 @@ T.ComboBox {
         implicitHeight: StyleSizes.comboBoxHeight
 
         color: palette.dark
-        border.color: StyleColors.border
+        border.color: control.down ? StyleColors.buttonPressed : palette.button
         border.width: 1
     }
 
@@ -138,7 +138,7 @@ T.ComboBox {
                 width: parent.width
                 height: parent.height
                 color: "transparent"
-                border.color: StyleColors.border
+                border.color: palette.button
             }
 
             T.ScrollIndicator.vertical: ScrollIndicator {

diff --git a/app/ui/Style/ItemDelegate.qml b/app/ui/Style/ItemDelegate.qml
@@ -5,13 +5,8 @@ import QtQuick.Templates as T
 T.ItemDelegate {
     id: control
 
-    implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0, Math.max(
-                            contentItem.implicitHeight,
-                            indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, Math.max(contentItem.implicitHeight, indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 12
@@ -21,10 +16,8 @@ T.ItemDelegate {
     font.pointSize: 12
 
     contentItem: Label {
-        leftPadding: control.mirrored ? (control.indicator ? control.indicator.width : 0)
-                                        + control.spacing : 0
-        rightPadding: !control.mirrored ? (control.indicator ? control.indicator.width : 0)
-                                          + control.spacing : 0
+        leftPadding: control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
+        rightPadding: !control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
 
         text: control.text
         font: control.font
@@ -39,7 +32,7 @@ T.ItemDelegate {
         implicitHeight: StyleSizes.delegateHeight
         visible: control.down || control.highlighted || control.visualFocus
         color: palette.dark
-        border.color: StyleColors.border
+        border.color: control.down ? StyleColors.buttonPressed : palette.button
         border.width: control.hovered ? 1 : 0
     }
 }
diff --git a/app/ui/Style/Menu.qml b/app/ui/Style/Menu.qml
@@ -5,12 +5,8 @@ import QtQuick.Templates as T
 T.Menu {
     id: control
 
-    implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
-                       contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
-    implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
-                        contentItem ? contentItem.implicitHeight : 0) + topPadding + bottomPadding
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem ? contentItem.implicitHeight : 0) + topPadding + bottomPadding
 
     margins: 0
     transformOrigin: Item.Top
@@ -55,13 +51,13 @@ T.Menu {
         implicitHeight: contentHeight
         model: control.contentModel
 
-        interactive: ApplicationWindow.window ? contentHeight
-                                                > ApplicationWindow.window.height : false
+        interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
         clip: true
         keyNavigationWraps: false
         currentIndex: -1
 
-        ScrollIndicator.vertical: ScrollIndicator {}
+        ScrollIndicator.vertical: ScrollIndicator {
+        }
     }
 
     background: Rectangle {

diff --git a/app/ui/Style/MenuItem.qml b/app/ui/Style/MenuItem.qml
@@ -5,23 +5,16 @@ import QtQuick.Templates as T
 T.MenuItem {
     id: control
 
-    implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0, Math.max(
-                            contentItem.implicitHeight,
-                            indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, Math.max(contentItem.implicitHeight, indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 6
     hoverEnabled: true
 
     contentItem: Label {
-        leftPadding: control.checkable
-                     && !control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable
-                      && control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
 
         text: control.text
         font: control.font
@@ -39,7 +32,7 @@ T.MenuItem {
         height: parent.height - 2
         color: "transparent"
         opacity: enabled ? 1 : 0.3
-        border.color: StyleColors.border
+        border.color: control.down ? StyleColors.buttonPressed : palette.button
         border.width: control.hovered ? 1 : 0
     }
 }
diff --git a/app/ui/Style/ProgressBar.qml b/app/ui/Style/ProgressBar.qml
@@ -4,12 +4,8 @@ import QtQuick.Templates as T
 T.ProgressBar {
     id: control
 
-    implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding)
 
     contentItem: Item {
         implicitHeight: StyleSizes.progressBarHeight
@@ -35,7 +31,7 @@ T.ProgressBar {
         height: StyleSizes.progressBarHeight
 
         color: palette.window
-        border.color: StyleColors.border
+        border.color: palette.button
         border.width: 1
     }
 }
diff --git a/app/ui/Style/RadioIndicator.qml b/app/ui/Style/RadioIndicator.qml
@@ -9,10 +9,9 @@ Label {
     property T.RadioButton control
 
     font.pixelSize: 26
-    x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding
-                      + (control.availableWidth - width) / 2
+    x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
     y: parent.height / 2 - height / 2
-    color: StyleColors.border
+    color: control.down ? StyleColors.buttonPressed : palette.button
 
     text: FontAwesome.circle
     font.family: FontAwesome.fontRegular.family

diff --git a/app/ui/Style/ScrollBar.qml b/app/ui/Style/ScrollBar.qml
@@ -4,12 +4,8 @@ import QtQuick.Templates as T
 T.ScrollBar {
     id: control
 
-    implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding)
 
     padding: 2
     visible: policy !== T.ScrollBar.AlwaysOff
@@ -19,15 +15,12 @@ T.ScrollBar {
         implicitHeight: control.interactive ? 6 : 2
 
         radius: width / 2
-        color: control.pressed ? palette.dark : palette.button
-        border.color: StyleColors.border
-        border.width: control.pressed ? 1 : 0
+        color: control.pressed ? StyleColors.buttonPressed : palette.button
         opacity: control.size < 1.0 ? 0.5 : 0.0
 
         states: State {
             name: "active"
-            when: control.policy === T.ScrollBar.AlwaysOn
-                  || (control.active && control.size < 1.0)
+            when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
 
             PropertyChanges {
                 control.contentItem.opacity: 0.75

diff --git a/app/ui/Style/ScrollView.qml b/app/ui/Style/ScrollView.qml
@@ -0,0 +1,24 @@
+import QtQuick.Templates as T
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, contentHeight + topPadding + bottomPadding)
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: control.topPadding
+        height: control.availableHeight
+        active: control.ScrollBar.horizontal.active
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: control.leftPadding
+        y: control.height - height
+        width: control.availableWidth
+        active: control.ScrollBar.vertical.active
+    }
+}