Implemented ExpandableBlank qml component

inspectors/inspectors_resources.qrc

@@ -14,5 +14,7 @@
         <file>resources/icons/raster-horizontal.svg</file>
         <file>view/qml/InspectorElementView.qml</file>
         <file>view/qml/common/CheckBox.qml</file>
+        <file>view/qml/common/ExpandableBlank.qml</file>
+        <file>view/qml/common/ExpandableBlankSection.qml</file>
     </qresource>
 </RCC>

inspectors/view/qml/common/ExpandableBlank.qml

@@ -0,0 +1,94 @@
+import QtQuick 2.9
+import QtGraphicalEffects 1.0
+
+import "../common"
+
+FocusableItem {
+    id: root
+
+    property alias contentItemComponent: contentLoader.sourceComponent
+    property alias menuItemComponent: expandableSection.menuItemComponent
+
+    property alias icon: expandableSection.icon
+    property alias iconPixelSize: expandableSection.iconPixelSize
+
+    property alias title: expandableSection.title
+
+    property alias isExpanded: expandableSection.isExpanded
+
+    implicitHeight: contentColumn.height
+    implicitWidth: parent.width
+
+    Keys.onSpacePressed: {
+        root.isExpanded = !root.isExpanded
+    }
+
+    Rectangle {
+        id: backgroundRect
+
+        height: contentColumn.height
+        width: root.width
+
+        color: globalStyle.window
+    }
+
+    Column {
+        id: contentColumn
+
+        height: childrenRect.height
+        width: root.width
+
+        spacing: 12
+
+        ExpandableBlankSection {
+            id: expandableSection
+        }
+
+        Loader {
+            id: contentLoader
+
+            property alias yScale: scalingFactor.yScale
+            property int contentHorizontalPadding: 4
+
+            function getContentHeight() {
+                return implicitHeight === 0 ? implicitHeight : implicitHeight + contentHorizontalPadding * 2
+            }
+
+            height: getContentHeight() * yScale
+            width: root.width
+
+            opacity: 0
+
+            transform: Scale {
+                id: scalingFactor
+
+                yScale: 1
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "EXPANDED"
+            when: root.isExpanded
+
+            PropertyChanges { target: contentLoader; opacity: 1.0
+                                                     yScale: 1 }
+        },
+
+        State {
+            name: "COLLAPSED"
+            when: !root.isExpanded
+
+            PropertyChanges { target: contentLoader; opacity: 0.0
+                                                     yScale: 0 }
+        }
+    ]
+
+    transitions: Transition {
+        NumberAnimation {
+            properties: "opacity, yScale"
+            duration: 100
+        }
+    }
+}

inspectors/view/qml/common/ExpandableBlankSection.qml

@@ -0,0 +1,109 @@
+import QtQuick 2.9
+import QtGraphicalEffects 1.0
+
+FocusableItem {
+    id: root
+
+    property alias icon: expandButtonIcon.source
+    property int iconPixelSize: 16
+
+    property alias title: titleLabel.text
+
+    property alias menuItemComponent: menuLoader.sourceComponent
+
+    property bool isExpanded: true
+
+    anchors.left: parent.left
+    anchors.leftMargin: -iconPixelSize/2
+    anchors.right: parent.right
+
+    implicitHeight: expandSectionRow.height
+
+    Row {
+        id: expandSectionRow
+
+        spacing: 4
+
+        Rectangle {
+            id: expandButton
+
+            height: iconPixelSize * 1.2
+            width: iconPixelSize * 1.2
+
+            color: "transparent"
+
+            Image {
+                id: expandButtonIcon
+
+                anchors.centerIn: parent
+
+                source: "qrc:/resources/icons/arrow_down.svg"
+
+                sourceSize.height: iconPixelSize
+                sourceSize.width: iconPixelSize
+
+                rotation: root.isExpanded ? 0 : -90
+
+                ColorOverlay {
+                    id: expandButtonColorOverlay
+
+                    anchors.fill: expandButtonIcon
+                    source: expandButtonIcon
+                    color: globalStyle.buttonText
+                }
+
+                Behavior on rotation {
+                    NumberAnimation {
+                        easing.type: Easing.OutQuad
+                        duration: 50
+                    }
+                }
+            }
+        }
+
+        StyledTextLabel {
+            id: titleLabel
+
+            anchors.verticalCenter: expandButton.verticalCenter
+
+            font.bold: true
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: expandSectionRow
+
+        hoverEnabled: true
+
+        onClicked: {
+            root.isExpanded = !root.isExpanded
+        }
+    }
+
+    Loader {
+        id: menuLoader
+
+        property bool isMenuButtonVisible: root.isExpanded
+                                           || mouseArea.containsMouse
+        anchors {
+            right: root.right
+            rightMargin: 48
+            top: expandSectionRow.top
+        }
+
+        height: childrenRect.height
+        width: childrenRect.width
+    }
+
+    states: [
+        State {
+            name: "DISABLED"
+            when: !root.enabled
+
+            PropertyChanges { target: root; isExpanded: false
+                                            opacity: 0.3 }
+        }
+    ]
+}