finish qml components

diff --git a/cm-ui/assets/Style.qml b/cm-ui/assets/Style.qml
new file mode 100644 (file)
index 0000000..252a319
--- /dev/null
+++ b/cm-ui/assets/Style.qml
@@ -0,0 +1,26 @@
+pragma Singleton
+import QtQuick 2.10
+
+Item {
+  FontLoader {
+    id: fontAwesomeLoader
+    source: "qrc:/assets/fontawesome.ttf"
+  }
+
+  readonly property color colourBackground: "#f4c842"
+  readonly property color colourNavigationBarBackground: "#000000"
+  readonly property color colourNavigationBarFont: "#ffffff"
+  readonly property int pixelSizeNavigationBarIcon: 42
+  readonly property int pixelSizeNavigationBarText: 22
+
+  readonly property real widthNavigationButtonIcon: 80
+  readonly property real heightNavigationButtonIcon: widthNavigationButtonIcon
+  readonly property real widthNavigationButtonDescription: 160
+  readonly property real heightNavigationButtonDescription: heightNavigationButtonIcon
+  readonly property real widthNavigationButton: widthNavigationButtonIcon + widthNavigationButtonDescription
+  readonly property real heightNavigationButton: Math.max(heightNavigationButtonIcon, heightNavigationButtonDescription)
+  readonly property real widthNavigationBarCollapsed: widthNavigationButtonIcon
+  readonly property real widthNavigationBarExpanded: widthNavigationButton
+
+  property alias fontAwesome: fontAwesomeLoader.name
+}

diff --git a/cm-ui/assets/fa-solid-900.ttf b/cm-ui/assets/fa-solid-900.ttf
new file mode 100644 (file)
index 0000000..a1da1bb
Binary files /dev/null and b/cm-ui/assets/fa-solid-900.ttf differ

diff --git a/cm-ui/assets/qmldir b/cm-ui/assets/qmldir
new file mode 100644 (file)
index 0000000..47ec3b2
--- /dev/null
+++ b/cm-ui/assets/qmldir
@@ -0,0 +1,2 @@
+module assets
+singleton Style 1.0 Style.qml

diff --git a/cm-ui/asstes.qrc b/cm-ui/asstes.qrc
new file mode 100644 (file)
index 0000000..06e0cda
--- /dev/null
+++ b/cm-ui/asstes.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/assets">
+        <file alias="qmldir">assets/qmldir</file>
+        <file alias="Style.qml">assets/Style.qml</file>
+        <file alias="fontawesome.ttf">assets/fa-solid-900.ttf</file>
+    </qresource>
+</RCC>

diff --git a/cm-ui/cm-ui.pro b/cm-ui/cm-ui.pro
index bc9861208827c5d7543815ff2a9a0f01cc53fc48..fcca39a8e716043b66680983c326253da697efdd 100644 (file)
--- a/cm-ui/cm-ui.pro
+++ b/cm-ui/cm-ui.pro
@@ -20,12 +20,14 @@ INCLUDEPATH += src \
 
 SOURCES += src/main.cpp
 
-RESOURCES += views.qrc
+RESOURCES += views.qrc \
+    asstes.qrc \
+    components.qrc
 
 LIBS += -L$$PWD/../binaries/$$DESTINATION_PATH -lcm-lib
 
 # Additional import path used to resolve QML modules in Qt Creator's code model
-QML_IMPORT_PATH = $$PWD
+QML_IMPORT_PATH += $$PWD
 
 # Additional import path used to resolve QML modules just for Qt Quick Designer
 QML_DESIGNER_IMPORT_PATH =

diff --git a/cm-ui/components.qrc b/cm-ui/components.qrc
new file mode 100644 (file)
index 0000000..0dd9a2a
--- /dev/null
+++ b/cm-ui/components.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/components">
+        <file alias="qmldir">components/qmldir</file>
+        <file alias="NavigationButton.qml">components/NavigationButton.qml</file>
+        <file alias="NavigationBar.qml">components/NavigationBar.qml</file>
+    </qresource>
+</RCC>

