diff options
| -rw-r--r-- | Header.ui.qml | 475 | 
1 files changed, 220 insertions, 255 deletions
| diff --git a/Header.ui.qml b/Header.ui.qml index 3775840..c6894aa 100644 --- a/Header.ui.qml +++ b/Header.ui.qml @@ -23,323 +23,288 @@ ToolBar {  	property alias light: light  	property alias dark: dark +	horizontalPadding: 15  	background: Rectangle {  		implicitHeight: 70  		color: Eduport.bsBodyBg  	} -	Item { +	ToolButton { +		id: logo  		anchors { -			fill: parent -			leftMargin: 15 -			rightMargin: 15 +			left: parent.left +			verticalCenter: parent.verticalCenter  		} - -		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" -			} +		icon { +			source: "https://eduport.webestica.com/assets/images/logo.svg" +			width: 115 +		} +		background: Rectangle { +			color: "transparent"  		} +	} -		Component { -			id: image -			Image { -				source: imageSource -				sourceSize { -					width: size -					height: size -				} -				layer { -					enabled: true -					effect: OpacityMask { -						maskSource: Rectangle { -							width: size -							height: size -							radius: size -						} +	Component { +		id: image +		Image { +			source: imageSource +			sourceSize { +				width: size +				height: size +			} +			layer { +				enabled: true +				effect: OpacityMask { +					maskSource: Rectangle { +						width: size +						height: size +						radius: size  					}  				}  			}  		} +	} -		Component { -			id: menuSeparator -			MenuSeparator { -				contentItem: Rectangle { -					implicitWidth: menu.width -					implicitHeight: 1 -					color: Eduport.mode -						? Eduport.bsGray300 -						: Eduport.bsGray500 -				} +	Component { +		id: menuSeparator +		MenuSeparator { +			contentItem: Rectangle { +				implicitWidth: menu.width +				implicitHeight: 1 +				color: Eduport.mode +					? Eduport.bsGray300 : Eduport.bsGray500  			}  		} +	} -		ToolButton { -			id: profile -			padding: 0 -			anchors { -				right: parent.right -				verticalCenter: parent.verticalCenter -			} -			contentItem: Loader { -				property real size: 40 -				sourceComponent: image -			} -			background: Rectangle { -				color: "transparent" -			} +	ToolButton { +		id: profile +		padding: 0 +		anchors { +			right: parent.right +			verticalCenter: parent.verticalCenter +		} +		contentItem: Loader { +			property real size: 40 +			sourceComponent: image +		} +		background: Rectangle { +			color: "transparent" +		} -			Menu { -				id: menu -				y: parent.height -				horizontalPadding: 10 -				verticalPadding: 16 -				delegate: MenuItem { -					id: menuItem -					font: Eduport.bsBtnFont -					horizontalPadding: 16 -					verticalPadding: 6.4 -					spacing: 8 -					contentItem: RowLayout { +		Menu { +			id: menu +			y: parent.height +			horizontalPadding: 10 +			verticalPadding: 16 +			delegate: MenuItem { +				id: menuItem +				font: Eduport.bsBtnFont +				horizontalPadding: 16 +				verticalPadding: 6.4 +				spacing: 8 +				contentItem: RowLayout { -						Image { -							source: menuItem.icon -								.source -							sourceSize { -								width: -								menuItem.icon +					Image { +						source: menuItem.icon.source +						sourceSize { +							width: menuItem.icon  									.width -								height: -								menuItem.icon -								.height -							} - -							ColorOverlay { -								color: -								highlighted -								? Eduport -								.bsDropdownLinkHoverColor -								: Eduport -								.bsDropdownLinkColor -								source: parent -								anchors.fill: -									parent -							} +							height: menuItem.icon +									.height  						} -						Text { -							text: menuItem.text -							font: menuItem.font +						ColorOverlay {  							color: highlighted -								? Eduport -								.bsDropdownLinkHoverColor -								: Eduport -								.bsDropdownLinkColor -							Layout.fillWidth: true +								? Eduport.bsDropdownLinkHoverColor +								: Eduport.bsDropdownLinkColor +							source: parent +							anchors.fill: parent  						}  					} -					background: Rectangle { + +					Text { +						text: menuItem.text +						font: menuItem.font  						color: highlighted -							? Eduport -							.bsDropdownLinkHoverBg -							: Eduport.mode -							? Eduport.bsDark -							: Eduport.bsBodyBg -						radius: 5.2 +							? Eduport.bsDropdownLinkHoverColor +							: Eduport.bsDropdownLinkColor +						Layout.fillWidth: true  					}  				} -				background: Item { -					implicitWidth: 260.734 -					implicitHeight: 295.406 - -					Rectangle { -						id: rectangle -						anchors.fill: parent -						radius: 5.2 -						color: Eduport.mode +				background: Rectangle { +					color: highlighted +						? Eduport.bsDropdownLinkHoverBg +						: Eduport.mode  							? Eduport.bsDark  							: Eduport.bsBodyBg -					} +					radius: 5.2 +				} +			} +			background: Item { +				implicitWidth: 260.734 +				implicitHeight: 295.406 -					DrpShdw.Box { -						source: rectangle -						anchors.fill: rectangle -					} +				Rectangle { +					id: rectangle +					anchors.fill: parent +					radius: 5.2 +					color: Eduport.mode +						? Eduport.bsDark +						: Eduport.bsBodyBg +				} + +				DrpShdw.Box { +					source: rectangle +					anchors.fill: rectangle  				} +			} -				Item { -					id: info -					implicitHeight: layout.height + 16 +			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 -						} +				RowLayout { +					id: layout +					spacing: 16 +					anchors { +						top: parent.top +						topMargin: 0 +						left: parent.left +						leftMargin: 16 +						right: parent.right +						rightMargin: 16 +					} -						Loader { -							property real size: 48 -							sourceComponent: image -						} +					Loader { +						property real size: 48 +						sourceComponent: image +					} -						ColumnLayout { -							spacing: 0 +					ColumnLayout { +						spacing: 0 -							Lbl.H6 { -								text: -								fullNameText -							} +						Lbl.H6 { +							text: fullNameText +						} -							Lbl.Body { -								text: emailText -								font.pointSize: -									14 -								color: Eduport +						Lbl.Body { +							text: emailText +							font.pointSize: 14 +							color: Eduport  								.bsDropdownColor -							}  						}  					}  				} +			} -				Loader { -					id: divider -					sourceComponent: menuSeparator -				} +			Loader { +				id: divider +				sourceComponent: menuSeparator +			} -				Action { -					id: editProfile -					icon { -						source: -						"Bootstrap/icons/person.svg" -						width: 19 -						height: 22 -					} -					text: qsTr("Edit Profile") +			Action { +				id: editProfile +				icon { +					source: +					"Bootstrap/icons/person.svg" +					width: 19 +					height: 22  				} +				text: qsTr("Edit Profile") +			} -				Action { -					id: accountSettings -					icon { -						source: -						"Bootstrap/icons/gear.svg" -						width: 19 -						height: 22 -					} -					text: qsTr("Account Settings") +			Action { +				id: accountSettings +				icon { +					source: +					"Bootstrap/icons/gear.svg" +					width: 19 +					height: 22  				} +				text: qsTr("Account Settings") +			} -				Action { -					id: help -					icon { -						source: -						"Bootstrap/icons/info-circle.svg" -						width: 19 -						height: 22 -					} -					text: qsTr("Help") +			Action { +				id: help +				icon { +					source: +					"Bootstrap/icons/info-circle.svg" +					width: 19 +					height: 22  				} +				text: qsTr("Help") +			} -				Action { -					id: log -					icon { -						source: -						"Bootstrap/icons/power.svg" -						width: 19 -						height: 22 -					} -					text: qsTr("Sign Out") +			Action { +				id: log +				icon { +					source: +					"Bootstrap/icons/power.svg" +					width: 19 +					height: 22  				} +				text: qsTr("Sign Out") +			} -				Loader { -					sourceComponent: menuSeparator -				} +			Loader { +				sourceComponent: menuSeparator +			} -				Item { -					implicitHeight: mode.height + 16 +			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 +					} -					Rectangle { -						implicitHeight: mode.height -									+ 8 -						color: Eduport.bsLight -						radius: Eduport.bsBorderRadius +					RowLayout { +						id: mode +						spacing: 0  						anchors {  							left: parent.left +							leftMargin: 4  							right: parent.right -							bottom: parent.bottom -						} - -						RowLayout { -							id: mode -							spacing: 0 -							anchors { -								left: parent -									.left -								leftMargin: 4 -								right: parent -									.right -								rightMargin: 4 -								verticalCenter -								: parent +							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 == Eduport -								.Mode.Light -								enabled: !checked -								Layout -								.fillWidth: -									true +						Btn.Sm { +							id: light +							icon { +								source: "Bootstrap/icons/sun.svg" +								width: 16 +								height: 16  							} +							text: qsTr("Light") +							checked: Eduport.mode +								== Eduport.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 == Eduport -								.Mode.Dark -								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 +								== Eduport.Mode +									.Dark +							enabled: !checked +							Layout.fillWidth: true  						}  					}  				} |