fix: missing focus box border for some items

Issue: linuxdeepin/developer-center#8135
linuxdeepin · Apr 24, 2024 · b4e6f0a · b4e6f0a
1 parent 05b57db
commit b4e6f0a
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 19 deletions.
diff --git a/qml/windowed/AppListView.qml b/qml/windowed/AppListView.qml
@@ -110,7 +110,9 @@ Item {
                         }
                     }
 
-                    background: ItemBackground { }
+                    background: ItemBackground {
+                        button: headingBtn
+                    }
 
                     MouseArea {
                         anchors.fill: parent
@@ -209,7 +211,9 @@ Item {
                     }
                 }
 
-                background: ItemBackground { }
+                background: ItemBackground {
+                    button: itemDelegate
+                }
             }
         }
     }

diff --git a/qml/windowed/BottomBar.qml b/qml/windowed/BottomBar.qml
@@ -25,7 +25,9 @@ Control {
         ToolButton {
             id: shutdownBtn
             icon.name: "shutdown"
-            background: ItemBackground { }
+            background: ItemBackground {
+               button: shutdownBtn
+            }
             ToolTip.visible: hovered
             ToolTip.delay: 1000
             ToolTip.text: qsTr("Power")
@@ -80,8 +82,11 @@ Control {
         }
 
         ToolButton {
+            id: fullscreenBtn
             icon.name: "launcher_fullscreen"
-            background: ItemBackground { }
+            background: ItemBackground {
+                button: fullscreenBtn
+            }
             Accessible.name: "Fullscreen"
             Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
             onClicked: {

diff --git a/qml/windowed/FreeSortListView.qml b/qml/windowed/FreeSortListView.qml
@@ -150,6 +150,7 @@ Item {
 
                 background: ItemBackground {
                     id: bg
+                    button: itemDelegate
                 }
 
                 MouseArea {

diff --git a/qml/windowed/IconItemDelegate.qml b/qml/windowed/IconItemDelegate.qml
@@ -24,6 +24,7 @@ Control {
     signal menuTriggered()
 
     contentItem: ToolButton {
+        id: iconButton
         focusPolicy: Qt.NoFocus
         contentItem: Column {
             anchors.fill: parent
@@ -63,13 +64,14 @@ Control {
                 elide: Text.ElideRight
                 maximumLineCount: singleRow ? 1 : 2
                 font: DTK.fontManager.t9
-            }    
+            }
         }
         ToolTip.text: root.text
         ToolTip.delay: 1000
         ToolTip.visible: hovered
         background: ItemBackground {
             radius: 8
+            button: iconButton
         }
 
         onClicked: {

diff --git a/qml/windowed/ItemBackground.qml b/qml/windowed/ItemBackground.qml
@@ -7,12 +7,8 @@ import org.deepin.dtk 1.0 as D
 import org.deepin.dtk.style 1.0 as DS
 
 D.BoxPanel {
-    visible: D.ColorSelector.controlState === D.DTK.HoveredState
-    outsideBorderColor: null
-    insideBorderColor: null
-    implicitWidth: DS.Style.toolButton.width
-    implicitHeight: DS.Style.toolButton.height
-
+    id: control
+    property Item button
     property D.Palette background: D.Palette {
         normal {
             common: Qt.rgba(0, 0, 0, 0.1)
@@ -27,6 +23,32 @@ D.BoxPanel {
             crystal: Qt.rgba(16.0 / 255, 16.0 / 255, 16.0 / 255, 0.1)
         }
     }
-    color1: background
-    color2: background
+
+    implicitWidth: DS.Style.toolButton.width
+    implicitHeight: DS.Style.toolButton.height
+    color1: selectValue(background, DS.Style.checkedButton.background, DS.Style.highlightedButton.background1)
+    color2: selectValue(background, DS.Style.checkedButton.background, DS.Style.highlightedButton.background2)
+    insideBorderColor: null
+    outsideBorderColor: null
+    visible: button.checked || button.highlighted || button.visualFocus || control.D.ColorSelector.controlState === D.DTK.PressedState || control.D.ColorSelector.controlState === D.DTK.HoveredState
+
+    function selectValue(normal, checked, highlighted) {
+        if (button.checked) {
+            return checked
+        } else if ((typeof button.highlighted == "boolean") && button.highlighted) {
+            return highlighted
+        }
+
+        return normal
+    }
+
+    Loader {
+        anchors.fill: parent
+        active: button.visualFocus
+
+        sourceComponent: D.FocusBoxBorder {
+            radius: control.radius
+            color: button.palette.highlight
+        }
+    }
 }
diff --git a/qml/windowed/SideBar.qml b/qml/windowed/SideBar.qml
@@ -114,7 +114,9 @@ ColumnLayout {
             }
         }
 
-        background: ItemBackground { }
+        background: ItemBackground {
+            button: title
+        }
 
         onClicked: {
             const menu = categorizedCom.createObject(this);
@@ -139,7 +141,9 @@ ColumnLayout {
         onClicked: {
             DesktopIntegration.showUrl("computer:///")
         }
-        background: ItemBackground { }
+        background: ItemBackground {
+            button: computer
+        }
     }
 
     D.ToolButton {
@@ -155,7 +159,9 @@ ColumnLayout {
         onClicked: {
             DesktopIntegration.showFolder(StandardPaths.PicturesLocation)
         }
-        background: ItemBackground { }
+        background: ItemBackground {
+            button: images
+        }
     }
 
     D.ToolButton {
@@ -171,7 +177,9 @@ ColumnLayout {
         onClicked: {
             DesktopIntegration.showFolder(StandardPaths.DocumentsLocation)
         }
-        background: ItemBackground { }
+        background: ItemBackground {
+            button: documents
+        }
     }
 
     D.ToolButton {
@@ -187,7 +195,9 @@ ColumnLayout {
         onClicked: {
             DesktopIntegration.showFolder(StandardPaths.DesktopLocation)
         }
-        background: ItemBackground { }
+        background: ItemBackground {
+            button: desktop
+        }
     }
 
     D.ToolButton {
@@ -203,7 +213,9 @@ ColumnLayout {
         onClicked: {
             DesktopIntegration.openSystemSettings();
         }
-        background: ItemBackground { }
+        background: ItemBackground {
+            button: setting
+        }
     }
 
     Item {