From: John Janus Date: Wed, 15 Aug 2018 22:36:34 +0000 (+0200) Subject: finish qml components X-Git-Url: https://git.johnzone.org/?a=commitdiff_plain;h=4ac92a7c9f646e86d3e266e4ef6dad2d6a53613f;p=learnqt-cm.git finish qml components --- diff --git a/cm-ui/assets/Style.qml b/cm-ui/assets/Style.qml new file mode 100644 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 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 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 index 0000000..06e0cda --- /dev/null +++ b/cm-ui/asstes.qrc @@ -0,0 +1,7 @@ + + + assets/qmldir + assets/Style.qml + assets/fa-solid-900.ttf + + diff --git a/cm-ui/cm-ui.pro b/cm-ui/cm-ui.pro index bc98612..fcca39a 100644 --- 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 index 0000000..0dd9a2a --- /dev/null +++ b/cm-ui/components.qrc @@ -0,0 +1,7 @@ + + + components/qmldir + components/NavigationButton.qml + components/NavigationBar.qml + + diff --git a/cm-ui/components/NavigationBar.qml b/cm-ui/components/NavigationBar.qml new file mode 100644 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 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 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 1a78b0e..e31bd85 100644 --- 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 3086c3e..f0d7cf9 100644 --- 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 21ea5cf..66babc3 100644 --- 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 00e507a..77f7af5 100644 --- 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 f313b10..c11149a 100644 --- 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 b929166..85ba868 100644 --- 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 9c3fcb0..a073778 100644 --- 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