import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtGraphicalEffects 1.15 import Bootstrap 5.3 import Eduport 1.4 import "DropShadow" as DrpShdw import "Button" as Btn import "Label" as Lbl import "Header" ToolBar { property alias logo: logo property alias cart: cart property alias cartMenu: cartMenu property alias cartItems: cartItems property alias checkout: checkout property alias profile: profile 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" property string emailText: "example@gmail.com" property alias editProfile: editProfile property alias accountSettings: accountSettings property alias help: help property alias log: log property alias light: light property alias dark: dark horizontalPadding: 15 background: Rectangle { implicitHeight: 70 color: Eduport.bsBodyBg } ToolButton { id: logo anchors { left: parent.left verticalCenter: parent.verticalCenter } icon { source: "https://eduport.webestica.com/assets/images/logo.svg" width: 115 } background: Rectangle { color: "transparent" } } Component { id: background Item { implicitWidth: width Rectangle { id: rectangle anchors.fill: parent radius: 5.2 color: Eduport.mode ? Eduport.bsDark : Eduport.bsBodyBg } DrpShdw.Box { source: rectangle anchors.fill: rectangle } } } Component { id: menuSeparator MenuSeparator { contentItem: Rectangle { implicitWidth: width implicitHeight: 1 color: Eduport.mode ? Eduport.bsGray300 : Eduport.bsGray500 } } } ToolButton { id: cart padding: 0 width: 40 height: 40 anchors { right: profile.left rightMargin: 12 verticalCenter: parent.verticalCenter } layer { enabled: true effect: OpacityMask { maskSource: Rectangle { width: 40 height: 40 radius: 40 } } } contentItem: Item { Image { anchors.centerIn: parent source: "Bootstrap/icons/cart3.svg" fillMode: Image.PreserveAspectFit ColorOverlay { color: Eduport.bsGray900 source: parent anchors.fill: parent } } } background: Rectangle { color: Eduport.bsLight border { color: Eduport.bsLight width: 1 } } Menu { id: cartMenu y: parent.height background: Loader { width: 256 sourceComponent: background } Lbl.H5 { text: qsTr("Cart items") topPadding: 25.6 leftPadding: 16 rightPadding: 16 bottomPadding: 25.6 } ListView { id: cartItems interactive: false implicitHeight: count * 120 model: ListModel { ListElement { image: "https://eduport.webestica.com/assets/images/book/02.jpg" title: "Angular 4 Tutorial in audio (Compact Disk)" } ListElement { image: "https://eduport.webestica.com/assets/images/book/04.jpg" title: "The Principles of Beautiful Graphics Design (Paperback)" } } delegate: CartItem { width: cartItems.width imageSource: image titleText: title } } Loader { sourceComponent: menuSeparator } RowLayout { Btn.Light { id: viewCart text: qsTr("View Cart") horizontalPadding: 12.8 verticalPadding: 6.4 font.pointSize: 13 bsBtnBorderRadius: 3.2 Layout.margins: 16 } Btn.Success { id: checkout text: qsTr("Checkout") horizontalPadding: 12.8 verticalPadding: 6.4 font.pointSize: 13 bsBtnBorderRadius: 3.2 Layout.margins: 16 Layout.alignment: Qt.AlignRight } } } } Component { id: image Image { source: imageSource sourceSize { width: imageWidth height: imageHeight } layer { enabled: true effect: OpacityMask { maskSource: Rectangle { width: imageWidth height: imageHeight radius: maskRadius } } } } } ToolButton { id: profile padding: 0 anchors { right: parent.right verticalCenter: parent.verticalCenter } contentItem: Loader { property string imageSource: profileImageSource property int imageWidth: 40 property int imageHeight: 40 property real maskRadius: 40 sourceComponent: image } background: Rectangle { color: "transparent" } Menu { id: profileMenu y: parent.height horizontalPadding: 10 verticalPadding: 16 background: Loader { width: 260.734 sourceComponent: background } delegate: MenuItem { id: menuItem font: Eduport.bsBtnFont horizontalPadding: 16 verticalPadding: 6.4 spacing: 8 contentItem: RowLayout { Image { source: menuItem.icon.source ColorOverlay { color: highlighted ? Eduport.bsDropdownLinkHoverColor : Eduport.bsDropdownLinkColor source: parent anchors.fill: parent } } Text { text: menuItem.text font: menuItem.font color: highlighted ? Eduport.bsDropdownLinkHoverColor : Eduport.bsDropdownLinkColor Layout.fillWidth: true } } background: Rectangle { color: highlighted ? Eduport.bsDropdownLinkHoverBg : Eduport.mode ? Eduport.bsDark : Eduport.bsBodyBg radius: 5.2 } } Item { id: info implicitHeight: layout.height + 16 RowLayout { id: layout spacing: 16 anchors { top: parent.top topMargin: 0 left: parent.left leftMargin: 16 right: parent.right rightMargin: 16 } Loader { property string imageSource: profileImageSource property int imageWidth: 48 property int imageHeight: 48 property real maskRadius: 48 sourceComponent: image } ColumnLayout { spacing: 0 Lbl.H6 { text: fullNameText } Label { text: emailText font.pointSize: 14 wrapMode: Label.Wrap color: Eduport .bsDropdownColor } } } } Loader { id: divider sourceComponent: menuSeparator } Action { id: editProfile icon.source: "Bootstrap/icons/person.svg" text: qsTr("Edit Profile") } Action { id: accountSettings icon.source: "Bootstrap/icons/gear.svg" text: qsTr("Account Settings") } Action { id: help icon.source: "Bootstrap/icons/info-circle.svg" text: qsTr("Help") } Action { id: log icon.source: "Bootstrap/icons/power.svg" text: qsTr("Sign Out") } Loader { sourceComponent: menuSeparator } Item { implicitHeight: mode.height + 16 Rectangle { implicitHeight: mode.height + 8 color: Eduport.bsLight radius: Eduport.bsBorderRadius anchors { left: parent.left right: parent.right bottom: parent.bottom } RowLayout { id: mode spacing: 0 anchors { left: parent.left leftMargin: 4 right: parent.right rightMargin: 4 verticalCenter: parent .verticalCenter } Btn.Sm { id: light icon { source: "Bootstrap/icons/sun.svg" width: 16 height: 16 } text: qsTr("Light") checked: Eduport.mode == Bootstrap .Mode .Light enabled: !checked Layout.fillWidth: true } Btn.Sm { id: dark icon { source: "Bootstrap/icons/moon-stars.svg" width: 16 height: 16 } text: qsTr("Dark") checked: Eduport.mode == Bootstrap .Mode .Dark enabled: !checked Layout.fillWidth: true } } } } } } }