Added UI skeleton for BMS settings screen

qml/Controls/AlternativeButton.qml

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

qml/Controls/Button.qml

@@ -1,5 +1,28 @@
-import QtQuick 2.0
+import QtQuick 2.12
+import QtQuick.Controls 2.12
 
-Item {
+import Utils 1.0
 
+Button {
+    id: control
+
+    contentItem: Text {
+        text: control.text
+        font.pixelSize: 16
+        font.weight: Font.ExtraBold
+        opacity: enabled ? 1.0 : 0.3
+        color: Palette.alternativeTextColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 52
+        opacity: enabled ? 1 : 0.3
+        color: control.pressed ? Palette.pressedButtonColor :
+                                 control.hovered ? Palette.hoveredButtonColor : Palette.buttonColor
+        radius: 5
+    }
 }

qml/Controls/CheckBox.qml

@@ -0,0 +1,37 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+CheckBox {
+    id: control
+    implicitHeight: 25
+    spacing: 15
+
+    indicator: Rectangle {
+        implicitWidth: control.implicitHeight
+        implicitHeight: control.implicitHeight
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 5
+        border.color: Palette.borderColor
+        border.width: 1
+        color: control.checked ? Palette.alternativeBackgroundColor : Palette.backgroundColor
+
+        Image {
+            source: "qrc:/Icons/check-indicator.svg"
+            anchors.centerIn: parent
+            visible: control.checked
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font.pixelSize: 18
+        font.weight: Font.ExtraBold
+        color: Palette.textColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: control.indicator.width + control.spacing
+    }
+}

qml/Controls/DotSeparator.qml

@@ -17,18 +17,3 @@ Shape {
         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/LabelWithBackground.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.textColor
+    font.pixelSize: 18
+    font.weight: Font.ExtraBold
+    elide: Text.ElideRight
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+
+    background: Rectangle {
+        color: Palette.hoveredBackgroundColor
+        radius: 8
+    }
+}

qml/Controls/LineSeparator.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+import Utils 1.0
+
+Shape {
+    id: shape
+    implicitHeight: 1
+
+    ShapePath {
+        strokeColor: Palette.borderColor
+        strokeStyle: ShapePath.SolidLine
+        startX: 0
+        startY: 0
+        PathLine { x: shape.width; y: 0 }
+    }
+}

qml/Controls/LinkLabel.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    id: control
+    color: Palette.selectedTextColor
+    font.pixelSize: 18
+    font.weight: Font.Medium
+    font.underline : true
+    elide: Text.ElideRight
+
+    signal clicked()
+
+    MouseArea{
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: control.clicked()
+    }
+}

qml/Controls/OutlineButton.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Button {
+    id: control
+
+    contentItem: Text {
+        text: control.text
+        font.pixelSize: 16
+        font.weight: Font.ExtraBold
+        opacity: enabled ? 1.0 : 0.3
+        color: control.hovered ? Palette.alternativeTextColor : Palette.textColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 52
+        opacity: enabled ? 1 : 0.3
+        color: control.pressed ? Palette.pressedButtonColor :
+                                 control.hovered ? Palette.hoveredButtonColor : Palette.outlineButtonColor
+        border.color: control.pressed ? Palette.pressedButtonColor :
+                                        control.hovered ? Palette.hoveredButtonColor : Palette.buttonColor
+        border.width: 1
+        radius: 5
+    }
+}

qml/Controls/ScrollBar.qml

@@ -1,6 +1,26 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 
-ScrollBar {
+import Utils 1.0
 
+ScrollBar {
+    id: control
+    size: 0.3
+    position: 0.2
+    active: true
+    orientation: Qt.Vertical
+
+    contentItem: Rectangle {
+        implicitWidth: 12
+        implicitHeight: 100
+        radius: width / 2
+        color: Palette.alternativeBackgroundColor
+        // Hide the ScrollBar when it's not needed.
+        opacity: control.policy === ScrollBar.AlwaysOn || (control.active && control.size < 1.0) ? 0.75 : 0
+
+        // Animate the changes in opacity (default duration is 250 ms).
+        Behavior on opacity {
+            NumberAnimation {}
+        }
+    }
 }

qml/Controls/qmldir

@@ -4,7 +4,7 @@ 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
+OutlineButton 1.0 OutlineButton.qml
 TextField 1.0 TextField.qml
 Frame 1.0 Frame.qml
 TitleLabel 1.0 TitleLabel.qml
@@ -12,3 +12,7 @@ SubtitleLabel 1.0 SubtitleLabel.qml
 ContentLabel 1.0 ContentLabel.qml
 DotSeparator 1.0 DotSeparator.qml
 AvailabilityIndicator 1.0 AvailabilityIndicator.qml
+LabelWithBackground 1.0 LabelWithBackground.qml
+CheckBox 1.0 CheckBox.qml
+LineSeparator 1.0 LineSeparator.qml
+LinkLabel 1.0 LinkLabel.qml