fix: adjust UI for MenuItem

It's consistent with QMenu. Fallback padding from 0 to 6. Fallback subMenu's background. pms: BUG-297003
linuxdeepin · Dec 30, 2024 · a8f6fa3 · a8f6fa3
1 parent 2d59149
commit a8f6fa3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 32 deletions.
diff --git a/qt6/src/qml/FlowStyle.qml b/qt6/src/qml/FlowStyle.qml
@@ -633,18 +633,20 @@ QtObject {
     }
 
     property QtObject menu: QtObject {
-        property int padding: 0
+        property int padding: 6
+        property int topPadding: 8
         property int radius: D.DTK.platformTheme.windowRadius < 0 ? 12 : D.DTK.platformTheme.windowRadius
         property int margins: 10
         property int overlap: 1
 
         property QtObject item: QtObject {
             property int width: 180
-            property int height: 34
+            property int height: 30
             property size iconSize: Qt.size(14, 14)
             property int count: 0
             property int contentPadding: 30
             property int indicatorMargin: 10
+            property int radius: 6
         }
 
         property QtObject separator: QtObject {
@@ -699,6 +701,7 @@ QtObject {
     property QtObject highlightPanel: QtObject {
         property int width: 180
         property int height: 30
+        property int radius: 6
 
         property D.Palette background: D.Palette {
             normal: D.DTK.makeColor(D.Color.Highlight)

diff --git a/qt6/src/qml/HighlightPanel.qml b/qt6/src/qml/HighlightPanel.qml
@@ -12,11 +12,13 @@ Item {
     property D.Palette backgroundColor: DS.Style.highlightPanel.background
     property D.Palette outerShadowColor: DS.Style.highlightPanel.dropShadow
     property D.Palette innerShadowColor: DS.Style.highlightPanel.innerShadow
+    property int radius: DS.Style.highlightPanel.radius
 
     implicitWidth: DS.Style.highlightPanel.width
     implicitHeight: DS.Style.highlightPanel.height
     BoxShadow {
         anchors.fill: backgroundRect
+        visible: panel.outerShadowColor
         shadowColor: panel.D.ColorSelector.outerShadowColor
         shadowOffsetY: 4
         shadowBlur: 6
@@ -27,11 +29,12 @@ Item {
         id: backgroundRect
         anchors.fill: parent
         color: panel.D.ColorSelector.backgroundColor
-        radius: DS.Style.control.radius
+        radius: panel.radius
     }
 
     BoxInsetShadow {
         anchors.fill: backgroundRect
+        visible: panel.innerShadowColor
         shadowColor: panel.D.ColorSelector.innerShadowColor
         shadowOffsetY: -1
         shadowBlur: 2

diff --git a/qt6/src/qml/Menu.qml b/qt6/src/qml/Menu.qml
@@ -34,6 +34,8 @@ T.Menu {
     margins: DS.Style.menu.margins
     overlap: DS.Style.menu.overlap
     padding: DS.Style.menu.padding
+    topPadding: DS.Style.menu.topPadding
+    bottomPadding: topPadding
 
     delegate: MenuItem { }
 
@@ -42,7 +44,7 @@ T.Menu {
     }
 
     contentItem: Control {
-        topPadding: 15 // TODO how to clip radius
+        topPadding: 0
         bottomPadding: topPadding
         leftPadding: 0
         rightPadding: leftPadding
@@ -83,42 +85,23 @@ T.Menu {
                 view.highlightMoveDuration: 50
                 view.highlightMoveVelocity: -1
 
-                view.highlight: Rectangle {
+                view.highlight: HighlightPanel {
                     id: highlightRect
                     anchors.left: parent ? parent.left : undefined
                     anchors.right: parent ? parent.right : undefined
                     anchors.leftMargin: 0
                     anchors.rightMargin: 0
                     scale: D.DTK.hasAnimation ? 0.9 : 1.0
-                    property D.Palette backgroundColor: DS.Style.highlightPanel.background
-                    property D.Palette submenuOpenedItemHighlightColor: DS.Style.menu.submenuOpenedItemHighlight
-                    property D.Palette itemHighlightShadowColor: DS.Style.menu.itemHighlightShadow
-                    color: {
-                        let item = control.itemAt(control.currentIndex)
-                        if (item && item.subMenu) {
-                            return D.ColorSelector.submenuOpenedItemHighlightColor
-                        } else {
-                            return D.ColorSelector.backgroundColor
-                        }
-                    }
-                    radius: 1
+
+                    radius: DS.Style.menu.item.radius
+                    outerShadowColor: null
+                    innerShadowColor: null
                     Component.onCompleted: {
                         scale = 1.0
                     }
                     Behavior on scale {
                         NumberAnimation { duration: 100 }
                     }
-                    BoxInsetShadow {
-                        visible: highlightRect.color === highlightRect.D.ColorSelector.backgroundColor
-                        anchors.fill: parent
-                        z: DTK.AboveOrder
-                        cornerRadius: parent.radius
-                        shadowOffsetX: 0
-                        shadowOffsetY: -1
-                        shadowBlur: 1
-                        spread: 1
-                        shadowColor: highlightRect.D.ColorSelector.itemHighlightShadowColor
-                    }
                 }
             }
             Loader {

diff --git a/qt6/src/qml/MenuItem.qml b/qt6/src/qml/MenuItem.qml
@@ -99,10 +99,11 @@ T.MenuItem {
         implicitHeight: DS.Style.menu.item.height
         Loader {
             anchors.fill: parent
-            active: !control.hovered && control.subMenu && control.subMenu.opened
-            sourceComponent: Rectangle {
-                color: control.D.ColorSelector.subMenuBackgroundColor
-                radius: DS.Style.control.radius
+            active: control.highlighted
+            sourceComponent: HighlightPanel {
+                outerShadowColor: null
+                innerShadowColor: null
+                radius: DS.Style.menu.item.radius
             }
         }
     }