feat(StatusQ/Utils): ClippingWrapper component for convenient clipping with margins

ui/StatusQ/src/StatusQ/Core/Utils/ClippingWrapper.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.15
+
+/*!
+   \qmltype ClippingWrapper
+   \inherits Item
+   \inqmlmodule StatusQ.Core.Utils
+   \since StatusQ.Core.Utils 0.1
+   \brief A component allowing to clip a nested component with a specified margins.
+   It doesn't affect any visual margins or paddings, but moves bounds of clipping
+   by a given clipXXXMargin.
+*/
+Item {
+    id: root
+
+    default property alias data: content.data
+
+    property real clipTopMargin: 0
+    property real clipBottomMargin: 0
+    property real clipLeftMargin: 0
+    property real clipRightMargin: 0
+
+    Item {
+        anchors.fill: parent
+
+        anchors.topMargin: -root.clipTopMargin
+        anchors.bottomMargin: -root.clipBottomMargin
+        anchors.leftMargin: -root.clipLeftMargin
+        anchors.rightMargin: -root.clipRightMargin
+
+        clip: true
+
+        Item {
+            id: content
+
+            anchors.fill: parent
+
+            anchors.topMargin: root.clipTopMargin
+            anchors.bottomMargin: root.clipBottomMargin
+            anchors.leftMargin: root.clipLeftMargin
+            anchors.rightMargin: root.clipRightMargin
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Core/Utils/qmldir

@@ -1,12 +1,13 @@
 module StatusQ.Core.Utils
 
+ClippingWrapper 0.1 ClippingWrapper.qml
 EmojiJSON 1.0 emojiList.js
 JSONListModel 0.1 JSONListModel.qml
-StatesStack 0.1 StatesStack.qml
-StackViewStates 0.1 StackViewStates.qml
 ModelChangeGuard 0.1 ModelChangeGuard.qml
 ModelChangeTracker 0.1 ModelChangeTracker.qml
 ModelsComparator 0.1 ModelsComparator.qml
+StackViewStates 0.1 StackViewStates.qml
+StatesStack 0.1 StatesStack.qml
 XSS 1.0 xss.js
 singleton Emoji 0.1 Emoji.qml
 singleton ModelUtils 0.1 ModelUtils.qml

ui/StatusQ/src/statusq.qrc

@@ -131,6 +131,7 @@
         <file>StatusQ/Core/Theme/StatusLightTheme.qml</file>
         <file>StatusQ/Core/Theme/Theme.qml</file>
         <file>StatusQ/Core/Theme/ThemePalette.qml</file>
+        <file>StatusQ/Core/Utils/ClippingWrapper.qml</file>
         <file>StatusQ/Core/Utils/Emoji.qml</file>
         <file>StatusQ/Core/Utils/emojiList.js</file>
         <file>StatusQ/Core/Utils/qmldir</file>