[calamares] Update sidebar and navigation QML

- use the right colors (from branding, not from desktop theme)
- apply branding logo

src/calamares/calamares-navigation.qml

@@ -4,44 +4,54 @@ import io.calamares.core 1.0
 import QtQuick 2.3
 import QtQuick.Controls 2.10
 import QtQuick.Layouts 1.3
-import org.kde.kirigami 2.7 as Kirigami
-
-Row {
-            id: buttonBar
-            height: 64
-
-            Button
-            {
-                Layout.fillWidth: true
-                text: qsTr("Back")
-                icon.name: "next"
-                Kirigami.Theme.backgroundColor: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.4)
-                Kirigami.Theme.textColor: Kirigami.Theme.textColor
-
-                visible: true
-                onClicked: { }
-            }
-            Button
-            {
-                Layout.fillWidth: true
-                text: qsTr("Next")
-                icon.name: "next"
-                Kirigami.Theme.backgroundColor: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.4)
-                Kirigami.Theme.textColor: Kirigami.Theme.textColor
-
-                visible: true
-                onClicked: { }
-            }
-            Button
-            {
-                Layout.fillWidth: true
-                text: qsTr("Quit")
-                icon.name: "quit"
-                Kirigami.Theme.backgroundColor: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.4)
-                Kirigami.Theme.textColor: Kirigami.Theme.textColor
-
-                visible: true
-                onClicked: { }
-            }
 
+Rectangle {
+    id: navigationBar;
+    color: Branding.styleString( Branding.SidebarBackground );
+
+    RowLayout {
+        id: buttonBar
+        height: 64;
+        anchors.fill: parent;
+
+        Item
+        {
+            Layout.fillWidth: true;
+        }
+
+        Button
+        {
+            text: ViewManager.backLabel;
+            icon.name: ViewManager.backIcon;
+
+            enabled: ViewManager.backEnabled;
+            visible: true;
+            onClicked: { ViewManager.back(); }
+        }
+        Button
+        {
+            text: ViewManager.nextLabel;
+            icon.name: ViewManager.nextIcon;
+
+            enabled: ViewManager.nextEnabled;
+            visible: true;
+            onClicked: { ViewManager.next(); }
+        }
+        Button
+        {
+            Layout.leftMargin: 3 * buttonBar.spacing;  // little gap from back/next
+            Layout.rightMargin: 2 * buttonBar.spacing
+            text: ViewManager.quitLabel;
+            icon.name: ViewManager.quitIcon;
+
+            ToolTip.visible: hovered
+            ToolTip.timeout: 5000
+            ToolTip.delay: 1000
+            ToolTip.text: ViewManager.quitTooltip;
+
+            enabled: ViewManager.quitEnabled;
+            visible: ViewManager.quitVisible;
+            onClicked: { ViewManager.quit(); }
+        }
+    }
 }

src/calamares/calamares-sidebar.qml

@@ -1,36 +1,44 @@
-import QtQuick 2.3
 import io.calamares.ui 1.0
 import io.calamares.core 1.0
 
-Column {
+import QtQuick 2.3
+import QtQuick.Layouts 1.3
 
 Rectangle {
-    id: hello
-    width: 200
-    height: 100
-    color: "red"
+    id: sideBar;
+    color: Branding.styleString( Branding.SidebarBackground );
 
-    Text {
-        anchors.centerIn: parent
-        text: Branding.string(Branding.VersionedName)
-    }
-}
+    ColumnLayout {
+        anchors.fill: parent;
+        spacing: 0;
 
-/* perhaps we could show a branding image here */
+        Image {
+            id: logo
+            width: 80;
+            height: width;  // square
+            anchors.horizontalCenter: parent.horizontalCenter;
+            source: "file:/" + Branding.imagePath(Branding.ProductLogo);
+            sourceSize.width: width;
+            sourceSize.height: height;
+        }
 
-Repeater {
-    model: ViewManager
-    Rectangle {
-        width: 200
-        height: 75
-        color: "black"
+        Repeater {
+            model: ViewManager
+            Rectangle {
+                width: 200;
+                height: 75;
+                color: Branding.styleString( index == ViewManager.currentStepIndex ? Branding.SidebarTextHighlight : Branding.SidebarBackground );
 
-        Text {
-            anchors.centerIn: parent
-            color: index == ViewManager.currentStepIndex ? "green" : "yellow"
-            text: display
+                Text {
+                    anchors.centerIn: parent;
+                    color: Branding.styleString( index == ViewManager.currentStepIndex ? Branding.SidebarTextSelect : Branding.SidebarText );
+                    text: display;
+                }
+            }
         }
-    }
-}
 
+        Item {
+            Layout.fillHeight: true;
+        }
+    }
 }