Implemented QML skeleton for the application

qml/Controls/AlternativeButton.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+Button {
+
+}

qml/Controls/Button.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/Controls/ComboBox.qml

@@ -0,0 +1,108 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Controls 1.0 as Controls
+import Utils 1.0
+
+ComboBox {
+    id: control
+
+    leftPadding: 16
+    rightPadding: 16
+
+    delegate: ItemDelegate {
+        width: control.width
+        leftPadding: control.leftPadding
+        clip: true
+
+        contentItem: Text {
+            text: modelData
+            color: pressed ? Palette.selectedTextColor : Palette.textColor
+            font: control.font
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        background: Rectangle {
+            color: control.currentIndex === index ?
+                       Palette.selectedBackgroundColor :
+                       (highlighted ? Palette.hoveredBackgroundColor : Palette.backgroundColor)
+        }
+
+        highlighted: control.highlightedIndex === index
+    }
+
+    indicator: Canvas {
+        id: canvas
+        x: control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: 8
+        height: 5
+        contextType: "2d"
+
+        Connections {
+            target: control
+            onDownChanged: canvas.requestPaint()
+        }
+
+        onPaint: {
+            context.reset();
+
+            if (control.down) {
+                context.moveTo(0, height);
+                context.lineTo(width, height);
+                context.lineTo(width / 2, 0);
+            } else {
+                context.moveTo(0, 0);
+                context.lineTo(width, 0);
+                context.lineTo(width / 2, height);
+            }
+
+            context.closePath();
+            context.fillStyle = control.down ? Palette.selectedTextColor : Palette.textColor;
+            context.fill();
+        }
+    }
+
+    contentItem: Text {
+        rightPadding: control.indicator.width + 8
+
+        text: control.displayText
+        font: control.font
+        color: control.down ? Palette.selectedTextColor : Palette.textColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 46
+        color: control.down ? Palette.selectedBackgroundColor : Palette.backgroundColor
+        border.color: Palette.borderColor
+        border.width: 1
+        radius: 5
+    }
+
+    popup: Popup {
+        y: control.height + 2
+        width: control.width
+        implicitHeight: contentItem.implicitHeight
+        padding: 1
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            ScrollBar.vertical: Controls.ScrollBar {}
+        }
+
+        background: Rectangle {
+            color: Palette.backgroundColor
+            border.color: Palette.borderColor
+            border.width: 1
+            radius: 5
+        }
+    }
+}

qml/Controls/ContentLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.contentTextColor
+    font.pixelSize: 18
+    font.weight: Font.Medium
+}

qml/Controls/DotSeparator.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+import Utils 1.0
+
+Shape {
+    id: shape
+    implicitHeight: 1
+
+    ShapePath {
+        strokeColor: Palette.contentTextColor
+        strokeWidth: 1
+        strokeStyle: ShapePath.DashLine
+        dashPattern: [1, 3]
+        startX: 0
+        startY: 0
+        PathLine { x: shape.width; y: 0 }
+    }
+}
+
+//Canvas {
+//    id: canvas
+//    contextType: "2d"
+//    implicitHeight: 1
+
+//    onPaint: {
+//        var ctx = getContext("2d");
+//        ctx.setLineDash([2, 2]);
+//        ctx.beginPath();
+//        ctx.moveTo(0, 0);
+//        ctx.lineTo(width, 0);
+//        ctx.stroke();
+//     }
+//}

qml/Controls/Frame.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Frame {
+    background: Rectangle {
+        color: Palette.backgroundColor
+        border.color: Palette.borderColor
+        border.width: 1
+        radius: 8
+    }
+}

qml/Controls/Label.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/Controls/PaneItem.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/Controls/ScrollBar.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+ScrollBar {
+
+}

qml/Controls/SubtitleLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.contentTextColor
+    font.pixelSize: 18
+    font.weight: Font.ExtraBold
+}

qml/Controls/TextField.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+TextField {
+    selectByMouse: true
+}

qml/Controls/TitleLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.selectedTextColor
+    font.pixelSize: 28
+    font.weight: Font.ExtraBold
+}

qml/Controls/qmldir

@@ -0,0 +1,13 @@
+module Controls
+Label 1.0 Label.qml
+ComboBox 1.0 ComboBox.qml
+PaneItem 1.0 PaneItem.qml
+ScrollBar 1.0 ScrollBar.qml
+Button 1.0 Button.qml
+AlternativeButton 1.0 AlternativeButton.qml
+TextField 1.0 TextField.qml
+Frame 1.0 Frame.qml
+TitleLabel 1.0 TitleLabel.qml
+SubtitleLabel 1.0 SubtitleLabel.qml
+ContentLabel 1.0 ContentLabel.qml
+DotSeparator 1.0 DotSeparator.qml