Mentalflow
/
RibbonUI
mirror of https://github.com/mentalfl0w/RibbonUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Project: Change all API naming style to camel nomenclature.

This commit is contained in:
Mentalflow 2024-05-19 20:08:20 +08:00
parent 640b72ebfa
commit 00014f19be
Signed by: Mentalflow
GPG Key ID: 5AE68D4401A2EE71
44 changed files with 957 additions and 966 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
example/about.qml
View File

@ -5,12 +5,12 @@ import RibbonUI
RibbonWindow { RibbonWindow {
id: window id: window
width: Math.max(content.width, content.height + title_bar.height, title_bar.minimumWidth) + content.anchors.margins * 2 width: Math.max(content.width, content.height + titleBar.height, titleBar.minimumWidth) + content.anchors.margins * 2
minimumWidth: title_bar.minimumWidth minimumWidth: titleBar.minimumWidth
minimumHeight: content.height + title_bar.height + content.anchors.margins * 2 minimumHeight: content.height + titleBar.height + content.anchors.margins * 2
title: qsTr("About") title: qsTr("About")
title_bar.show_darkmode_btn: false titleBar.showDarkmodeBtn: false
title_bar.show_style_switch: false titleBar.showStyleSwitch: false
windowStatus: RibbonWindow.Status.SingleInstance windowStatus: RibbonWindow.Status.SingleInstance
ColumnLayout{ ColumnLayout{

16
example/components/RibbonMessageListViewExample.qml
View File

@ -19,15 +19,15 @@ Item {
} }
RibbonMessageListView{ RibbonMessageListView{
id: view id: view
auto_scroll_to_bottom: true autoScrollToBottom: true
Layout.preferredHeight: 500 Layout.preferredHeight: 500
Layout.preferredWidth: parent.width Layout.preferredWidth: parent.width
delegate: RibbonMessage{ delegate: RibbonMessage{
id: msg id: msg
sender_text: `${model.time} ${model.recieved ? qsTr('Recieved') : qsTr('Sent')}` senderText: `${model.time} ${model.recieved ? qsTr('Recieved') : qsTr('Sent')}`
RibbonText{ RibbonText{
font.pixelSize: msg.font_size font.pixelSize: msg.fontSize
color: RibbonTheme.dark_mode ? "white" : !model.recieved ? "white" : "black" color: RibbonTheme.isDarkMode ? "white" : !model.recieved ? "white" : "black"
text: model.text ? model.text : "" text: model.text ? model.text : ""
visible: model.text ? true : false visible: model.text ? true : false
Layout.preferredWidth: implicitWidth < (view.width / 2 - padding) ? implicitWidth : (view.width / 2 - padding) Layout.preferredWidth: implicitWidth < (view.width / 2 - padding) ? implicitWidth : (view.width / 2 - padding)
@ -38,10 +38,10 @@ Item {
RowLayout{ RowLayout{
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
RibbonButton{ RibbonButton{
icon_source: RibbonIcons.AddCircle iconSource: RibbonIcons.AddCircle
text: qsTr('Add Message') text: qsTr('Add Message')
onClicked: { onClicked: {
view.message_model.append({ view.messageModel.append({
time: Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss.zzz"), time: Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss.zzz"),
text: String(Math.random()*10), text: String(Math.random()*10),
recieved: (Math.floor(Math.random()*10))%2===0, recieved: (Math.floor(Math.random()*10))%2===0,
@ -49,10 +49,10 @@ Item {
} }
} }
RibbonButton{ RibbonButton{
icon_source: RibbonIcons.DismissCircle iconSource: RibbonIcons.DismissCircle
text: qsTr('Clear Message') text: qsTr('Clear Message')
onClicked: { onClicked: {
view.message_model.clear() view.messageModel.clear()
} }
} }
} }

300
example/example.qml
View File

@ -9,8 +9,8 @@ RibbonWindow {
width: 1200 width: 1200
height: 800 height: 800
title: qsTr("RibbonUI APP") title: qsTr("RibbonUI APP")
comfirmed_quit: true comfirmedQuit: true
property bool modern_style: RibbonTheme.modern_style property bool modernStyle: RibbonTheme.modernStyle
RibbonTour{ RibbonTour{
id: tour id: tour
targetList: [ targetList: [
@ -47,8 +47,8 @@ RibbonWindow {
title: qsTr("Switch Buttons"), title: qsTr("Switch Buttons"),
text: qsTr("Switch buttons with/without background color or grabber text."), text: qsTr("Switch buttons with/without background color or grabber text."),
target: switch_layout, target: switch_layout,
enter_func: ()=>btn_with_color_and_grabber_text.checked = true, enter_func: ()=>btn_with_color_and_grabberText.checked = true,
exit_func: ()=>btn_with_color_and_grabber_text.checked = false exit_func: ()=>btn_with_color_and_grabberText.checked = false
}, },
{ {
title: qsTr("CheckBoxs"), title: qsTr("CheckBoxs"),
@ -88,20 +88,20 @@ RibbonWindow {
target: bottom_bar target: bottom_bar
}, },
] ]
target: window_items target: windowItems
blur_enabled: true blurEnabled: true
target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
} }
Component.onCompleted: tour.open() Component.onCompleted: tour.open()
RibbonTabBar { RibbonTabBar {
id: tab_bar id: tab_bar
modern_style: root.modern_style modernStyle: root.modernStyle
right_tool_bar: RowLayout{ rightToolBar: RowLayout{
id: tab_bar_tool id: tab_bar_tool
spacing: 10 spacing: 10
RibbonButton{ RibbonButton{
text:"Test Button 1" text:"Test Button 1"
icon_source: RibbonIcons.Alert iconSource: RibbonIcons.Alert
checkable: true checkable: true
} }
RibbonButton{ RibbonButton{
@ -128,16 +128,16 @@ RibbonWindow {
RibbonSlider{ RibbonSlider{
id: slider_with_btn id: slider_with_btn
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
slide_width: 40 slideWidth: 40
horizontal: false horizontal: false
value: 20 value: 20
} }
RibbonSlider{ RibbonSlider{
id: slider_without_btn id: slider_without_btn
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
slide_width: 40 slideWidth: 40
horizontal: false horizontal: false
show_button: false showButton: false
value: 40 value: 40
} }
ColumnLayout{ ColumnLayout{
@ -145,13 +145,13 @@ RibbonWindow {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
RibbonSlider{ RibbonSlider{
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
slide_width: 40 slideWidth: 40
value: 60 value: 60
} }
RibbonSlider{ RibbonSlider{
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
slide_width: 40 slideWidth: 40
show_button: false showButton: false
value: 80 value: 80
} }
} }
@ -169,38 +169,38 @@ RibbonWindow {
ColumnLayout{ ColumnLayout{
spacing: 5 spacing: 5
RibbonSwitchButton{ RibbonSwitchButton{
id: btn_with_color_and_grabber_text id: btn_with_color_and_grabberText
text: "Button" text: "Button"
grabber_checked_color: "red" grabberCheckedColor: "red"
checked: true checked: true
} }
RibbonSwitchButton{ RibbonSwitchButton{
text: "Button" text: "Button"
text_on_left: true textOnLeft: true
grabber_checked_color: "orange" grabberCheckedColor: "orange"
checked: true checked: true
} }
RibbonSwitchButton{ RibbonSwitchButton{
grabber_checked_color: "blue" grabberCheckedColor: "blue"
} }
} }
ColumnLayout{ ColumnLayout{
spacing: 5 spacing: 5
RibbonSwitchButton{ RibbonSwitchButton{
text: "Button" text: "Button"
show_grabber_text: false showGrabberText: false
grabber_checked_color: "green" grabberCheckedColor: "green"
} }
RibbonSwitchButton{ RibbonSwitchButton{
text: "Button" text: "Button"
show_grabber_text: false showGrabberText: false
text_on_left: true textOnLeft: true
grabber_checked_color: "indigo" grabberCheckedColor: "indigo"
checked: true checked: true
} }
RibbonSwitchButton{ RibbonSwitchButton{
show_grabber_text: false showGrabberText: false
grabber_checked_color: "yellow" grabberCheckedColor: "yellow"
checked: true checked: true
} }
} }
@ -219,24 +219,24 @@ RibbonWindow {
spacing: 10 spacing: 10
RibbonCheckBox{ RibbonCheckBox{
text: "CheckBox" text: "CheckBox"
icon_filled_bg_color: "blue" iconFilledBgColor: "blue"
checked: true checked: true
} }
RibbonCheckBox{ RibbonCheckBox{
text: "CheckBox" text: "CheckBox"
text_on_left: true textOnLeft: true
icon_filled_bg_color: "red" iconFilledBgColor: "red"
} }
RowLayout{ RowLayout{
spacing: 30 spacing: 30
RibbonCheckBox{ RibbonCheckBox{
icon_filled_bg_color:"orange" iconFilledBgColor:"orange"
tip_text: "CheckBox" tipText: "CheckBox"
show_tooltip: true showTooltip: true
checked: true checked: true
} }
RibbonCheckBox{ RibbonCheckBox{
icon_filled_bg_color:"purple" iconFilledBgColor:"purple"
} }
} }
} }
@ -255,7 +255,7 @@ RibbonWindow {
spacing: 10 spacing: 10
RibbonButton{ RibbonButton{
text:"Button" text:"Button"
icon_source: RibbonIcons.Accessibility iconSource: RibbonIcons.Accessibility
checkable: true checkable: true
} }
RibbonButton{ RibbonButton{
@ -263,50 +263,50 @@ RibbonWindow {
} }
RibbonButton{ RibbonButton{
text:"Button" text:"Button"
show_tooltip: false showTooltip: false
} }
} }
ColumnLayout{ ColumnLayout{
spacing: 10 spacing: 10
RibbonButton{ RibbonButton{
text:"Button" text:"Button"
show_bg:false showBg:false
icon_source: RibbonIcons.Beaker iconSource: RibbonIcons.Beaker
checkable: true checkable: true
} }
RibbonButton{ RibbonButton{
text:"Button" text:"Button"
show_bg:false showBg:false
} }
RibbonButton{ RibbonButton{
text:"Button" text:"Button"
show_bg:false showBg:false
show_tooltip: false showTooltip: false
} }
} }
ColumnLayout{ ColumnLayout{
spacing: 10 spacing: 10
RibbonButton{ RibbonButton{
id: btn_without_bg_and_label id: btn_without_bg_and_label
show_bg:false showBg:false
icon_source: RibbonIcons.Badge iconSource: RibbonIcons.Badge
icon_source_filled: RibbonIcons_Filled.Badge iconSourceFilled: RibbonIcons_Filled.Badge
checkable: true checkable: true
tip_text: "Button" tipText: "Button"
} }
RibbonButton{ RibbonButton{
show_bg:false showBg:false
icon_source: RibbonIcons.Clock iconSource: RibbonIcons.Clock
icon_source_filled: RibbonIcons_Filled.Clock iconSourceFilled: RibbonIcons_Filled.Clock
tip_text: "Button" tipText: "Button"
} }
RibbonButton{ RibbonButton{
show_bg:false showBg:false
icon_source: RibbonIcons.Board iconSource: RibbonIcons.Board
icon_source_filled: RibbonIcons_Filled.Board iconSourceFilled: RibbonIcons_Filled.Board
checkable: true checkable: true
tip_text: "Button" tipText: "Button"
show_tooltip: false showTooltip: false
} }
} }
} }
@ -321,12 +321,12 @@ RibbonWindow {
spacing: 10 spacing: 10
RibbonPushButton{ RibbonPushButton{
text: qsTr("No Menu") text: qsTr("No Menu")
icon_source: RibbonIcons.AttachText iconSource: RibbonIcons.AttachText
} }
RibbonPushButton{ RibbonPushButton{
id: push_btn_with_menu id: push_btn_with_menu
text: qsTr("Menu") text: qsTr("Menu")
icon_source: RibbonIcons.MeetNow iconSource: RibbonIcons.MeetNow
Action{ Action{
text: "Test Item 1" text: "Test Item 1"
} }
@ -338,12 +338,12 @@ RibbonWindow {
} }
RibbonPushButton{ RibbonPushButton{
text: qsTr("No Menu") text: qsTr("No Menu")
icon_source: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png" iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png"
icon_size: height-5 iconSize: height-5
} }
RibbonPushButton{ RibbonPushButton{
text: qsTr("Menu") text: qsTr("Menu")
icon_source: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png" iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png"
Action{ Action{
text: "Test Item 3" text: "Test Item 3"
} }
@ -372,7 +372,7 @@ RibbonWindow {
RibbonLineEdit{ RibbonLineEdit{
} }
RibbonLineEdit{ RibbonLineEdit{
show_clear_btn:false showClearBtn:false
} }
} }
ColumnLayout{ ColumnLayout{
@ -380,11 +380,11 @@ RibbonWindow {
Layout.fillHeight: true Layout.fillHeight: true
RibbonLineEdit{ RibbonLineEdit{
id: lineedit_with_icon id: lineedit_with_icon
icon_source:RibbonIcons.Search iconSource:RibbonIcons.Search
} }
RibbonLineEdit{ RibbonLineEdit{
icon_source:RibbonIcons.Keyboard iconSource:RibbonIcons.Keyboard
show_clear_btn:false showClearBtn:false
} }
} }
} }
@ -401,24 +401,24 @@ RibbonWindow {
spacing: 30 spacing: 30
Layout.fillHeight: true Layout.fillHeight: true
RibbonTextEdit{ RibbonTextEdit{
max_height: 50 maxHeight: 50
} }
RibbonTextEdit{ RibbonTextEdit{
max_height: 30 maxHeight: 30
show_clear_btn:false showClearBtn:false
} }
} }
ColumnLayout{ ColumnLayout{
spacing: 30 spacing: 30
Layout.fillHeight: true Layout.fillHeight: true
RibbonTextEdit{ RibbonTextEdit{
max_height: 50 maxHeight: 50
icon_source:RibbonIcons.Search iconSource:RibbonIcons.Search
} }
RibbonTextEdit{ RibbonTextEdit{
max_height: 30 maxHeight: 30
icon_source:RibbonIcons.Keyboard iconSource:RibbonIcons.Keyboard
show_clear_btn:false showClearBtn:false
} }
} }
} }
@ -464,7 +464,7 @@ RibbonWindow {
ListElement { text: "Test Item 2" } ListElement { text: "Test Item 2" }
ListElement { text: "Test Item 3" } ListElement { text: "Test Item 3" }
} }
icon_source: RibbonIcons.Beaker iconSource: RibbonIcons.Beaker
} }
RibbonComboBox{ RibbonComboBox{
editable: true editable: true
@ -474,7 +474,7 @@ RibbonWindow {
ListElement { text: "Test Item 2" } ListElement { text: "Test Item 2" }
ListElement { text: "Test Item 3" } ListElement { text: "Test Item 3" }
} }
icon_source: RibbonIcons.Calendar iconSource: RibbonIcons.Calendar
onAccepted: { onAccepted: {
if (find(editText) === -1 && editText) if (find(editText) === -1 && editText)
model_1.append({text: editText}) model_1.append({text: editText})
@ -486,7 +486,7 @@ RibbonWindow {
RibbonTabGroup{ RibbonTabGroup{
width: spinbox_layout.width + 30 width: spinbox_layout.width + 30
text: qsTr("Spin Box") text: qsTr("Spin Box")
show_border: false showBorder: false
RowLayout{ RowLayout{
id: spinbox_layout id: spinbox_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -501,7 +501,7 @@ RibbonWindow {
RibbonSpinBox{ RibbonSpinBox{
id: spinbox id: spinbox
width: 80 width: 80
icon_source: RibbonIcons.DataPie iconSource: RibbonIcons.DataPie
validator: DoubleValidator { validator: DoubleValidator {
bottom: Math.min(spinbox.from, spinbox.to) bottom: Math.min(spinbox.from, spinbox.to)
top: Math.max(spinbox.from, spinbox.to) top: Math.max(spinbox.from, spinbox.to)
@ -531,9 +531,9 @@ RibbonWindow {
spacing: 10 spacing: 10
RibbonButton{ RibbonButton{
text: qsTr('Open Message List View') text: qsTr('Open Message List View')
icon_source: RibbonIcons.Open iconSource: RibbonIcons.Open
onClicked: { onClicked: {
Window.window.popup.show_content("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml") Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml")
} }
} }
} }
@ -559,7 +559,7 @@ RibbonWindow {
RibbonText{ RibbonText{
font.pixelSize: 13 font.pixelSize: 13
text: "Test Text (Read Only)" text: "Test Text (Read Only)"
view_only: true viewOnly: true
} }
} }
} }
@ -574,7 +574,7 @@ RibbonWindow {
spacing: 10 spacing: 10
RibbonButton{ RibbonButton{
text: qsTr("Open Menu") text: qsTr("Open Menu")
icon_source: RibbonIcons.Open iconSource: RibbonIcons.Open
onClicked: menu.popup() onClicked: menu.popup()
} }
} }
@ -592,12 +592,12 @@ RibbonWindow {
Layout.fillHeight: true Layout.fillHeight: true
RibbonButton{ RibbonButton{
text: qsTr("Open Popup") text: qsTr("Open Popup")
icon_source: RibbonIcons.Open iconSource: RibbonIcons.Open
onClicked: popup.open() onClicked: popup.open()
} }
RibbonButton{ RibbonButton{
text: qsTr("Open Popup Dialog (Double Choices)") text: qsTr("Open Popup Dialog (Double Choices)")
icon_source: RibbonIcons.Open iconSource: RibbonIcons.Open
onClicked: { onClicked: {
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton
dialog.open() dialog.open()
@ -605,7 +605,7 @@ RibbonWindow {
} }
RibbonButton{ RibbonButton{
text: qsTr("Open Popup Dialog (Triple Choices)") text: qsTr("Open Popup Dialog (Triple Choices)")
icon_source: RibbonIcons.Open iconSource: RibbonIcons.Open
onClicked: { onClicked: {
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton
dialog.open() dialog.open()
@ -616,15 +616,15 @@ RibbonWindow {
id: popup id: popup
height: 200 height: 200
width: height width: height
target: window_items target: windowItems
blur_enabled: true blurEnabled: true
target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
} }
RibbonPopupDialog{ RibbonPopupDialog{
id: dialog id: dialog
target: window_items target: windowItems
blur_enabled: true blurEnabled: true
target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
} }
} }
} }
@ -634,9 +634,9 @@ RibbonWindow {
RibbonPaperView{ RibbonPaperView{
id: view id: view
anchors.fill: parent anchors.fill: parent
top_padding: tab_bar.height topPadding: tab_bar.height
bottom_padding: bottom_bar.height bottomPadding: bottom_bar.height
page_width: (page_slider.value / 100.0) * width pageWidth: (page_slider.value / 100.0) * width
spacing: 0 spacing: 0
ColumnLayout{ ColumnLayout{
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
@ -707,87 +707,87 @@ RibbonWindow {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
right_content: RowLayout{ rightContent: RowLayout{
clip: true clip: true
spacing:1 spacing:1
Layout.preferredHeight: parent.height Layout.preferredHeight: parent.height
layoutDirection: Qt.RightToLeft layoutDirection: Qt.RightToLeft
RibbonSlider{ RibbonSlider{
id: page_slider id: page_slider
slide_width: 80 slideWidth: 80
show_filled_color: false showFilledColor: false
value: 70 value: 70
} }
RibbonButton{ RibbonButton{
text:"Test Button 3" text:"Test Button 3"
show_bg:false showBg:false
adapt_height:true adaptHeight:true
icon_source: RibbonIcons.Airplane iconSource: RibbonIcons.Airplane
} }
RibbonButton{ RibbonButton{
text:"Test Button 4" text:"Test Button 4"
show_bg:false showBg:false
adapt_height:true adaptHeight:true
} }
} }
RibbonButton{ RibbonButton{
text:"Test Button 5" text:"Test Button 5"
show_bg:false showBg:false
adapt_height:true adaptHeight:true
icon_source: RibbonIcons.AccessTime iconSource: RibbonIcons.AccessTime
checkable: true checkable: true
} }
RibbonButton{ RibbonButton{
text:"Test Button 6" text:"Test Button 6"
show_bg:false showBg:false
adapt_height:true adaptHeight:true
} }
RibbonButton{ RibbonButton{
show_bg:false showBg:false
adapt_height:true adaptHeight:true
icon_source: RibbonIcons.AppStore iconSource: RibbonIcons.AppStore
checkable: true checkable: true
tip_text: "Test Button 7" tipText: "Test Button 7"
} }
} }
title_bar.right_content:RowLayout{ titleBar.rightContent:RowLayout{
spacing: 1 spacing: 1
layoutDirection: Qt.RightToLeft layoutDirection: Qt.RightToLeft
RibbonButton{ RibbonButton{
show_bg:false showBg:false
icon_source: RibbonIcons.Info iconSource: RibbonIcons.Info
icon_source_filled: RibbonIcons_Filled.Info iconSourceFilled: RibbonIcons_Filled.Info
tip_text: qsTr("About") tipText: qsTr("About")
hover_color: Qt.rgba(0,0,0, 0.3) hoverColor: Qt.rgba(0,0,0, 0.3)
pressed_color: Qt.rgba(0,0,0, 0.4) pressedColor: Qt.rgba(0,0,0, 0.4)
text_color: title_bar.title_text_color textColor: titleBar.titleTextColor
text_color_reverse: false textColorReverse: false
onClicked: root.show_window(Qt.resolvedUrl("about.qml")) onClicked: root.showWindow(Qt.resolvedUrl("about.qml"))
} }
RibbonButton{ RibbonButton{
show_bg:false showBg:false
icon_source: RibbonIcons.Map iconSource: RibbonIcons.Map
icon_source_filled: RibbonIcons_Filled.Map iconSourceFilled: RibbonIcons_Filled.Map
tip_text: qsTr("Tour") tipText: qsTr("Tour")
hover_color: Qt.rgba(0,0,0, 0.3) hoverColor: Qt.rgba(0,0,0, 0.3)
pressed_color: Qt.rgba(0,0,0, 0.4) pressedColor: Qt.rgba(0,0,0, 0.4)
text_color: title_bar.title_text_color textColor: titleBar.titleTextColor
text_color_reverse: false textColorReverse: false
onClicked: tour.open() onClicked: tour.open()
} }
} }
title_bar.left_content:RowLayout{ titleBar.leftContent:RowLayout{
spacing: 1 spacing: 1
RibbonButton{ RibbonButton{
show_bg:false showBg:false
icon_source: RibbonIcons.ChevronDown iconSource: RibbonIcons.ChevronDown
tip_text: "Test Button 8" tipText: "Test Button 8"
hover_color: Qt.rgba(0,0,0, 0.3) hoverColor: Qt.rgba(0,0,0, 0.3)
pressed_color: Qt.rgba(0,0,0, 0.4) pressedColor: Qt.rgba(0,0,0, 0.4)
text_color: title_bar.title_text_color textColor: titleBar.titleTextColor
text_color_reverse: false textColorReverse: false
RibbonMenu{ RibbonMenu{
id:menu id:menu
width: 200 width: 200
@ -810,15 +810,15 @@ RibbonWindow {
onClicked:menu.popup() onClicked:menu.popup()
} }
RibbonButton{ RibbonButton{
show_bg:false showBg:false
icon_source: RibbonIcons.Apps iconSource: RibbonIcons.Apps
icon_source_filled: RibbonIcons_Filled.Apps iconSourceFilled: RibbonIcons_Filled.Apps
checkable: true checkable: true
tip_text: "Test Button 9" tipText: "Test Button 9"
hover_color: Qt.rgba(0,0,0, 0.3) hoverColor: Qt.rgba(0,0,0, 0.3)
pressed_color: Qt.rgba(0,0,0, 0.4) pressedColor: Qt.rgba(0,0,0, 0.4)
text_color: title_bar.title_text_color textColor: titleBar.titleTextColor
text_color_reverse: false textColorReverse: false
enabled: false enabled: false
} }
} }
@ -843,13 +843,13 @@ RibbonWindow {
implicitHeight: root.height - root.borderWidth * 2 implicitHeight: root.height - root.borderWidth * 2
implicitWidth: root.width - root.borderWidth * 2 implicitWidth: root.width - root.borderWidth * 2
blurEnabled: true blurEnabled: true
blurTarget: root.window_items blurTarget: root.windowItems
radius: borderRadius radius: borderRadius
pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":"head", "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}}, pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}},
{"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":"head", "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}}, {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}},
{"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":"body", "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}}, {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}},
{"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":"tail", "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")}, {"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")},
{"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":"tail", "clickOnly":true, "clickFunc": ()=>root.show_window(Qt.resolvedUrl("about.qml"))}, {"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))},
{"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":"tail", "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}] {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}]
} }
} }

20
example/pages/SettingsMenuPage.qml
View File

@ -31,24 +31,24 @@ RibbonBackStagePage{
ListElement { text: "Dark" } ListElement { text: "Dark" }
ListElement { text: "System" } ListElement { text: "System" }
} }
icon_source: RibbonIcons.DarkTheme iconSource: RibbonIcons.DarkTheme
Component.onCompleted: update_state() Component.onCompleted: update_state()
onActivated: { onActivated: {
if (currentText === "System") if (currentText === "System")
RibbonTheme.theme_mode = RibbonThemeType.System RibbonTheme.themeMode = RibbonThemeType.System
else if (currentText === "Light") else if (currentText === "Light")
RibbonTheme.theme_mode = RibbonThemeType.Light RibbonTheme.themeMode = RibbonThemeType.Light
else else
RibbonTheme.theme_mode = RibbonThemeType.Dark RibbonTheme.themeMode = RibbonThemeType.Dark
} }
Connections{ Connections{
target: RibbonTheme target: RibbonTheme
function onTheme_modeChanged(){ function onThemeModeChanged(){
theme_combo.update_state() theme_combo.update_state()
} }
} }
function update_state(){ function update_state(){
let str = (RibbonTheme.theme_mode === RibbonThemeType.System ? "System" : RibbonTheme.theme_mode === RibbonThemeType.Light ? "Light" : "Dark") let str = (RibbonTheme.themeMode === RibbonThemeType.System ? "System" : RibbonTheme.themeMode === RibbonThemeType.Light ? "Light" : "Dark")
currentIndex = find(str) currentIndex = find(str)
} }
} }
@ -59,9 +59,9 @@ RibbonBackStagePage{
} }
RibbonSwitchButton{ RibbonSwitchButton{
text: qsTr("Style") text: qsTr("Style")
grabber_text: checked ? qsTr("Modern") : qsTr("Classic") grabberText: checked ? qsTr("Modern") : qsTr("Classic")
onClicked: RibbonTheme.modern_style = checked onClicked: RibbonTheme.modernStyle = checked
checked: RibbonTheme.modern_style checked: RibbonTheme.modernStyle
} }
} }
} }
@ -78,7 +78,7 @@ RibbonBackStagePage{
RibbonSwitchButton{ RibbonSwitchButton{
id: render_btn id: render_btn
text: "Render" text: "Render"
grabber_text: RibbonTheme.nativeText ? "Native" : "Qt" grabberText: RibbonTheme.nativeText ? "Native" : "Qt"
checked: true checked: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
onClicked: { onClicked: {

2
lib_source/qml/RibbonBackStageGroup.qml
View File

@ -30,7 +30,7 @@ Item {
} }
height: 1 height: 1
width: parent.width width: parent.width
color: RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" color: RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1"
} }
Rectangle{ Rectangle{

121
lib_source/qml/RibbonBackStageView.qml
View File

@ -8,6 +8,11 @@ Popup {
padding: 0 padding: 0
anchors.centerIn: Overlay.overlay anchors.centerIn: Overlay.overlay
closePolicy: Popup.NoAutoClose closePolicy: Popup.NoAutoClose
enum MenuItemLocation {
Head,
Body,
Tail
}
property bool blurEnabled: false property bool blurEnabled: false
property var blurTarget: control property var blurTarget: control
property bool showBackBtn: true property bool showBackBtn: true
@ -37,14 +42,14 @@ Popup {
id: blur_bg id: blur_bg
anchors.fill: parent anchors.fill: parent
target: blurTarget target: blurTarget
target_rect: Qt.rect(control.x + control.leftMargin, control.y + control.topMargin, control.width, control.height) targetRect: Qt.rect(control.x + control.leftMargin, control.y + control.topMargin, control.width, control.height)
visible: blurEnabled visible: blurEnabled
mask_color: content_bg.color maskColor: content_bg.color
mask_opacity: 0 maskOpacity: 0
blur_radius: 0 blurRadius: 0
radius: control.radius radius: control.radius
Behavior on mask_opacity { Behavior on maskOpacity {
enabled: parent.visible enabled: parent.visible
NumberAnimation { NumberAnimation {
duration: 300 duration: 300
@ -52,7 +57,7 @@ Popup {
} }
} }
Behavior on blur_radius { Behavior on blurRadius {
enabled: parent.visible enabled: parent.visible
NumberAnimation { NumberAnimation {
duration: 300 duration: 300
@ -77,23 +82,23 @@ Popup {
} }
width: 150 width: 150
x: -width x: -width
color: Qt.alpha(RibbonTheme.dark_mode ? "#363636" : RibbonTheme.modern_style ? "white" : "#365695", blurEnabled ? RibbonTheme.modern_style ? 0.8 : 0.9 : 1) color: Qt.alpha(RibbonTheme.isDarkMode ? "#363636" : RibbonTheme.modernStyle ? "white" : "#365695", blurEnabled ? RibbonTheme.modernStyle ? 0.8 : 0.9 : 1)
topLeftRadius: control.topMargin === 0 ? control.radius : 0 topLeftRadius: control.topMargin === 0 ? control.radius : 0
bottomLeftRadius: topLeftRadius bottomLeftRadius: topLeftRadius
property int currentMenu: 0 property int currentMenu: 0
RibbonButton{ RibbonButton{
id: back_btn id: back_btn
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
show_tooltip: false showTooltip: false
text: backText text: backText
font.pixelSize: 30 font.pixelSize: 30
icon_source: RibbonIcons.ArrowCircleLeft iconSource: RibbonIcons.ArrowCircleLeft
implicitWidth: ribbon_icon.width implicitWidth: ribbonIcon.width
implicitHeight: ribbon_icon.height implicitHeight: ribbonIcon.height
text_color: RibbonTheme.modern_style && !RibbonTheme.dark_mode ? "black" : "white" textColor: RibbonTheme.modernStyle && !RibbonTheme.isDarkMode ? "black" : "white"
ribbon_icon.filled: hovered ribbonIcon.filled: hovered
anchors{ anchors{
top: parent.top top: parent.top
topMargin: 30 topMargin: 30
@ -101,9 +106,9 @@ Popup {
leftMargin: 30 leftMargin: 30
} }
visible: showBackBtn visible: showBackBtn
ribbon_icon.icon_size: 30 ribbonIcon.iconSize: 30
ribbon_icon.color: { ribbonIcon.color: {
if (RibbonTheme.modern_style && !RibbonTheme.dark_mode) if (RibbonTheme.modernStyle && !RibbonTheme.isDarkMode)
{ {
if(pressed) if(pressed)
return Qt.alpha("black", 0.8) return Qt.alpha("black", 0.8)
@ -130,11 +135,11 @@ Popup {
property var view: ListView.view property var view: ListView.view
property bool clickOnly: typeof(model.clickOnly) !== 'undefined' ? model.clickOnly : false property bool clickOnly: typeof(model.clickOnly) !== 'undefined' ? model.clickOnly : false
property bool isCurrentMenu: { property bool isCurrentMenu: {
if (item_bg.view.type === "head" && menu_bg.currentMenu === 0) if (item_bg.view.type === RibbonBackStageView.MenuItemLocation.Head && menu_bg.currentMenu === 0)
return true return true
else if (item_bg.view.type === "tail" && menu_bg.currentMenu === 2) else if (item_bg.view.type === RibbonBackStageView.MenuItemLocation.Tail && menu_bg.currentMenu === 2)
return true return true
else if (item_bg.view.type === "body" && menu_bg.currentMenu === 1) else if (item_bg.view.type === RibbonBackStageView.MenuItemLocation.Body && menu_bg.currentMenu === 1)
return true return true
return false return false
} }
@ -142,24 +147,24 @@ Popup {
width: view.width width: view.width
height: item.height + margins * 2 height: item.height + margins * 2
color: { color: {
if(RibbonTheme.modern_style) if(RibbonTheme.modernStyle)
return "transparent" return "transparent"
if(view.currentIndex === index && item_bg.isCurrentMenu) if(view.currentIndex === index && item_bg.isCurrentMenu)
{ {
if(mouse.containsMouse) if(mouse.containsMouse)
{ {
if(mouse.pressed) if(mouse.pressed)
return Qt.alpha(back_btn.text_color, 0.4) return Qt.alpha(back_btn.textColor, 0.4)
return Qt.alpha(back_btn.text_color, 0.3) return Qt.alpha(back_btn.textColor, 0.3)
} }
else else
return Qt.alpha(back_btn.text_color, 0.2) return Qt.alpha(back_btn.textColor, 0.2)
} }
else else
{ {
if(mouse.containsMouse) if(mouse.containsMouse)
{ {
let color = back_btn.text_color === 'black' ? "white" : "black" let color = back_btn.textColor === 'black' ? "white" : "black"
if(mouse.pressed) if(mouse.pressed)
return Qt.alpha(color, 0.3) return Qt.alpha(color, 0.3)
return Qt.alpha(color, 0.2) return Qt.alpha(color, 0.2)
@ -179,12 +184,12 @@ Popup {
radius: width / 2 radius: width / 2
color: { color: {
if (mouse.containsMouse) if (mouse.containsMouse)
return RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" return RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1"
return "transparent" return "transparent"
} }
width: 2 width: 2
height: parent.height - 4 height: parent.height - 4
visible: RibbonTheme.modern_style visible: RibbonTheme.modernStyle
} }
RowLayout{ RowLayout{
@ -198,13 +203,13 @@ Popup {
RibbonIcon{ RibbonIcon{
id :rib_icon id :rib_icon
icon_source: typeof(model.menu_icon) === "number" ? model.menu_icon : 0 iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0
icon_source_filled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : icon_source iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource
icon_size: menu_label.contentHeight iconSize: menu_label.contentHeight
visible: typeof(model.menu_icon) === "number" && model.menu_icon visible: typeof(model.menu_icon) === "number" && model.menu_icon
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu
color: model.menu_icon_color ? model.menu_icon_color : back_btn.text_color color: model.menu_iconColor ? model.menu_iconColor : back_btn.textColor
} }
Image { Image {
id: pic_icon id: pic_icon
@ -218,7 +223,7 @@ Popup {
Text{ Text{
id: menu_label id: menu_label
text: model.menu_text text: model.menu_text
color: !mouse.containsMouse && RibbonTheme.modern_style && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.dark_mode ? "#779CDB" : "#5882BB" : back_btn.text_color color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: 13 font.pixelSize: 13
@ -238,7 +243,7 @@ Popup {
RibbonToolTip{ RibbonToolTip{
id: tooltip id: tooltip
visible: mouse.containsMouse && typeof(model.show_tooltip) != "undefined" ? model.show_tooltip : false visible: mouse.containsMouse && typeof(model.showTooltip) != "undefined" ? model.showTooltip : false
&& typeof(model.tool_text) != "undefined" ? model.tool_text : false && typeof(model.tool_text) != "undefined" ? model.tool_text : false
text: model.tool_text ? model.tool_text : "" text: model.tool_text ? model.tool_text : ""
} }
@ -253,12 +258,12 @@ Popup {
control.pageModel[model.globalIndex].clickFunc() control.pageModel[model.globalIndex].clickFunc()
} }
else{ else{
if (item_bg.view.type === "head") if (item_bg.view.type === RibbonBackStageView.MenuItemLocation.Head)
{ {
menu_bg.currentMenu = 0 menu_bg.currentMenu = 0
ani_modern_border.targetMenu = head_menu_list ani_modern_border.targetMenu = head_menu_list
} }
else if (item_bg.view.type === "tail") else if (item_bg.view.type === RibbonBackStageView.MenuItemLocation.Tail)
{ {
menu_bg.currentMenu = 2 menu_bg.currentMenu = 2
ani_modern_border.targetMenu = tail_menu_list ani_modern_border.targetMenu = tail_menu_list
@ -296,14 +301,14 @@ Popup {
Layout.preferredHeight: contentHeight Layout.preferredHeight: contentHeight
clip: true clip: true
interactive: false interactive: false
property string type: "head" property var type: RibbonBackStageView.MenuItemLocation.Head
} }
Rectangle{ Rectangle{
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: 1 Layout.preferredHeight: 1
Layout.preferredWidth: parent.width - 40 Layout.preferredWidth: parent.width - 40
color: RibbonTheme.modern_style ? RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" :RibbonTheme.dark_mode ? "#B1B1B1" : Qt.alpha("white", 0.2) color: RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1" :RibbonTheme.isDarkMode ? "#B1B1B1" : Qt.alpha("white", 0.2)
visible: body_menu_list.count visible: head_menu_list.count && (body_menu_list.count || tail_menu_list.count)
} }
ListView{ ListView{
id: body_menu_list id: body_menu_list
@ -317,14 +322,14 @@ Popup {
anchors.rightMargin: 2 anchors.rightMargin: 2
} }
clip: true clip: true
property string type: "body" property var type: RibbonBackStageView.MenuItemLocation.Body
} }
Rectangle{ Rectangle{
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: 1 Layout.preferredHeight: 1
Layout.preferredWidth: parent.width - 40 Layout.preferredWidth: parent.width - 40
color: RibbonTheme.modern_style ? RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" :RibbonTheme.dark_mode ? "#B1B1B1" : Qt.alpha("white", 0.2) color: RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1" :RibbonTheme.isDarkMode ? "#B1B1B1" : Qt.alpha("white", 0.2)
visible: tail_menu_list.count visible: (head_menu_list.count || body_menu_list.count) && tail_menu_list.count
} }
ListView{ ListView{
id: tail_menu_list id: tail_menu_list
@ -336,7 +341,7 @@ Popup {
Layout.preferredHeight: contentHeight Layout.preferredHeight: contentHeight
clip: true clip: true
interactive: false interactive: false
property string type: "tail" property var type: RibbonBackStageView.MenuItemLocation.Tail
} }
} }
@ -348,14 +353,14 @@ Popup {
y: list_layout.y + targetMenu.y + (typeof(targetMenu.currentItem) !== 'undefined' && targetMenu.currentItem ? (targetMenu.currentItem.y + 2) : 0) y: list_layout.y + targetMenu.y + (typeof(targetMenu.currentItem) !== 'undefined' && targetMenu.currentItem ? (targetMenu.currentItem.y + 2) : 0)
radius: width / 2 radius: width / 2
color: { color: {
if(RibbonTheme.dark_mode) if(RibbonTheme.isDarkMode)
return "#82ABF1" return "#82ABF1"
else else
return "#1651AA" return "#1651AA"
} }
width: 2 width: 2
height: (typeof(targetMenu.currentItem) !== 'undefined' && targetMenu.currentItem) ? targetMenu.currentItem.height - 4 : 0 height: (typeof(targetMenu.currentItem) !== 'undefined' && targetMenu.currentItem) ? targetMenu.currentItem.height - 4 : 0
visible: RibbonTheme.modern_style visible: RibbonTheme.modernStyle
Behavior on y { Behavior on y {
NumberAnimation { NumberAnimation {
duration: 300 duration: 300
@ -389,7 +394,7 @@ Popup {
} }
topRightRadius: control.topMargin === 0 ? control.radius : 0 topRightRadius: control.topMargin === 0 ? control.radius : 0
bottomRightRadius: topRightRadius bottomRightRadius: topRightRadius
color: Qt.alpha(RibbonTheme.dark_mode ? RibbonTheme.modern_style ? "#0A0A0A" : "#262626" : RibbonTheme.modern_style ? "#F0F0F0" : "white", 0) color: Qt.alpha(RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? "#0A0A0A" : "#262626" : RibbonTheme.modernStyle ? "#F0F0F0" : "white", 0)
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -430,32 +435,32 @@ Popup {
Connections{ Connections{
target: RibbonTheme target: RibbonTheme
function onTheme_modeChanged(){ function onThemeModeChanged(){
refresh() refresh()
} }
} }
function show(){ function show(){
menu_bg.x = 0 menu_bg.x = 0
content_bg.color = Qt.alpha(RibbonTheme.dark_mode ? RibbonTheme.modern_style ? "#0A0A0A" : "#262626" : RibbonTheme.modern_style ? "#F0F0F0" : "white", blurEnabled ? RibbonTheme.modern_style ? 0.95 : 0.9 : 1) content_bg.color = Qt.alpha(RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? "#0A0A0A" : "#262626" : RibbonTheme.modernStyle ? "#F0F0F0" : "white", blurEnabled ? RibbonTheme.modernStyle ? 0.95 : 0.9 : 1)
blur_bg.mask_opacity = blurEnabled ? 0.5 : 1 blur_bg.maskOpacity = blurEnabled ? 0.5 : 1
blur_bg.blur_radius = blurEnabled ? 32 : 0 blur_bg.blurRadius = blurEnabled ? 32 : 0
blur_bg.opacity = 1 blur_bg.opacity = 1
} }
function hide(){ function hide(){
menu_bg.x = -menu_bg.width menu_bg.x = -menu_bg.width
content_bg.color = Qt.alpha(RibbonTheme.dark_mode ? RibbonTheme.modern_style ? "#0A0A0A" : "#262626" : RibbonTheme.modern_style ? "#F0F0F0" : "white", 0) content_bg.color = Qt.alpha(RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? "#0A0A0A" : "#262626" : RibbonTheme.modernStyle ? "#F0F0F0" : "white", 0)
blur_bg.mask_opacity = 0 blur_bg.maskOpacity = 0
blur_bg.blur_radius = 0 blur_bg.blurRadius = 0
blur_bg.opacity = 0 blur_bg.opacity = 0
close() close()
} }
function refresh(){ function refresh(){
content_bg.color = Qt.alpha(RibbonTheme.dark_mode ? RibbonTheme.modern_style ? "#0A0A0A" : "#262626" : RibbonTheme.modern_style ? "#F0F0F0" : "white", blurEnabled ? RibbonTheme.modern_style ? 0.95 : 0.9 : 1) content_bg.color = Qt.alpha(RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? "#0A0A0A" : "#262626" : RibbonTheme.modernStyle ? "#F0F0F0" : "white", blurEnabled ? RibbonTheme.modernStyle ? 0.95 : 0.9 : 1)
blur_bg.mask_opacity = blurEnabled ? 0.5 : 1 blur_bg.maskOpacity = blurEnabled ? 0.5 : 1
blur_bg.blur_radius = blurEnabled ? 32 : 0 blur_bg.blurRadius = blurEnabled ? 32 : 0
blur_bg.opacity = 1 blur_bg.opacity = 1
} }
@ -467,11 +472,11 @@ Popup {
{ {
let item = pageModel[i] let item = pageModel[i]
item['globalIndex'] = i item['globalIndex'] = i
if(pageModel[i].type === 'head') if(pageModel[i].type === RibbonBackStageView.MenuItemLocation.Head)
{ {
head_menu_list.model.append(item) head_menu_list.model.append(item)
} }
else if(pageModel[i].type === 'tail') else if(pageModel[i].type === RibbonBackStageView.MenuItemLocation.Tail)
{ {
tail_menu_list.model.append(item) tail_menu_list.model.append(item)
} }

26
lib_source/qml/RibbonBlur.qml
View File

@ -5,35 +5,35 @@ import RibbonUI
Item { Item {
id: control id: control
property int radius: 0 property int radius: 0
property int blur_radius: 32 property int blurRadius: 32
property alias target: effect.sourceItem property alias target: effect.sourceItem
property rect target_rect : Qt.rect(control.x, control.y, control.width, control.height) property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
property color mask_color: RibbonTheme.dark_mode ? RibbonTheme.modern_style ? '#292929' : "#212629" : RibbonTheme.modern_style ? "#F5F5F5" : "#FFFFFF" property color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF"
property double mask_opacity: 0.5 property real maskOpacity: 0.5
property alias mask_border: mask.border property alias maskBorder: mask.border
property bool use_solid_bg: true property bool useSolidBg: true
ShaderEffectSource { ShaderEffectSource {
id: effect id: effect
anchors.fill: parent anchors.fill: parent
sourceRect: target_rect sourceRect: control.targetRect
sourceItem: target sourceItem: control.target
visible: false visible: false
} }
GaussianBlur{ GaussianBlur{
id: blur id: blur
anchors.fill: parent anchors.fill: parent
radius: blur_radius radius: control.blurRadius
deviation: 8 deviation: 8
samples: (blur_radius / 4) * 3 samples: (control.blurRadius / 4) * 3
source: effect source: effect
visible: false visible: false
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: use_solid_bg ? mask_color : 'transparent' color: control.useSolidBg ? control.maskColor : 'transparent'
radius: control.radius radius: control.radius
OpacityMask { OpacityMask {
anchors.fill: parent anchors.fill: parent
@ -49,8 +49,8 @@ Item {
Rectangle{ Rectangle{
id: mask id: mask
anchors.fill: parent anchors.fill: parent
color: mask_color color: control.maskColor
opacity: mask_opacity opacity: control.maskOpacity
radius: control.radius radius: control.radius
} }
} }

40
lib_source/qml/RibbonBottomBar.qml
View File

@ -7,13 +7,13 @@ Item {
height: 25 height: 25
clip: true clip: true
property alias left_content: left.data property alias leftContent: left.data
property alias right_content: right.data property alias rightContent: right.data
default property alias content: left.data default property alias content: left.data
property bool modern_style: RibbonTheme.modern_style property bool modernStyle: RibbonTheme.modernStyle
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property bool show_version: true property bool showVersion: true
property double bg_opacity: 0.8 property real bgOpacity: 0.8
anchors{ anchors{
left: parent.left left: parent.left
@ -22,23 +22,23 @@ Item {
} }
Rectangle{ Rectangle{
visible: !modern_style visible: !modernStyle
color: "#3D3D3D" color: "#3D3D3D"
anchors.fill: parent anchors.fill: parent
opacity: bg_opacity opacity: bgOpacity
gradient: Gradient { gradient: Gradient {
GradientStop { position: 0.0; color: dark_mode ? "#474949" : "#E4E3E4" } GradientStop { position: 0.0; color: isDarkMode ? "#474949" : "#E4E3E4" }
GradientStop { position: 0.5; color: dark_mode ? "#434444" : "#DFDEDE" } GradientStop { position: 0.5; color: isDarkMode ? "#434444" : "#DFDEDE" }
GradientStop { position: 1.0; color: dark_mode ? "#3D3D3D" : "#D9D9D9" } GradientStop { position: 1.0; color: isDarkMode ? "#3D3D3D" : "#D9D9D9" }
} }
} }
RibbonRectangle{ RibbonRectangle{
visible: modern_style visible: modernStyle
color: dark_mode ? "#141414" : "#F5F5F5" color: isDarkMode ? "#141414" : "#F5F5F5"
opacity: bg_opacity opacity: bgOpacity
anchors.fill: parent anchors.fill: parent
bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.is_win11 ? 7 : 0 : 10 bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
bottomRightRadius: bottomLeftRadius bottomRightRadius: bottomLeftRadius
} }
@ -48,7 +48,7 @@ Item {
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
color: dark_mode ? modern_style ? "#3B3A39":"#282828" : modern_style ? "white":"#A1A2A2" color: isDarkMode ? modernStyle ? "#3B3A39":"#282828" : modernStyle ? "white":"#A1A2A2"
height: 1 height: 1
} }
@ -74,11 +74,11 @@ Item {
} }
layoutDirection: Qt.RightToLeft layoutDirection: Qt.RightToLeft
RibbonButton{ RibbonButton{
visible: show_version visible: showVersion
show_bg:false showBg:false
text: `Designed with RibbonUI V${RibbonUI.version}` text: `Designed with RibbonUI V${RibbonUI.version}`
adapt_height: true adaptHeight: true
show_tooltip: false showTooltip: false
onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI") onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI")
} }
} }

76
lib_source/qml/RibbonButton.qml
View File

@ -5,22 +5,22 @@ import RibbonUI
Button { Button {
id: root id: root
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property bool show_bg: true property bool showBg: true
property bool show_hovered_bg: true property bool showHoveredBg: true
property bool adapt_height: false property bool adaptHeight: false
property bool show_tooltip: true property bool showTooltip: true
property var icon_source property var iconSource
property var icon_source_filled property var iconSourceFilled
property alias image_icon: pic_icon property alias imageIcon: pic_icon
property alias ribbon_icon: rib_icon property alias ribbonIcon: rib_icon
property string bg_color: dark_mode ? "#626262" : "white" property string bgColor: isDarkMode ? "#626262" : "white"
property string hover_color: dark_mode ? show_bg ? "#818181" : "#5E5D5D" : show_bg ? "#ECEAE9" : "#B0B0B1" property string hoverColor: isDarkMode ? showBg ? "#818181" : "#5E5D5D" : showBg ? "#ECEAE9" : "#B0B0B1"
property string pressed_color: dark_mode ? show_bg ? "#424242" : "#5C5C5C" : show_bg ? "#CCCBCB" : "#9D9B9B" property string pressedColor: isDarkMode ? showBg ? "#424242" : "#5C5C5C" : showBg ? "#CCCBCB" : "#9D9B9B"
property string checked_color: pressed_color property string checkedColor: pressedColor
property string text_color: dark_mode ? "white" : "black" property string textColor: isDarkMode ? "white" : "black"
property bool text_color_reverse: true property bool textColorReverse: true
property string tip_text: text property string tipText: text
opacity: enabled ? 1.0 : 0.3 opacity: enabled ? 1.0 : 0.3
padding: 0 padding: 0
leftPadding: 0 leftPadding: 0
@ -29,28 +29,28 @@ Button {
background: Rectangle{ background: Rectangle{
implicitWidth: contentItem.implicitWidth implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight implicitHeight: contentItem.implicitHeight
visible: show_bg visible: showBg
border.color: dark_mode ? "#7F7F7F" : "#D2D1CE" border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE"
border.width: 1 border.width: 1
radius: 3 radius: 3
color: bg_color color: bgColor
} }
contentItem: Item{ contentItem: Item{
implicitWidth: layout.width + 13 implicitWidth: layout.width + 13
implicitHeight: adapt_height?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10 implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
radius: 3 radius: 3
color: { color: {
if (root.pressed) if (root.pressed)
return pressed_color return pressedColor
if (root.hovered) if (root.hovered)
return hover_color return hoverColor
if (root.checked) if (root.checked)
return checked_color return checkedColor
return "transparent" return "transparent"
} }
visible: show_hovered_bg visible: showHoveredBg
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -74,17 +74,17 @@ Button {
RibbonIcon{ RibbonIcon{
id :rib_icon id :rib_icon
icon_source: typeof(root.icon_source) === "number" ? root.icon_source : 0 iconSource: typeof(root.iconSource) === "number" ? root.iconSource : 0
icon_source_filled: typeof(root.icon_source_filled) === "number" ? root.icon_source_filled : icon_source iconSourceFilled: typeof(root.iconSourceFilled) === "number" ? root.iconSourceFilled : iconSource
icon_size: label.contentHeight iconSize: label.contentHeight
visible: typeof(root.icon_source) === "number" visible: typeof(root.iconSource) === "number"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
filled: pressed || checked filled: pressed || checked
color: { color: {
if (!show_bg && (hovered || checked || pressed) && text_color_reverse) if (!showBg && (hovered || checked || pressed) && textColorReverse)
return Qt.lighter(text_color) return Qt.lighter(textColor)
else else
return text_color return textColor
} }
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -95,8 +95,8 @@ Button {
} }
Image { Image {
id: pic_icon id: pic_icon
source: typeof(root.icon_source) === "string" ? root.icon_source : "" source: typeof(root.iconSource) === "string" ? root.iconSource : ""
visible: typeof(root.icon_source) === "string" visible: typeof(root.iconSource) === "string"
fillMode:Image.PreserveAspectFit fillMode:Image.PreserveAspectFit
height: label.contentHeight height: label.contentHeight
width: height width: height
@ -112,16 +112,16 @@ Button {
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
color: { color: {
if (!show_bg && (hovered || checked || pressed) && text_color_reverse) if (!showBg && (hovered || checked || pressed) && textColorReverse)
return Qt.lighter(text_color) return Qt.lighter(textColor)
else else
return text_color return textColor
} }
} }
} }
RibbonToolTip{ RibbonToolTip{
text: tip_text text: tipText
visible: hovered && show_tooltip && text visible: hovered && showTooltip && text
} }
} }
} }

50
lib_source/qml/RibbonCheckBox.qml
View File

@ -11,18 +11,18 @@ Button {
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
checkable: true checkable: true
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property int btn_size: 20 property int btnSize: 20
property string border_color: dark_mode ? "white" : "black" property string borderColor: isDarkMode ? "white" : "black"
property double border_width: 1.4 property real borderWidth: 1.4
property string icon_color: "white" property string iconColor: "white"
property string icon_filled_bg_color: "#2143AB" property string iconFilledBgColor: "#2143AB"
property string text_color: dark_mode ? "white" : "black" property string textColor: isDarkMode ? "white" : "black"
property int text_size: 11 property int textSize: 11
property bool text_bold: false property bool textBold: false
property bool text_on_left: false property bool textOnLeft: false
property bool show_tooltip: false property bool showTooltip: false
property string tip_text: text property string tipText: text
background: Item{} background: Item{}
contentItem: Item{ contentItem: Item{
@ -33,15 +33,15 @@ Button {
id: btn_layout id: btn_layout
property int margins: 4 property int margins: 4
anchors.centerIn: parent anchors.centerIn: parent
layoutDirection: control.text_on_left ? Qt.RightToLeft : Qt.LeftToRight layoutDirection: control.textOnLeft ? Qt.RightToLeft : Qt.LeftToRight
Rectangle { Rectangle {
id: bg id: bg
implicitHeight: control.btn_size implicitHeight: control.btnSize
implicitWidth: implicitHeight implicitWidth: implicitHeight
color: "transparent" color: "transparent"
border{ border{
color: control.border_color color: control.borderColor
width: control.border_width width: control.borderWidth
} }
radius: 4.5 radius: 4.5
Rectangle{ Rectangle{
@ -49,7 +49,7 @@ Button {
anchors.fill: parent anchors.fill: parent
scale: control.hovered || control.pressed ? 0.6 : 1.05 scale: control.hovered || control.pressed ? 0.6 : 1.05
radius: 4.5 radius: 4.5
color: !control.pressed?control.icon_filled_bg_color:Qt.darker(control.icon_filled_bg_color) color: !control.pressed?control.iconFilledBgColor:Qt.darker(control.iconFilledBgColor)
visible: control.hovered || control.pressed || control.checked visible: control.hovered || control.pressed || control.checked
Behavior on scale{ Behavior on scale{
NumberAnimation{ NumberAnimation{
@ -61,16 +61,16 @@ Button {
RibbonIcon{ RibbonIcon{
id: check_icon id: check_icon
anchors.centerIn: bg anchors.centerIn: bg
icon_source: RibbonIcons.Checkmark iconSource: RibbonIcons.Checkmark
icon_source_filled: RibbonIcons_Filled.Checkmark iconSourceFilled: RibbonIcons_Filled.Checkmark
font.pixelSize: bg.height-4 font.pixelSize: bg.height-4
filled: checked filled: checked
visible: control.pressed || control.checked visible: control.pressed || control.checked
color: !control.pressed?control.icon_color:Qt.darker(control.icon_color) color: !control.pressed?control.iconColor:Qt.darker(control.iconColor)
} }
RibbonToolTip{ RibbonToolTip{
text: tip_text text: tipText
visible: hovered && show_tooltip && text visible: hovered && showTooltip && text
} }
} }
Text { Text {
@ -79,11 +79,11 @@ Button {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
font{ font{
family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
pixelSize: control.text_size pixelSize: control.textSize
bold: control.text_bold bold: control.textBold
} }
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
color: text_color color: textColor
visible: text visible: text
} }
} }

54
lib_source/qml/RibbonComboBox.qml
View File

@ -4,10 +4,10 @@ import RibbonUI
ComboBox { ComboBox {
id: control id: control
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property int icon_source property int iconSource
property int component_width: 150 property int componentWidth: 150
property int component_height:20 property int componentHeight:20
property string placeholderText: "Please Choose:" property string placeholderText: "Please Choose:"
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@ -32,16 +32,16 @@ ComboBox {
hoverEnabled: control.hoverEnabled hoverEnabled: control.hoverEnabled
contentItem: RibbonText{ contentItem: RibbonText{
id:label id:label
view_only: true viewOnly: true
text: item.text text: item.text
font.pixelSize: control.font.pixelSize font.pixelSize: control.font.pixelSize
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
color: dark_mode ? "white" : highlighted ? "white" : "black" color: isDarkMode ? "white" : highlighted ? "white" : "black"
} }
background: Rectangle{ background: Rectangle{
implicitWidth: item.width - 10 implicitWidth: item.width - 10
implicitHeight: label.contentHeight + 14 implicitHeight: label.contentHeight + 14
color: !dark_mode ? "#506BBD" : "#2A4299" color: !isDarkMode ? "#506BBD" : "#2A4299"
visible: down || highlighted || visualFocus visible: down || highlighted || visualFocus
radius: 4 radius: 4
} }
@ -51,10 +51,10 @@ ComboBox {
x: control.mirrored ? control.padding : control.width - width - control.padding x: control.mirrored ? control.padding : control.width - width - control.padding
y: control.topPadding + (control.availableHeight - height) / 2 y: control.topPadding + (control.availableHeight - height) / 2
padding: 5 padding: 5
icon_size: 15 iconSize: 15
icon_source: RibbonIcons.ChevronDown iconSource: RibbonIcons.ChevronDown
rotation: control.down ? 180 : 0 rotation: control.down ? 180 : 0
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
Behavior on rotation { Behavior on rotation {
NumberAnimation{ NumberAnimation{
@ -73,7 +73,7 @@ ComboBox {
contentItem: RibbonLineEdit { contentItem: RibbonLineEdit {
id: edit id: edit
leftPadding: (!control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1) + (icon.visible ? icon.contentWidth + padding*2 : 0) leftPadding: (!control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1) + (icon.visible ? icon.contentWidth + padding*2 : 0)
rightPadding: (control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1) + (clear_btn.visible ? clear_btn.width + padding*2 : 0) rightPadding: (control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1) + (clearBtn.visible ? clearBtn.width + padding*2 : 0)
topPadding: 6 - control.padding topPadding: 6 - control.padding
bottomPadding: 6 - control.padding bottomPadding: 6 - control.padding
@ -90,12 +90,12 @@ ComboBox {
opacity: 1 opacity: 1
font: control.font font: control.font
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8"
selectedTextColor: dark_mode ? "white" : "black" selectedTextColor: isDarkMode ? "white" : "black"
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
icon_source: control.icon_source iconSource: control.iconSource
onCommit: { onCommit: {
accepted() accepted()
@ -104,8 +104,8 @@ ComboBox {
background: Rectangle{ background: Rectangle{
visible: control.enabled && control.editable && !control.flat visible: control.enabled && control.editable && !control.flat
radius: 4 radius: 4
implicitHeight: control.component_height implicitHeight: control.componentHeight
implicitWidth: control.component_width-10 implicitWidth: control.componentWidth-10
color: "transparent" color: "transparent"
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -117,20 +117,20 @@ ComboBox {
} }
background: Rectangle { background: Rectangle {
implicitWidth: control.component_width implicitWidth: control.componentWidth
implicitHeight: control.component_height implicitHeight: control.componentHeight
radius: 4 radius: 4
color: { color: {
color: { color: {
if (control.down) if (control.down)
return dark_mode ? "#858585" : "#C9CACA" return isDarkMode ? "#858585" : "#C9CACA"
if (control.hovered) if (control.hovered)
return dark_mode ? "#5A5B5A" : "#E4E4E4" return isDarkMode ? "#5A5B5A" : "#E4E4E4"
return dark_mode ? "#383838" : "#FFFFFF" return isDarkMode ? "#383838" : "#FFFFFF"
} }
} }
RibbonRectangle{ RibbonRectangle{
color: dark_mode ? "#383838" : "#FFFFFF" color: isDarkMode ? "#383838" : "#FFFFFF"
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: parent.border.width anchors.leftMargin: parent.border.width
@ -141,7 +141,7 @@ ComboBox {
height: parent.height - parent.border.width * 2 height: parent.height - parent.border.width * 2
} }
border.color: edit.cursorVisible ? dark_mode ? "#869CCD" : "#486495" : dark_mode ? "#5E5F5E" : "#B9B9B8" border.color: edit.cursorVisible ? isDarkMode ? "#869CCD" : "#486495" : isDarkMode ? "#5E5F5E" : "#B9B9B8"
border.width: 1 border.width: 1
visible: !control.flat || control.down visible: !control.flat || control.down
} }
@ -170,9 +170,9 @@ ComboBox {
background: RibbonBlur{ background: RibbonBlur{
radius: 5 radius: 5
mask_opacity: 1 maskOpacity: 1
mask_border.color: RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5" maskBorder.color: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
mask_border.width: 1 maskBorder.width: 1
} }
enter: Transition { enter: Transition {

16
lib_source/qml/RibbonIcon.qml
View File

@ -3,24 +3,24 @@ import QtQuick.Controls
import RibbonUI import RibbonUI
Text { Text {
property int icon_source property int iconSource
property int icon_size: 20 property int iconSize: 20
property bool filled: false property bool filled: false
property int icon_source_filled property int iconSourceFilled
onIcon_sourceChanged: { onIconSourceChanged: {
if (typeof(icon_source_filled) === 'undefined' || icon_source_filled === icon_source) if (typeof(iconSourceFilled) === 'undefined' || iconSourceFilled === iconSource)
icon_source_filled = icon_source - 1 iconSourceFilled = iconSource - 1
} }
color: "black" color: "black"
id:text_icon id:text_icon
font.family: loader.name font.family: loader.name
font.pixelSize: icon_size font.pixelSize: iconSize
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
text: (String.fromCharCode(filled ? icon_source_filled : icon_source).toString(16)) text: (String.fromCharCode(filled ? iconSourceFilled : iconSource).toString(16))
FontLoader{ FontLoader{
id: loader id: loader

44
lib_source/qml/RibbonLineEdit.qml
View File

@ -6,21 +6,21 @@ import RibbonUI
TextField{ TextField{
id: control id: control
autoScroll:true autoScroll:true
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property int icon_source property int iconSource
property bool show_clear_btn: true property bool showClearBtn: true
property alias clear_btn: clear_btn property alias clearBtn: clearBtn
property alias icon: icon property alias icon: icon
focus: true focus: true
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
padding: 5 padding: 5
leftPadding: icon.visible ? icon.contentWidth + padding*2 : padding leftPadding: icon.visible ? icon.contentWidth + padding*2 : padding
rightPadding: clear_btn.visible ? clear_btn.width + padding*2 : padding rightPadding: clearBtn.visible ? clearBtn.width + padding*2 : padding
placeholderText: qsTr("Please input:") placeholderText: qsTr("Please input:")
placeholderTextColor: dark_mode ? Qt.rgba(255,255,255,0.5) : Qt.rgba(0,0,0,0.5) placeholderTextColor: isDarkMode ? Qt.rgba(255,255,255,0.5) : Qt.rgba(0,0,0,0.5)
selectByMouse: true selectByMouse: true
selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8"
selectedTextColor: dark_mode ? "white" : "black" selectedTextColor: isDarkMode ? "white" : "black"
opacity: enabled ? 1.0 : 0.3 opacity: enabled ? 1.0 : 0.3
signal commit() signal commit()
width:150 width:150
@ -31,8 +31,8 @@ TextField{
radius: 4 radius: 4
implicitHeight: 20 implicitHeight: 20
implicitWidth: 150 implicitWidth: 150
color: dark_mode ? "#383838" : "#FFFFFF" color: isDarkMode ? "#383838" : "#FFFFFF"
border.color: control.cursorVisible ? dark_mode ? "#869CCD" : "#486495" : dark_mode ? "#5E5F5E" : "#B9B9B8" border.color: control.cursorVisible ? isDarkMode ? "#869CCD" : "#486495" : isDarkMode ? "#5E5F5E" : "#B9B9B8"
border.width: 1 border.width: 1
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -52,7 +52,7 @@ TextField{
} }
RibbonTextBoxMenu{ RibbonTextBoxMenu{
id:menu id:menu
input_item: control inputItem: control
} }
RibbonIcon{ RibbonIcon{
id: icon id: icon
@ -61,10 +61,10 @@ TextField{
leftMargin: parent.padding leftMargin: parent.padding
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
icon_source: parent.icon_source iconSource: parent.iconSource
icon_size: parent.height - parent.padding iconSize: parent.height - parent.padding
visible: icon_source visible: iconSource
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -73,19 +73,19 @@ TextField{
} }
} }
RibbonButton{ RibbonButton{
id: clear_btn id: clearBtn
anchors{ anchors{
right: parent.right right: parent.right
rightMargin: parent.padding rightMargin: parent.padding
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
tip_text: qsTr("Clear") tipText: qsTr("Clear")
icon_source: RibbonIcons.Dismiss iconSource: RibbonIcons.Dismiss
height: parent.height - parent.padding height: parent.height - parent.padding
width: height width: height
visible: parent.text&&show_clear_btn&&control.cursorVisible visible: parent.text&&showClearBtn&&control.cursorVisible
onClicked: parent.clear() onClicked: parent.clear()
} }
} }

10
lib_source/qml/RibbonMenu.qml
View File

@ -10,8 +10,8 @@ Menu {
contentHeight + topPadding + bottomPadding)) contentHeight + topPadding + bottomPadding))
overlap: 1 overlap: 1
padding: 5 padding: 5
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property string bg_color: !dark_mode ? "#E8E9E9" : "#303131" property string bgColor: !isDarkMode ? "#E8E9E9" : "#303131"
enter: Transition { enter: Transition {
NumberAnimation { NumberAnimation {
property: "opacity" property: "opacity"
@ -47,11 +47,11 @@ Menu {
implicitHeight: 20 implicitHeight: 20
layer.enabled: true layer.enabled: true
layer.effect: RibbonShadow{ layer.effect: RibbonShadow{
shadow_color: "black" shadowColor: "black"
} }
border.color: dark_mode ? "#5C5D5D" : "#B5B4B5" border.color: isDarkMode ? "#5C5D5D" : "#B5B4B5"
border.width: 1 border.width: 1
color: bg_color color: bgColor
radius: 4 radius: 4
} }
} }

54
lib_source/qml/RibbonMenuItem.qml
View File

@ -5,15 +5,15 @@ import RibbonUI
MenuItem { MenuItem {
id: control id: control
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property var icon_source property var iconSource
property var icon_source_filled property var iconSourceFilled
property bool show_tooltip: label.contentWidth < label.implicitWidth property bool showTooltip: label.contentWidth < label.implicitWidth
property alias image_icon: pic_icon property alias imageIcon: pic_icon
property alias ribbon_icon: rib_icon property alias ribbonIcon: rib_icon
property string bg_color: !dark_mode ? "#E8E9E9" : "#303131" property string bgColor: !isDarkMode ? "#E8E9E9" : "#303131"
property string hover_color: !dark_mode ? "#506BBD" : "#2A4299" property string hoverColor: !isDarkMode ? "#506BBD" : "#2A4299"
property string text_color: dark_mode ? "white" : hovered ? "white" : "black" property string textColor: isDarkMode ? "white" : hovered ? "white" : "black"
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: visible ? Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: visible ? Math.max(implicitBackgroundHeight + topInset + bottomInset,
@ -32,20 +32,20 @@ MenuItem {
y: control.topPadding + (control.availableHeight - height) / 2 y: control.topPadding + (control.availableHeight - height) / 2
visible: control.checkable || control.checked visible: control.checkable || control.checked
filled: control.hovered || control.pressed filled: control.hovered || control.pressed
icon_source: control.checked ? RibbonIcons.CheckmarkCircle : RibbonIcons.Circle iconSource: control.checked ? RibbonIcons.CheckmarkCircle : RibbonIcons.Circle
icon_source_filled: control.checked ? RibbonIcons_Filled.CheckmarkCircle : RibbonIcons_Filled.Circle iconSourceFilled: control.checked ? RibbonIcons_Filled.CheckmarkCircle : RibbonIcons_Filled.Circle
color: text_color color: textColor
icon_size: label.contentHeight iconSize: label.contentHeight
} }
arrow: RibbonIcon { arrow: RibbonIcon {
x: control.mirrored ? control.padding : control.width - width - control.padding x: control.mirrored ? control.padding : control.width - width - control.padding
y: control.topPadding + (control.availableHeight - height) / 2 y: control.topPadding + (control.availableHeight - height) / 2
color: text_color color: textColor
visible: control.subMenu visible: control.subMenu
icon_source: RibbonIcons.ChevronCircleRight iconSource: RibbonIcons.ChevronCircleRight
icon_source_filled: RibbonIcons_Filled.ChevronCircleRight iconSourceFilled: RibbonIcons_Filled.ChevronCircleRight
icon_size: label.contentHeight iconSize: label.contentHeight
} }
contentItem: Item{ contentItem: Item{
@ -66,18 +66,18 @@ MenuItem {
RibbonIcon{ RibbonIcon{
id :rib_icon id :rib_icon
icon_source: typeof(control.icon_source) === "number" ? control.icon_source : 0 iconSource: typeof(control.iconSource) === "number" ? control.iconSource : 0
icon_source_filled: typeof(control.icon_source_filled) === "number" ? control.icon_source_filled : icon_source iconSourceFilled: typeof(control.iconSourceFilled) === "number" ? control.iconSourceFilled : iconSource
icon_size: label.contentHeight iconSize: label.contentHeight
visible: typeof(control.icon_source) === "number" && control.icon_source visible: typeof(control.iconSource) === "number" && control.iconSource
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
filled: pressed || checked filled: pressed || checked
color: text_color color: textColor
} }
Image { Image {
id: pic_icon id: pic_icon
source: typeof(control.icon_source) === "string" ? control.icon_source : "" source: typeof(control.iconSource) === "string" ? control.iconSource : ""
visible: typeof(control.icon_source) === "string" visible: typeof(control.iconSource) === "string"
fillMode:Image.PreserveAspectFit fillMode:Image.PreserveAspectFit
height: label.contentHeight height: label.contentHeight
width: height width: height
@ -91,7 +91,7 @@ MenuItem {
font.pixelSize: 13 font.pixelSize: 13
elide: Text.ElideRight elide: Text.ElideRight
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
color: text_color color: textColor
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
Layout.preferredWidth:{ Layout.preferredWidth:{
let w = 0 let w = 0
@ -103,7 +103,7 @@ MenuItem {
} }
RibbonToolTip{ RibbonToolTip{
id: tooltip id: tooltip
visible: hovered && show_tooltip && control.text visible: hovered && showTooltip && control.text
text: control.text text: control.text
} }
} }
@ -120,7 +120,7 @@ MenuItem {
clip: visible clip: visible
radius: 4 radius: 4
color: control.hovered ?hover_color : bg_color color: control.hovered ?hoverColor : bgColor
} }
} }
} }

4
lib_source/qml/RibbonMenuSeparator.qml
View File

@ -4,8 +4,8 @@ import RibbonUI
MenuSeparator { MenuSeparator {
id: control id: control
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property string color: dark_mode ? "#4A4B4C" : "#D1D2D2" property string color: isDarkMode ? "#4A4B4C" : "#D1D2D2"
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,

24
lib_source/qml/RibbonMessage.qml
View File

@ -6,11 +6,11 @@ import RibbonUI
Rectangle{ Rectangle{
id: bubble id: bubble
color: "transparent" color: "transparent"
property double padding: 10 property real padding: 10
default property alias content: message_layout.data default property alias content: message_layout.data
property var data_model: model property var dataModel: model
property int font_size: 13 property int fontSize: 13
property string sender_text: "sender" property string senderText: "sender"
width: ListView.view.width width: ListView.view.width
height: bubble_layout.height + padding*2 height: bubble_layout.height + padding*2
@ -20,9 +20,9 @@ Rectangle{
top: parent.top top: parent.top
topMargin: parent.padding topMargin: parent.padding
} }
layoutDirection: data_model.recieved ? Qt.LeftToRight : Qt.RightToLeft layoutDirection: dataModel.recieved ? Qt.LeftToRight : Qt.RightToLeft
Component.onCompleted: { Component.onCompleted: {
if (data_model.recieved) if (dataModel.recieved)
{ {
anchors.left = parent.left anchors.left = parent.left
anchors.leftMargin = parent.padding anchors.leftMargin = parent.padding
@ -33,19 +33,19 @@ Rectangle{
} }
} }
RibbonText{ RibbonText{
id: sender_text id: senderText
text: bubble.sender_text text: bubble.senderText
padding: bubble.padding padding: bubble.padding
color: RibbonTheme.dark_mode ? "white" : "black" color: RibbonTheme.isDarkMode ? "white" : "black"
} }
RibbonRectangle{ RibbonRectangle{
id: bubble_bg id: bubble_bg
color: data_model.recieved ? RibbonTheme.dark_mode ? "#202020" : "#FFFFFF" : RibbonTheme.dark_mode ? "#2F2F2F" : "#4397F7" color: dataModel.recieved ? RibbonTheme.isDarkMode ? "#202020" : "#FFFFFF" : RibbonTheme.isDarkMode ? "#2F2F2F" : "#4397F7"
height: message_layout.height + bubble.padding*2 height: message_layout.height + bubble.padding*2
width: message_layout.width + bubble.padding*2 width: message_layout.width + bubble.padding*2
radius: 10 radius: 10
topLeftRadius: data_model.recieved ? 2 : bubble.padding topLeftRadius: dataModel.recieved ? 2 : bubble.padding
topRightRadius: !data_model.recieved ? 2 : bubble.padding topRightRadius: !dataModel.recieved ? 2 : bubble.padding
ColumnLayout{ ColumnLayout{
id: message_layout id: message_layout
anchors.centerIn: parent anchors.centerIn: parent

24
lib_source/qml/RibbonMessageListView.qml
View File

@ -7,25 +7,25 @@ RibbonView{
id: view id: view
spacing: 0 spacing: 0
property int max_msg_num: 10 property int maxMsgNum: 10
property bool auto_scroll_to_bottom: false property bool autoScrollToBottom: false
property int animation_time: 200 property int animationTime: 200
property alias delegate: message_list.delegate property alias delegate: message_list.delegate
property alias message_model: message_model property alias messageModel: messageModel
property alias view: message_list property alias view: message_list
ListModel{ ListModel{
id: message_model id: messageModel
onCountChanged: auto_scroll_btn_timer.restart() onCountChanged: auto_scroll_btn_timer.restart()
} }
Timer{ Timer{
id: auto_scroll_btn_timer id: auto_scroll_btn_timer
interval: animation_time interval: animationTime
repeat: false repeat: false
onTriggered: { onTriggered: {
if(view.auto_scroll_to_bottom) if(view.autoScrollToBottom)
view.scroll_to_bottom() view.scrollToBottom()
} }
} }
@ -35,12 +35,12 @@ RibbonView{
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: parent.height Layout.preferredHeight: parent.height
Layout.preferredWidth: parent.width Layout.preferredWidth: parent.width
model: message_model model: messageModel
add: Transition { add: Transition {
NumberAnimation { NumberAnimation {
properties: "y" properties: "y"
from: message_list.height from: message_list.height
duration: animation_time duration: animationTime
} }
} }
ScrollBar.vertical: RibbonScrollBar { ScrollBar.vertical: RibbonScrollBar {
@ -49,11 +49,11 @@ RibbonView{
} }
} }
function scroll_to_up(){ function scrollToUp(){
message_list.positionViewAtBeginning() message_list.positionViewAtBeginning()
} }
function scroll_to_bottom(){ function scrollToBottom(){
message_list.positionViewAtEnd() message_list.positionViewAtEnd()
} }

20
lib_source/qml/RibbonPaperView.qml
View File

@ -5,9 +5,9 @@ import RibbonUI
RibbonView { RibbonView {
id: control id: control
property int page_width: width * 0.7 property int pageWidth: width * 0.7
property int page_height: container.height + page_margin*2 property int pageHeight: container.height + pageMargin*2
property int page_margin: 50 property int pageMargin: 50
default property alias content: container.data default property alias content: container.data
Flickable{ Flickable{
id:flickview id:flickview
@ -24,18 +24,18 @@ RibbonView {
id: container_bg id: container_bg
anchors{ anchors{
top: parent.top top: parent.top
topMargin: modern_style ? 20 : 30 topMargin: modernStyle ? 20 : 30
bottomMargin: modern_style ? 20 : 30 bottomMargin: modernStyle ? 20 : 30
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
} }
radius: modern_style ? 10 : 5 radius: modernStyle ? 10 : 5
color: dark_mode ? "#262626" : "white" color: isDarkMode ? "#262626" : "white"
implicitWidth: control.page_width implicitWidth: control.pageWidth
implicitHeight: control.page_height implicitHeight: control.pageHeight
layer.enabled: true layer.enabled: true
layer.effect: RibbonShadow { layer.effect: RibbonShadow {
id: effect id: effect
shadow_opacity:modern_style ? 0.2 : 0.5 shadowOpacity:modernStyle ? 0.2 : 0.5
} }
ColumnLayout{ ColumnLayout{
id:container id:container

58
lib_source/qml/RibbonPopup.qml
View File

@ -11,14 +11,14 @@ Popup {
modal: true modal: true
anchors.centerIn: Overlay.overlay anchors.centerIn: Overlay.overlay
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
property bool show_close_btn: true property bool showCloseBtn: true
property bool blur_enabled: false property bool blurEnabled: false
property alias target: blur.target property alias target: blur.target
property alias target_rect: blur.target_rect property alias targetRect: blur.targetRect
property alias radius: blur.radius property alias radius: blur.radius
property string content_source: "" property string contentSource: ""
property var content_items: undefined property var contentItems: undefined
property bool destroy_after_close: true property bool destroyAfterClose: true
enter: Transition { enter: Transition {
NumberAnimation { NumberAnimation {
@ -56,10 +56,10 @@ Popup {
RectangularGlow { RectangularGlow {
id: effect id: effect
anchors.fill: blur anchors.fill: blur
anchors.margins: blur.mask_border.width anchors.margins: blur.maskBorder.width
glowRadius: 20 glowRadius: 20
spread: 0 spread: 0
color: RibbonTheme.dark_mode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45) color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
cornerRadius: blur.radius + glowRadius + 10 cornerRadius: blur.radius + glowRadius + 10
} }
RibbonBlur{ RibbonBlur{
@ -67,11 +67,11 @@ Popup {
implicitWidth: parent.width implicitWidth: parent.width
id: blur id: blur
radius: 20 radius: 20
mask_opacity: blur_enabled ? 0.9 : 1 maskOpacity: blurEnabled ? 0.9 : 1
mask_border.color: RibbonTheme.modern_style ? maskBorder.color: RibbonTheme.modernStyle ?
RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" : RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5" RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
mask_border.width: 1 maskBorder.width: 1
} }
} }
contentItem: Item{ contentItem: Item{
@ -86,18 +86,18 @@ Popup {
right:parent.right right:parent.right
rightMargin: anchors.topMargin rightMargin: anchors.topMargin
} }
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
icon_source: RibbonIcons.Dismiss iconSource: RibbonIcons.Dismiss
onClicked: popup.close_content() onClicked: popup.closeContent()
visible: show_close_btn visible: showCloseBtn
} }
Loader{ Loader{
id: container id: container
width: item ? item.implicitWidth : 0 width: item ? item.implicitWidth : 0
height: item ? item.implicitHeight : 0 height: item ? item.implicitHeight : 0
sourceComponent: content_source ? undefined : content_items sourceComponent: contentSource ? undefined : contentItems
source: content_source source: contentSource
onLoaded: { onLoaded: {
if (!control.args) if (!control.args)
return return
@ -118,28 +118,28 @@ Popup {
Overlay.modeless:Rectangle{ Overlay.modeless:Rectangle{
color:"transparent" color:"transparent"
} }
onClosed: free_content() onClosed: freeContent()
function show_content(content, args){ function showContent(content, args){
popup.contentItem.args = args popup.contentItem.args = args
if (content instanceof Component) if (content instanceof Component)
{ {
content_items = content contentItems = content
content.parent = popup content.parent = popup
} }
else else
{ {
content_source = content contentSource = content
} }
open() open()
} }
function close_content(){ function closeContent(){
close() close()
} }
function free_content(){ function freeContent(){
if (destroy_after_close) if (destroyAfterClose)
{ {
content_source = "" contentSource = ""
content_items = undefined contentItems = undefined
} }
} }
} }

56
lib_source/qml/RibbonPopupDialog.qml
View File

@ -11,9 +11,9 @@ RibbonPopup {
property string neutralText: "Neutral" property string neutralText: "Neutral"
property string negativeText: "Negative" property string negativeText: "Negative"
property string positiveText: "Positive" property string positiveText: "Positive"
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property int content_margins: 20 property int contentMargins: 20
show_close_btn: false showCloseBtn: false
radius: 5 radius: 5
signal neutralClicked signal neutralClicked
signal negativeClicked signal negativeClicked
@ -31,14 +31,14 @@ RibbonPopup {
id:text_title id:text_title
font.pixelSize: 24 font.pixelSize: 24
text:title text:title
view_only: true viewOnly: true
topPadding: content_margins * 3 / 4 topPadding: contentMargins * 3 / 4
leftPadding: content_margins leftPadding: contentMargins
rightPadding: content_margins rightPadding: contentMargins
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
color: RibbonTheme.modern_style ? color: RibbonTheme.modernStyle ?
dark_mode ? '#8AAAEB' : '#2C59B7' : isDarkMode ? '#8AAAEB' : '#2C59B7' :
dark_mode ? "white" : "black" isDarkMode ? "white" : "black"
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors{ anchors{
top:parent.top top:parent.top
@ -52,11 +52,11 @@ RibbonPopup {
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text:message text:message
view_only: true viewOnly: true
topPadding: content_margins * 3 / 4 topPadding: contentMargins * 3 / 4
leftPadding: content_margins leftPadding: contentMargins
rightPadding: content_margins rightPadding: contentMargins
bottomPadding: content_margins * 3 / 4 bottomPadding: contentMargins * 3 / 4
anchors{ anchors{
top:text_title.bottom top:text_title.bottom
left: parent.left left: parent.left
@ -71,7 +71,7 @@ RibbonPopup {
} }
height: 1 height: 1
width: parent.width - 4 width: parent.width - 4
color: control.dark_mode ? "#666666" : "#D1D1D1" color: control.isDarkMode ? "#666666" : "#D1D1D1"
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -82,23 +82,23 @@ RibbonPopup {
RowLayout{ RowLayout{
id:layout_actions id:layout_actions
anchors{ anchors{
topMargin: content_margins * 3 / 4 topMargin: contentMargins * 3 / 4
left: parent.left left: parent.left
leftMargin: content_margins leftMargin: contentMargins
right: parent.right right: parent.right
rightMargin: content_margins rightMargin: contentMargins
bottom: parent.bottom bottom: parent.bottom
bottomMargin: content_margins * 3 / 4 bottomMargin: contentMargins * 3 / 4
} }
height: 30 height: 30
spacing: content_margins spacing: contentMargins
RibbonButton{ RibbonButton{
id:negative_btn id:negative_btn
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
visible: control.buttonFlags&RibbonPopupDialogType.NegativeButton visible: control.buttonFlags&RibbonPopupDialogType.NegativeButton
text: negativeText text: negativeText
show_tooltip: false showTooltip: false
onClicked: { onClicked: {
negativeClicked() negativeClicked()
control.close() control.close()
@ -110,7 +110,7 @@ RibbonPopup {
Layout.fillHeight: true Layout.fillHeight: true
visible: control.buttonFlags&RibbonPopupDialogType.NeutralButton visible: control.buttonFlags&RibbonPopupDialogType.NeutralButton
text: neutralText text: neutralText
show_tooltip: false showTooltip: false
onClicked: { onClicked: {
neutralClicked() neutralClicked()
control.close() control.close()
@ -122,11 +122,11 @@ RibbonPopup {
Layout.fillHeight: true Layout.fillHeight: true
visible: control.buttonFlags&RibbonPopupDialogType.PositiveButton visible: control.buttonFlags&RibbonPopupDialogType.PositiveButton
text: positiveText text: positiveText
show_tooltip: false showTooltip: false
bg_color: dark_mode ? "#8AAAEB" : "#2C59B7" bgColor: isDarkMode ? "#8AAAEB" : "#2C59B7"
text_color: "white" textColor: "white"
hover_color: dark_mode ? Qt.rgba(255, 255, 255, 0.3) : Qt.rgba(0, 0, 0, 0.3) hoverColor: isDarkMode ? Qt.rgba(255, 255, 255, 0.3) : Qt.rgba(0, 0, 0, 0.3)
pressed_color: dark_mode ? Qt.rgba(255, 255, 255, 0.5) : Qt.rgba(0,0,0, 0.5) pressedColor: isDarkMode ? Qt.rgba(255, 255, 255, 0.5) : Qt.rgba(0,0,0, 0.5)
onClicked: { onClicked: {
positiveClicked() positiveClicked()
control.close() control.close()

58
lib_source/qml/RibbonPushButton.qml
View File

@ -5,17 +5,17 @@ import RibbonUI
Item { Item {
id: root id: root
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property bool show_tooltip: true property bool showTooltip: true
property var icon_source property var iconSource
property string hover_color: dark_mode ? "#414140" : "#D8D9D9" property string hoverColor: isDarkMode ? "#414140" : "#D8D9D9"
property string pressed_color: dark_mode ? "#5B5B5C" : "#BCBCBC" property string pressedColor: isDarkMode ? "#5B5B5C" : "#BCBCBC"
property string buddy_hover_color: dark_mode ? "#383838" : "#E1E1E1" property string buddyHoverColor: isDarkMode ? "#383838" : "#E1E1E1"
property string text_color: dark_mode ? "white" : "black" property string textColor: isDarkMode ? "white" : "black"
property string tip_text: text property string tipText: text
property string text property string text
default property alias content: m.contentData default property alias content: m.contentData
property int icon_size: Math.floor(height * 0.7) property int iconSize: Math.floor(height * 0.7)
signal clicked() signal clicked()
opacity: enabled ? 1.0 : 0.3 opacity: enabled ? 1.0 : 0.3
implicitHeight: 50 implicitHeight: 50
@ -38,29 +38,29 @@ Item {
implicitHeight: root.height - label.contentHeight implicitHeight: root.height - label.contentHeight
color: { color: {
if (left_th.pressed) if (left_th.pressed)
return pressed_color return pressedColor
if (left_hh.hovered) if (left_hh.hovered)
return hover_color return hoverColor
if (right_hh.hovered) if (right_hh.hovered)
return buddy_hover_color return buddyHoverColor
return "transparent" return "transparent"
} }
RibbonIcon{ RibbonIcon{
id :rib_icon id :rib_icon
anchors.centerIn: parent anchors.centerIn: parent
icon_source: typeof(root.icon_source) === "number" ? root.icon_source : 0 iconSource: typeof(root.iconSource) === "number" ? root.iconSource : 0
icon_source_filled: typeof(root.icon_source) === "number" ? root.icon_source - 1 : 0 iconSourceFilled: typeof(root.iconSource) === "number" ? root.iconSource - 1 : 0
icon_size: root.icon_size iconSize: root.iconSize
visible: typeof(root.icon_source) === "number" visible: typeof(root.iconSource) === "number"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
filled: left_th.pressed filled: left_th.pressed
color: text_color color: textColor
} }
Image { Image {
id: pic_icon id: pic_icon
anchors.centerIn: parent anchors.centerIn: parent
source: typeof(root.icon_source) === "string" ? root.icon_source : "" source: typeof(root.iconSource) === "string" ? root.iconSource : ""
visible: typeof(root.icon_source) === "string" visible: typeof(root.iconSource) === "string"
fillMode:Image.PreserveAspectFit fillMode:Image.PreserveAspectFit
height: left.height height: left.height
width: height width: height
@ -83,21 +83,21 @@ Item {
visible: m.count visible: m.count
color: { color: {
if (right_th.pressed||m.opened) if (right_th.pressed||m.opened)
return pressed_color return pressedColor
if (right_hh.hovered) if (right_hh.hovered)
return hover_color return hoverColor
if (left_hh.hovered) if (left_hh.hovered)
return buddy_hover_color return buddyHoverColor
return "transparent" return "transparent"
} }
RibbonIcon{ RibbonIcon{
anchors.centerIn: parent anchors.centerIn: parent
icon_source: RibbonIcons.ChevronDown iconSource: RibbonIcons.ChevronDown
icon_source_filled: RibbonIcons.ChevronDown - 1 iconSourceFilled: RibbonIcons.ChevronDown - 1
icon_size: 15 iconSize: 15
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
filled: right_th.pressed filled: right_th.pressed
color: text_color color: textColor
} }
HoverHandler{ HoverHandler{
id: right_hh id: right_hh
@ -121,12 +121,12 @@ Item {
font.pixelSize: 12 font.pixelSize: 12
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
color: text_color color: textColor
} }
RibbonToolTip{ RibbonToolTip{
text: tip_text text: tipText
visible: (left_hh.hovered || right_hh.hovered)&& show_tooltip && text visible: (left_hh.hovered || right_hh.hovered)&& showTooltip && text
} }
RibbonMenu{ RibbonMenu{

28
lib_source/qml/RibbonScrollBar.qml
View File

@ -20,7 +20,7 @@ ScrollBar {
implicitHeight: control.hovered || control.pressed ? 8 : 4 implicitHeight: control.hovered || control.pressed ? 8 : 4
visible: control.size < 1.0 visible: control.size < 1.0
radius: width / 2 radius: width / 2
color: RibbonTheme.dark_mode ? hover_handler.hovered ? '#D6D6D6' : hover_handler.hovered && control.pressed ? '#E5E5E5' : '#999999' color: RibbonTheme.isDarkMode ? hover_handler.hovered ? '#D6D6D6' : hover_handler.hovered && control.pressed ? '#E5E5E5' : '#999999'
: hover_handler.hovered ? '#424242' : hover_handler.hovered && control.pressed ? '#333333' : '#707070' : hover_handler.hovered ? '#424242' : hover_handler.hovered && control.pressed ? '#333333' : '#707070'
opacity: 0.0 opacity: 0.0
@ -66,7 +66,7 @@ ScrollBar {
background: Rectangle{ background: Rectangle{
implicitWidth: control.hovered || control.pressed ? 18 : 0 implicitWidth: control.hovered || control.pressed ? 18 : 0
implicitHeight: control.hovered || control.pressed ? 18 : 0 implicitHeight: control.hovered || control.pressed ? 18 : 0
color: RibbonTheme.dark_mode ? '#141414' : '#F5F5F5' color: RibbonTheme.isDarkMode ? '#141414' : '#F5F5F5'
opacity: 0.0 opacity: 0.0
radius: implicitWidth / 2 radius: implicitWidth / 2
visible: control.contentItem.visible visible: control.contentItem.visible
@ -95,14 +95,14 @@ ScrollBar {
id: decrease_btn id: decrease_btn
width: control.vertical ? control.contentItem.width : control.contentItem.height width: control.vertical ? control.contentItem.width : control.contentItem.height
height: width height: width
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
icon_source: control.vertical ? RibbonIcons.CaretUp : RibbonIcons.CaretLeft iconSource: control.vertical ? RibbonIcons.CaretUp : RibbonIcons.CaretLeft
onClicked: control.decrease() onClicked: control.decrease()
Component.onCompleted: setup() Component.onCompleted: setup()
ribbon_icon.filled: true ribbonIcon.filled: true
ribbon_icon.icon_size: 15 ribbonIcon.iconSize: 15
ribbon_icon.color: RibbonTheme.dark_mode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999' ribbonIcon.color: RibbonTheme.isDarkMode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999'
: hovered ? '#424242' : pressed ? '#333333' : '#707070' : hovered ? '#424242' : pressed ? '#333333' : '#707070'
Connections{ Connections{
target: control target: control
@ -135,14 +135,14 @@ ScrollBar {
id: increase_btn id: increase_btn
width: control.vertical ? control.contentItem.width : control.contentItem.height width: control.vertical ? control.contentItem.width : control.contentItem.height
height: width height: width
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
icon_source: control.vertical ? RibbonIcons.CaretDown : RibbonIcons.CaretRight iconSource: control.vertical ? RibbonIcons.CaretDown : RibbonIcons.CaretRight
onClicked: control.increase() onClicked: control.increase()
Component.onCompleted: setup() Component.onCompleted: setup()
ribbon_icon.filled: true ribbonIcon.filled: true
ribbon_icon.icon_size: 15 ribbonIcon.iconSize: 15
ribbon_icon.color: RibbonTheme.dark_mode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999' ribbonIcon.color: RibbonTheme.isDarkMode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999'
: hovered ? '#424242' : pressed ? '#333333' : '#707070' : hovered ? '#424242' : pressed ? '#333333' : '#707070'
Connections{ Connections{
target: control target: control

4
lib_source/qml/RibbonScrollIndicator.qml
View File

@ -16,7 +16,7 @@ ScrollIndicator {
implicitWidth: control.hovered ? 8 : 4 implicitWidth: control.hovered ? 8 : 4
implicitHeight: control.hovered ? 8 : 4 implicitHeight: control.hovered ? 8 : 4
color: RibbonTheme.dark_mode ? '#999999' : '#707070' color: RibbonTheme.isDarkMode ? '#999999' : '#707070'
visible: control.size < 1.0 visible: control.size < 1.0
opacity: 0.0 opacity: 0.0
radius: implicitWidth / 2 radius: implicitWidth / 2
@ -60,7 +60,7 @@ ScrollIndicator {
background: Rectangle{ background: Rectangle{
implicitWidth: control.hovered ? 18 : 0 implicitWidth: control.hovered ? 18 : 0
implicitHeight: control.hovered ? 18 : 0 implicitHeight: control.hovered ? 18 : 0
color: RibbonTheme.dark_mode ? '#141414' : '#F5F5F5' color: RibbonTheme.isDarkMode ? '#141414' : '#F5F5F5'
opacity: 0.0 opacity: 0.0
radius: implicitWidth / 2 radius: implicitWidth / 2
visible: control.contentItem.visible visible: control.contentItem.visible

6
lib_source/qml/RibbonShadow.qml
View File

@ -3,10 +3,10 @@ import Qt5Compat.GraphicalEffects
import RibbonUI import RibbonUI
DropShadow { DropShadow {
property double shadow_opacity: 0.2 property real shadowOpacity: 0.2
property color shadow_color: RibbonTheme.dark_mode ? "white" : "black" property color shadowColor: RibbonTheme.isDarkMode ? "white" : "black"
transparentBorder: true transparentBorder: true
color: Qt.rgba(shadow_color.r,shadow_color.g,shadow_color.b,shadow_opacity) color: Qt.rgba(shadowColor.r,shadowColor.g,shadowColor.b,shadowOpacity)
radius: 8 radius: 8
horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 0 verticalOffset: 0

72
lib_source/qml/RibbonSlider.qml
View File

@ -6,15 +6,15 @@ import RibbonUI
Item { Item {
id: control id: control
height: horizontal ? container.implicitHeight : container.implicitWidth height: horizontal ? container.implicitHeight : container.implicitWidth
width: horizontal ? container.implicitWidth : show_button ? Math.max(container.implicitHeight,subtract_button.width,add_button.width) : container.implicitHeight width: horizontal ? container.implicitWidth : showButton ? Math.max(container.implicitHeight,subtract_button.width,add_button.width) : container.implicitHeight
property bool show_tooltip: true property bool showTooltip: true
property bool show_filled_color: true property bool showFilledColor: true
property bool show_button: true property bool showButton: true
property bool horizontal: true property bool horizontal: true
property int slide_width: 150 property int slideWidth: 150
property int slide_height: 4 property int slideHeight: 4
property alias value: slide.value property alias value: slide.value
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
Item{ Item{
id: container id: container
@ -29,22 +29,22 @@ Item {
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
height: parent.height -3 height: parent.height -3
icon_source: RibbonIcons.Add iconSource: RibbonIcons.Add
icon_source_filled: RibbonIcons_Filled.Add iconSourceFilled: RibbonIcons_Filled.Add
show_bg: false showBg: false
show_tooltip: false showTooltip: false
show_hovered_bg: false showHoveredBg: false
rotation: horizontal ? 0 : 90 rotation: horizontal ? 0 : 90
visible: show_button visible: showButton
enabled: slide.value !== 100 enabled: slide.value !== 100
text_color: dark_mode ? "white" : "black" textColor: isDarkMode ? "white" : "black"
opacity: enabled ? 1 : 0.2 opacity: enabled ? 1 : 0.2
onClicked: onClicked:
{ {
tooltip.show(slide.value,1000) tooltip.show(slide.value,1000)
slide.increase() slide.increase()
} }
Behavior on text_color { Behavior on textColor {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
easing.type: Easing.OutSine easing.type: Easing.OutSine
@ -59,14 +59,14 @@ Item {
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
height: parent.height -3 height: parent.height -3
show_bg: false showBg: false
show_tooltip: false showTooltip: false
show_hovered_bg: false showHoveredBg: false
icon_source: RibbonIcons.Subtract iconSource: RibbonIcons.Subtract
icon_source_filled: RibbonIcons_Filled.Subtract iconSourceFilled: RibbonIcons_Filled.Subtract
rotation: horizontal ? 0 : 90 rotation: horizontal ? 0 : 90
visible: show_button visible: showButton
text_color: dark_mode ? "white" : "black" textColor: isDarkMode ? "white" : "black"
opacity: enabled ? 1 : 0.2 opacity: enabled ? 1 : 0.2
enabled: slide.value !== 0 enabled: slide.value !== 0
onClicked: onClicked:
@ -74,7 +74,7 @@ Item {
tooltip.show(slide.value,1000) tooltip.show(slide.value,1000)
slide.decrease() slide.decrease()
} }
Behavior on text_color { Behavior on textColor {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
easing.type: Easing.OutSine easing.type: Easing.OutSine
@ -88,26 +88,26 @@ Item {
stepSize: 1 stepSize: 1
anchors{ anchors{
leftMargin: -5 leftMargin: -5
left: show_button ? subtract_button.right : parent.left left: showButton ? subtract_button.right : parent.left
right: show_button ? add_button.left : parent.right right: showButton ? add_button.left : parent.right
rightMargin: -5 rightMargin: -5
verticalCenter: add_button.verticalCenter verticalCenter: add_button.verticalCenter
} }
implicitWidth: Math.max(implicitBackgroundWidth + leftPadding + rightPadding, implicitHandleWidth + leftPadding + rightPadding) implicitWidth: Math.max(implicitBackgroundWidth + leftPadding + rightPadding, implicitHandleWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topPadding + bottomPadding, implicitHandleHeight + topPadding + bottomPadding) implicitHeight: Math.max(implicitBackgroundHeight + topPadding + bottomPadding, implicitHandleHeight + topPadding + bottomPadding)
property int slide_length: 150 property int slide_length: 150
property int slide_width: 5 property int slideWidth: 5
handle: Rectangle{ handle: Rectangle{
x: slide.leftPadding + (slide.horizontal ? slide.visualPosition * (slide.availableWidth - width) : (slide.availableWidth - width) / 2) x: slide.leftPadding + (slide.horizontal ? slide.visualPosition * (slide.availableWidth - width) : (slide.availableWidth - width) / 2)
y: slide.topPadding + (slide.horizontal ? (slide.availableHeight - height) / 2 : slide.visualPosition * (slide.availableHeight - height)) - 1 y: slide.topPadding + (slide.horizontal ? (slide.availableHeight - height) / 2 : slide.visualPosition * (slide.availableHeight - height)) - 1
implicitWidth: 12 implicitWidth: 12
implicitHeight: 12 implicitHeight: 12
color: dark_mode ? "#A1A2A1" : "#EDEEEE" color: isDarkMode ? "#A1A2A1" : "#EDEEEE"
radius: 12 radius: 12
layer.enabled: true layer.enabled: true
layer.effect: RibbonShadow { layer.effect: RibbonShadow {
shadow_opacity: 0.2 shadowOpacity: 0.2
shadow_color: "black" shadowColor: "black"
} }
scale: slide.pressed ? 1.1 : slide.hovered ? 1.2 : 1 scale: slide.pressed ? 1.1 : slide.hovered ? 1.2 : 1
Behavior on color { Behavior on color {
@ -126,14 +126,14 @@ Item {
background: Item { background: Item {
x: slide.leftPadding + (slide.horizontal ? 0 : (slide.availableWidth - width) / 2) x: slide.leftPadding + (slide.horizontal ? 0 : (slide.availableWidth - width) / 2)
y: slide.topPadding + (slide.horizontal ? (slide.availableHeight - height) / 2 : 0) - 1 y: slide.topPadding + (slide.horizontal ? (slide.availableHeight - height) / 2 : 0) - 1
implicitWidth: slide.horizontal ? control.slide_width : control.slide_height implicitWidth: slide.horizontal ? control.slideWidth : control.slideHeight
implicitHeight: slide.horizontal ? control.slide_height : control.slide_width implicitHeight: slide.horizontal ? control.slideHeight : control.slideWidth
width: slide.horizontal ? slide.availableWidth : implicitWidth width: slide.horizontal ? slide.availableWidth : implicitWidth
height: slide.horizontal ? implicitHeight : slide.availableHeight height: slide.horizontal ? implicitHeight : slide.availableHeight
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
radius: 2 radius: 2
color: dark_mode ? "#7C7C7C" : "#8F8F8F" color: isDarkMode ? "#7C7C7C" : "#8F8F8F"
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -144,10 +144,10 @@ Item {
scale: slide.horizontal && slide.mirrored ? -1 : 1 scale: slide.horizontal && slide.mirrored ? -1 : 1
Rectangle { Rectangle {
y: slide.horizontal ? 0 : slide.visualPosition * parent.height y: slide.horizontal ? 0 : slide.visualPosition * parent.height
width: slide.horizontal ? slide.position * parent.width : control.slide_height width: slide.horizontal ? slide.position * parent.width : control.slideHeight
height: slide.horizontal ? control.slide_height : slide.position * parent.height height: slide.horizontal ? control.slideHeight : slide.position * parent.height
radius: 3 radius: 3
color: show_filled_color ? dark_mode ? "#8AAAEB" : "#5DA3E8" : dark_mode ? "#7C7C7C" : "#8F8F8F" color: showFilledColor ? isDarkMode ? "#8AAAEB" : "#5DA3E8" : isDarkMode ? "#7C7C7C" : "#8F8F8F"
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -161,7 +161,7 @@ Item {
RibbonToolTip{ RibbonToolTip{
id: tooltip id: tooltip
parent: slide.handle parent: slide.handle
visible: show_tooltip && slide.pressed visible: showTooltip && slide.pressed
text: slide.value text: slide.value
} }
} }

38
lib_source/qml/RibbonSpinBox.qml
View File

@ -4,8 +4,8 @@ import RibbonUI
SpinBox { SpinBox {
id: control id: control
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property int icon_source property int iconSource
font.pixelSize: 13 font.pixelSize: 13
@ -35,18 +35,18 @@ SpinBox {
contentItem: RibbonLineEdit { contentItem: RibbonLineEdit {
text: control.displayText text: control.displayText
font: control.font font: control.font
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8"
selectedTextColor: dark_mode ? "white" : "black" selectedTextColor: isDarkMode ? "white" : "black"
horizontalAlignment: Qt.AlignLeft horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
icon_source: control.icon_source iconSource: control.iconSource
icon.icon_size: 16 icon.iconSize: 16
topPadding: 2 topPadding: 2
bottomPadding: 2 bottomPadding: 2
leftPadding: icon.visible ? icon.contentWidth + padding*2 : 10 leftPadding: icon.visible ? icon.contentWidth + padding*2 : 10
rightPadding: (clear_btn.visible ? clear_btn.width + padding*2 : 10) + up.indicator.width rightPadding: (clearBtn.visible ? clearBtn.width + padding*2 : 10) + up.indicator.width
readOnly: !control.editable readOnly: !control.editable
validator: control.validator validator: control.validator
@ -59,10 +59,10 @@ SpinBox {
y: (parent.height / 2) - height + 2 y: (parent.height / 2) - height + 2
implicitWidth: 20 - 2 implicitWidth: 20 - 2
implicitHeight: 12 - 2 implicitHeight: 12 - 2
icon_source: RibbonIcons.ChevronUp iconSource: RibbonIcons.ChevronUp
ribbon_icon.icon_size: 10 ribbonIcon.iconSize: 10
show_bg: false showBg: false
show_tooltip: false showTooltip: false
onHoveredChanged: control.up.hovered = hovered onHoveredChanged: control.up.hovered = hovered
onPressedChanged: control.up.pressed = pressed onPressedChanged: control.up.pressed = pressed
onClicked: increase() onClicked: increase()
@ -74,10 +74,10 @@ SpinBox {
y: (parent.height / 2) - height - 1 + up.indicator.height y: (parent.height / 2) - height - 1 + up.indicator.height
implicitWidth: 20 - 2 implicitWidth: 20 - 2
implicitHeight: 12 - 2 implicitHeight: 12 - 2
icon_source: RibbonIcons.ChevronDown iconSource: RibbonIcons.ChevronDown
ribbon_icon.icon_size: 10 ribbonIcon.iconSize: 10
show_bg: false showBg: false
show_tooltip: false showTooltip: false
onHoveredChanged: control.down.hovered = hovered onHoveredChanged: control.down.hovered = hovered
onPressedChanged: control.down.pressed = pressed onPressedChanged: control.down.pressed = pressed
onClicked: decrease() onClicked: decrease()
@ -90,10 +90,10 @@ SpinBox {
color: { color: {
color: { color: {
if (control.down) if (control.down)
return dark_mode ? "#858585" : "#C9CACA" return isDarkMode ? "#858585" : "#C9CACA"
if (control.hovered) if (control.hovered)
return dark_mode ? "#5A5B5A" : "#E4E4E4" return isDarkMode ? "#5A5B5A" : "#E4E4E4"
return dark_mode ? "#383838" : "#FFFFFF" return isDarkMode ? "#383838" : "#FFFFFF"
} }
} }
} }

90
lib_source/qml/RibbonSwitchButton.qml
View File

@ -11,22 +11,22 @@ Button {
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
checkable: true checkable: true
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property bool show_grabber_text: true property bool showGrabberText: true
property string grabber_text: control.checked ? qsTr("Open") : qsTr("Close") property string grabberText: control.checked ? qsTr("Open") : qsTr("Close")
property string text_color: dark_mode ? "white" : "black" property string textColor: isDarkMode ? "white" : "black"
property int text_size: 11 property int textSize: 11
property string grabber_checked_color: dark_mode ? "#8AAAEB" : "#2850A4" property string grabberCheckedColor: isDarkMode ? "#8AAAEB" : "#2850A4"
property string grabber_unchecked_color: dark_mode ? "#292929" : "white" property string grabberUncheckedColor: isDarkMode ? "#292929" : "white"
property string grabber_text_checked_color: dark_mode ? "black" : "white" property string grabberTextCheckedColor: isDarkMode ? "black" : "white"
property string grabber_text_unchecked_color: dark_mode ? "white" : "black" property string grabberTextUncheckedColor: isDarkMode ? "white" : "black"
property string grabber_color: dark_mode ? control.pressed ? "#F8F8F8" : "white" : control.pressed ? "#4D4D4D":"#616161" property string grabberColor: isDarkMode ? control.pressed ? "#F8F8F8" : "white" : control.pressed ? "#4D4D4D":"#616161"
property string border_color: dark_mode ? "white" : "#616161" property string borderColor: isDarkMode ? "white" : "#616161"
property double border_width: 1.4 property real borderWidth: 1.4
property bool text_bold: false property bool textBold: false
property bool text_on_left: false property bool textOnLeft: false
property bool show_tooltip: false property bool showTooltip: false
property string tip_text: text property string tipText: text
background:Item{} background:Item{}
contentItem:Item{ contentItem:Item{
@ -38,18 +38,18 @@ Button {
property int margins: 4 property int margins: 4
spacing: 4 spacing: 4
anchors.centerIn: parent anchors.centerIn: parent
layoutDirection: control.text_on_left ? Qt.RightToLeft : Qt.LeftToRight layoutDirection: control.textOnLeft ? Qt.RightToLeft : Qt.LeftToRight
Item{ Item{
id: btn id: btn
implicitHeight: 20 implicitHeight: 20
implicitWidth: control.show_grabber_text ? 20 + grabber_text.anchors.margins * 2 + grabber_text.contentWidth : 40 implicitWidth: control.showGrabberText ? 20 + grabberText.anchors.margins * 2 + grabberText.contentWidth : 40
Rectangle{ Rectangle{
id:bg id:bg
implicitWidth: btn.implicitWidth + border.width implicitWidth: btn.implicitWidth + border.width
implicitHeight: btn.implicitHeight + border.width implicitHeight: btn.implicitHeight + border.width
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
border.color: border_color border.color: borderColor
border.width: border_width border.width: borderWidth
radius: 12 radius: 12
states: [ states: [
State{ State{
@ -57,7 +57,7 @@ Button {
when: control.checked when: control.checked
PropertyChanges { PropertyChanges {
target: bg target: bg
color: grabber_checked_color color: grabberCheckedColor
} }
}, },
State{ State{
@ -65,7 +65,7 @@ Button {
when: !control.checked when: !control.checked
PropertyChanges { PropertyChanges {
target: bg target: bg
color: grabber_unchecked_color color: grabberUncheckedColor
} }
} }
] ]
@ -74,8 +74,8 @@ Button {
from: "checked" from: "checked"
to:"unchecked" to:"unchecked"
ColorAnimation { ColorAnimation {
from: grabber_checked_color from: grabberCheckedColor
to: grabber_unchecked_color to: grabberUncheckedColor
duration: 200 duration: 200
easing.type: Easing.OutSine easing.type: Easing.OutSine
} }
@ -84,8 +84,8 @@ Button {
from: "unchecked" from: "unchecked"
to:"checked" to:"checked"
ColorAnimation { ColorAnimation {
from: grabber_unchecked_color from: grabberUncheckedColor
to: grabber_checked_color to: grabberCheckedColor
duration: 200 duration: 200
easing.type: Easing.OutSine easing.type: Easing.OutSine
} }
@ -97,7 +97,7 @@ Button {
implicitHeight: bg.implicitHeight - anchors.margins*2 implicitHeight: bg.implicitHeight - anchors.margins*2
implicitWidth:implicitHeight implicitWidth:implicitHeight
radius: width / 2 radius: width / 2
color: grabber_color color: grabberColor
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
margins: 4 margins: 4
@ -119,17 +119,17 @@ Button {
} }
layer.enabled: true layer.enabled: true
layer.effect: RibbonShadow{ layer.effect: RibbonShadow{
shadow_opacity: 0.2 shadowOpacity: 0.2
shadow_color: "black" shadowColor: "black"
} }
} }
Text { Text {
id: grabber_text id: grabberText
text: control.grabber_text text: control.grabberText
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.margins: 4 anchors.margins: 4
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
visible: control.show_grabber_text visible: control.showGrabberText
x: control.checked ? grabber.x - anchors.margins - contentWidth : grabber.x + grabber.width + anchors.margins x: control.checked ? grabber.x - anchors.margins - contentWidth : grabber.x + grabber.width + anchors.margins
z: 0 z: 0
font{ font{
@ -148,16 +148,16 @@ Button {
name:"checked" name:"checked"
when: control.checked when: control.checked
PropertyChanges { PropertyChanges {
target: grabber_text target: grabberText
color: grabber_text_checked_color color: grabberTextCheckedColor
} }
}, },
State{ State{
name:"unchecked" name:"unchecked"
when: !control.checked when: !control.checked
PropertyChanges { PropertyChanges {
target: grabber_text target: grabberText
color: grabber_text_unchecked_color color: grabberTextUncheckedColor
} }
} }
] ]
@ -166,8 +166,8 @@ Button {
from: "checked" from: "checked"
to:"unchecked" to:"unchecked"
ColorAnimation { ColorAnimation {
from: grabber_text_checked_color from: grabberTextCheckedColor
to: grabber_text_unchecked_color to: grabberTextUncheckedColor
duration: 200 duration: 200
easing.type: Easing.OutSine easing.type: Easing.OutSine
} }
@ -176,8 +176,8 @@ Button {
from: "unchecked" from: "unchecked"
to:"checked" to:"checked"
ColorAnimation { ColorAnimation {
from: grabber_text_checked_color from: grabberTextCheckedColor
to: grabber_text_unchecked_color to: grabberTextUncheckedColor
duration: 200 duration: 200
easing.type: Easing.OutSine easing.type: Easing.OutSine
} }
@ -185,8 +185,8 @@ Button {
] ]
} }
RibbonToolTip{ RibbonToolTip{
text: tip_text text: tipText
visible: hovered && show_tooltip && text visible: hovered && showTooltip && text
} }
} }
Text { Text {
@ -196,10 +196,10 @@ Button {
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
font{ font{
family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
pixelSize: control.text_size pixelSize: control.textSize
bold: control.text_bold bold: control.textBold
} }
color: text_color color: textColor
visible: text visible: text
} }
} }

86
lib_source/qml/RibbonTabBar.qml
View File

@ -6,7 +6,7 @@ import RibbonUI
Item{ Item{
id: root id: root
height: folded ? top_border.height + bar.contentHeight + bottom_border.height: modern_style ? 200 : 180 height: folded ? top_border.height + bar.contentHeight + bottom_border.height: modernStyle ? 200 : 180
anchors{ anchors{
top: parent.top top: parent.top
left: parent.left left: parent.left
@ -14,14 +14,14 @@ Item{
} }
clip: true clip: true
property bool folded: false property bool folded: false
property int last_index property int lastIndex
default property alias content: stack.contentData default property alias content: stack.contentData
property alias right_tool_bar: tool_bar.data property alias rightToolBar: tool_bar.data
property bool modern_style: RibbonTheme.modern_style property bool modernStyle: RibbonTheme.modernStyle
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property string bg_color: dark_mode ? "#2D2D2D" : "#F4F5F3" property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3"
property double bg_opacity: 0.8 property real bgOpacity: 0.8
property string border_color: dark_mode ? "black" : "#CCCCCC" property string borderColor: isDarkMode ? "black" : "#CCCCCC"
property bool showSettingsBtn: true property bool showSettingsBtn: true
property alias count: bar.count property alias count: bar.count
@ -39,8 +39,8 @@ Item{
anchors.top: parent.top anchors.top: parent.top
width: parent.width width: parent.width
height: 1 height: 1
color: modern_style ? "transparent" : bg_color color: modernStyle ? "transparent" : bgColor
opacity:bg_opacity opacity:bgOpacity
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -53,23 +53,23 @@ Item{
id:bg id:bg
anchors anchors
{ {
top: modern_style ? bar_view.bottom : top_border.bottom top: modernStyle ? bar_view.bottom : top_border.bottom
left: parent.left left: parent.left
right: parent.right right: parent.right
bottom:bottom_border.top bottom:bottom_border.top
topMargin: modern_style ? 10 :0 topMargin: modernStyle ? 10 :0
leftMargin: modern_style ? 10 :0 leftMargin: modernStyle ? 10 :0
rightMargin: modern_style ? 10 :0 rightMargin: modernStyle ? 10 :0
bottomMargin: modern_style ? 10 :0 bottomMargin: modernStyle ? 10 :0
} }
clip: true clip: true
opacity:bg_opacity opacity:bgOpacity
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: bg_color color: bgColor
opacity:bg_opacity opacity:bgOpacity
radius: modern_style ? 10 :0 radius: modernStyle ? 10 :0
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -81,8 +81,8 @@ Item{
RibbonShadow { RibbonShadow {
id: effect id: effect
enabled: modern_style enabled: modernStyle
visible: modern_style visible: modernStyle
source: bg source: bg
anchors.fill: bg anchors.fill: bg
} }
@ -151,19 +151,19 @@ Item{
background: Item{ background: Item{
anchors{ anchors{
fill: parent fill: parent
topMargin: modern_style ? 10 :0 topMargin: modernStyle ? 10 :0
leftMargin: modern_style ? 10 :0 leftMargin: modernStyle ? 10 :0
rightMargin: modern_style ? 10 :0 rightMargin: modernStyle ? 10 :0
bottomMargin: modern_style ? 10 :0 bottomMargin: modernStyle ? 10 :0
} }
} }
contentItem: ListView { contentItem: ListView {
anchors{ anchors{
fill: parent fill: parent
topMargin: modern_style ? 10 :0 topMargin: modernStyle ? 10 :0
leftMargin: modern_style ? 10 :0 leftMargin: modernStyle ? 10 :0
rightMargin: modern_style ? 10 :0 rightMargin: modernStyle ? 10 :0
bottomMargin: modern_style ? 10 :0 bottomMargin: modernStyle ? 10 :0
} }
clip: true clip: true
model: stack.contentModel model: stack.contentModel
@ -188,7 +188,7 @@ Item{
rightMargin: 5 rightMargin: 5
bottomMargin: 5 bottomMargin: 5
} }
icon_source: RibbonIcons.ChevronDown iconSource: RibbonIcons.ChevronDown
Behavior on rotation { Behavior on rotation {
NumberAnimation{ NumberAnimation{
duration: 100 duration: 100
@ -197,10 +197,10 @@ Item{
} }
rotation: folded ? 0 : 180 rotation: folded ? 0 : 180
onClicked: folded = !folded onClicked: folded = !folded
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
tip_text: folded ? qsTr("Show") : qsTr("Hide") tipText: folded ? qsTr("Show") : qsTr("Hide")
text_color: dark_mode ? "white" : "black" textColor: isDarkMode ? "white" : "black"
} }
} }
@ -223,7 +223,7 @@ Item{
btn.checked = true btn.checked = true
} }
sign++ sign++
btn.need_fold.connect(hide_stack) btn.need_fold.connect(hideStack)
root.foldedChanged.connect(function(){btn.setFolded(folded)}) root.foldedChanged.connect(function(){btn.setFolded(folded)})
} }
} }
@ -235,8 +235,8 @@ Item{
anchors.top: stack.bottom anchors.top: stack.bottom
width: parent.width width: parent.width
height: 1 height: 1
color: modern_style ? "transparent" : bg_color color: modernStyle ? "transparent" : bgColor
opacity:bg_opacity opacity:bgOpacity
Rectangle{ Rectangle{
anchors{ anchors{
left: parent.left left: parent.left
@ -244,9 +244,9 @@ Item{
bottom: parent.bottom bottom: parent.bottom
} }
z: 3 z: 3
color: border_color color: borderColor
height: 1 height: 1
visible: !modern_style visible: !modernStyle
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -293,7 +293,7 @@ Item{
} }
if(item instanceof RibbonTabPage){ if(item instanceof RibbonTabPage){
let btn = ribbonTabButton.createObject(bar,{text:qsTr(item.title),index:bar.count-1,highlight:is_highlight}) let btn = ribbonTabButton.createObject(bar,{text:qsTr(item.title),index:bar.count-1,highlight:is_highlight})
btn.need_fold.connect(hide_stack) btn.need_fold.connect(hideStack)
root.foldedChanged.connect(function(){btn.setFolded(folded)}) root.foldedChanged.connect(function(){btn.setFolded(folded)})
} }
} }
@ -326,13 +326,13 @@ Item{
} }
} }
function hide_stack(need_hide, index) function hideStack(need_hide, index)
{ {
if (typeof(last_index)==='undefined'||last_index===index||last_index!==index&&!need_hide) if (typeof(lastIndex)==='undefined'||lastIndex===index||lastIndex!==index&&!need_hide)
{ {
folded = need_hide && !folded folded = need_hide && !folded
} }
last_index = index lastIndex = index
} }
function refresh() function refresh()

14
lib_source/qml/RibbonTabButton.qml
View File

@ -8,10 +8,10 @@ TabButton {
signal need_fold(bool needed, int index) signal need_fold(bool needed, int index)
property bool folded: false property bool folded: false
property int index property int index
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property string underline_unchecked_color: dark_mode ? "#666666" : RibbonTheme.modern_style ? "#A2A2A2" : "#D1D1D1" property string underlineUncheckedColor: isDarkMode ? "#666666" : RibbonTheme.modernStyle ? "#A2A2A2" : "#D1D1D1"
property string underline_checked_color: dark_mode ? "#8AAAEB" : "#2E4C93" property string underlineCheckedColor: isDarkMode ? "#8AAAEB" : "#2E4C93"
property string font_color: highlight ? dark_mode ? "white" : "#355795" : dark_mode ? "white" : "black" property string fontColor: highlight ? isDarkMode ? "white" : "#355795" : isDarkMode ? "white" : "black"
property bool highlight: false property bool highlight: false
background: Item{} background: Item{}
@ -28,7 +28,7 @@ TabButton {
bold: checked bold: checked
} }
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
color: font_color color: fontColor
height: contentHeight height: contentHeight
anchors{ anchors{
centerIn: parent centerIn: parent
@ -48,9 +48,9 @@ TabButton {
color: { color: {
if (control.hovered && (!control.checked || folded)) if (control.hovered && (!control.checked || folded))
return underline_unchecked_color return underlineUncheckedColor
if (control.checked && !folded) if (control.checked && !folded)
return underline_checked_color return underlineCheckedColor
return "transparent" return "transparent"
} }
radius: 3 radius: 3

30
lib_source/qml/RibbonTabGroup.qml
View File

@ -6,15 +6,15 @@ Item {
id:control id:control
width: container.width width: container.width
property alias text: label.text property alias text: label.text
property alias show_border: line.visible property alias showBorder: line.visible
default property alias content: container.data default property alias content: container.data
property int contenHeight: container.height property int contenHeight: container.height
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property bool showOpenExternal: false property bool showOpenExternal: false
property string font_color: dark_mode ? "white" : "black" property string fontColor: isDarkMode ? "white" : "black"
property string border_color: dark_mode ? "#525252" : "#D4D4D4" property string borderColor: isDarkMode ? "#525252" : "#D4D4D4"
property alias externalToolTipText: open_external_btn.tip_text property alias externalToolTipText: open_external_btn.tipText
property alias showExternalToolTipText: open_external_btn.show_tooltip property alias showExternalToolTipText: open_external_btn.showTooltip
Layout.fillHeight: true Layout.fillHeight: true
clip: true clip: true
signal openExternal() signal openExternal()
@ -27,7 +27,7 @@ Item {
pixelSize: 12 pixelSize: 12
bold: true bold: true
} }
color: font_color color: fontColor
height: contentHeight height: contentHeight
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
anchors{ anchors{
@ -47,7 +47,7 @@ Item {
id: line id: line
width: 1 width: 1
height: control.height - label.anchors.bottomMargin*3 height: control.height - label.anchors.bottomMargin*3
color: border_color color: borderColor
anchors{ anchors{
verticalCenter: control.verticalCenter verticalCenter: control.verticalCenter
right:control.right right:control.right
@ -78,14 +78,14 @@ Item {
right: control.right right: control.right
bottom: control.bottom bottom: control.bottom
} }
implicitWidth: ribbon_icon.width + 10 implicitWidth: ribbonIcon.width + 10
implicitHeight: ribbon_icon.height + 10 implicitHeight: ribbonIcon.height + 10
checkable: false checkable: false
ribbon_icon.icon_size: 14 ribbonIcon.iconSize: 14
ribbon_icon.rotation: 90 ribbonIcon.rotation: 90
show_bg: false showBg: false
tip_text: qsTr("Open ") + label.text + qsTr("'s external") tipText: qsTr("Open ") + label.text + qsTr("'s external")
icon_source: RibbonIcons.Open iconSource: RibbonIcons.Open
onClicked: openExternal() onClicked: openExternal()
visible: control.showOpenExternal visible: control.showOpenExternal
} }

14
lib_source/qml/RibbonText.qml
View File

@ -5,19 +5,19 @@ import RibbonUI
TextEdit { TextEdit {
id: control id: control
readOnly: true readOnly: true
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property bool view_only: false property bool viewOnly: false
padding: 0 padding: 0
topPadding: 0 topPadding: 0
leftPadding: 0 leftPadding: 0
rightPadding: 0 rightPadding: 0
bottomPadding: 0 bottomPadding: 0
selectByMouse: true selectByMouse: true
selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8"
selectedTextColor: dark_mode ? "white" : "black" selectedTextColor: isDarkMode ? "white" : "black"
wrapMode: TextEdit.WrapAnywhere wrapMode: TextEdit.WrapAnywhere
enabled: !view_only enabled: !viewOnly
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
renderType: RibbonTheme.nativeText ? TextEdit.NativeRendering : TextEdit.QtRendering renderType: RibbonTheme.nativeText ? TextEdit.NativeRendering : TextEdit.QtRendering
onRenderTypeChanged: { onRenderTypeChanged: {
@ -33,6 +33,6 @@ TextEdit {
} }
RibbonTextBoxMenu{ RibbonTextBoxMenu{
id:menu id:menu
input_item: control inputItem: control
} }
} }

22
lib_source/qml/RibbonTextBoxMenu.qml
View File

@ -3,44 +3,44 @@ import QtQuick.Controls
import RibbonUI import RibbonUI
RibbonMenu{ RibbonMenu{
property var input_item property var inputItem
id:menu id:menu
width: 100 width: 100
onVisibleChanged: { onVisibleChanged: {
input_item.forceActiveFocus() inputItem.forceActiveFocus()
} }
Connections{ Connections{
target: input_item target: inputItem
function onTextChanged() { function onTextChanged() {
menu.close() menu.close()
} }
} }
RibbonMenuItem{ RibbonMenuItem{
text: qsTr("Cut") text: qsTr("Cut")
visible: input_item.selectedText !== "" && !input_item.readOnly visible: inputItem.selectedText !== "" && !inputItem.readOnly
onClicked: { onClicked: {
input_item.cut() inputItem.cut()
} }
} }
RibbonMenuItem{ RibbonMenuItem{
text: qsTr("Copy") text: qsTr("Copy")
visible: input_item.selectedText !== "" visible: inputItem.selectedText !== ""
onClicked: { onClicked: {
input_item.copy() inputItem.copy()
} }
} }
RibbonMenuItem{ RibbonMenuItem{
text: qsTr("Paste") text: qsTr("Paste")
visible: input_item.canPaste visible: inputItem.canPaste
onClicked: { onClicked: {
input_item.paste() inputItem.paste()
} }
} }
RibbonMenuItem{ RibbonMenuItem{
text: qsTr("Select All") text: qsTr("Select All")
visible: input_item.text !== "" visible: inputItem.text !== ""
onClicked: { onClicked: {
input_item.selectAll() inputItem.selectAll()
} }
} }
} }

50
lib_source/qml/RibbonTextEdit.qml
View File

@ -6,16 +6,16 @@ import RibbonUI
Item{ Item{
id: control id: control
property alias text: textedit.text property alias text: textedit.text
property alias icon_source: textedit.icon_source property alias iconSource: textedit.iconSource
property alias show_clear_btn: textedit.show_clear_btn property alias showClearBtn: textedit.showClearBtn
property alias textedit: textedit property alias textedit: textedit
property alias placeholderText: textedit.placeholderText property alias placeholderText: textedit.placeholderText
property alias readOnly: textedit.readOnly property alias readOnly: textedit.readOnly
property int max_height: 80 property int maxHeight: 80
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
signal commit() signal commit()
width: 150 width: 150
height: Math.min(flickview.contentHeight, max_height) height: Math.min(flickview.contentHeight, maxHeight)
Flickable{ Flickable{
id: flickview id: flickview
anchors.fill: parent anchors.fill: parent
@ -29,18 +29,18 @@ Item{
clip: true clip: true
TextArea.flickable:TextArea { TextArea.flickable:TextArea {
id: textedit id: textedit
property int icon_source property int iconSource
property bool show_clear_btn: true property bool showClearBtn: true
focus: true focus: true
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
padding: 5 padding: 5
leftPadding: icon.visible ? icon.contentWidth + padding*2 : padding leftPadding: icon.visible ? icon.contentWidth + padding*2 : padding
rightPadding: clear_btn.visible ? clear_btn.width + padding*2 : padding rightPadding: clearBtn.visible ? clearBtn.width + padding*2 : padding
placeholderText: qsTr("Please input:") placeholderText: qsTr("Please input:")
placeholderTextColor: dark_mode ? Qt.rgba(255,255,255,0.5) : Qt.rgba(0,0,0,0.5) placeholderTextColor: isDarkMode ? Qt.rgba(255,255,255,0.5) : Qt.rgba(0,0,0,0.5)
selectByMouse: true selectByMouse: true
selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8"
selectedTextColor: dark_mode ? "white" : "black" selectedTextColor: isDarkMode ? "white" : "black"
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
renderType: RibbonTheme.nativeText ? TextArea.NativeRendering : TextArea.QtRendering renderType: RibbonTheme.nativeText ? TextArea.NativeRendering : TextArea.QtRendering
opacity: enabled ? 1.0 : 0.3 opacity: enabled ? 1.0 : 0.3
@ -53,8 +53,8 @@ Item{
background: Rectangle{ background: Rectangle{
id:bg id:bg
radius: 4 radius: 4
color: dark_mode ? "#383838" : "#FFFFFF" color: isDarkMode ? "#383838" : "#FFFFFF"
border.color: textedit.cursorVisible ? dark_mode ? "#869CCD" : "#486495" : dark_mode ? "#5E5F5E" : "#B9B9B8" border.color: textedit.cursorVisible ? isDarkMode ? "#869CCD" : "#486495" : isDarkMode ? "#5E5F5E" : "#B9B9B8"
border.width: 1 border.width: 1
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -74,7 +74,7 @@ Item{
} }
RibbonTextBoxMenu{ RibbonTextBoxMenu{
id:menu id:menu
input_item: textedit inputItem: textedit
} }
} }
} }
@ -85,10 +85,10 @@ Item{
leftMargin: textedit.padding leftMargin: textedit.padding
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
icon_source: textedit.icon_source iconSource: textedit.iconSource
icon_size: 26 - textedit.padding iconSize: 26 - textedit.padding
visible: icon_source visible: iconSource
color: dark_mode ? "white" : "black" color: isDarkMode ? "white" : "black"
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -97,19 +97,19 @@ Item{
} }
} }
RibbonButton{ RibbonButton{
id: clear_btn id: clearBtn
anchors{ anchors{
right: parent.right right: parent.right
rightMargin: textedit.padding rightMargin: textedit.padding
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
tip_text: qsTr("Clear") tipText: qsTr("Clear")
icon_source: RibbonIcons.Dismiss iconSource: RibbonIcons.Dismiss
height: 26 - textedit.padding height: 26 - textedit.padding
width: height width: height
visible: textedit.text&&show_clear_btn&&textedit.cursorVisible visible: textedit.text&&showClearBtn&&textedit.cursorVisible
onClicked: textedit.clear() onClicked: textedit.clear()
} }
} }

140
lib_source/qml/RibbonTitleBar.qml
View File

@ -6,20 +6,20 @@ import RibbonUI
Item { Item {
id: control id: control
height: 30 height: 30
property int minimumWidth: title_text.implicitWidth + Math.max(left_container.width, right_container.width) * 2 + (Qt.platform.os === "osx" ? 65 : 0) + 20 property int minimumWidth: title_text.implicitWidth + Math.max(leftContainer.width, rightContainer.width) * 2 + (Qt.platform.os === "osx" ? 65 : 0) + 20
property string title: Window.window.title property string title: Window.window.title
property bool show_style_switch: true property bool showStyleSwitch: true
property bool show_darkmode_btn: true property bool showDarkmodeBtn: true
property bool show_pin_btn: true property bool showPinBtn: true
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property bool modern_style: RibbonTheme.modern_style property bool modernStyle: RibbonTheme.modernStyle
property string title_color: modern_style ? "transparent" : dark_mode ? "#282828" : "#2C59B7" property string titleColor: modernStyle ? "transparent" : isDarkMode ? "#282828" : "#2C59B7"
property string title_text_color: modern_style ? dark_mode ? "white" : "black" : "white" property string titleTextColor: modernStyle ? isDarkMode ? "white" : "black" : "white"
default property alias content: left_container.data default property alias content: leftContainer.data
property alias left_content: left_container.data property alias leftContent: leftContainer.data
property alias right_content: right_container.data property alias rightContent: rightContainer.data
property alias left_container: left_container property alias leftContainer: leftContainer
property alias right_container: right_container property alias rightContainer: rightContainer
property alias maximizeBtn: maximizeBtn property alias maximizeBtn: maximizeBtn
property alias minimizeBtn: minimizeBtn property alias minimizeBtn: minimizeBtn
property alias closeBtn: closeBtn property alias closeBtn: closeBtn
@ -33,7 +33,7 @@ Item {
Rectangle{ Rectangle{
id: bg id: bg
anchors.fill: parent anchors.fill: parent
color: title_color color: titleColor
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 60 duration: 60
@ -47,7 +47,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: control.title text: control.title
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
color: title_text_color color: titleTextColor
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -58,7 +58,7 @@ Item {
} }
RowLayout{ RowLayout{
id: left_container id: leftContainer
spacing: 1 spacing: 1
anchors{ anchors{
top: parent.top top: parent.top
@ -70,7 +70,7 @@ Item {
} }
RowLayout{ RowLayout{
id: right_container id: rightContainer
spacing: 1 spacing: 1
anchors{ anchors{
top: parent.top top: parent.top
@ -87,40 +87,40 @@ Item {
Layout.rightMargin: Qt.platform.os === "osx" ? -5 : 0 Layout.rightMargin: Qt.platform.os === "osx" ? -5 : 0
RibbonButton{ RibbonButton{
id: closeBtn id: closeBtn
show_bg:false showBg:false
icon_source: RibbonIcons.Dismiss iconSource: RibbonIcons.Dismiss
icon_source_filled: RibbonIcons_Filled.Dismiss iconSourceFilled: RibbonIcons_Filled.Dismiss
text_color: titleBar.title_text_color textColor: titleBar.titleTextColor
hover_color: "#ED6B5E" hoverColor: "#ED6B5E"
pressed_color: "#B55149" pressedColor: "#B55149"
text_color_reverse: false textColorReverse: false
tip_text: qsTr("Close") tipText: qsTr("Close")
onClicked: Window.window.close() onClicked: Window.window.close()
} }
RibbonButton{ RibbonButton{
id: minimizeBtn id: minimizeBtn
show_bg:false showBg:false
icon_source: RibbonIcons.Subtract iconSource: RibbonIcons.Subtract
icon_source_filled: RibbonIcons_Filled.Subtract iconSourceFilled: RibbonIcons_Filled.Subtract
text_color: titleBar.title_text_color textColor: titleBar.titleTextColor
hover_color: "#F4BE4F" hoverColor: "#F4BE4F"
pressed_color: "#B78F3B" pressedColor: "#B78F3B"
text_color_reverse: false textColorReverse: false
tip_text: qsTr("Minimize") tipText: qsTr("Minimize")
font.bold: pressed || checked font.bold: pressed || checked
onClicked: Window.window.visibility = Window.Minimized onClicked: Window.window.visibility = Window.Minimized
} }
RibbonButton{ RibbonButton{
id: maximizeBtn id: maximizeBtn
show_bg:false showBg:false
icon_source: Window.window.visibility === Window.Maximized ? RibbonIcons.ArrowMinimize : RibbonIcons.ArrowMaximize iconSource: Window.window.visibility === Window.Maximized ? RibbonIcons.ArrowMinimize : RibbonIcons.ArrowMaximize
text_color: titleBar.title_text_color textColor: titleBar.titleTextColor
hover_color: "#61C554" hoverColor: "#61C554"
pressed_color: "#48953F" pressedColor: "#48953F"
text_color_reverse: false textColorReverse: false
tip_text: Window.window.visibility === Window.Maximized ? qsTr("Restore") : qsTr("Maximize") tipText: Window.window.visibility === Window.Maximized ? qsTr("Restore") : qsTr("Maximize")
onClicked: { onClicked: {
if (Window.window.visibility === Window.Maximized) if (Window.window.visibility === Window.Maximized)
Window.window.visibility = Window.Windowed Window.window.visibility = Window.Windowed
@ -131,46 +131,46 @@ Item {
} }
RibbonSwitchButton{ RibbonSwitchButton{
text: qsTr("Style") text: qsTr("Style")
grabber_text: checked ? qsTr("Modern") : qsTr("Classic") grabberText: checked ? qsTr("Modern") : qsTr("Classic")
text_color: titleBar.title_text_color textColor: titleBar.titleTextColor
grabber_color: "#F9F9F9" grabberColor: "#F9F9F9"
grabber_checked_color: "#BEC1C9" grabberCheckedColor: "#BEC1C9"
grabber_unchecked_color: "#334668" grabberUncheckedColor: "#334668"
grabber_text_unchecked_color: "white" grabberTextUncheckedColor: "white"
grabber_text_checked_color: "black" grabberTextCheckedColor: "black"
onClicked: RibbonTheme.modern_style = checked onClicked: RibbonTheme.modernStyle = checked
checked: RibbonTheme.modern_style checked: RibbonTheme.modernStyle
visible: show_style_switch visible: showStyleSwitch
} }
RibbonButton{ RibbonButton{
show_bg:false showBg:false
icon_source: RibbonIcons.DarkTheme iconSource: RibbonIcons.DarkTheme
icon_source_filled: RibbonIcons_Filled.DarkTheme iconSourceFilled: RibbonIcons_Filled.DarkTheme
checkable: true checkable: true
tip_text: qsTr("Dark Mode") tipText: qsTr("Dark Mode")
hover_color: Qt.rgba(0,0,0, 0.3) hoverColor: Qt.rgba(0,0,0, 0.3)
pressed_color: Qt.rgba(0,0,0, 0.4) pressedColor: Qt.rgba(0,0,0, 0.4)
text_color: title_text_color textColor: titleTextColor
text_color_reverse: false textColorReverse: false
onClicked: { onClicked: {
RibbonTheme.theme_mode = checked ? RibbonThemeType.Dark : RibbonThemeType.Light RibbonTheme.themeMode = checked ? RibbonThemeType.Dark : RibbonThemeType.Light
} }
checked: RibbonTheme.dark_mode checked: RibbonTheme.isDarkMode
visible: show_darkmode_btn visible: showDarkmodeBtn
} }
RibbonButton{ RibbonButton{
id: pinBtn id: pinBtn
show_bg:false showBg:false
icon_source: checked ? RibbonIcons.Pin : RibbonIcons.PinOff iconSource: checked ? RibbonIcons.Pin : RibbonIcons.PinOff
icon_source_filled: checked ? RibbonIcons_Filled.Pin : RibbonIcons_Filled.PinOff iconSourceFilled: checked ? RibbonIcons_Filled.Pin : RibbonIcons_Filled.PinOff
checkable: true checkable: true
text_color: title_text_color textColor: titleTextColor
hover_color: Qt.rgba(0,0,0, 0.3) hoverColor: Qt.rgba(0,0,0, 0.3)
pressed_color: Qt.rgba(0,0,0, 0.4) pressedColor: Qt.rgba(0,0,0, 0.4)
text_color_reverse: false textColorReverse: false
tip_text: qsTr("Stay on Top") tipText: qsTr("Stay on Top")
onClicked: Window.window.flags ^= Qt.WindowStaysOnTopHint onClicked: Window.window.flags ^= Qt.WindowStaysOnTopHint
visible: control.show_pin_btn visible: control.showPinBtn
} }
} }
} }

6
lib_source/qml/RibbonToolTip.qml
View File

@ -11,16 +11,16 @@ ToolTip {
contentItem: Text { contentItem: Text {
text: control.text text: control.text
font: control.font font: control.font
color: RibbonTheme.dark_mode ? "white" : "black" color: RibbonTheme.isDarkMode ? "white" : "black"
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
} }
background: Rectangle { background: Rectangle {
radius: 3 radius: 3
color: RibbonTheme.dark_mode ? "#2C2C29" : "#E0E0E2" color: RibbonTheme.isDarkMode ? "#2C2C29" : "#E0E0E2"
layer.enabled: true layer.enabled: true
layer.effect: RibbonShadow{} layer.effect: RibbonShadow{}
border.color: dark_mode ? "#5C5D5D" : "#B5B4B5" border.color: isDarkMode ? "#5C5D5D" : "#B5B4B5"
border.width: 1 border.width: 1
} }
} }

50
lib_source/qml/RibbonTour.qml
View File

@ -9,19 +9,19 @@ Popup {
id: popup id: popup
parent: Overlay.overlay parent: Overlay.overlay
property var targetList: [] property var targetList: []
property bool blur_enabled: false property bool blurEnabled: false
property alias target: blur.target property alias target: blur.target
property alias target_rect: blur.target_rect property alias targetRect: blur.targetRect
property alias radius: blur.radius property alias radius: blur.radius
property string content_source: "RibbonTourContent.qml" property string contentSource: "RibbonTourContent.qml"
property var content_items: undefined property var contentItems: undefined
property bool destroy_after_close: true property bool destroyAfterClose: true
property var currentTarget: targetList ? targetList[0].target : parent property var currentTarget: targetList ? targetList[0].target : parent
property int currentIndex: 0 property int currentIndex: 0
property bool preferShowAbove: true property bool preferShowAbove: true
property bool useHighlightOrRect: true property bool useHighlightOrRect: true
property real contentEdgeMargin: 10 property real contentEdgeMargin: 10
property alias content_args: control.args property alias contentArgs: control.args
property alias alwaysNotAutoPopup: always_hide_ckbox.checked property alias alwaysNotAutoPopup: always_hide_ckbox.checked
modal: true modal: true
margins: 0 margins: 0
@ -34,7 +34,7 @@ Popup {
y: (Overlay.overlay.height - height) / 2 y: (Overlay.overlay.height - height) / 2
closePolicy: Popup.NoAutoClose closePolicy: Popup.NoAutoClose
Overlay.modal:Rectangle{ Overlay.modal:Rectangle{
color: !RibbonTheme.dark_mode ? Qt.alpha("white", 0.5) : Qt.alpha("black", 0.5) color: !RibbonTheme.isDarkMode ? Qt.alpha("white", 0.5) : Qt.alpha("black", 0.5)
} }
Overlay.modeless:Rectangle{ Overlay.modeless:Rectangle{
color:"transparent" color:"transparent"
@ -43,10 +43,10 @@ Popup {
RectangularGlow { RectangularGlow {
id: effect id: effect
anchors.fill: blur anchors.fill: blur
anchors.margins: blur.mask_border.width anchors.margins: blur.maskBorder.width
glowRadius: 10 glowRadius: 10
spread: 0 spread: 0
color: RibbonTheme.dark_mode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45) color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
cornerRadius: blur.radius + glowRadius + 10 cornerRadius: blur.radius + glowRadius + 10
} }
RibbonBlur{ RibbonBlur{
@ -54,11 +54,11 @@ Popup {
implicitWidth: parent.width implicitWidth: parent.width
id: blur id: blur
radius: 10 radius: 10
mask_opacity: blur_enabled ? 0.9 : 1 maskOpacity: blurEnabled ? 0.9 : 1
mask_border.color: RibbonTheme.modern_style ? maskBorder.color: RibbonTheme.modernStyle ?
RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" : RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5" RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
mask_border.width: 1 maskBorder.width: 1
} }
} }
contentItem: Item{ contentItem: Item{
@ -75,9 +75,9 @@ Popup {
right:parent.right right:parent.right
rightMargin: anchors.topMargin rightMargin: anchors.topMargin
} }
show_bg: false showBg: false
show_hovered_bg: false showHoveredBg: false
icon_source: RibbonIcons.Dismiss iconSource: RibbonIcons.Dismiss
onClicked: popup.close() onClicked: popup.close()
} }
ColumnLayout{ ColumnLayout{
@ -87,8 +87,8 @@ Popup {
id: loader id: loader
width: item ? item.implicitWidth : 50 width: item ? item.implicitWidth : 50
height: item ? item.implicitHeight : 50 height: item ? item.implicitHeight : 50
sourceComponent: content_source ? undefined : content_items sourceComponent: contentSource ? undefined : contentItems
source: content_source source: contentSource
onLoaded: { onLoaded: {
if (!control.args) if (!control.args)
return return
@ -109,13 +109,13 @@ Popup {
spacing: 20 spacing: 20
RibbonCheckBox{ RibbonCheckBox{
id: always_hide_ckbox id: always_hide_ckbox
show_tooltip: false showTooltip: false
text: qsTr("Don't auto pop up") text: qsTr("Don't auto pop up")
} }
RibbonButton{ RibbonButton{
id: previous_btn id: previous_btn
text: qsTr("Previous") text: qsTr("Previous")
show_tooltip: false showTooltip: false
enabled: popup.currentIndex enabled: popup.currentIndex
onClicked: { onClicked: {
if(popup.targetList[popup.currentIndex].exit_func) if(popup.targetList[popup.currentIndex].exit_func)
@ -127,7 +127,7 @@ Popup {
RibbonButton{ RibbonButton{
id: next_btn id: next_btn
text: (popup.currentIndex + 1) === popup.targetList.length ? qsTr("Finish") : qsTr("Next") text: (popup.currentIndex + 1) === popup.targetList.length ? qsTr("Finish") : qsTr("Next")
show_tooltip: false showTooltip: false
onClicked: { onClicked: {
if ((popup.currentIndex + 1) === popup.targetList.length) if ((popup.currentIndex + 1) === popup.targetList.length)
{ {
@ -167,7 +167,7 @@ Popup {
contentItem:Rectangle{ contentItem:Rectangle{
color: 'transparent' color: 'transparent'
border.width: rec.borderWidth border.width: rec.borderWidth
border.color: RibbonTheme.dark_mode ? "#3B69DA" : "#2C59B7" border.color: RibbonTheme.isDarkMode ? "#3B69DA" : "#2C59B7"
radius: 5 radius: 5
ShaderEffectSource { ShaderEffectSource {
anchors.centerIn: parent anchors.centerIn: parent
@ -240,8 +240,8 @@ Popup {
} }
onAboutToShow: { onAboutToShow: {
loader.sourceComponent = content_source ? undefined : content_items loader.sourceComponent = contentSource ? undefined : contentItems
loader.source = content_source loader.source = contentSource
rec.open() rec.open()
currentTarget = targetList[0].target currentTarget = targetList[0].target
currentIndex = 0 currentIndex = 0

26
lib_source/qml/RibbonTourContent.qml
View File

@ -8,7 +8,7 @@ Item {
id:control id:control
implicitHeight: layout.implicitHeight implicitHeight: layout.implicitHeight
implicitWidth: 300 implicitWidth: 300
property real content_margins: 20 property real contentMargins: 20
ColumnLayout{ ColumnLayout{
id:layout id:layout
@ -18,14 +18,14 @@ Item {
Layout.preferredWidth: parent.width - leftPadding - rightPadding Layout.preferredWidth: parent.width - leftPadding - rightPadding
font.pixelSize: 22 font.pixelSize: 22
text: popup.targetList[popup.currentIndex].title text: popup.targetList[popup.currentIndex].title
view_only: true viewOnly: true
topPadding: content_margins * 3 / 4 topPadding: contentMargins * 3 / 4
leftPadding: content_margins leftPadding: contentMargins
rightPadding: content_margins rightPadding: contentMargins
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
color: RibbonTheme.modern_style ? color: RibbonTheme.modernStyle ?
dark_mode ? '#8AAAEB' : '#2C59B7' : isDarkMode ? '#8AAAEB' : '#2C59B7' :
dark_mode ? "white" : "black" isDarkMode ? "white" : "black"
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
RibbonText{ RibbonText{
@ -34,11 +34,11 @@ Item {
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: popup.targetList[popup.currentIndex].text text: popup.targetList[popup.currentIndex].text
view_only: true viewOnly: true
topPadding: content_margins * 3 / 4 topPadding: contentMargins * 3 / 4
leftPadding: content_margins leftPadding: contentMargins
rightPadding: content_margins rightPadding: contentMargins
bottomPadding: content_margins * 3 / 4 bottomPadding: contentMargins * 3 / 4
} }
} }
} }

38
lib_source/qml/RibbonView.qml
View File

@ -7,13 +7,13 @@ import RibbonUI
Item { Item {
id: root id: root
default property alias content: container.data default property alias content: container.data
property bool modern_style: RibbonTheme.modern_style property bool modernStyle: RibbonTheme.modernStyle
property bool dark_mode: RibbonTheme.dark_mode property bool isDarkMode: RibbonTheme.isDarkMode
property int spacing: 5 property int spacing: 5
property int top_padding: 0 property int topPadding: 0
property int bottom_padding: 0 property int bottomPadding: 0
property alias bg_color: bg.color property alias bgColor: bg.color
property alias bg_visible: bg.visible property alias bgVisible: bg.visible
z:-2 z:-2
clip: true clip: true
width: parent.width width: parent.width
@ -21,8 +21,8 @@ Item {
Rectangle{ Rectangle{
id:bg id:bg
anchors.fill: parent anchors.fill: parent
color: dark_mode ? "#282828" : "#ECECEC" color: isDarkMode ? "#282828" : "#ECECEC"
visible: !modern_style visible: !modernStyle
} }
RibbonBlur{ RibbonBlur{
@ -32,20 +32,20 @@ Item {
right: parent.right right: parent.right
top: parent.top top: parent.top
} }
height: Math.abs(top_padding) height: Math.abs(topPadding)
target: container target: container
mask_opacity: 0 maskOpacity: 0
visible: top_padding visible: topPadding
clip: true clip: true
target_rect: Qt.rect(x,y-top_padding,width,height) targetRect: Qt.rect(x,y-topPadding,width,height)
use_solid_bg: false useSolidBg: false
} }
Item{ Item{
id: clipper id: clipper
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top:top_mask.bottom anchors.top:top_mask.bottom
implicitHeight: parent.height - Math.abs(top_padding) - Math.abs(bottom_padding) implicitHeight: parent.height - Math.abs(topPadding) - Math.abs(bottomPadding)
implicitWidth: parent.width implicitWidth: parent.width
clip: true clip: true
ColumnLayout{ ColumnLayout{
@ -66,12 +66,12 @@ Item {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
height: Math.abs(bottom_padding) height: Math.abs(bottomPadding)
target: container target: container
mask_opacity: 0 maskOpacity: 0
visible: bottom_padding visible: bottomPadding
clip: true clip: true
target_rect: Qt.rect(x,y-top_padding,width,height) targetRect: Qt.rect(x,y-topPadding,width,height)
use_solid_bg: false useSolidBg: false
} }
} }

80
lib_source/qml/RibbonWindow.qml
View File

@ -4,7 +4,7 @@ import QWindowKit
Window { Window {
id:window id:window
minimumWidth: title_bar.minimumWidth minimumWidth: titleBar.minimumWidth
enum Status { enum Status {
Stardard, Stardard,
SingleTask, SingleTask,
@ -12,12 +12,12 @@ Window {
} }
default property alias content: container.data default property alias content: container.data
property int windowStatus: RibbonWindow.Status.Stardard property int windowStatus: RibbonWindow.Status.Stardard
property alias window_items: window_items property alias windowItems: windowItems
property alias title_bar: titleBar property alias titleBar: titleBar
property alias popup: pop property alias popup: pop
property bool comfirmed_quit: false property bool comfirmedQuit: false
property bool blurBehindWindow: true property bool blurBehindWindow: true
property int windows_top_fix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug property int windowsTopFix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug
readonly property int borderWidth: border_rect.border.width readonly property int borderWidth: border_rect.border.width
readonly property int borderRadius: border_rect.radius readonly property int borderRadius: border_rect.radius
visible: false visible: false
@ -25,7 +25,7 @@ Window {
if (blurBehindWindow) { if (blurBehindWindow) {
return "transparent" return "transparent"
} }
if (RibbonTheme.dark_mode) { if (RibbonTheme.isDarkMode) {
return '#2C2B29' return '#2C2B29'
} }
return '#FFFFFF' return '#FFFFFF'
@ -34,7 +34,7 @@ Window {
if (Qt.platform.os === 'windows') if (Qt.platform.os === 'windows')
windowAgent.setWindowAttribute("dwm-blur", blurBehindWindow) windowAgent.setWindowAttribute("dwm-blur", blurBehindWindow)
else if (Qt.platform.os === 'osx') else if (Qt.platform.os === 'osx')
windowAgent.setWindowAttribute("blur-effect", blurBehindWindow ? RibbonTheme.dark_mode ? "dark" : "light" : "none") windowAgent.setWindowAttribute("blur-effect", blurBehindWindow ? RibbonTheme.isDarkMode ? "dark" : "light" : "none")
} }
Component.onCompleted: { Component.onCompleted: {
@ -45,27 +45,27 @@ Window {
windowAgent.setSystemButton(WindowAgent.Maximize, titleBar.maximizeBtn); windowAgent.setSystemButton(WindowAgent.Maximize, titleBar.maximizeBtn);
windowAgent.setSystemButton(WindowAgent.Close, titleBar.closeBtn); windowAgent.setSystemButton(WindowAgent.Close, titleBar.closeBtn);
} }
windowAgent.setHitTestVisible(titleBar.left_container) windowAgent.setHitTestVisible(titleBar.leftContainer)
windowAgent.setHitTestVisible(titleBar.right_container) windowAgent.setHitTestVisible(titleBar.rightContainer)
windowAgent.setTitleBar(titleBar) windowAgent.setTitleBar(titleBar)
window.visible = true window.visible = true
windowAgent.centralize() windowAgent.centralize()
raise() raise()
windowAgent.setWindowAttribute("dark-mode", RibbonTheme.dark_mode) windowAgent.setWindowAttribute("dark-mode", RibbonTheme.isDarkMode)
if (Qt.platform.os === 'windows') if (Qt.platform.os === 'windows')
{ {
windowAgent.setWindowAttribute("dwm-blur", blurBehindWindow) windowAgent.setWindowAttribute("dwm-blur", blurBehindWindow)
} }
if(Qt.platform.os === "osx") if(Qt.platform.os === "osx")
{ {
windowAgent.setWindowAttribute("blur-effect", blurBehindWindow ? RibbonTheme.dark_mode ? "dark" : "light" : "none") windowAgent.setWindowAttribute("blur-effect", blurBehindWindow ? RibbonTheme.isDarkMode ? "dark" : "light" : "none")
} }
} }
Item{ Item{
id: window_items id: windowItems
anchors{ anchors{
fill: parent fill: parent
topMargin: border_rect.border.width + windows_top_fix topMargin: border_rect.border.width + windowsTopFix
leftMargin: border_rect.border.width leftMargin: border_rect.border.width
rightMargin: border_rect.border.width rightMargin: border_rect.border.width
bottomMargin: border_rect.border.width bottomMargin: border_rect.border.width
@ -86,50 +86,50 @@ Window {
} }
Connections{ Connections{
target: RibbonTheme target: RibbonTheme
function onTheme_modeChanged() { function onThemeModeChanged() {
windowAgent.setWindowAttribute("dark-mode", RibbonTheme.dark_mode) windowAgent.setWindowAttribute("dark-mode", RibbonTheme.isDarkMode)
if (Qt.platform.os === 'osx') if (Qt.platform.os === 'osx')
windowAgent.setWindowAttribute("blur-effect", blurBehindWindow ? RibbonTheme.dark_mode ? "dark" : "light" : "none") windowAgent.setWindowAttribute("blur-effect", blurBehindWindow ? RibbonTheme.isDarkMode ? "dark" : "light" : "none")
} }
} }
Rectangle{ Rectangle{
z:99 z:99
anchors.fill: parent anchors.fill: parent
color: !RibbonTheme.dark_mode ? Qt.rgba(255,255,255,0.3) : Qt.rgba(0,0,0,0.3) color: !RibbonTheme.isDarkMode ? Qt.rgba(255,255,255,0.3) : Qt.rgba(0,0,0,0.3)
visible: !Window.active visible: !Window.active
} }
Rectangle{ Rectangle{
id: border_rect id: border_rect
z: -1 z: -1
anchors.fill: parent anchors.fill: parent
anchors.topMargin: windows_top_fix anchors.topMargin: windowsTopFix
color: { color: {
if (Qt.platform.os === 'windows') if (Qt.platform.os === 'windows')
{ {
if (RibbonTheme.dark_mode) { if (RibbonTheme.isDarkMode) {
return Qt.alpha('#2C2B29', 0.8) return Qt.alpha('#2C2B29', 0.8)
} }
return Qt.alpha('#FFFFFF',0.8) return Qt.alpha('#FFFFFF',0.8)
} }
return 'transparent' return 'transparent'
} }
border.color: RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" border.color: RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7"
border.width: RibbonTheme.modern_style ? 1 : 0 border.width: RibbonTheme.modernStyle ? 1 : 0
radius: Qt.platform.os === 'windows' ? RibbonUI.is_win11 ? 7 : 0 : 10 radius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
visible: RibbonTheme.modern_style || blurBehindWindow visible: RibbonTheme.modernStyle || blurBehindWindow
} }
RibbonPopup{ RibbonPopup{
id: pop id: pop
target: window_items target: windowItems
target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
blur_enabled: true blurEnabled: true
} }
RibbonPopupDialog{ RibbonPopupDialog{
id: close_dialog id: close_dialog
target: window_items target: windowItems
blur_enabled: true blurEnabled: true
target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
positiveText: qsTr("Quit") positiveText: qsTr("Quit")
neutralText: qsTr("Minimize") neutralText: qsTr("Minimize")
negativeText: qsTr("Cancel") negativeText: qsTr("Cancel")
@ -138,7 +138,7 @@ Window {
buttonFlags: RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton buttonFlags: RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton
onNeutralClicked: window.visibility = Window.Minimized onNeutralClicked: window.visibility = Window.Minimized
onPositiveClicked: { onPositiveClicked: {
comfirmed_quit = false comfirmedQuit = false
Qt.quit() Qt.quit()
} }
} }
@ -149,12 +149,12 @@ Window {
onClosing:function(event){ onClosing:function(event){
window.raise() window.raise()
event.accepted = !comfirmed_quit event.accepted = !comfirmedQuit
if (comfirmed_quit) if (comfirmedQuit)
close_dialog.open() close_dialog.open()
} }
function show_window(window_url, args){ function showWindow(window_url, args){
let sub_windows = RibbonUI.windowsSet let sub_windows = RibbonUI.windowsSet
if (sub_windows.hasOwnProperty(window_url)&&sub_windows[window_url]['windowStatus'] !== RibbonWindow.Status.Stardard) if (sub_windows.hasOwnProperty(window_url)&&sub_windows[window_url]['windowStatus'] !== RibbonWindow.Status.Stardard)
{ {
@ -202,18 +202,4 @@ Window {
console.error("RibbonWindow: Error loading Window:", component.errorString()) console.error("RibbonWindow: Error loading Window:", component.errorString())
} }
} }
function show_popup(content_url, arguments)
{
console.warn(qsTr("RibbonWindow: This \"show_popup()\" function is deprecated, please use RibbonPopup.open_content()"))
popup.show_close_btn = !popup.show_close_btn
popup.show_content(content_url, arguments)
}
function close_popup()
{
console.warn(qsTr("RibbonWindow: This \"close_popup()\" function is deprecated, please use RibbonPopup.close_content()"))
popup.show_close_btn = !popup.show_close_btn
pop.close_content()
}
} }

24
lib_source/ribbontheme.cpp
View File

@ -13,12 +13,12 @@
RibbonTheme::RibbonTheme() RibbonTheme::RibbonTheme()
{ {
connect(this, &RibbonTheme::theme_modeChanged, this, [=](){ connect(this, &RibbonTheme::themeModeChanged, this, [=](){
emit dark_modeChanged(); emit isDarkModeChanged();
}); });
_theme_mode = RibbonThemeType::ThemeMode::System; _themeMode = RibbonThemeType::ThemeMode::System;
_system_theme_mode = current_theme(); _system_themeMode = currentTheme();
modern_style(false); modernStyle(false);
nativeText(true); nativeText(true);
qApp->installEventFilter(this); qApp->installEventFilter(this);
} }
@ -39,16 +39,16 @@ bool RibbonTheme::eventFilter(QObject *obj, QEvent *event)
Q_UNUSED(obj); Q_UNUSED(obj);
if (event->type() == QEvent::ApplicationPaletteChange || event->type() == QEvent::ThemeChange) if (event->type() == QEvent::ApplicationPaletteChange || event->type() == QEvent::ThemeChange)
{ {
_system_theme_mode = current_theme(); _system_themeMode = currentTheme();
if (_theme_mode == RibbonThemeType::ThemeMode::System) if (_themeMode == RibbonThemeType::ThemeMode::System)
Q_EMIT theme_modeChanged(); Q_EMIT themeModeChanged();
event->accept(); event->accept();
return true; return true;
} }
return false; return false;
} }
RibbonThemeType::ThemeMode RibbonTheme::current_theme() RibbonThemeType::ThemeMode RibbonTheme::currentTheme()
{ {
#if (QT_VERSION >= QT_VERSION_CHECK(6, 5, 0)) #if (QT_VERSION >= QT_VERSION_CHECK(6, 5, 0))
return (QGuiApplication::styleHints()->colorScheme() == Qt::ColorScheme::Light) ? return (QGuiApplication::styleHints()->colorScheme() == Qt::ColorScheme::Light) ?
@ -66,8 +66,8 @@ RibbonThemeType::ThemeMode RibbonTheme::current_theme()
#endif #endif
} }
bool RibbonTheme::dark_mode() bool RibbonTheme::isDarkMode()
{ {
return _theme_mode == RibbonThemeType::ThemeMode::System ? _system_theme_mode == RibbonThemeType::ThemeMode::Dark return _themeMode == RibbonThemeType::ThemeMode::System ? _system_themeMode == RibbonThemeType::ThemeMode::Dark
: _theme_mode == RibbonThemeType::ThemeMode::Dark; : _themeMode == RibbonThemeType::ThemeMode::Dark;
} }

14
lib_source/ribbontheme.h
View File

@ -11,21 +11,21 @@ class RibbonTheme : public QQuickItem
QML_SINGLETON QML_SINGLETON
QML_NAMED_ELEMENT(RibbonTheme) QML_NAMED_ELEMENT(RibbonTheme)
Q_PROPERTY(bool dark_mode READ dark_mode() NOTIFY dark_modeChanged FINAL) Q_PROPERTY(bool isDarkMode READ isDarkMode() NOTIFY isDarkModeChanged FINAL)
Q_PROPERTY_RW(RibbonThemeType::ThemeMode,theme_mode) Q_PROPERTY_RW(RibbonThemeType::ThemeMode,themeMode)
Q_PROPERTY_RW(bool,modern_style) Q_PROPERTY_RW(bool,modernStyle)
Q_PROPERTY_RW(bool,nativeText) Q_PROPERTY_RW(bool,nativeText)
public: public:
static RibbonTheme* create(QQmlEngine *qmlEngine, QJSEngine *jsEngine){return instance();} static RibbonTheme* create(QQmlEngine *qmlEngine, QJSEngine *jsEngine){return instance();}
static RibbonTheme* instance(); static RibbonTheme* instance();
Q_SIGNAL void dark_modeChanged(); Q_SIGNAL void isDarkModeChanged();
bool dark_mode(); bool isDarkMode();
private: private:
RibbonTheme(); RibbonTheme();
Q_DISABLE_COPY_MOVE(RibbonTheme) Q_DISABLE_COPY_MOVE(RibbonTheme)
bool eventFilter(QObject *obj, QEvent *event); bool eventFilter(QObject *obj, QEvent *event);
RibbonThemeType::ThemeMode current_theme(); RibbonThemeType::ThemeMode currentTheme();
RibbonThemeType::ThemeMode _system_theme_mode; RibbonThemeType::ThemeMode _system_themeMode;
}; };
#endif // RIBBONTHEME_H #endif // RIBBONTHEME_H

4
lib_source/ribbonui.cpp
View File

@ -9,8 +9,8 @@ RibbonUI::RibbonUI(QQuickItem *parent)
: QQuickItem(parent) : QQuickItem(parent)
{ {
_version = VER_JOIN(RIBBONUI_VERSION); _version = VER_JOIN(RIBBONUI_VERSION);
_qt_version = QString(qVersion()).replace('.',"").toInt(); _qtVersion = QString(qVersion()).replace('.',"").toInt();
_is_win11 = QOperatingSystemVersion::current() >= QOperatingSystemVersion(QOperatingSystemVersion::Windows, 10, 0, 22000); _isWin11 = QOperatingSystemVersion::current() >= QOperatingSystemVersion(QOperatingSystemVersion::Windows, 10, 0, 22000);
} }
RibbonUI* RibbonUI::instance(){ RibbonUI* RibbonUI::instance(){

4
lib_source/ribbonui.h
View File

@ -11,8 +11,8 @@ class RibbonUI : public QQuickItem
QML_SINGLETON QML_SINGLETON
QML_NAMED_ELEMENT(RibbonUI) QML_NAMED_ELEMENT(RibbonUI)
Q_PROPERTY_R(QString, version) Q_PROPERTY_R(QString, version)
Q_PROPERTY_R(int, qt_version) Q_PROPERTY_R(int, qtVersion)
Q_PROPERTY_R(int, is_win11) Q_PROPERTY_R(int, isWin11)
Q_PROPERTY_RW(QVariantMap, windowsSet) Q_PROPERTY_RW(QVariantMap, windowsSet)
public: public:
static RibbonUI* instance(); static RibbonUI* instance();