Added project implementation

qml/Controls/DescriptionTextField.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+
+import Controls 1.0 as CustomControls
+import Palette 1.0
+
+ColumnLayout {
+    id: root
+    spacing: 8
+
+    property string descriptionText
+    property string text
+    property string indicatorText
+    property bool readonly: false
+
+    CustomControls.Label {
+        text: root.descriptionText
+        Layout.leftMargin: 24
+        Layout.fillWidth: true
+    }
+
+    CustomControls.TextField {
+        text: root.text
+        indicatorText: root.indicatorText
+        readOnly: root.readonly
+        Layout.fillWidth: true
+    }
+}

qml/Controls/GroupBox.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+import QtQuick.Layouts 1.12
+
+import Palette 1.0
+
+Controls.GroupBox {
+    id: control
+
+    leftPadding: 40
+    rightPadding: 40
+    topPadding: 56 + label.height + 48
+    bottomPadding: 56
+
+    background: Rectangle {
+        color: Palette.controlBackgroundColor
+        radius: 32
+    }
+
+    label: Text {
+        id: label
+        x: control.leftPadding
+        y: 56
+        width: control.availableWidth
+
+        text: control.title
+        color: Palette.titleTextColor
+        elide: Text.ElideRight
+
+        font.family: "Roboto"
+        font.pixelSize: 40
+        font.weight: Font.Bold
+    }
+}

qml/Controls/IndicatorTextField.qml

@@ -0,0 +1,29 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+
+import Palette 1.0
+
+Controls.TextField {
+    id: control
+
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+
+    topPadding: 10
+    bottomPadding: 10
+    leftPadding: 24
+    rightPadding: 24
+
+    font.family: "Roboto"
+    font.pixelSize: 40
+    font.weight: Font.Bold
+
+    color: Palette.labelTextColor
+    property color backgroundColor: Palette.indicatorBackgroundColor
+    property int backgroundRadius: 24
+
+    background: Rectangle {
+        color: backgroundColor
+        radius: backgroundRadius
+    }
+}

qml/Controls/Label.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.12
+
+Text {
+    font.family: "Roboto"
+    font.pixelSize: 24
+    font.weight: Font.Normal
+}

qml/Controls/Switch.qml

@@ -0,0 +1,73 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+import QtQuick.Layouts 1.12
+
+import Palette 1.0
+
+Controls.Switch {
+    id: control
+
+    implicitHeight: 128
+    padding: 12
+
+    property string firstStateDescription
+    property string secondStateDescription
+
+    indicator: Item {
+        anchors.fill: control
+        anchors.margins: control.padding
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 0
+
+            Controls.Label {
+                id: firstLabel
+
+                text: control.firstStateDescription
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                font.family: "Roboto"
+                font.pixelSize: 72
+                font.weight: Font.Bold
+
+                color: control.checked ? Palette.labelTextColor : Palette.alternativeLabelTextColor
+                Layout.preferredWidth: (parent.width -parent.spacing) / 2
+            }
+
+            Controls.Label {
+                id: secondLabel
+
+                text: control.secondStateDescription
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                font.family: "Roboto"
+                font.pixelSize: 72
+                font.weight: Font.Bold
+
+                color: control.checked ? Palette.alternativeLabelTextColor : Palette.labelTextColor
+                Layout.preferredWidth: (parent.width -parent.spacing) / 2
+            }
+        }
+
+        Rectangle {
+            color: Palette.switchActiveBackgroundColor
+            radius: 24
+
+            width: control.checked ? secondLabel.width : firstLabel.width
+            height: parent.height
+            x: control.checked ? secondLabel.x : firstLabel.x
+            z: -1
+        }
+    }
+
+    contentItem: Item {
+    }
+
+    background: Rectangle {
+        color: Palette.switchBackgroundColor
+        radius: 32
+    }
+}

qml/Controls/TextField.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+
+import Palette 1.0
+
+Controls.TextField {
+    id: control
+
+    implicitHeight: 108
+
+    horizontalAlignment: Text.AlignRight
+    verticalAlignment: Text.AlignVCenter
+
+    topPadding: 12
+    bottomPadding: 12
+    leftPadding: 24
+    rightPadding: 24 + Math.ceil(indicatorLabel.width) + (indicatorLabel.visible ? 12 : 0)
+
+    font.family: "Roboto"
+    font.pixelSize: 72
+    font.weight: Font.Bold
+
+    color: Palette.labelTextColor
+
+    property string indicatorText
+
+    background: Rectangle {
+        radius: 32
+        color: Palette.controlBackgroundColor
+        border.width: 1
+        border.color: Palette.borderColor
+
+        width: control.width
+        height: control.height
+
+        Controls.Label {
+            id: indicatorLabel
+            visible: control.indicatorText.length > 0
+            text: control.indicatorText
+
+            anchors.right: parent.right
+            anchors.rightMargin: 24
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 20
+
+            font.family: "Roboto"
+            font.pixelSize: 40
+            font.weight: Font.Normal
+
+            color: Palette.descriptionTextColor
+        }
+    }
+}

qml/Controls/TristateSwitch.qml

@@ -0,0 +1,76 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+import QtQuick.Layouts 1.12
+
+import Palette 1.0
+
+Controls.CheckBox {
+    id: control
+
+    implicitHeight: 128
+    padding: 12
+    tristate: true
+    checkState: Qt.Unchecked
+
+    property string firstStateDescription
+    property string secondStateDescription
+
+    indicator: Item {
+        anchors.fill: control
+        anchors.margins: control.padding
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 0
+
+            Controls.Label {
+                id: firstLabel
+
+                text: control.firstStateDescription
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                font.family: "Roboto"
+                font.pixelSize: 72
+                font.weight: Font.Bold
+
+                color: control.checkState === Qt.PartiallyChecked ? Palette.alternativeLabelTextColor : Palette.labelTextColor
+                Layout.preferredWidth: (parent.width -parent.spacing) / 2
+            }
+
+            Controls.Label {
+                id: secondLabel
+
+                text: control.secondStateDescription
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                font.family: "Roboto"
+                font.pixelSize: 72
+                font.weight: Font.Bold
+
+                color: control.checkState === Qt.Checked ? Palette.alternativeLabelTextColor : Palette.labelTextColor
+                Layout.preferredWidth: (parent.width -parent.spacing) / 2
+            }
+        }
+
+        Rectangle {
+            color: Palette.switchActiveBackgroundColor
+            radius: 24
+            visible: control.checkState !== Qt.Unchecked
+
+            width: control.checkState === Qt.Checked ? secondLabel.width : firstLabel.width
+            height: parent.height
+            x: control.checkState === Qt.Checked ? secondLabel.x : firstLabel.x
+            z: -1
+        }
+    }
+
+    contentItem: Item {
+    }
+
+    background: Rectangle {
+        color: Palette.switchBackgroundColor
+        radius: 32
+    }
+}

qml/Controls/qmldir

@@ -0,0 +1,8 @@
+module Controls
+TextField 1.0 TextField.qml
+IndicatorTextField 1.0 IndicatorTextField.qml
+DescriptionTextField 1.0 DescriptionTextField.qml
+Label 1.0 Label.qml
+GroupBox 1.0 GroupBox.qml
+Switch 1.0 Switch.qml
+TristateSwitch 1.0 TristateSwitch.qml