diff options
| -rw-r--r-- | Header.ui.qml | 103 |
1 files changed, 88 insertions, 15 deletions
diff --git a/Header.ui.qml b/Header.ui.qml index aebdc4e..ab177ac 100644 --- a/Header.ui.qml +++ b/Header.ui.qml @@ -13,8 +13,9 @@ ToolBar { property alias cartMenu: cartMenu property alias checkout: checkout property alias profile: profile - property string imageSource: "https://eduport.webestica.com/assets/images/avatar/01.jpg" - property alias menu: menu + property string profileImageSource: + "https://eduport.webestica.com/assets/images/avatar/01.jpg" + property alias profileMenu: profileMenu property alias info: info property alias divider: divider property string fullNameText: "Lori Ferguson" @@ -71,9 +72,10 @@ ToolBar { Component { id: menuSeparator + MenuSeparator { contentItem: Rectangle { - implicitWidth: menu.width + implicitWidth: width implicitHeight: 1 color: Eduport.mode ? Eduport.bsGray300 : Eduport.bsGray500 @@ -131,6 +133,60 @@ ToolBar { width: 256 sourceComponent: background } + delegate: MenuItem { + id: menuItem + contentItem: ColumnLayout { + + Loader { + Layout.fillWidth: true + Layout.topMargin: -24 + Layout.leftMargin: -8 + Layout.rightMargin: -8 + sourceComponent: menuSeparator + } + + RowLayout { + Layout.margins: 16 + + Loader { + property string + imageSource: + menuItem + .icon.source + property int + imageWidth: 50 + property int + imageHeight: 50 + property real + maskRadius: 5.2 + sourceComponent: image + Layout.alignment: + Qt.AlignTop + } + + ColumnLayout { + + RowLayout { + + Lbl.H6 { + text: + menuItem + .text + Layout + .fillWidth: + true + } + } + + ComboBox { + model: [1, 2, + 3, 4, + 5] + } + } + } + } + } Lbl.H5 { text: qsTr("Cart items") @@ -140,6 +196,16 @@ ToolBar { bottomPadding: 25.6 } + Action { + icon.source:"https://eduport.webestica.com/assets/images/book/02.jpg" + text: "Angular 4 Tutorial in audio (Compact Disk)" + } + + Action { + icon.source:"https://eduport.webestica.com/assets/images/book/04.jpg" + text: "The Principles of Beautiful Graphics Design (Paperback)" + } + Loader { sourceComponent: menuSeparator } @@ -172,19 +238,20 @@ ToolBar { Component { id: image + Image { source: imageSource sourceSize { - width: size - height: size + width: imageWidth + height: imageHeight } layer { enabled: true effect: OpacityMask { maskSource: Rectangle { - width: size - height: size - radius: size + width: imageWidth + height: imageHeight + radius: maskRadius } } } @@ -199,7 +266,10 @@ ToolBar { verticalCenter: parent.verticalCenter } contentItem: Loader { - property real size: 40 + property string imageSource: profileImageSource + property int imageWidth: 40 + property int imageHeight: 40 + property real maskRadius: 40 sourceComponent: image } background: Rectangle { @@ -207,7 +277,7 @@ ToolBar { } Menu { - id: menu + id: profileMenu y: parent.height horizontalPadding: 10 verticalPadding: 16 @@ -226,10 +296,10 @@ ToolBar { Image { source: menuItem.icon.source sourceSize { - width: menuItem.icon - .width - height: menuItem.icon - .height + width: menuItem + .icon.width + height: menuItem + .icon.height } ColorOverlay { @@ -277,7 +347,10 @@ ToolBar { } Loader { - property real size: 48 + property string imageSource: profileImageSource + property int imageWidth: 48 + property int imageHeight: 48 + property real maskRadius: 48 sourceComponent: image } |