Create exanpding type header to reduce code duplication in the compon…

…ent inspector Signed-off-by: Nate Koenig <nate@openrobotics.org>
gazebosim · Nov 5, 2021 · 27fe1da · 27fe1da
1 parent a90bf42
commit 27fe1da
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 209 deletions.
diff --git a/src/gui/plugins/component_inspector/ComponentInspector.qrc b/src/gui/plugins/component_inspector/ComponentInspector.qrc
@@ -2,6 +2,7 @@
 <qresource prefix="ComponentInspector/">
   <file>Boolean.qml</file>
   <file>ComponentInspector.qml</file>
+  <file>ExpandingTypeHeader.qml</file>
   <file>Light.qml</file>
   <file>NoData.qml</file>
   <file>Physics.qml</file>

diff --git a/src/gui/plugins/component_inspector/ExpandingTypeHeader.qml b/src/gui/plugins/component_inspector/ExpandingTypeHeader.qml
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2021 Open Source Robotics Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+*/
+import QtQuick 2.9
+import QtQuick.Controls 1.4
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.1
+import QtQuick.Layouts 1.3
+import QtQuick.Controls.Styles 1.4
+
+// Header
+Rectangle {
+  id: header
+  width: parent.width
+  height: typeHeader.height
+  color: "transparent"
+
+  // Horizontal margins
+  property int margin: 5
+
+  // Left indentation
+  property int indentation: 10
+
+  property string expandingHeaderText: ""
+  property string expandingHeaderToolTip: ""
+
+  RowLayout {
+    anchors.fill: parent
+    Item {
+      width: margin
+    }
+    Image {
+      id: icon
+      sourceSize.height: indentation
+      sourceSize.width: indentation
+      fillMode: Image.Pad
+      Layout.alignment : Qt.AlignVCenter
+      source: content.show ?
+          "qrc:/Gazebo/images/minus.png" : "qrc:/Gazebo/images/plus.png"
+    }
+    TypeHeader {
+      id: typeHeader
+      headerText: expandingHeaderText
+      headerToolTip: expandingHeaderToolTip
+    }
+    Item {
+      Layout.fillWidth: true
+    }
+  }
+  MouseArea {
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    onClicked: {
+      content.show = !content.show
+    }
+    onEntered: {
+      header.color = highlightColor
+    }
+    onExited: {
+      header.color = "transparent"
+    }
+  }
+}
diff --git a/src/gui/plugins/component_inspector/Light.qml b/src/gui/plugins/component_inspector/Light.qml
@@ -221,48 +221,11 @@ Rectangle {
   Column {
     anchors.fill: parent
 
-    // Header
-    Rectangle {
+    // The expanding header. Make sure that the content to expand has an id set
+    // to the value "content".
+    ExpandingTypeHeader {
       id: header
-      width: parent.width
-      height: typeHeader.height
-      color: "transparent"
-
-      RowLayout {
-        anchors.fill: parent
-        Item {
-          width: margin
-        }
-        Image {
-          id: icon
-          sourceSize.height: indentation
-          sourceSize.width: indentation
-          fillMode: Image.Pad
-          Layout.alignment : Qt.AlignVCenter
-          source: content.show ?
-              "qrc:/Gazebo/images/minus.png" : "qrc:/Gazebo/images/plus.png"
-        }
-        TypeHeader {
-          id: typeHeader
-        }
-        Item {
-          Layout.fillWidth: true
-        }
-      }
-      MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-          content.show = !content.show
-        }
-        onEntered: {
-          header.color = highlightColor
-        }
-        onExited: {
-          header.color = "transparent"
-        }
-      }
+      // Using the default header text values.
     }
 
     // Content

diff --git a/src/gui/plugins/component_inspector/Physics.qml b/src/gui/plugins/component_inspector/Physics.qml
@@ -116,48 +116,11 @@ Rectangle {
   Column {
     anchors.fill: parent
 
-    // Header
-    Rectangle {
+    // The expanding header. Make sure that the content to expand has an id set
+    // to the value "content".
+    ExpandingTypeHeader {
       id: header
-      width: parent.width
-      height: typeHeader.height
-      color: "transparent"
-
-      RowLayout {
-        anchors.fill: parent
-        Item {
-          width: margin
-        }
-        Image {
-          id: icon
-          sourceSize.height: indentation
-          sourceSize.width: indentation
-          fillMode: Image.Pad
-          Layout.alignment : Qt.AlignVCenter
-          source: content.show ?
-              "qrc:/Gazebo/images/minus.png" : "qrc:/Gazebo/images/plus.png"
-        }
-        TypeHeader {
-          id: typeHeader
-        }
-        Item {
-          Layout.fillWidth: true
-        }
-      }
-      MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-          content.show = !content.show
-        }
-        onEntered: {
-          header.color = highlightColor
-        }
-        onExited: {
-          header.color = "transparent"
-        }
-      }
+      // Using the default header text values.
     }
 
     // Content

diff --git a/src/gui/plugins/component_inspector/Pose3d.qml b/src/gui/plugins/component_inspector/Pose3d.qml
@@ -120,48 +120,11 @@ Rectangle {
   Column {
     anchors.fill: parent
 
-    // Header
-    Rectangle {
+    // The expanding header. Make sure that the content to expand has an id set
+    // to the value "content".
+    ExpandingTypeHeader {
       id: header
-      width: parent.width
-      height: typeHeader.height
-      color: "transparent"
-
-      RowLayout {
-        anchors.fill: parent
-        Item {
-          width: margin
-        }
-        Image {
-          id: icon
-          sourceSize.height: indentation
-          sourceSize.width: indentation
-          fillMode: Image.Pad
-          Layout.alignment : Qt.AlignVCenter
-          source: content.show ?
-              "qrc:/Gazebo/images/minus.png" : "qrc:/Gazebo/images/plus.png"
-        }
-        TypeHeader {
-          id: typeHeader
-        }
-        Item {
-          Layout.fillWidth: true
-        }
-      }
-      MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-          content.show = !content.show
-        }
-        onEntered: {
-          header.color = highlightColor
-        }
-        onExited: {
-          header.color = "transparent"
-        }
-      }
+      // Using the default header text values.
     }
 
     // Content

diff --git a/src/gui/plugins/component_inspector/SphericalCoordinates.qml b/src/gui/plugins/component_inspector/SphericalCoordinates.qml
@@ -84,48 +84,11 @@ Rectangle {
   Column {
     anchors.fill: parent
 
-    // Header
-    Rectangle {
+    // The expanding header. Make sure that the content to expand has an id set
+    // to the value "content".
+    ExpandingTypeHeader {
       id: header
-      width: parent.width
-      height: typeHeader.height
-      color: "transparent"
-
-      RowLayout {
-        anchors.fill: parent
-        Item {
-          width: margin
-        }
-        Image {
-          id: icon
-          sourceSize.height: indentation
-          sourceSize.width: indentation
-          fillMode: Image.Pad
-          Layout.alignment : Qt.AlignVCenter
-          source: content.show ?
-              "qrc:/Gazebo/images/minus.png" : "qrc:/Gazebo/images/plus.png"
-        }
-        TypeHeader {
-          id: typeHeader
-        }
-        Item {
-          Layout.fillWidth: true
-        }
-      }
-      MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-          content.show = !content.show
-        }
-        onEntered: {
-          header.color = highlightColor
-        }
-        onExited: {
-          header.color = "transparent"
-        }
-      }
+      // Using the default header text values.
     }
 
     // Content

diff --git a/src/gui/plugins/component_inspector/TypeHeader.qml b/src/gui/plugins/component_inspector/TypeHeader.qml
@@ -23,11 +23,17 @@ import QtQuick.Controls.Styles 1.4
 
 Rectangle {
   id: typeHeader
-  height: headerText.height
-  width: headerText.width
+  height: headerTextId.height
+  width: headerTextId.width
   color: "transparent"
+  property string headerText: ""
+  property string headerToolTip: ""
 
   function tooltipText(_model) {
+    if (headerToolTip !== undefined && headerToolTip !== "" ) {
+      return headerToolTip
+    }
+
     if (model === null)
       return "Unknown component"
 
@@ -42,8 +48,14 @@ Rectangle {
   }
 
   Text {
-    id: headerText
-    text: model && model.shortName ? model.shortName : ''
+    id: headerTextId
+    text: {
+      if (headerText === undefined || headerText === "") {
+        model && model.shortName ? model.shortName : ''
+      } else {
+        headerText
+      }
+    }
     color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
     font.pointSize: 12
 

diff --git a/src/gui/plugins/component_inspector/Vector3d.qml b/src/gui/plugins/component_inspector/Vector3d.qml
@@ -110,48 +110,11 @@ Rectangle {
   Column {
     anchors.fill: parent
 
-    // Header
-    Rectangle {
+    // The expanding header. Make sure that the content to expand has an id set
+    // to the value "content".
+    ExpandingTypeHeader {
       id: header
-      width: parent.width
-      height: typeHeader.height
-      color: "transparent"
-
-      RowLayout {
-        anchors.fill: parent
-        Item {
-          width: margin
-        }
-        Image {
-          id: icon
-          sourceSize.height: indentation
-          sourceSize.width: indentation
-          fillMode: Image.Pad
-          Layout.alignment : Qt.AlignVCenter
-          source: content.show ?
-              "qrc:/Gazebo/images/minus.png" : "qrc:/Gazebo/images/plus.png"
-        }
-        TypeHeader {
-          id: typeHeader
-        }
-        Item {
-          Layout.fillWidth: true
-        }
-      }
-      MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-          content.show = !content.show
-        }
-        onEntered: {
-          header.color = highlightColor
-        }
-        onExited: {
-          header.color = "transparent"
-        }
-      }
+      // Using the default header text values.
     }
 
     // Content