First working Version

components/common/PopupPanel.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+Popup {
+  id: menu
+  y: -(height + root.font.pointSize / 2)
+
+  property var model
+  property var delegate
+  property alias interactive: flickable.interactive
+  property real delegateHeight: fontSize * 3
+
+  // maximum number of options to show at once, scroll/flick to see the rest
+  // adding .5 works as a visual hint there's more options by displaying half of the next button
+  property real max_size: 5.5
+
+  padding: 0
+  topPadding: background.radius
+  bottomPadding: background.radius
+
+  background: Rectangle {
+    color: root.palette.button
+    radius: 8
+  }
+
+  contentItem: Flickable {
+    id: flickable
+    clip: true
+    implicitWidth: contentWidth
+    implicitHeight: interactive ? Math.min(contentHeight, menu.max_size * (menu.delegateHeight + delegate_container.spacing)) : contentHeight
+    contentWidth: delegate_container.width
+    contentHeight: delegate_container.height
+
+    flickableDirection: Flickable.VerticalFlick
+    ScrollBar.vertical: ScrollBar { }
+
+    ColumnLayout {
+      id: delegate_container
+      spacing: 4
+      Repeater {
+        model: menu.model
+      }
+    }
+  }
+
+  enter: Transition {
+    NumberAnimation { property: "height"; from: 0.0; to: implicitHeight; duration: 50 * root.animationsEnabled }
+  }
+  exit: Transition {
+    NumberAnimation { property: "height"; from: implicitHeight; to: 0.0; duration: 50 * root.animationsEnabled }
+  }
+
+}

components/common/Toggle.qml

@@ -0,0 +1,109 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+RowLayout {
+  id: item
+  Layout.fillWidth: true
+  Layout.preferredHeight: fontSize * 3
+
+  spacing: fontSize
+  Layout.leftMargin: 10
+  Layout.rightMargin: 10
+
+  required property int index;
+  property alias text: label.text
+  property alias icon: icon.text
+  property alias enabled: toggle.enabled
+  property alias checked: toggle.checked
+  signal toggled(int id)
+
+  Text {
+    id: icon
+    visible: config.boolValue("iconsInMenus")
+    renderType: Text.QtRendering
+    font.pointSize: fontSize
+    font.family: config.iconFont
+    color: root.palette.buttonText
+  }
+
+  Text {
+    id: label
+    renderType: Text.QtRendering
+    font.family: root.font.family
+    font.pointSize: fontSize
+    color: root.palette.buttonText
+    Layout.fillWidth: true
+  }
+
+  Switch {
+    id: toggle
+
+    Layout.preferredHeight: indicator.implicitHeight + 10
+    Layout.preferredWidth: indicator.implicitWidth + 10
+    Layout.fillWidth: false
+
+    onClicked: item.toggled(index)
+
+    background: Rectangle {
+      color: "transparent"
+      radius: 8
+    }
+
+    indicator: Rectangle {
+      anchors.centerIn: parent
+      implicitHeight: fontSize * 1.5
+      implicitWidth: fontSize * 3
+      radius: implicitHeight / 2
+      color: parent.checked ? root.palette.accent : Qt.darker(root.palette.button, 1.3)
+      border.color: parent.checked ? root.palette.accent : "#cccccc"
+
+      Text {
+        visible: true
+        height: parent.height
+        width: height
+        x: checked ? 0 : parent.width - width
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        renderType: Text.QtRendering
+        text: checked ? "" : ""
+        font.family: root.iconFont
+        font.pointSize: fontSize * 0.7
+        color: root.palette.buttonText
+      }
+
+      Rectangle {
+        id: knob
+        x: checked ? parent.width - width : 0
+        height: parent.implicitHeight
+        width: height
+        radius: height / 2
+        color: toggle.down ? "#cccccc" : root.palette.buttonText
+        border.color: checked ? root.palette.accent : "#999999"
+      }
+    }
+    states: [
+      State {
+        when: !enabled
+        PropertyChanges {
+          target: toggle.indicator
+          color: "#555555"
+          border.color: "#333333"
+          opacity: 0.3
+        }
+        PropertyChanges {
+          target: toggle
+          checked: false
+        }
+        PropertyChanges {
+          target: knob
+          color: "#cccccc"
+          border.color: Qt.lighter(toggle.indicator.color, 1.5)
+        }
+      }
+    ]
+
+  }
+
+}