414 lines
15 KiB
QML
414 lines
15 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import QtQuick.Window
|
|
import RibbonUI
|
|
import "components"
|
|
|
|
RibbonWindow {
|
|
id:root
|
|
width: 1200
|
|
height: 800
|
|
title: qsTr("RibbonUI APP")
|
|
comfirmedQuit: true
|
|
property bool modernStyle: RibbonTheme.modernStyle
|
|
RibbonMessageBarGroup{
|
|
id: msg_bar
|
|
implicitWidth: windowItems.width
|
|
x: windowItems.x
|
|
y: titleBar.height + tab_bar.y + tab_bar.height - tab_bar.modernMargin + (RibbonTheme.modernStyle ? 5 : 0)
|
|
target: windowItems
|
|
Component.onCompleted: {
|
|
messageModel.append([{
|
|
type: RibbonMessageBar.Info,
|
|
text: "Info (default) MessageBar."
|
|
},{
|
|
type: RibbonMessageBar.Warning,
|
|
text: "Warning defaults to multiline. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris.Visit our website.",
|
|
actionALabel: "Yes",
|
|
actionBLabel: "No",
|
|
externalURL: "https://github.com/mentalfl0w/RibbonUI",
|
|
externalURLLabel: "Visit our website."
|
|
},{
|
|
type: RibbonMessageBar.Warning,
|
|
text: "Warning MessageBar content.",
|
|
actionALabel: "Action",
|
|
externalURL: "https://github.com/mentalfl0w/RibbonUI",
|
|
externalURLLabel: "Visit our website.",
|
|
disableMultiline: true
|
|
},{
|
|
type: RibbonMessageBar.SevereWarning,
|
|
text: "SevereWarning MessageBar with action buttons which defaults to multiline.",
|
|
actionALabel: "Yes",
|
|
actionBLabel: "No",
|
|
externalURL: "https://github.com/mentalfl0w/RibbonUI",
|
|
externalURLLabel: "Visit our website.",
|
|
},{
|
|
type: RibbonMessageBar.Blocked,
|
|
text: "Blocked MessageBar - single line, with dismiss button and truncated text. Truncation is not available if you use action buttons or multiline and should be used sparingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris.",
|
|
},{
|
|
type: RibbonMessageBar.Success,
|
|
text: "Success MessageBar with single line and action buttons.",
|
|
actionALabel: "Yes",
|
|
actionBLabel: "No",
|
|
externalURL: "https://github.com/mentalfl0w/RibbonUI",
|
|
externalURLLabel: "Visit our website."
|
|
},{
|
|
type: RibbonMessageBar.Error,
|
|
text: "Error MessageBar with single line, with dismiss button.",
|
|
externalURL: "https://github.com/mentalfl0w/RibbonUI",
|
|
externalURLLabel: "Visit our website."
|
|
}])
|
|
messageBar.showMessage(RibbonMessageBar.Info, "test")
|
|
}
|
|
}
|
|
|
|
RibbonTour{
|
|
id: tour
|
|
RibbonTourItem{
|
|
title: qsTr("Tab Bar")
|
|
text: qsTr("A tab bar for window, let user choose the controllers.")
|
|
target: tab_bar
|
|
enterFunc: ()=>{
|
|
tab_bar.folded = false
|
|
tour.refresh(300) // Use it if has animation
|
|
}
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Tab Bar Buttons")
|
|
text: qsTr("Tool buttons at the top of tab bar.")
|
|
target: tab_bar.tab_bar_tool
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Sliders")
|
|
text: qsTr("Vertical/Horizental sliders with/without buttons.")
|
|
target: tab_bar.slider_layout
|
|
enterFunc: ()=>{
|
|
tab_bar.setPage(0)
|
|
tab_bar.slider_with_btn.value = 70
|
|
tab_bar.slider_without_btn.value = 70
|
|
tour.refresh(500)
|
|
}
|
|
exitFunc: ()=>{
|
|
tab_bar.slider_with_btn.value = 50
|
|
tab_bar.slider_without_btn.value = 50
|
|
}
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Switch Buttons")
|
|
text: qsTr("Switch buttons with/without background color or grabber text.")
|
|
target: tab_bar.switch_layout
|
|
enterFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = true
|
|
exitFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = false
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("CheckBoxs")
|
|
text: qsTr("CheckBoxs with colorful background or with/without label text.")
|
|
target: tab_bar.checkbox_layout
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Buttons")
|
|
text: qsTr("Buttons with/without background or label text.")
|
|
target: tab_bar.button_layout
|
|
enterFunc: ()=>tab_bar.btn_without_bg_and_label.checked = true
|
|
exitFunc: ()=>tab_bar.btn_without_bg_and_label.checked = false
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Push Buttons")
|
|
text: qsTr("Push buttons with/without sub menu.")
|
|
target: tab_bar.pushbutton_layout
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Line Edits")
|
|
text: qsTr("Line edits with/without icon.")
|
|
target: tab_bar.lineedit_layout
|
|
enterFunc: ()=>{
|
|
tab_bar.setPage(1)
|
|
tab_bar.lineedit_with_icon.text = "Line Edit with icon."
|
|
tour.refresh(300)
|
|
}
|
|
exitFunc: ()=>{
|
|
tab_bar.setPage(0)
|
|
tab_bar.lineedit_with_icon.clear()
|
|
tour.refresh(400)
|
|
}
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Bottom Bar")
|
|
text: qsTr("A bottom bar for window.")
|
|
target: bottom_bar
|
|
}
|
|
target: windowItems
|
|
blurEnabled: true
|
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
|
}
|
|
Component.onCompleted: tour.open()
|
|
|
|
TabBar{
|
|
id: tab_bar
|
|
onSettingsBtnClicked:{
|
|
backstagepopup.open()
|
|
}
|
|
}
|
|
|
|
RibbonPaperView{
|
|
id: view
|
|
anchors.fill: parent
|
|
pageWidth: (page_slider.value / 100.0) * width
|
|
spacing: 0
|
|
isMainView: true
|
|
topBorderFix: msg_bar.folded ? msg_bar.barHeight : 0
|
|
ColumnLayout{
|
|
Layout.alignment: Qt.AlignCenter
|
|
Layout.topMargin: 30
|
|
spacing: 20
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
Layout.topMargin: 50
|
|
text: "RibbonUI"
|
|
font{
|
|
pixelSize: 50
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
Image {
|
|
source: "qrc:/qt/qml/RibbonUI/resources/imgs/icon.png"
|
|
fillMode:Image.PreserveAspectFit
|
|
mipmap: true
|
|
autoTransform: true
|
|
Layout.preferredHeight: 300
|
|
Layout.preferredWidth: height
|
|
Layout.alignment: Qt.AlignHCenter
|
|
layer.enabled: true
|
|
layer.effect: RibbonShadow{}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: "A Lightweight, minimalist and \nelegant Qt component library."
|
|
font{
|
|
pixelSize: 30
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: "Author: mentalfl0w"
|
|
font{
|
|
pixelSize: 25
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: "Email: mentalflow@ourdocs.cn"
|
|
font{
|
|
pixelSize: 25
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: `Current Version: V${RibbonUI.version}`
|
|
font{
|
|
pixelSize: 20
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonBottomBar{
|
|
id: bottom_bar
|
|
anchors{
|
|
left: parent.left
|
|
right: parent.right
|
|
bottom: parent.bottom
|
|
}
|
|
rightContent: RowLayout{
|
|
clip: true
|
|
spacing:1
|
|
Layout.preferredHeight: parent.height
|
|
layoutDirection: Qt.RightToLeft
|
|
RibbonSlider{
|
|
id: page_slider
|
|
slideWidth: 80
|
|
showFilledColor: false
|
|
value: 70
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 3"
|
|
showBg:false
|
|
adaptHeight:true
|
|
iconSource: RibbonIcons.Airplane
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 4"
|
|
showBg:false
|
|
adaptHeight:true
|
|
}
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 5"
|
|
showBg:false
|
|
adaptHeight:true
|
|
iconSource: RibbonIcons.AccessTime
|
|
checkable: true
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 6"
|
|
showBg:false
|
|
adaptHeight:true
|
|
}
|
|
RibbonButton{
|
|
showBg:false
|
|
adaptHeight:true
|
|
iconSource: RibbonIcons.StoreMicrosoft
|
|
checkable: true
|
|
tipText: "Test Button 7"
|
|
}
|
|
}
|
|
|
|
titleBar.titleIconSource: "qrc:/qt/qml/RibbonUI/resources/imgs/icon.png"
|
|
titleBar.rightContent:RowLayout{
|
|
spacing: 1
|
|
layoutDirection: Qt.RightToLeft
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.Info
|
|
iconSourceFilled: RibbonIcons_Filled.Info
|
|
tipText: qsTr("About")
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
onClicked: root.showWindow(Qt.resolvedUrl("about.qml"))
|
|
}
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.Map
|
|
iconSourceFilled: RibbonIcons_Filled.Map
|
|
tipText: qsTr("Tour")
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
onClicked: tour.open()
|
|
}
|
|
|
|
}
|
|
titleBar.leftContent:RowLayout{
|
|
spacing: 1
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.ChevronDown
|
|
tipText: "Test Button 8"
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
RibbonMenu{
|
|
id:menu
|
|
width: 200
|
|
Action{
|
|
text: "Test Long Text Test Long Text Test Long Text"
|
|
checkable: true
|
|
}
|
|
RibbonMenuSeparator{}
|
|
Action{
|
|
text: "Test Item 1"
|
|
enabled: false
|
|
}
|
|
RibbonMenu{
|
|
width: parent.width
|
|
title: "Sub Menu"
|
|
Action { text: qsTr("Test Item 2") }
|
|
Action { text: qsTr("Test Item 3") }
|
|
}
|
|
}
|
|
onClicked:menu.popup()
|
|
}
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.Apps
|
|
iconSourceFilled: RibbonIcons_Filled.Apps
|
|
checkable: true
|
|
tipText: "Test Button 9"
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
enabled: false
|
|
}
|
|
}
|
|
Component{
|
|
id: t_content
|
|
RibbonBackStagePage{
|
|
onPageNameChanged: t_text.text = pageName
|
|
Rectangle{
|
|
anchors.fill: parent
|
|
color: "transparent"
|
|
RibbonText{
|
|
id: t_text
|
|
anchors.centerIn: parent
|
|
font.pixelSize: 20
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonBackStageView{
|
|
id: backstagepopup
|
|
implicitHeight: root.height - root.borderWidth * 2
|
|
implicitWidth: root.width - root.borderWidth * 2
|
|
blurEnabled: true
|
|
blurTarget: root.windowItems
|
|
radius: borderRadius
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Home"
|
|
menuIcon: RibbonIcons.Home
|
|
type: RibbonBackStageView.MenuItemLocation.Head
|
|
sourceComponent: t_content
|
|
sourceArgs:{'pageName':"Home"}
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "File"
|
|
menuIcon: RibbonIcons.Document
|
|
type: RibbonBackStageView.MenuItemLocation.Head
|
|
sourceComponent: t_content
|
|
sourceArgs:{'pageName':"File"}
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Search"
|
|
menuIcon: RibbonIcons.Search
|
|
type: RibbonBackStageView.MenuItemLocation.Body
|
|
sourceComponent: t_content
|
|
sourceArgs:{'pageName':"Search"}
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Account"
|
|
menuIcon: RibbonIcons.PersonAccounts
|
|
type: RibbonBackStageView.MenuItemLocation.Tail
|
|
clickOnly: true
|
|
clickFunc: ()=>console.log("Menu Account clicked")
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "About"
|
|
menuIcon: RibbonIcons.Info
|
|
type: RibbonBackStageView.MenuItemLocation.Tail
|
|
clickOnly: true
|
|
clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml"))
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Settings"
|
|
menuIcon: RibbonIcons.Settings
|
|
type: RibbonBackStageView.MenuItemLocation.Tail
|
|
sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml")
|
|
}
|
|
}
|
|
}
|