Index: sources/gui/qml/components/DebugDataColumn.qml
===================================================================
diff -u -r9143dd9055ada50b3ec13e7ce0671727a784f38f -r89be2d248cac3f748b704cd62408cf8911991039
--- sources/gui/qml/components/DebugDataColumn.qml	(.../DebugDataColumn.qml)	(revision 9143dd9055ada50b3ec13e7ce0671727a784f38f)
+++ sources/gui/qml/components/DebugDataColumn.qml	(.../DebugDataColumn.qml)	(revision 89be2d248cac3f748b704cd62408cf8911991039)
@@ -17,62 +17,101 @@
 import QtQuick 2.12
 
 // Project
-import Gui.Actions 0.1;
 
 //  Qml imports
 import "qrc:/globals"
-import "qrc:/components"
 
-Column { id: _root
-    property var    model: []
-    property var    label: []
-    property string title: "Title"
-    property int    fontPixelSizeTitle: Fonts.fontPixelDebugTitle
-    property int    fontPixelSizeText : Fonts.fontPixelDebugText
-    property int    fontPixelSizeLabel: Fonts.fontPixelDebugLabel
-
-    property string textObjectName: "_DebugDataColumn"
-
-    property int    horizontalAlignmentTitle: Text.AlignRight
+Rectangle {  id: _root
+    property var    model                   : []
+    property var    label                   : []
+    property string title                   : ""
+    property int    fontPixelSizeTitle      : Fonts.fontPixelDebugTitle
+    property int    fontPixelSizeText       : Fonts.fontPixelDebugText
+    property int    fontPixelSizeLabel      : Fonts.fontPixelDebugLabel
+    property string textObjectName          : "_DebugDataColumn"
+    property int    horizontalAlignmentTitle: Text.AlignHCenter
     property int    horizontalAlignmentText : Text.AlignRight
+    property bool   isTouchRect             : false
+    property bool   isOpened                : false
 
-    width       : 150
-    spacing     : -10
+    width       : _column.implicitWidth
+    height      :  isTouchRect || isOpened ? _column.implicitHeight + 15 : 30
+    radius      : 8.5
+    color       : Colors.panelBackgroundColor
+    clip: true
 
-    Text { id: _title
-        text    : _root.title
-        width   : _root.width
-        horizontalAlignment: _root.horizontalAlignmentTitle
-        color: Colors.textMain
-        font.pixelSize: fontPixelSizeTitle
-        font.underline: true
-        bottomPadding: 5
-        font.family: Fonts.fontFamilyFixed
+    border {
+        width: 1
+        color: Colors.panelBorderColor
     }
 
-    Repeater { id: _repeater
-        model: _root.model
-        Text { id: _text
-            objectName: _root.textObjectName + index
-            text: modelData
-            width: _root.width
-            horizontalAlignment: _root.horizontalAlignmentText
-            color: Colors.textMain
-            font.pixelSize: fontPixelSizeText
-            font.family: Fonts.fontFamilyFixed
-            font.weight: Font.Light
+    Column { id: _column
+        Rectangle { id: _header
+            width       : _column.width
+            height      : _title.implicitHeight
+            color       : "#3A5A7B"
+            radius      : 8.5
+            visible     : _title.text.length > 0
 
-            Text {
-                objectName      : _root.textObjectName + "L" + index
-                text            : (index < _root.label.length) ? _root.label[index] : ""
-                color           : Colors.textMain
-                font.pixelSize  : fontPixelSizeLabel
-                anchors.baseline: parent.baseline
-                anchors.left    : parent.right
-                anchors.leftMargin: 10
-                horizontalAlignment: Text.AlignLeft
-                font.family: Fonts.fontFamilyFixed
+            border {
+                width: 1
+                color: "#6B7C8F"
             }
+            Text { id: _title
+                text                : _root.title
+                horizontalAlignment : _root.horizontalAlignmentTitle
+                color               : Colors.offWhite
+                font.pixelSize      : fontPixelSizeTitle
+                font.family         : Fonts.fontFamilyFixed
+                anchors.fill        : parent
+            }
+
+            MouseArea {
+                anchors.fill    : parent
+                onClicked   : {
+                    _root.isOpened = ! _root.isOpened
+                }
+            }
         }
+
+        Repeater { id: _repeater
+            model   : _root.model
+            height  : delegate.implicitHeight
+            width   : delegate.implicitWidth
+
+            delegate : Grid { id: _delegate
+                columns         : 2
+                columnSpacing   : 5
+                width           :  _text.implicitWidth + _value.width + leftPadding * 2 // content width + left and right padding
+                height          : ( isTouchRect ? _value.implicitHeight : _text.implicitHeight + 1 )
+                leftPadding     : 10
+                rightPadding    : leftPadding
+
+                Text { id: _value
+                    objectName          : _root.textObjectName + index
+                    text                : modelData
+                    width               : Math.max(100, implicitWidth)
+                    horizontalAlignment : _root.horizontalAlignmentText
+                    color               : Colors.offWhite
+                    font.pixelSize      : fontPixelSizeText
+                    font.family         : Fonts.fontFamilyFixed
+                    font.weight         : Font.Light
+                    verticalAlignment   : Text.AlignTop
+                }
+
+                Text { id: _text
+                    objectName          : _root.textObjectName + "L" + index
+                    text                : (index < _root.label.length) ? _root.label[index] : ""
+                    color               : Colors.offWhite
+                    height              : _value.implicitHeight
+                    font.pixelSize      : fontPixelSizeLabel
+                    horizontalAlignment : Text.AlignLeft
+                    font.family         : Fonts.fontFamilyFixed
+                    verticalAlignment   : Text.AlignVCenter
+                }
+            }
+        }
     }
+
+    Behavior on height { NumberAnimation { duration: 250 } }
 }