Minimize GUI Plugins (#84)

Signed-off-by: Sarathkrishnan Ramesh <[email protected]> Signed-off-by: Louise Poubel <[email protected]> Co-authored-by: Louise Poubel <[email protected]>
gazebosim · Aug 1, 2020 · b2bb0e4 · b2bb0e4
1 parent 1759a7a
commit b2bb0e4
Show file tree

Hide file tree

Showing 4 changed files with 228 additions and 6 deletions.
diff --git a/examples/config/plugin_params.config b/examples/config/plugin_params.config
@@ -50,3 +50,13 @@
  </ignition-gui>
 </plugin>
 
+<plugin filename="Publisher">
+ <ignition-gui>
+ <title>Collapsed publisher</title>
+ <property key="width" type="double">250</property>
+ <property key="height" type="double">50</property>
+ <property key="state" type="string">docked_collapsed</property>
+ <property key="showCollapseButton" type="bool">true</property>
+ <property key="showTitleBar" type="bool">true</property>
+ </ignition-gui>
+</plugin>
diff --git a/include/ignition/gui/qml/IgnCard.qml b/include/ignition/gui/qml/IgnCard.qml
@@ -39,6 +39,11 @@ Pane {
  */
  property bool showCloseButton: true
 
+ /**
+ * True to have a collapse button
+ */
+ property bool showCollapseButton: true
+
  /**
  * True to have a title bar
  */
@@ -64,6 +69,16 @@ Pane {
  */
  property string dockIcon: "\u2581"
 
+ /**
+ * ▼
+ */
+ property string collapseIcon: "\u25B4"
+
+ /**
+ * ▲
+ */
+ property string expandIcon: "\u25BE"
+
  /**
  * □
  */
@@ -84,6 +99,11 @@ Pane {
  */
  property var backgroundItem: null
 
+ /**
+ * Stores last height of plugin to expand to.
+ */
+ property int lastHeight: 50
+
  /**
  * True if there's at least one anchor set for the card.
  * There's no way to check the anchors themselves, so we need
@@ -222,12 +242,20 @@ Pane {
 // height: cardWindowContent.height
 // }
 // },
+ // Floating and Docked state are the expanded states
  State {
  name: "docked"
  },
-
  State {
  name: "floating"
+ },
+ // Docked collapsed state
+ State {
+ name: "docked_collapsed"
+ },
+ // Floating collapsed state
+ State {
+ name: "floating_collapsed"
  }
  ]
 
@@ -247,6 +275,102 @@ Pane {
  ScriptAction {script: leaveFloatingState()}
  ScriptAction {script: enterDockedState()}
  }
+ },
+ Transition {
+ from: "floating"
+ to: "floating_collapsed"
+ NumberAnimation {
+ target: card
+ property: "height"
+ duration: 200
+ easing.type: Easing.OutCubic
+ from: card.height
+ to: 50
+ }
+ },
+ Transition {
+ from: "floating_collapsed"
+ to: "floating"
+ NumberAnimation {
+ target: card
+ property: "height"
+ duration: 200
+ easing.type: Easing.InCubic
+ from: 50
+ to: lastHeight
+ }
+ },
+ Transition {
+ from: "floating_collapsed"
+ to: "docked"
+ SequentialAnimation {
+ ScriptAction {script: leaveFloatingState()}
+ ScriptAction {script: enterDockedState()}
+ }
+ },
+ Transition {
+ from: "docked"
+ to: "docked_collapsed"
+ NumberAnimation {
+ target: card
+ property: "parent.Layout.minimumHeight"
+ duration: 200
+ easing.type: Easing.OutCubic
+ from: card.height
+ to: 50
+ }
+ },
+ Transition {
+ from: "docked_collapsed"
+ to: "docked"
+ NumberAnimation {
+ target: card
+ property: "parent.Layout.minimumHeight"
+ duration: 200
+ easing.type: Easing.InCubic
+ from: 50
+ to: content.children[0] === undefined ? 50 : content.children[0].Layout.minimumHeight
+ }
+ },
+ Transition {
+ from: "docked_collapsed"
+ to: "floating"
+ SequentialAnimation {
+ ScriptAction {script: leaveDockedState()}
+ ScriptAction {script: enterFloatingState()}
+ }
+ },
+ Transition {
+ from: "docked"
+ to: "floating_collapsed"
+ SequentialAnimation {
+ ScriptAction {script: leaveDockedState()}
+ ScriptAction {script: enterFloatingState()}
+ NumberAnimation {
+ target: card
+ property: "height"
+ duration: 200
+ easing.type: Easing.OutCubic
+ from: card.height
+ to: 50
+ }
+ }
+ },
+ Transition {
+ from: "docked_collapsed"
+ to: "floating_collapsed"
+ SequentialAnimation {
+ ScriptAction {script: leaveDockedState()}
+ ScriptAction {script: enterFloatingState()}
+ }
+ },
+ Transition {
+ from: "floating_collapsed"
+ to: "docked_collapsed"
+ SequentialAnimation {
+ ScriptAction {script: leaveFloatingState()}
+ ScriptAction {script: enterDockedState()}
+ }
  }
  ]
 
@@ -259,22 +383,31 @@ Pane {
  var splitName = backgroundItem.addSplitItem();
  var splitItem = backgroundItem.childItems[splitName];
 
+ const collapsed = card.height === 50
+
  // Reparent to split
  card.parent = splitItem;
+
+ // Retain collapsed or expanded state
+ card.parent.Layout.minimumHeight = collapsed ? 50 : content.children[0].Layout.minimumHeight;
  }
 
  /**
  * Called when the floating state is entered.
  */
  function enterFloatingState()
  {
+ const collapsed = card.parent.Layout.minimumHeight === 50;
  // Reparent to main window's background
  card.parent = backgroundItem
 
  // Resize to minimum size
  card.clearAnchors();
  card.width = content.children[0].Layout.minimumWidth;
- card.height = content.children[0].Layout.minimumHeight;
+
+ // Retain collapsed or expanded state
+ card.height = collapsed ? 50 : content.children[0].Layout.minimumHeight;
+ lastHeight = content.children[0].Layout.minimumHeight;
  }
 
  /**
@@ -365,7 +498,7 @@ Pane {
  // TODO(louise) support window state
  ToolButton {
  id: dockButton
- text: card.state === "docked" ? floatIcon : dockIcon
+ text: (card.state === "docked" || card.state === "docked_collapsed") ? floatIcon : dockIcon
  contentItem: Text {
  text: dockButton.text
  font: dockButton.font
@@ -376,8 +509,72 @@ Pane {
  }
  visible: card.showDockButton && !card.standalone
  onClicked: {
- const docked = card.state === "docked"
- card.state = docked ? "floating" : "docked"
+ switch(card.state) {
+ case "floating_collapsed": {
+ card.state = "docked_collapsed"
+ break;
+ }
+ case "floating": {
+ card.state = "docked"
+ break;
+ }
+ case "docked": {
+ card.state = "floating"
+ break;
+ }
+ case "docked_collapsed": {
+ card.state = "floating_collapsed"
+ break;
+ }
+ }
+ }
+ }
+
+ // Collapse button
+ ToolButton {
+ id: collapseButton
+ visible: card.showCollapseButton && !card.standalone
+ text: card.height <= 50.5 ? expandIcon : collapseIcon;
+ contentItem: Text {
+ text: collapseButton.text
+ font: collapseButton.font
+ opacity: enabled ? 1.0 : 0.3
+ color: card.Material.background
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ }
+ onClicked: {
+ switch(card.state) {
+ case "floating_collapsed": {
+ card.state = "floating"
+ break;
+ }
+ case "floating": {
+ // When user manually minimized the plugin using resize
+ if(card.height === 50) {
+ // Handles the case when a floating plugin is loaded using config
+ if(lastHeight === 50) {
+ lastHeight = content.children[0].Layout.minimumHeight;
+ }
+ // Set state to floating collapsed and then expand for animation
+ card.state = "floating_collapsed"
+ card.state = "floating"
+ } else {
+ lastHeight = card.height
+ // Set card state to collapsed
+ card.state = "floating_collapsed"
+ }
+ break;
+ }
+ case "docked": {
+ card.state = "docked_collapsed"
+ break;
+ }
+ case "docked_collapsed": {
+ card.state = "docked"
+ break;
+ }
+ }
  }
  }
 

diff --git a/include/ignition/gui/qml/IgnCardSettings.qml b/include/ignition/gui/qml/IgnCardSettings.qml
@@ -63,6 +63,17 @@ Dialog {
  }
  }
 
+ Switch {
+ id: collapseSwitch
+ text: "Show collapse button"
+ visible: !card.standalone
+ enabled: card.showTitleBar
+ checked: card.showCollapseButton
+ onToggled: {
+ card.showCollapseButton = checked
+ }
+ }
+
  Switch {
  id: resizableSwitch
  text: "Resizable"

diff --git a/include/ignition/gui/qml/IgnSplit.qml b/include/ignition/gui/qml/IgnSplit.qml
@@ -230,7 +230,7 @@ SplitView {
  Rectangle {
  Layout.minimumWidth: 100
  Layout.minimumHeight: 100
- Layout.fillHeight: true
+ Layout.fillHeight: false
  Layout.fillWidth: true
  color: Material.background
 
@@ -283,6 +283,7 @@ SplitView {
  */
  Rectangle {
  id: splitWrapper
+ color: "transparent"
 
  /**
  * Expose the split view.
@@ -335,11 +336,14 @@ SplitView {
  {
  Layout.minimumWidth = child.Layout.minimumWidth;
  }
+ // Set child height to minimum height
+ child.height = child.Layout.minimumHeight;
 
  // Minimum height is the sum of all children's minimum heights
  heightSum += child.Layout.minimumHeight;
  }
  Layout.minimumHeight = heightSum;
+ split.height = heightSum;
  }
  }
  }