From 80f74e192f469731635fb88bf599a4080c14a586 Mon Sep 17 00:00:00 2001
From: Michael Zanetti <michael_zanetti@gmx.net>
Date: Fri, 25 Nov 2022 22:58:12 +0100
Subject: [PATCH] Add MultiSelectionTabs component

---
 nymea-app/resources.qrc                       |  1 +
 .../ui/components/MultiSelectionTabs.qml      | 78 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 nymea-app/ui/components/MultiSelectionTabs.qml

diff --git a/nymea-app/resources.qrc b/nymea-app/resources.qrc
index 0d8ec39f..3141da19 100644
--- a/nymea-app/resources.qrc
+++ b/nymea-app/resources.qrc
@@ -280,5 +280,6 @@
         <file>ui/utils/AirQualityIndex.qml</file>
         <file>ui/mainviews/energy/PowerBalanceHistory.qml</file>
         <file>ui/mainviews/energy/CurrentPowerBalancePieChart.qml</file>
+        <file>ui/components/MultiSelectionTabs.qml</file>
     </qresource>
 </RCC>
diff --git a/nymea-app/ui/components/MultiSelectionTabs.qml b/nymea-app/ui/components/MultiSelectionTabs.qml
new file mode 100644
index 00000000..6cdf4359
--- /dev/null
+++ b/nymea-app/ui/components/MultiSelectionTabs.qml
@@ -0,0 +1,78 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.0
+import Nymea 1.0
+
+Rectangle {
+    id: root
+    implicitHeight: layout.implicitHeight
+    radius: Style.smallCornerRadius
+
+    property alias backgroundColor: root.color
+    property color selectionColor: Style.tileOverlayColor
+    property alias model: repeater.model
+    property var selectedItems: []
+
+    Rectangle {
+        id: clipMask
+        anchors.fill: parent
+        radius: Style.smallCornerRadius
+        color: "red"
+        visible: false
+    }
+
+    RowLayout {
+        id: layout
+        anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
+        spacing: 0
+
+        Repeater {
+            id: repeater
+
+            delegate: Item {
+                Layout.fillWidth: true
+                height: label.implicitHeight + Style.smallMargins
+                Rectangle {
+                    anchors.fill: parent
+                    color: root.selectionColor
+                    visible: root.selectedItems.indexOf(index) >= 0
+                }
+
+                Label {
+                    id: label
+                    anchors.centerIn: parent
+                    text: modelData
+                    font: Style.spacedFont
+                }
+            }
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        maskSource: clipMask
+        source: ShaderEffectSource {
+            sourceItem: layout
+            hideSource: true
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            var index = Math.floor(mouseX / (width / root.model.length))
+            var tmp = [...root.selectedItems]
+            var idx = tmp.indexOf(index)
+            if (idx >= 0) {
+                tmp.splice(idx, 1)
+            } else {
+                tmp.push(index)
+            }
+
+            root.selectedItems = tmp
+        }
+    }
+}
+
+