From fd9d726d780b4a1474e3495148103ee61fee9c2b Mon Sep 17 00:00:00 2001
From: John Janus <mail@johnzone.org>
Date: Wed, 29 Aug 2018 00:11:28 +0200
Subject: [PATCH] finish chapter 4

---
 cm-ui/assets/Style.qml             | 10 +++++
 cm-ui/components.qrc               |  2 +
 cm-ui/components/CommandBar.qml    | 35 +++++++++++++++
 cm-ui/components/CommandButton.qml | 68 ++++++++++++++++++++++++++++++
 cm-ui/components/qmldir            |  2 +
 cm-ui/views/CreateClientView.qml   |  5 +++
 6 files changed, 122 insertions(+)
 create mode 100644 cm-ui/components/CommandBar.qml
 create mode 100644 cm-ui/components/CommandButton.qml

diff --git a/cm-ui/assets/Style.qml b/cm-ui/assets/Style.qml
index 252a319..8358e22 100644
--- a/cm-ui/assets/Style.qml
+++ b/cm-ui/assets/Style.qml
@@ -22,5 +22,15 @@ Item {
   readonly property real widthNavigationBarCollapsed: widthNavigationButtonIcon
   readonly property real widthNavigationBarExpanded: widthNavigationButton
 
+  readonly property color colourCommandBarBackground: "#cecece"
+  readonly property color colourCommandBarFont: "#131313"
+  readonly property color colourCommandBarFontDisabled: "#636363"
+  readonly property real heightCommandBar: heightCommandButton
+  readonly property int pixelSizeCommandBarIcon: 32
+  readonly property int pixelSizeCommandBarText: 12
+
+  readonly property real widthCommandButton: 80
+  readonly property real heightCommandButton: widthCommandButton
+
   property alias fontAwesome: fontAwesomeLoader.name
 }
diff --git a/cm-ui/components.qrc b/cm-ui/components.qrc
index 0dd9a2a..9da1049 100644
--- a/cm-ui/components.qrc
+++ b/cm-ui/components.qrc
@@ -3,5 +3,7 @@
         <file alias="qmldir">components/qmldir</file>
         <file alias="NavigationButton.qml">components/NavigationButton.qml</file>
         <file alias="NavigationBar.qml">components/NavigationBar.qml</file>
+        <file alias="CommandBar.qml">components/CommandBar.qml</file>
+        <file alias="CommandButton.qml">components/CommandButton.qml</file>
     </qresource>
 </RCC>
diff --git a/cm-ui/components/CommandBar.qml b/cm-ui/components/CommandBar.qml
new file mode 100644
index 0000000..9d732c3
--- /dev/null
+++ b/cm-ui/components/CommandBar.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.10
+import assets 1.0
+import components 1.0
+
+Item {
+  property alias commandList: commandRepeater.model
+
+  anchors {
+    left: parent.left
+    bottom: parent.bottom
+    right: parent.right
+  }
+  height: Style.heightCommandBar
+
+  Rectangle {
+    anchors.fill: parent
+    color: Style.colourCommandBarBackground
+
+    Row {
+      anchors {
+        top: parent.top
+        bottom: parent.bottom
+        right: parent.right
+      }
+
+      Repeater {
+        id: commandRepeater
+        delegate: CommandButton {
+          command: modelData
+        }
+      }
+    }
+  }
+
+}
diff --git a/cm-ui/components/CommandButton.qml b/cm-ui/components/CommandButton.qml
new file mode 100644
index 0000000..b9602dd
--- /dev/null
+++ b/cm-ui/components/CommandButton.qml
@@ -0,0 +1,68 @@
+import QtQuick 2.10
+import CM 1.0
+import assets 1.0
+
+Item {
+  property Command command
+  width: Style.widthCommandButton
+  height: Style.heightCommandButton
+
+  Rectangle {
+    id: background
+    anchors.fill: parent
+    color: Style.colourCommandBarBackground
+
+    Text {
+      id: textIcon
+      anchors {
+        centerIn: parent
+        verticalCenterOffset: -10
+      }
+      font {
+        family: Style.fontAwesome
+        pixelSize: Style.pixelSizeCommandBarIcon
+      }
+      color: command.ui_canExecute ? Style.colourCommandBarFont : Style.colourCommandBarFontDisabled
+      text: command.ui_iconCharacter
+      horizontalAlignment: Text.AlignHCenter
+    }
+
+    Text {
+      id: textDescription
+      anchors {
+        top: textIcon.bottom
+        bottom: parent.bottom
+        left: parent.left
+        right: parent.right
+      }
+      font.pixelSize: Style.pixelSizeCommandBarText
+      color: command.ui_canExecute ? Style.colourCommandBarFont : Style.colourCommandBarFontDisabled
+
+      text: command.ui_description
+      horizontalAlignment: Text.AlignHCenter
+      verticalAlignment: Text.AlignVCenter
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      cursorShape: Qt.PointingHandCursor
+      hoverEnabled: true
+      onEntered: background.state = "hover"
+      onExited: background.state = ""
+      onClicked: if (command.ui_canExecute) {
+                   command.executed();
+                 }
+    }
+
+    states: [
+      State {
+        name: "hover"
+        PropertyChanges {
+          target: background
+          color: Qt.darker(Style.colourCommandBarBackground)
+        }
+      }
+    ]
+  }
+
+}
diff --git a/cm-ui/components/qmldir b/cm-ui/components/qmldir
index 51cc711..906b984 100644
--- a/cm-ui/components/qmldir
+++ b/cm-ui/components/qmldir
@@ -1,3 +1,5 @@
 module components
 NavigationButton 1.0 NavigationButton.qml
 NavigationBar 1.0 NavigationBar.qml
+CommandBar 1.0 CommandBar.qml
+CommandButton 1.0 CommandButton.qml
diff --git a/cm-ui/views/CreateClientView.qml b/cm-ui/views/CreateClientView.qml
index f0d7cf9..4186434 100644
--- a/cm-ui/views/CreateClientView.qml
+++ b/cm-ui/views/CreateClientView.qml
@@ -1,12 +1,17 @@
 import QtQuick 2.10
 
 import assets 1.0
+import components 1.0
 
 Item {
   Rectangle {
     anchors.fill: parent
     color: Style.colourBackground
 
+    CommandBar {
+      commandList: masterController.ui_commandController.ui_createClientViewContextCommands
+    }
+
     Text {
       anchors.centerIn: parent
       text: "Create Client View"
-- 
2.47.0