Просмотр исходного кода

fix(touch): improve dark mode visibility for buttons and text

- Style search close (✕) buttons with proper themed colors
- Add contentItem with ThemeManager colors for visibility
- Add hover/press states using buttonBackgroundHover
- Fix PlaylistPage.qml with full theme support:
  - Background colors, borders, text colors
  - Back button with proper contentItem
- Fix PatternListPage "No patterns found" label color

All flat buttons and text elements now use ThemeManager colors
for proper visibility in both light and dark modes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
tuanchris 1 неделя назад
Родитель
Сommit
9133176a0c

+ 12 - 2
dune-weaver-touch/qml/pages/ModernPatternListPage.qml

@@ -252,8 +252,7 @@ Page {
                 
                 
                 // Close button when expanded
                 // Close button when expanded
                 Button {
                 Button {
-                    text: "✕"
-                    font.pixelSize: 18
+                    id: searchCloseBtn
                     flat: true
                     flat: true
                     visible: searchExpanded
                     visible: searchExpanded
                     Layout.preferredWidth: 32
                     Layout.preferredWidth: 32
@@ -266,6 +265,17 @@ Page {
                         // Clear the filter when closing search
                         // Clear the filter when closing search
                         patternModel.filter("")
                         patternModel.filter("")
                     }
                     }
+                    contentItem: Text {
+                        text: "✕"
+                        font.pixelSize: 18
+                        color: Components.ThemeManager.textSecondary
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                    background: Rectangle {
+                        color: searchCloseBtn.pressed ? Components.ThemeManager.buttonBackgroundHover : "transparent"
+                        radius: 4
+                    }
                 }
                 }
             }
             }
         }
         }

+ 1 - 1
dune-weaver-touch/qml/pages/PatternListPage.qml

@@ -65,7 +65,7 @@ Page {
         anchors.centerIn: parent
         anchors.centerIn: parent
         text: "No patterns found"
         text: "No patterns found"
         visible: patternModel.rowCount() === 0 && searchField.text !== ""
         visible: patternModel.rowCount() === 0 && searchField.text !== ""
-        color: "#999"
+        color: Components.ThemeManager.textTertiary
         font.pixelSize: 18
         font.pixelSize: 18
     }
     }
 }
 }

+ 12 - 2
dune-weaver-touch/qml/pages/PatternSelectorPage.qml

@@ -229,8 +229,7 @@ Page {
 
 
                 // Close button when search expanded
                 // Close button when search expanded
                 Button {
                 Button {
-                    text: "✕"
-                    font.pixelSize: 18
+                    id: searchCloseBtn
                     flat: true
                     flat: true
                     visible: searchExpanded
                     visible: searchExpanded
                     Layout.preferredWidth: 32
                     Layout.preferredWidth: 32
@@ -242,6 +241,17 @@ Page {
                         searchField.focus = false
                         searchField.focus = false
                         patternModel.filter("")
                         patternModel.filter("")
                     }
                     }
+                    contentItem: Text {
+                        text: "✕"
+                        font.pixelSize: 18
+                        color: Components.ThemeManager.textSecondary
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                    background: Rectangle {
+                        color: searchCloseBtn.pressed ? Components.ThemeManager.buttonBackgroundHover : "transparent"
+                        radius: 4
+                    }
                 }
                 }
             }
             }
         }
         }

+ 36 - 16
dune-weaver-touch/qml/pages/PlaylistPage.qml

@@ -2,68 +2,88 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Layouts 1.15
 import DuneWeaver 1.0
 import DuneWeaver 1.0
+import "../components" as Components
 
 
 Page {
 Page {
+    background: Rectangle {
+        color: Components.ThemeManager.backgroundColor
+    }
+
     header: ToolBar {
     header: ToolBar {
+        background: Rectangle {
+            color: Components.ThemeManager.surfaceColor
+            border.color: Components.ThemeManager.borderColor
+            border.width: 1
+        }
+
         RowLayout {
         RowLayout {
             anchors.fill: parent
             anchors.fill: parent
             anchors.margins: 10
             anchors.margins: 10
-            
+
             Button {
             Button {
                 text: "← Back"
                 text: "← Back"
                 font.pixelSize: 14
                 font.pixelSize: 14
                 flat: true
                 flat: true
                 onClicked: stackView.pop()
                 onClicked: stackView.pop()
+                contentItem: Text {
+                    text: parent.text
+                    font: parent.font
+                    color: Components.ThemeManager.textPrimary
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
             }
             }
-            
+
             Label {
             Label {
                 text: "Playlists"
                 text: "Playlists"
                 Layout.fillWidth: true
                 Layout.fillWidth: true
                 font.pixelSize: 20
                 font.pixelSize: 20
                 font.bold: true
                 font.bold: true
+                color: Components.ThemeManager.textPrimary
             }
             }
         }
         }
     }
     }
-    
+
     PlaylistModel {
     PlaylistModel {
         id: playlistModel
         id: playlistModel
     }
     }
-    
+
     ListView {
     ListView {
         anchors.fill: parent
         anchors.fill: parent
         anchors.margins: 20
         anchors.margins: 20
         model: playlistModel
         model: playlistModel
         spacing: 10
         spacing: 10
-        
+
         delegate: Rectangle {
         delegate: Rectangle {
             width: parent.width
             width: parent.width
             height: 80
             height: 80
-            color: mouseArea.pressed ? "#e0e0e0" : "#f5f5f5"
+            color: mouseArea.pressed ? Components.ThemeManager.buttonBackgroundHover : Components.ThemeManager.cardColor
             radius: 8
             radius: 8
-            border.color: "#d0d0d0"
-            
+            border.color: Components.ThemeManager.borderColor
+
             RowLayout {
             RowLayout {
                 anchors.fill: parent
                 anchors.fill: parent
                 anchors.margins: 15
                 anchors.margins: 15
                 spacing: 15
                 spacing: 15
-                
+
                 Column {
                 Column {
                     Layout.fillWidth: true
                     Layout.fillWidth: true
                     spacing: 5
                     spacing: 5
-                    
+
                     Label {
                     Label {
                         text: model.name
                         text: model.name
                         font.pixelSize: 16
                         font.pixelSize: 16
                         font.bold: true
                         font.bold: true
+                        color: Components.ThemeManager.textPrimary
                     }
                     }
-                    
+
                     Label {
                     Label {
                         text: model.itemCount + " patterns"
                         text: model.itemCount + " patterns"
-                        color: "#666"
+                        color: Components.ThemeManager.textSecondary
                         font.pixelSize: 14
                         font.pixelSize: 14
                     }
                     }
                 }
                 }
-                
+
                 Button {
                 Button {
                     text: "Play"
                     text: "Play"
                     Layout.preferredWidth: 80
                     Layout.preferredWidth: 80
@@ -72,7 +92,7 @@ Page {
                     enabled: false // TODO: Implement playlist execution
                     enabled: false // TODO: Implement playlist execution
                 }
                 }
             }
             }
-            
+
             MouseArea {
             MouseArea {
                 id: mouseArea
                 id: mouseArea
                 anchors.fill: parent
                 anchors.fill: parent
@@ -82,12 +102,12 @@ Page {
             }
             }
         }
         }
     }
     }
-    
+
     Label {
     Label {
         anchors.centerIn: parent
         anchors.centerIn: parent
         text: "No playlists found"
         text: "No playlists found"
         visible: playlistModel.rowCount() === 0
         visible: playlistModel.rowCount() === 0
-        color: "#999"
+        color: Components.ThemeManager.textTertiary
         font.pixelSize: 18
         font.pixelSize: 18
     }
     }
 }
 }