diff --git a/cm-ui/components/NavigationBar.qml b/cm-ui/components/NavigationBar.qml
new file mode 100644 (file)
index 0000000..c5fe3be
--- /dev/null
+++ b/cm-ui/components/NavigationBar.qml
@@ -0,0 +1,74 @@
+import QtQuick 2.10
+
+import assets 1.0
+
+Item {
+  property bool isCollapsed: true
+  width: isCollapsed ? Style.widthNavigationBarCollapsed : Style.widthNavigationBarExpanded
+  anchors {
+    top: parent.top
+    bottom: parent.bottom
+    left: parent.left
+  }
+  Rectangle {
+    id: navigationBar
+    color: Style.colourNavigationBarBackground
+    anchors.fill: parent
+    Column {
+      width: parent.width
+
+      NavigationButton {
+        iconHeight: Style.heightNavigationButtonIcon
+        iconWidth: Style.widthNavigationButtonIcon
+        descriptionHeight: Style.heightNavigationButtonDescription
+        descriptionWidth: Style.widthNavigationButtonDescription
+        color: Style.colourNavigationBarFont
+        background: Style.colourNavigationBarBackground
+        hoverColor: "#993333"
+        iconCharacter: "\uf0c9"
+        description: ""
+        onNavigationButtonClicked: isCollapsed = !isCollapsed
+      }
+
+      NavigationButton {
+        iconHeight: Style.heightNavigationButtonIcon
+        iconWidth: Style.widthNavigationButtonIcon
+        descriptionHeight: Style.heightNavigationButtonDescription
+        descriptionWidth: Style.widthNavigationButtonDescription
+        color: Style.colourNavigationBarFont
+        background: Style.colourNavigationBarBackground
+        hoverColor: "#dc8a00"
+        iconCharacter: "\uf015"
+        description: "Dashboard"
+        onNavigationButtonClicked: masterController.ui_navigationController.goDashboardView()
+      }
+
+      NavigationButton {
+        iconHeight: Style.heightNavigationButtonIcon
+        iconWidth: Style.widthNavigationButtonIcon
+        descriptionHeight: Style.heightNavigationButtonDescription
+        descriptionWidth: Style.widthNavigationButtonDescription
+        color: Style.colourNavigationBarFont
+        background: Style.colourNavigationBarBackground
+        hoverColor: "#dccd00"
+        iconCharacter: "\uf234"
+        description:"New Client"
+        onNavigationButtonClicked: masterController.ui_navigationController.goCreateClientView()
+      }
+
+      NavigationButton {
+        iconHeight: Style.heightNavigationButtonIcon
+        iconWidth: Style.widthNavigationButtonIcon
+        descriptionHeight: Style.heightNavigationButtonDescription
+        descriptionWidth: Style.widthNavigationButtonDescription
+        color: Style.colourNavigationBarFont
+        background: Style.colourNavigationBarBackground
+        hoverColor: "#8aef63"
+        iconCharacter: "\uf002"
+        description: "Find Client"
+        onNavigationButtonClicked: masterController.ui_navigationController.goFindClientView()
+      }
+
+    }
+  }
+}

diff --git a/cm-ui/components/NavigationButton.qml b/cm-ui/components/NavigationButton.qml
new file mode 100644 (file)
index 0000000..e660a00
--- /dev/null
+++ b/cm-ui/components/NavigationButton.qml
@@ -0,0 +1,70 @@
+import QtQuick 2.10
+import QtQuick.Window 2.10
+import QtQuick.Controls 2.2
+
+import assets 1.0
+
+Item {
+  id: top
+  property alias iconCharacter: textIcon.text
+  property alias description: textDescription.text
+  property color color: "#ff0000"
+  property color background: "#00ff00"
+  property color hoverColor: "#0000ff"
+  property real iconWidth: 0
+  property real descriptionWidth: 0
+  property real iconHeight: 0
+  property real descriptionHeight: 0
+  height: Math.max(iconHeight, descriptionHeight)
+  width: parent.width
+
+  signal navigationButtonClicked()
+
+  Rectangle {
+    id: backgroundRect
+    anchors.fill: parent
+    color: top.background
+    states: [
+      State {
+        name: "hover"
+        PropertyChanges {
+          target: backgroundRect
+          color: hoverColor
+        }
+      }
+    ]
+
+    Row {
+      Text {
+        id: textIcon
+        width: top.iconWidth
+        height: top.height
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        font {
+          family: Style.fontAwesome
+          pixelSize: Style.pixelSizeNavigationBarIcon
+        }
+        color: top.color
+        text: "\uf11a"
+      }
+      Text {
+        id: textDescription
+        width: top.descriptionWidth
+        height: top.height
+        verticalAlignment: Text.AlignVCenter
+        font.pixelSize: Style.pixelSizeNavigationBarText
+        color: top.color
+        text: "SET ME!!"
+      }
+    }
+    MouseArea {
+      anchors.fill: parent
+      cursorShape: Qt.PointingHandCursor
+      hoverEnabled: true
+      onEntered: backgroundRect.state = "hover"
+      onExited: backgroundRect.state = ""
+      onClicked: navigationButtonClicked()
+    }
+  }
+}

diff --git a/cm-ui/components/qmldir b/cm-ui/components/qmldir
new file mode 100644 (file)
index 0000000..51cc711
--- /dev/null
+++ b/cm-ui/components/qmldir
@@ -0,0 +1,3 @@
+module components
+NavigationButton 1.0 NavigationButton.qml
+NavigationBar 1.0 NavigationBar.qml

diff --git a/cm-ui/src/main.cpp b/cm-ui/src/main.cpp
index 1a78b0ecd046b29ba3bbbf7026c516f26cc39aca..e31bd850d203cec772054ea0d33192e64ed1dccd 100644 (file)
--- a/cm-ui/src/main.cpp
+++ b/cm-ui/src/main.cpp
@@ -15,6 +15,7 @@ int main(int argc, char *argv[])
   cm::controllers::MasterController masterController;
 
   QQmlApplicationEngine engine;
