Create expanding type header to reduce code duplication (#1169)

* Create exanpding type header to reduce code duplication in the component inspector Signed-off-by: Nate Koenig <nate@openrobotics.org> * Revert TypeHeader changes Signed-off-by: Nate Koenig <nate@openrobotics.org> * Removed extra lines Signed-off-by: Nate Koenig <nate@openrobotics.org> Co-authored-by: Nate Koenig <nate@openrobotics.org>
gazebosim · Nov 6, 2021 · 9e4b5e4 · 9e4b5e4
1 parent a90bf42
commit 9e4b5e4
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 205 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,72 @@
+/*
+ * 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
+
+  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"
+    }
+  }
+}
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/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