finish chapter 4

diff --git a/cm-ui/assets/Style.qml b/cm-ui/assets/Style.qml
index 252a319a6607d950e1f3466acda11b29869e3e6c..8358e221968a60b1c3bd686a1aca7e31d412bdf9 100644 (file)
--- 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 0dd9a2acf913a46f5a474b7371f5b11b7c97d0bb..9da10492f13aeefaf3bcce9b574c452aa2304bb2 100644 (file)
--- 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 (file)
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 (file)
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 51cc711fd0983bb6913bd47e1c747eb668867a22..906b984381dbbb55e0851f63575479eabb8537c5 100644 (file)
--- 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 f0d7cf909b6013ce82381d3d46b4f781dedf2d11..41864342a724dae66ff4fe3d1b0e4becb029acc6 100644 (file)
--- 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"