+  engine.addImportPath("qrc:/");
   engine.rootContext()->setContextProperty("masterController", &masterController);
   engine.load(QUrl(QStringLiteral("qrc:/views/MasterView.qml")));
   if (engine.rootObjects().isEmpty())

diff --git a/cm-ui/views/CreateClientView.qml b/cm-ui/views/CreateClientView.qml
index 3086c3e6562ebbc9384f31a7b28b86f66d084a3d..f0d7cf909b6013ce82381d3d46b4f781dedf2d11 100644 (file)
--- a/cm-ui/views/CreateClientView.qml
+++ b/cm-ui/views/CreateClientView.qml
@@ -1,9 +1,11 @@
 import QtQuick 2.10
 
+import assets 1.0
+
 Item {
   Rectangle {
     anchors.fill: parent
-    color: "#f4c842"
+    color: Style.colourBackground
 
     Text {
       anchors.centerIn: parent

diff --git a/cm-ui/views/DashboardView.qml b/cm-ui/views/DashboardView.qml
index 21ea5cfadecdb8889fcbec6bd3eda05c30244cb0..66babc3a165f6290aa6475b7e0363842e6a4e998 100644 (file)
--- a/cm-ui/views/DashboardView.qml
+++ b/cm-ui/views/DashboardView.qml
@@ -1,9 +1,11 @@
 import QtQuick 2.10
 
+import assets 1.0
+
 Item {
   Rectangle {
     anchors.fill: parent
-    color: "#208010"
+    color: Style.colourBackground
 
     Text {
       anchors.centerIn: parent

diff --git a/cm-ui/views/EditClientView.qml b/cm-ui/views/EditClientView.qml
index 00e507af6ad63a1ca062590990a2fbedac3f0758..77f7af58fed9c0ebe4ed5d4ef003c55baa197e2e 100644 (file)
--- a/cm-ui/views/EditClientView.qml
+++ b/cm-ui/views/EditClientView.qml
@@ -1,9 +1,11 @@
 import QtQuick 2.10
 
+import assets 1.0
+
 Item {
   Rectangle {
     anchors.fill: parent
-    color: "#f4c842"
+    color: Style.colourBackground
 
     Text {
       anchors.centerIn: parent

diff --git a/cm-ui/views/FindClientView.qml b/cm-ui/views/FindClientView.qml
index f313b10d4bf5375557b51b69089c6f1298007a73..c11149a0e9c533280b2cec4408997ba2d1a13d9a 100644 (file)
--- a/cm-ui/views/FindClientView.qml
+++ b/cm-ui/views/FindClientView.qml
@@ -1,9 +1,11 @@
 import QtQuick 2.10
 
+import assets 1.0
+
 Item {
   Rectangle {
     anchors.fill: parent
-    color: "#f4c842"
+    color: Style.colourBackground
 
     Text {
       anchors.centerIn: parent

diff --git a/cm-ui/views/MasterView.qml b/cm-ui/views/MasterView.qml
index b929166d75cb398099effdacf5db8b546b8de5da..85ba8680d00a6caf99f516e202433ffd9943b1f9 100644 (file)
--- a/cm-ui/views/MasterView.qml
+++ b/cm-ui/views/MasterView.qml
@@ -2,6 +2,9 @@ import QtQuick 2.10
 import QtQuick.Window 2.10
 import QtQuick.Controls 2.2
 
+import assets 1.0
+import components 1.0
+
 Window {
   visible: true
   width: 640
@@ -16,33 +19,8 @@ Window {
     onGoFindClientView: contentFrame.replace(Qt.resolvedUrl("qrc:/views/FindClientView.qml"))
   }
 
-  Rectangle {
+  NavigationBar {
     id: navigationBar
-    anchors {
-      top: parent.top
-      bottom: parent.bottom
-      left: parent.left
-    }
-    width: 100
-    color:"#000000"
-    Column {
-
-      Button {
-        text: "Dashboard"
-        onClicked: masterController.ui_navigationController.goDashboardView()
-      }
-
-      Button {
-        text: "New Client"
-        onClicked: masterController.ui_navigationController.goCreateClientView()
-      }
-
-      Button {
-        text: "Find Client"
-        onClicked: masterController.ui_navigationController.goFindClientView()
-      }
-
-    }
   }
 
   StackView {

diff --git a/cm-ui/views/SplashView.qml b/cm-ui/views/SplashView.qml
index 9c3fcb0876c590fdfd4dce12f16f3375357efee4..a0737783a583b4b73c2c41e0c9dea1fef90e00cb 100644 (file)
--- a/cm-ui/views/SplashView.qml
+++ b/cm-ui/views/SplashView.qml
@@ -1,9 +1,11 @@
 import QtQuick 2.10
 
+import assets 1.0
+
 Item {
   Rectangle {
     anchors.fill: parent
-    color: "#f4c842"
+    color: Style.colourBackground
 
     Text {
       anchors.centerIn: parent