From 00014f19be0d5115e8b08f6373c8658ae06c139d Mon Sep 17 00:00:00 2001 From: Mentalflow <312902918@qq.com> Date: Sun, 19 May 2024 20:08:20 +0800 Subject: [PATCH] Project: Change all API naming style to camel nomenclature. --- example/about.qml | 10 +- .../RibbonMessageListViewExample.qml | 16 +- example/example.qml | 300 +++++++++--------- example/pages/SettingsMenuPage.qml | 20 +- lib_source/qml/RibbonBackStageGroup.qml | 2 +- lib_source/qml/RibbonBackStageView.qml | 121 +++---- lib_source/qml/RibbonBlur.qml | 26 +- lib_source/qml/RibbonBottomBar.qml | 40 +-- lib_source/qml/RibbonButton.qml | 76 ++--- lib_source/qml/RibbonCheckBox.qml | 50 +-- lib_source/qml/RibbonComboBox.qml | 54 ++-- lib_source/qml/RibbonIcon.qml | 16 +- lib_source/qml/RibbonLineEdit.qml | 44 +-- lib_source/qml/RibbonMenu.qml | 10 +- lib_source/qml/RibbonMenuItem.qml | 54 ++-- lib_source/qml/RibbonMenuSeparator.qml | 4 +- lib_source/qml/RibbonMessage.qml | 24 +- lib_source/qml/RibbonMessageListView.qml | 24 +- lib_source/qml/RibbonPaperView.qml | 20 +- lib_source/qml/RibbonPopup.qml | 58 ++-- lib_source/qml/RibbonPopupDialog.qml | 56 ++-- lib_source/qml/RibbonPushButton.qml | 58 ++-- lib_source/qml/RibbonScrollBar.qml | 28 +- lib_source/qml/RibbonScrollIndicator.qml | 4 +- lib_source/qml/RibbonShadow.qml | 6 +- lib_source/qml/RibbonSlider.qml | 72 ++--- lib_source/qml/RibbonSpinBox.qml | 38 +-- lib_source/qml/RibbonSwitchButton.qml | 90 +++--- lib_source/qml/RibbonTabBar.qml | 86 ++--- lib_source/qml/RibbonTabButton.qml | 14 +- lib_source/qml/RibbonTabGroup.qml | 30 +- lib_source/qml/RibbonText.qml | 14 +- lib_source/qml/RibbonTextBoxMenu.qml | 22 +- lib_source/qml/RibbonTextEdit.qml | 50 +-- lib_source/qml/RibbonTitleBar.qml | 140 ++++---- lib_source/qml/RibbonToolTip.qml | 6 +- lib_source/qml/RibbonTour.qml | 50 +-- lib_source/qml/RibbonTourContent.qml | 26 +- lib_source/qml/RibbonView.qml | 38 +-- lib_source/qml/RibbonWindow.qml | 80 ++--- lib_source/ribbontheme.cpp | 24 +- lib_source/ribbontheme.h | 14 +- lib_source/ribbonui.cpp | 4 +- lib_source/ribbonui.h | 4 +- 44 files changed, 957 insertions(+), 966 deletions(-) diff --git a/example/about.qml b/example/about.qml index 0b2a8f4..9812c29 100644 --- a/example/about.qml +++ b/example/about.qml @@ -5,12 +5,12 @@ import RibbonUI RibbonWindow { id: window - width: Math.max(content.width, content.height + title_bar.height, title_bar.minimumWidth) + content.anchors.margins * 2 - minimumWidth: title_bar.minimumWidth - minimumHeight: content.height + title_bar.height + content.anchors.margins * 2 + width: Math.max(content.width, content.height + titleBar.height, titleBar.minimumWidth) + content.anchors.margins * 2 + minimumWidth: titleBar.minimumWidth + minimumHeight: content.height + titleBar.height + content.anchors.margins * 2 title: qsTr("About") - title_bar.show_darkmode_btn: false - title_bar.show_style_switch: false + titleBar.showDarkmodeBtn: false + titleBar.showStyleSwitch: false windowStatus: RibbonWindow.Status.SingleInstance ColumnLayout{ diff --git a/example/components/RibbonMessageListViewExample.qml b/example/components/RibbonMessageListViewExample.qml index c473998..c693d9e 100644 --- a/example/components/RibbonMessageListViewExample.qml +++ b/example/components/RibbonMessageListViewExample.qml @@ -19,15 +19,15 @@ Item { } RibbonMessageListView{ id: view - auto_scroll_to_bottom: true + autoScrollToBottom: true Layout.preferredHeight: 500 Layout.preferredWidth: parent.width delegate: RibbonMessage{ id: msg - sender_text: `${model.time} ${model.recieved ? qsTr('Recieved') : qsTr('Sent')}` + senderText: `${model.time} ${model.recieved ? qsTr('Recieved') : qsTr('Sent')}` RibbonText{ - font.pixelSize: msg.font_size - color: RibbonTheme.dark_mode ? "white" : !model.recieved ? "white" : "black" + font.pixelSize: msg.fontSize + color: RibbonTheme.isDarkMode ? "white" : !model.recieved ? "white" : "black" text: model.text ? model.text : "" visible: model.text ? true : false Layout.preferredWidth: implicitWidth < (view.width / 2 - padding) ? implicitWidth : (view.width / 2 - padding) @@ -38,10 +38,10 @@ Item { RowLayout{ Layout.alignment: Qt.AlignHCenter RibbonButton{ - icon_source: RibbonIcons.AddCircle + iconSource: RibbonIcons.AddCircle text: qsTr('Add Message') onClicked: { - view.message_model.append({ + view.messageModel.append({ time: Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss.zzz"), text: String(Math.random()*10), recieved: (Math.floor(Math.random()*10))%2===0, @@ -49,10 +49,10 @@ Item { } } RibbonButton{ - icon_source: RibbonIcons.DismissCircle + iconSource: RibbonIcons.DismissCircle text: qsTr('Clear Message') onClicked: { - view.message_model.clear() + view.messageModel.clear() } } } diff --git a/example/example.qml b/example/example.qml index e526c57..b6b5ae9 100644 --- a/example/example.qml +++ b/example/example.qml @@ -9,8 +9,8 @@ RibbonWindow { width: 1200 height: 800 title: qsTr("RibbonUI APP") - comfirmed_quit: true - property bool modern_style: RibbonTheme.modern_style + comfirmedQuit: true + property bool modernStyle: RibbonTheme.modernStyle RibbonTour{ id: tour targetList: [ @@ -47,8 +47,8 @@ RibbonWindow { title: qsTr("Switch Buttons"), text: qsTr("Switch buttons with/without background color or grabber text."), target: switch_layout, - enter_func: ()=>btn_with_color_and_grabber_text.checked = true, - exit_func: ()=>btn_with_color_and_grabber_text.checked = false + enter_func: ()=>btn_with_color_and_grabberText.checked = true, + exit_func: ()=>btn_with_color_and_grabberText.checked = false }, { title: qsTr("CheckBoxs"), @@ -88,20 +88,20 @@ RibbonWindow { target: bottom_bar }, ] - target: window_items - blur_enabled: true - target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) } Component.onCompleted: tour.open() RibbonTabBar { id: tab_bar - modern_style: root.modern_style - right_tool_bar: RowLayout{ + modernStyle: root.modernStyle + rightToolBar: RowLayout{ id: tab_bar_tool spacing: 10 RibbonButton{ text:"Test Button 1" - icon_source: RibbonIcons.Alert + iconSource: RibbonIcons.Alert checkable: true } RibbonButton{ @@ -128,16 +128,16 @@ RibbonWindow { RibbonSlider{ id: slider_with_btn Layout.alignment: Qt.AlignVCenter - slide_width: 40 + slideWidth: 40 horizontal: false value: 20 } RibbonSlider{ id: slider_without_btn Layout.alignment: Qt.AlignVCenter - slide_width: 40 + slideWidth: 40 horizontal: false - show_button: false + showButton: false value: 40 } ColumnLayout{ @@ -145,13 +145,13 @@ RibbonWindow { Layout.alignment: Qt.AlignVCenter RibbonSlider{ Layout.alignment: Qt.AlignHCenter - slide_width: 40 + slideWidth: 40 value: 60 } RibbonSlider{ Layout.alignment: Qt.AlignHCenter - slide_width: 40 - show_button: false + slideWidth: 40 + showButton: false value: 80 } } @@ -169,38 +169,38 @@ RibbonWindow { ColumnLayout{ spacing: 5 RibbonSwitchButton{ - id: btn_with_color_and_grabber_text + id: btn_with_color_and_grabberText text: "Button" - grabber_checked_color: "red" + grabberCheckedColor: "red" checked: true } RibbonSwitchButton{ text: "Button" - text_on_left: true - grabber_checked_color: "orange" + textOnLeft: true + grabberCheckedColor: "orange" checked: true } RibbonSwitchButton{ - grabber_checked_color: "blue" + grabberCheckedColor: "blue" } } ColumnLayout{ spacing: 5 RibbonSwitchButton{ text: "Button" - show_grabber_text: false - grabber_checked_color: "green" + showGrabberText: false + grabberCheckedColor: "green" } RibbonSwitchButton{ text: "Button" - show_grabber_text: false - text_on_left: true - grabber_checked_color: "indigo" + showGrabberText: false + textOnLeft: true + grabberCheckedColor: "indigo" checked: true } RibbonSwitchButton{ - show_grabber_text: false - grabber_checked_color: "yellow" + showGrabberText: false + grabberCheckedColor: "yellow" checked: true } } @@ -219,24 +219,24 @@ RibbonWindow { spacing: 10 RibbonCheckBox{ text: "CheckBox" - icon_filled_bg_color: "blue" + iconFilledBgColor: "blue" checked: true } RibbonCheckBox{ text: "CheckBox" - text_on_left: true - icon_filled_bg_color: "red" + textOnLeft: true + iconFilledBgColor: "red" } RowLayout{ spacing: 30 RibbonCheckBox{ - icon_filled_bg_color:"orange" - tip_text: "CheckBox" - show_tooltip: true + iconFilledBgColor:"orange" + tipText: "CheckBox" + showTooltip: true checked: true } RibbonCheckBox{ - icon_filled_bg_color:"purple" + iconFilledBgColor:"purple" } } } @@ -255,7 +255,7 @@ RibbonWindow { spacing: 10 RibbonButton{ text:"Button" - icon_source: RibbonIcons.Accessibility + iconSource: RibbonIcons.Accessibility checkable: true } RibbonButton{ @@ -263,50 +263,50 @@ RibbonWindow { } RibbonButton{ text:"Button" - show_tooltip: false + showTooltip: false } } ColumnLayout{ spacing: 10 RibbonButton{ text:"Button" - show_bg:false - icon_source: RibbonIcons.Beaker + showBg:false + iconSource: RibbonIcons.Beaker checkable: true } RibbonButton{ text:"Button" - show_bg:false + showBg:false } RibbonButton{ text:"Button" - show_bg:false - show_tooltip: false + showBg:false + showTooltip: false } } ColumnLayout{ spacing: 10 RibbonButton{ id: btn_without_bg_and_label - show_bg:false - icon_source: RibbonIcons.Badge - icon_source_filled: RibbonIcons_Filled.Badge + showBg:false + iconSource: RibbonIcons.Badge + iconSourceFilled: RibbonIcons_Filled.Badge checkable: true - tip_text: "Button" + tipText: "Button" } RibbonButton{ - show_bg:false - icon_source: RibbonIcons.Clock - icon_source_filled: RibbonIcons_Filled.Clock - tip_text: "Button" + showBg:false + iconSource: RibbonIcons.Clock + iconSourceFilled: RibbonIcons_Filled.Clock + tipText: "Button" } RibbonButton{ - show_bg:false - icon_source: RibbonIcons.Board - icon_source_filled: RibbonIcons_Filled.Board + showBg:false + iconSource: RibbonIcons.Board + iconSourceFilled: RibbonIcons_Filled.Board checkable: true - tip_text: "Button" - show_tooltip: false + tipText: "Button" + showTooltip: false } } } @@ -321,12 +321,12 @@ RibbonWindow { spacing: 10 RibbonPushButton{ text: qsTr("No Menu") - icon_source: RibbonIcons.AttachText + iconSource: RibbonIcons.AttachText } RibbonPushButton{ id: push_btn_with_menu text: qsTr("Menu") - icon_source: RibbonIcons.MeetNow + iconSource: RibbonIcons.MeetNow Action{ text: "Test Item 1" } @@ -338,12 +338,12 @@ RibbonWindow { } RibbonPushButton{ text: qsTr("No Menu") - icon_source: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png" - icon_size: height-5 + iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png" + iconSize: height-5 } RibbonPushButton{ text: qsTr("Menu") - icon_source: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png" + iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png" Action{ text: "Test Item 3" } @@ -372,7 +372,7 @@ RibbonWindow { RibbonLineEdit{ } RibbonLineEdit{ - show_clear_btn:false + showClearBtn:false } } ColumnLayout{ @@ -380,11 +380,11 @@ RibbonWindow { Layout.fillHeight: true RibbonLineEdit{ id: lineedit_with_icon - icon_source:RibbonIcons.Search + iconSource:RibbonIcons.Search } RibbonLineEdit{ - icon_source:RibbonIcons.Keyboard - show_clear_btn:false + iconSource:RibbonIcons.Keyboard + showClearBtn:false } } } @@ -401,24 +401,24 @@ RibbonWindow { spacing: 30 Layout.fillHeight: true RibbonTextEdit{ - max_height: 50 + maxHeight: 50 } RibbonTextEdit{ - max_height: 30 - show_clear_btn:false + maxHeight: 30 + showClearBtn:false } } ColumnLayout{ spacing: 30 Layout.fillHeight: true RibbonTextEdit{ - max_height: 50 - icon_source:RibbonIcons.Search + maxHeight: 50 + iconSource:RibbonIcons.Search } RibbonTextEdit{ - max_height: 30 - icon_source:RibbonIcons.Keyboard - show_clear_btn:false + maxHeight: 30 + iconSource:RibbonIcons.Keyboard + showClearBtn:false } } } @@ -464,7 +464,7 @@ RibbonWindow { ListElement { text: "Test Item 2" } ListElement { text: "Test Item 3" } } - icon_source: RibbonIcons.Beaker + iconSource: RibbonIcons.Beaker } RibbonComboBox{ editable: true @@ -474,7 +474,7 @@ RibbonWindow { ListElement { text: "Test Item 2" } ListElement { text: "Test Item 3" } } - icon_source: RibbonIcons.Calendar + iconSource: RibbonIcons.Calendar onAccepted: { if (find(editText) === -1 && editText) model_1.append({text: editText}) @@ -486,7 +486,7 @@ RibbonWindow { RibbonTabGroup{ width: spinbox_layout.width + 30 text: qsTr("Spin Box") - show_border: false + showBorder: false RowLayout{ id: spinbox_layout anchors.centerIn: parent @@ -501,7 +501,7 @@ RibbonWindow { RibbonSpinBox{ id: spinbox width: 80 - icon_source: RibbonIcons.DataPie + iconSource: RibbonIcons.DataPie validator: DoubleValidator { bottom: Math.min(spinbox.from, spinbox.to) top: Math.max(spinbox.from, spinbox.to) @@ -531,9 +531,9 @@ RibbonWindow { spacing: 10 RibbonButton{ text: qsTr('Open Message List View') - icon_source: RibbonIcons.Open + iconSource: RibbonIcons.Open 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{ font.pixelSize: 13 text: "Test Text (Read Only)" - view_only: true + viewOnly: true } } } @@ -574,7 +574,7 @@ RibbonWindow { spacing: 10 RibbonButton{ text: qsTr("Open Menu") - icon_source: RibbonIcons.Open + iconSource: RibbonIcons.Open onClicked: menu.popup() } } @@ -592,12 +592,12 @@ RibbonWindow { Layout.fillHeight: true RibbonButton{ text: qsTr("Open Popup") - icon_source: RibbonIcons.Open + iconSource: RibbonIcons.Open onClicked: popup.open() } RibbonButton{ text: qsTr("Open Popup Dialog (Double Choices)") - icon_source: RibbonIcons.Open + iconSource: RibbonIcons.Open onClicked: { dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton dialog.open() @@ -605,7 +605,7 @@ RibbonWindow { } RibbonButton{ text: qsTr("Open Popup Dialog (Triple Choices)") - icon_source: RibbonIcons.Open + iconSource: RibbonIcons.Open onClicked: { dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton dialog.open() @@ -616,15 +616,15 @@ RibbonWindow { id: popup height: 200 width: height - target: window_items - blur_enabled: true - target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) } RibbonPopupDialog{ id: dialog - target: window_items - blur_enabled: true - target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) } } } @@ -634,9 +634,9 @@ RibbonWindow { RibbonPaperView{ id: view anchors.fill: parent - top_padding: tab_bar.height - bottom_padding: bottom_bar.height - page_width: (page_slider.value / 100.0) * width + topPadding: tab_bar.height + bottomPadding: bottom_bar.height + pageWidth: (page_slider.value / 100.0) * width spacing: 0 ColumnLayout{ Layout.alignment: Qt.AlignCenter @@ -707,87 +707,87 @@ RibbonWindow { right: parent.right bottom: parent.bottom } - right_content: RowLayout{ + rightContent: RowLayout{ clip: true spacing:1 Layout.preferredHeight: parent.height layoutDirection: Qt.RightToLeft RibbonSlider{ id: page_slider - slide_width: 80 - show_filled_color: false + slideWidth: 80 + showFilledColor: false value: 70 } RibbonButton{ text:"Test Button 3" - show_bg:false - adapt_height:true - icon_source: RibbonIcons.Airplane + showBg:false + adaptHeight:true + iconSource: RibbonIcons.Airplane } RibbonButton{ text:"Test Button 4" - show_bg:false - adapt_height:true + showBg:false + adaptHeight:true } } RibbonButton{ text:"Test Button 5" - show_bg:false - adapt_height:true - icon_source: RibbonIcons.AccessTime + showBg:false + adaptHeight:true + iconSource: RibbonIcons.AccessTime checkable: true } RibbonButton{ text:"Test Button 6" - show_bg:false - adapt_height:true + showBg:false + adaptHeight:true } RibbonButton{ - show_bg:false - adapt_height:true - icon_source: RibbonIcons.AppStore + showBg:false + adaptHeight:true + iconSource: RibbonIcons.AppStore checkable: true - tip_text: "Test Button 7" + tipText: "Test Button 7" } } - title_bar.right_content:RowLayout{ + titleBar.rightContent:RowLayout{ spacing: 1 layoutDirection: Qt.RightToLeft RibbonButton{ - show_bg:false - icon_source: RibbonIcons.Info - icon_source_filled: RibbonIcons_Filled.Info - tip_text: qsTr("About") - hover_color: Qt.rgba(0,0,0, 0.3) - pressed_color: Qt.rgba(0,0,0, 0.4) - text_color: title_bar.title_text_color - text_color_reverse: false - onClicked: root.show_window(Qt.resolvedUrl("about.qml")) + showBg:false + iconSource: RibbonIcons.Info + iconSourceFilled: RibbonIcons_Filled.Info + tipText: qsTr("About") + hoverColor: Qt.rgba(0,0,0, 0.3) + pressedColor: Qt.rgba(0,0,0, 0.4) + textColor: titleBar.titleTextColor + textColorReverse: false + onClicked: root.showWindow(Qt.resolvedUrl("about.qml")) } RibbonButton{ - show_bg:false - icon_source: RibbonIcons.Map - icon_source_filled: RibbonIcons_Filled.Map - tip_text: qsTr("Tour") - hover_color: Qt.rgba(0,0,0, 0.3) - pressed_color: Qt.rgba(0,0,0, 0.4) - text_color: title_bar.title_text_color - text_color_reverse: false + showBg:false + iconSource: RibbonIcons.Map + iconSourceFilled: RibbonIcons_Filled.Map + tipText: qsTr("Tour") + hoverColor: Qt.rgba(0,0,0, 0.3) + pressedColor: Qt.rgba(0,0,0, 0.4) + textColor: titleBar.titleTextColor + textColorReverse: false onClicked: tour.open() } } - title_bar.left_content:RowLayout{ + titleBar.leftContent:RowLayout{ spacing: 1 RibbonButton{ - show_bg:false - icon_source: RibbonIcons.ChevronDown - tip_text: "Test Button 8" - hover_color: Qt.rgba(0,0,0, 0.3) - pressed_color: Qt.rgba(0,0,0, 0.4) - text_color: title_bar.title_text_color - text_color_reverse: false + showBg:false + iconSource: RibbonIcons.ChevronDown + tipText: "Test Button 8" + hoverColor: Qt.rgba(0,0,0, 0.3) + pressedColor: Qt.rgba(0,0,0, 0.4) + textColor: titleBar.titleTextColor + textColorReverse: false RibbonMenu{ id:menu width: 200 @@ -810,15 +810,15 @@ RibbonWindow { onClicked:menu.popup() } RibbonButton{ - show_bg:false - icon_source: RibbonIcons.Apps - icon_source_filled: RibbonIcons_Filled.Apps + showBg:false + iconSource: RibbonIcons.Apps + iconSourceFilled: RibbonIcons_Filled.Apps checkable: true - tip_text: "Test Button 9" - hover_color: Qt.rgba(0,0,0, 0.3) - pressed_color: Qt.rgba(0,0,0, 0.4) - text_color: title_bar.title_text_color - text_color_reverse: false + tipText: "Test Button 9" + hoverColor: Qt.rgba(0,0,0, 0.3) + pressedColor: Qt.rgba(0,0,0, 0.4) + textColor: titleBar.titleTextColor + textColorReverse: false enabled: false } } @@ -843,13 +843,13 @@ RibbonWindow { implicitHeight: root.height - root.borderWidth * 2 implicitWidth: root.width - root.borderWidth * 2 blurEnabled: true - blurTarget: root.window_items + blurTarget: root.windowItems radius: borderRadius - pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":"head", "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}}, - {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":"head", "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}}, - {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":"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":"About", "menu_icon":RibbonIcons.Info, "type":"tail", "clickOnly":true, "clickFunc": ()=>root.show_window(Qt.resolvedUrl("about.qml"))}, - {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":"tail", "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}] + 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":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}}, + {"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":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")}, + {"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":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}] } } diff --git a/example/pages/SettingsMenuPage.qml b/example/pages/SettingsMenuPage.qml index 7c4e32f..8646814 100644 --- a/example/pages/SettingsMenuPage.qml +++ b/example/pages/SettingsMenuPage.qml @@ -31,24 +31,24 @@ RibbonBackStagePage{ ListElement { text: "Dark" } ListElement { text: "System" } } - icon_source: RibbonIcons.DarkTheme + iconSource: RibbonIcons.DarkTheme Component.onCompleted: update_state() onActivated: { if (currentText === "System") - RibbonTheme.theme_mode = RibbonThemeType.System + RibbonTheme.themeMode = RibbonThemeType.System else if (currentText === "Light") - RibbonTheme.theme_mode = RibbonThemeType.Light + RibbonTheme.themeMode = RibbonThemeType.Light else - RibbonTheme.theme_mode = RibbonThemeType.Dark + RibbonTheme.themeMode = RibbonThemeType.Dark } Connections{ target: RibbonTheme - function onTheme_modeChanged(){ + function onThemeModeChanged(){ theme_combo.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) } } @@ -59,9 +59,9 @@ RibbonBackStagePage{ } RibbonSwitchButton{ text: qsTr("Style") - grabber_text: checked ? qsTr("Modern") : qsTr("Classic") - onClicked: RibbonTheme.modern_style = checked - checked: RibbonTheme.modern_style + grabberText: checked ? qsTr("Modern") : qsTr("Classic") + onClicked: RibbonTheme.modernStyle = checked + checked: RibbonTheme.modernStyle } } } @@ -78,7 +78,7 @@ RibbonBackStagePage{ RibbonSwitchButton{ id: render_btn text: "Render" - grabber_text: RibbonTheme.nativeText ? "Native" : "Qt" + grabberText: RibbonTheme.nativeText ? "Native" : "Qt" checked: true Layout.alignment: Qt.AlignHCenter onClicked: { diff --git a/lib_source/qml/RibbonBackStageGroup.qml b/lib_source/qml/RibbonBackStageGroup.qml index 9713bd6..2d0546f 100644 --- a/lib_source/qml/RibbonBackStageGroup.qml +++ b/lib_source/qml/RibbonBackStageGroup.qml @@ -30,7 +30,7 @@ Item { } height: 1 width: parent.width - color: RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" + color: RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1" } Rectangle{ diff --git a/lib_source/qml/RibbonBackStageView.qml b/lib_source/qml/RibbonBackStageView.qml index 98da50c..30633f8 100644 --- a/lib_source/qml/RibbonBackStageView.qml +++ b/lib_source/qml/RibbonBackStageView.qml @@ -8,6 +8,11 @@ Popup { padding: 0 anchors.centerIn: Overlay.overlay closePolicy: Popup.NoAutoClose + enum MenuItemLocation { + Head, + Body, + Tail + } property bool blurEnabled: false property var blurTarget: control property bool showBackBtn: true @@ -37,14 +42,14 @@ Popup { id: blur_bg anchors.fill: parent 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 - mask_color: content_bg.color - mask_opacity: 0 - blur_radius: 0 + maskColor: content_bg.color + maskOpacity: 0 + blurRadius: 0 radius: control.radius - Behavior on mask_opacity { + Behavior on maskOpacity { enabled: parent.visible NumberAnimation { duration: 300 @@ -52,7 +57,7 @@ Popup { } } - Behavior on blur_radius { + Behavior on blurRadius { enabled: parent.visible NumberAnimation { duration: 300 @@ -77,23 +82,23 @@ Popup { } width: 150 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 bottomLeftRadius: topLeftRadius property int currentMenu: 0 RibbonButton{ id: back_btn - show_bg: false - show_hovered_bg: false - show_tooltip: false + showBg: false + showHoveredBg: false + showTooltip: false text: backText font.pixelSize: 30 - icon_source: RibbonIcons.ArrowCircleLeft - implicitWidth: ribbon_icon.width - implicitHeight: ribbon_icon.height - text_color: RibbonTheme.modern_style && !RibbonTheme.dark_mode ? "black" : "white" - ribbon_icon.filled: hovered + iconSource: RibbonIcons.ArrowCircleLeft + implicitWidth: ribbonIcon.width + implicitHeight: ribbonIcon.height + textColor: RibbonTheme.modernStyle && !RibbonTheme.isDarkMode ? "black" : "white" + ribbonIcon.filled: hovered anchors{ top: parent.top topMargin: 30 @@ -101,9 +106,9 @@ Popup { leftMargin: 30 } visible: showBackBtn - ribbon_icon.icon_size: 30 - ribbon_icon.color: { - if (RibbonTheme.modern_style && !RibbonTheme.dark_mode) + ribbonIcon.iconSize: 30 + ribbonIcon.color: { + if (RibbonTheme.modernStyle && !RibbonTheme.isDarkMode) { if(pressed) return Qt.alpha("black", 0.8) @@ -130,11 +135,11 @@ Popup { property var view: ListView.view property bool clickOnly: typeof(model.clickOnly) !== 'undefined' ? model.clickOnly : false 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 - 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 - 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 false } @@ -142,24 +147,24 @@ Popup { width: view.width height: item.height + margins * 2 color: { - if(RibbonTheme.modern_style) + if(RibbonTheme.modernStyle) return "transparent" if(view.currentIndex === index && item_bg.isCurrentMenu) { if(mouse.containsMouse) { if(mouse.pressed) - return Qt.alpha(back_btn.text_color, 0.4) - return Qt.alpha(back_btn.text_color, 0.3) + return Qt.alpha(back_btn.textColor, 0.4) + return Qt.alpha(back_btn.textColor, 0.3) } else - return Qt.alpha(back_btn.text_color, 0.2) + return Qt.alpha(back_btn.textColor, 0.2) } else { if(mouse.containsMouse) { - let color = back_btn.text_color === 'black' ? "white" : "black" + let color = back_btn.textColor === 'black' ? "white" : "black" if(mouse.pressed) return Qt.alpha(color, 0.3) return Qt.alpha(color, 0.2) @@ -179,12 +184,12 @@ Popup { radius: width / 2 color: { if (mouse.containsMouse) - return RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" + return RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1" return "transparent" } width: 2 height: parent.height - 4 - visible: RibbonTheme.modern_style + visible: RibbonTheme.modernStyle } RowLayout{ @@ -198,13 +203,13 @@ Popup { RibbonIcon{ id :rib_icon - icon_source: typeof(model.menu_icon) === "number" ? model.menu_icon : 0 - icon_source_filled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : icon_source - icon_size: menu_label.contentHeight + iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0 + iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource + iconSize: menu_label.contentHeight visible: typeof(model.menu_icon) === "number" && model.menu_icon Layout.alignment: Qt.AlignVCenter 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 { id: pic_icon @@ -218,7 +223,7 @@ Popup { Text{ id: menu_label 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 verticalAlignment: Text.AlignVCenter font.pixelSize: 13 @@ -238,7 +243,7 @@ Popup { RibbonToolTip{ 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 text: model.tool_text ? model.tool_text : "" } @@ -253,12 +258,12 @@ Popup { control.pageModel[model.globalIndex].clickFunc() } else{ - if (item_bg.view.type === "head") + if (item_bg.view.type === RibbonBackStageView.MenuItemLocation.Head) { menu_bg.currentMenu = 0 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 ani_modern_border.targetMenu = tail_menu_list @@ -296,14 +301,14 @@ Popup { Layout.preferredHeight: contentHeight clip: true interactive: false - property string type: "head" + property var type: RibbonBackStageView.MenuItemLocation.Head } Rectangle{ Layout.alignment: Qt.AlignHCenter Layout.preferredHeight: 1 Layout.preferredWidth: parent.width - 40 - color: RibbonTheme.modern_style ? RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" :RibbonTheme.dark_mode ? "#B1B1B1" : Qt.alpha("white", 0.2) - visible: body_menu_list.count + color: RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1" :RibbonTheme.isDarkMode ? "#B1B1B1" : Qt.alpha("white", 0.2) + visible: head_menu_list.count && (body_menu_list.count || tail_menu_list.count) } ListView{ id: body_menu_list @@ -317,14 +322,14 @@ Popup { anchors.rightMargin: 2 } clip: true - property string type: "body" + property var type: RibbonBackStageView.MenuItemLocation.Body } Rectangle{ Layout.alignment: Qt.AlignHCenter Layout.preferredHeight: 1 Layout.preferredWidth: parent.width - 40 - color: RibbonTheme.modern_style ? RibbonTheme.dark_mode ? "#666666" : "#D1D1D1" :RibbonTheme.dark_mode ? "#B1B1B1" : Qt.alpha("white", 0.2) - visible: tail_menu_list.count + color: RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#666666" : "#D1D1D1" :RibbonTheme.isDarkMode ? "#B1B1B1" : Qt.alpha("white", 0.2) + visible: (head_menu_list.count || body_menu_list.count) && tail_menu_list.count } ListView{ id: tail_menu_list @@ -336,7 +341,7 @@ Popup { Layout.preferredHeight: contentHeight clip: true 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) radius: width / 2 color: { - if(RibbonTheme.dark_mode) + if(RibbonTheme.isDarkMode) return "#82ABF1" else return "#1651AA" } width: 2 height: (typeof(targetMenu.currentItem) !== 'undefined' && targetMenu.currentItem) ? targetMenu.currentItem.height - 4 : 0 - visible: RibbonTheme.modern_style + visible: RibbonTheme.modernStyle Behavior on y { NumberAnimation { duration: 300 @@ -389,7 +394,7 @@ Popup { } topRightRadius: control.topMargin === 0 ? control.radius : 0 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 { ColorAnimation { @@ -430,32 +435,32 @@ Popup { Connections{ target: RibbonTheme - function onTheme_modeChanged(){ + function onThemeModeChanged(){ refresh() } } function show(){ 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) - blur_bg.mask_opacity = blurEnabled ? 0.5 : 1 - blur_bg.blur_radius = blurEnabled ? 32 : 0 + 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.maskOpacity = blurEnabled ? 0.5 : 1 + blur_bg.blurRadius = blurEnabled ? 32 : 0 blur_bg.opacity = 1 } function hide(){ 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) - blur_bg.mask_opacity = 0 - blur_bg.blur_radius = 0 + content_bg.color = Qt.alpha(RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? "#0A0A0A" : "#262626" : RibbonTheme.modernStyle ? "#F0F0F0" : "white", 0) + blur_bg.maskOpacity = 0 + blur_bg.blurRadius = 0 blur_bg.opacity = 0 close() } 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) - blur_bg.mask_opacity = blurEnabled ? 0.5 : 1 - blur_bg.blur_radius = blurEnabled ? 32 : 0 + 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.maskOpacity = blurEnabled ? 0.5 : 1 + blur_bg.blurRadius = blurEnabled ? 32 : 0 blur_bg.opacity = 1 } @@ -467,11 +472,11 @@ Popup { { let item = pageModel[i] item['globalIndex'] = i - if(pageModel[i].type === 'head') + if(pageModel[i].type === RibbonBackStageView.MenuItemLocation.Head) { 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) } diff --git a/lib_source/qml/RibbonBlur.qml b/lib_source/qml/RibbonBlur.qml index d2418a9..8425422 100644 --- a/lib_source/qml/RibbonBlur.qml +++ b/lib_source/qml/RibbonBlur.qml @@ -5,35 +5,35 @@ import RibbonUI Item { id: control property int radius: 0 - property int blur_radius: 32 + property int blurRadius: 32 property alias target: effect.sourceItem - property rect target_rect : 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 double mask_opacity: 0.5 - property alias mask_border: mask.border - property bool use_solid_bg: true + property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height) + property color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF" + property real maskOpacity: 0.5 + property alias maskBorder: mask.border + property bool useSolidBg: true ShaderEffectSource { id: effect anchors.fill: parent - sourceRect: target_rect - sourceItem: target + sourceRect: control.targetRect + sourceItem: control.target visible: false } GaussianBlur{ id: blur anchors.fill: parent - radius: blur_radius + radius: control.blurRadius deviation: 8 - samples: (blur_radius / 4) * 3 + samples: (control.blurRadius / 4) * 3 source: effect visible: false } Rectangle{ anchors.fill: parent - color: use_solid_bg ? mask_color : 'transparent' + color: control.useSolidBg ? control.maskColor : 'transparent' radius: control.radius OpacityMask { anchors.fill: parent @@ -49,8 +49,8 @@ Item { Rectangle{ id: mask anchors.fill: parent - color: mask_color - opacity: mask_opacity + color: control.maskColor + opacity: control.maskOpacity radius: control.radius } } diff --git a/lib_source/qml/RibbonBottomBar.qml b/lib_source/qml/RibbonBottomBar.qml index c26ab78..a588954 100644 --- a/lib_source/qml/RibbonBottomBar.qml +++ b/lib_source/qml/RibbonBottomBar.qml @@ -7,13 +7,13 @@ Item { height: 25 clip: true - property alias left_content: left.data - property alias right_content: right.data + property alias leftContent: left.data + property alias rightContent: right.data default property alias content: left.data - property bool modern_style: RibbonTheme.modern_style - property bool dark_mode: RibbonTheme.dark_mode - property bool show_version: true - property double bg_opacity: 0.8 + property bool modernStyle: RibbonTheme.modernStyle + property bool isDarkMode: RibbonTheme.isDarkMode + property bool showVersion: true + property real bgOpacity: 0.8 anchors{ left: parent.left @@ -22,23 +22,23 @@ Item { } Rectangle{ - visible: !modern_style + visible: !modernStyle color: "#3D3D3D" anchors.fill: parent - opacity: bg_opacity + opacity: bgOpacity gradient: Gradient { - GradientStop { position: 0.0; color: dark_mode ? "#474949" : "#E4E3E4" } - GradientStop { position: 0.5; color: dark_mode ? "#434444" : "#DFDEDE" } - GradientStop { position: 1.0; color: dark_mode ? "#3D3D3D" : "#D9D9D9" } + GradientStop { position: 0.0; color: isDarkMode ? "#474949" : "#E4E3E4" } + GradientStop { position: 0.5; color: isDarkMode ? "#434444" : "#DFDEDE" } + GradientStop { position: 1.0; color: isDarkMode ? "#3D3D3D" : "#D9D9D9" } } } RibbonRectangle{ - visible: modern_style - color: dark_mode ? "#141414" : "#F5F5F5" - opacity: bg_opacity + visible: modernStyle + color: isDarkMode ? "#141414" : "#F5F5F5" + opacity: bgOpacity 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 } @@ -48,7 +48,7 @@ Item { left: parent.left right: parent.right } - color: dark_mode ? modern_style ? "#3B3A39":"#282828" : modern_style ? "white":"#A1A2A2" + color: isDarkMode ? modernStyle ? "#3B3A39":"#282828" : modernStyle ? "white":"#A1A2A2" height: 1 } @@ -74,11 +74,11 @@ Item { } layoutDirection: Qt.RightToLeft RibbonButton{ - visible: show_version - show_bg:false + visible: showVersion + showBg:false text: `Designed with RibbonUI V${RibbonUI.version}` - adapt_height: true - show_tooltip: false + adaptHeight: true + showTooltip: false onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI") } } diff --git a/lib_source/qml/RibbonButton.qml b/lib_source/qml/RibbonButton.qml index 1c8cec7..32b80eb 100644 --- a/lib_source/qml/RibbonButton.qml +++ b/lib_source/qml/RibbonButton.qml @@ -5,22 +5,22 @@ import RibbonUI Button { id: root - property bool dark_mode: RibbonTheme.dark_mode - property bool show_bg: true - property bool show_hovered_bg: true - property bool adapt_height: false - property bool show_tooltip: true - property var icon_source - property var icon_source_filled - property alias image_icon: pic_icon - property alias ribbon_icon: rib_icon - property string bg_color: dark_mode ? "#626262" : "white" - property string hover_color: dark_mode ? show_bg ? "#818181" : "#5E5D5D" : show_bg ? "#ECEAE9" : "#B0B0B1" - property string pressed_color: dark_mode ? show_bg ? "#424242" : "#5C5C5C" : show_bg ? "#CCCBCB" : "#9D9B9B" - property string checked_color: pressed_color - property string text_color: dark_mode ? "white" : "black" - property bool text_color_reverse: true - property string tip_text: text + property bool isDarkMode: RibbonTheme.isDarkMode + property bool showBg: true + property bool showHoveredBg: true + property bool adaptHeight: false + property bool showTooltip: true + property var iconSource + property var iconSourceFilled + property alias imageIcon: pic_icon + property alias ribbonIcon: rib_icon + property string bgColor: isDarkMode ? "#626262" : "white" + property string hoverColor: isDarkMode ? showBg ? "#818181" : "#5E5D5D" : showBg ? "#ECEAE9" : "#B0B0B1" + property string pressedColor: isDarkMode ? showBg ? "#424242" : "#5C5C5C" : showBg ? "#CCCBCB" : "#9D9B9B" + property string checkedColor: pressedColor + property string textColor: isDarkMode ? "white" : "black" + property bool textColorReverse: true + property string tipText: text opacity: enabled ? 1.0 : 0.3 padding: 0 leftPadding: 0 @@ -29,28 +29,28 @@ Button { background: Rectangle{ implicitWidth: contentItem.implicitWidth implicitHeight: contentItem.implicitHeight - visible: show_bg - border.color: dark_mode ? "#7F7F7F" : "#D2D1CE" + visible: showBg + border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE" border.width: 1 radius: 3 - color: bg_color + color: bgColor } contentItem: Item{ 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{ anchors.fill: parent radius: 3 color: { if (root.pressed) - return pressed_color + return pressedColor if (root.hovered) - return hover_color + return hoverColor if (root.checked) - return checked_color + return checkedColor return "transparent" } - visible: show_hovered_bg + visible: showHoveredBg Behavior on color { ColorAnimation { duration: 60 @@ -74,17 +74,17 @@ Button { RibbonIcon{ id :rib_icon - icon_source: typeof(root.icon_source) === "number" ? root.icon_source : 0 - icon_source_filled: typeof(root.icon_source_filled) === "number" ? root.icon_source_filled : icon_source - icon_size: label.contentHeight - visible: typeof(root.icon_source) === "number" + iconSource: typeof(root.iconSource) === "number" ? root.iconSource : 0 + iconSourceFilled: typeof(root.iconSourceFilled) === "number" ? root.iconSourceFilled : iconSource + iconSize: label.contentHeight + visible: typeof(root.iconSource) === "number" Layout.alignment: Qt.AlignVCenter filled: pressed || checked color: { - if (!show_bg && (hovered || checked || pressed) && text_color_reverse) - return Qt.lighter(text_color) + if (!showBg && (hovered || checked || pressed) && textColorReverse) + return Qt.lighter(textColor) else - return text_color + return textColor } Behavior on color { ColorAnimation { @@ -95,8 +95,8 @@ Button { } Image { id: pic_icon - source: typeof(root.icon_source) === "string" ? root.icon_source : "" - visible: typeof(root.icon_source) === "string" + source: typeof(root.iconSource) === "string" ? root.iconSource : "" + visible: typeof(root.iconSource) === "string" fillMode:Image.PreserveAspectFit height: label.contentHeight width: height @@ -112,16 +112,16 @@ Button { font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering color: { - if (!show_bg && (hovered || checked || pressed) && text_color_reverse) - return Qt.lighter(text_color) + if (!showBg && (hovered || checked || pressed) && textColorReverse) + return Qt.lighter(textColor) else - return text_color + return textColor } } } RibbonToolTip{ - text: tip_text - visible: hovered && show_tooltip && text + text: tipText + visible: hovered && showTooltip && text } } } diff --git a/lib_source/qml/RibbonCheckBox.qml b/lib_source/qml/RibbonCheckBox.qml index 3de419e..1a709d8 100644 --- a/lib_source/qml/RibbonCheckBox.qml +++ b/lib_source/qml/RibbonCheckBox.qml @@ -11,18 +11,18 @@ Button { focusPolicy:Qt.TabFocus checkable: true - property bool dark_mode: RibbonTheme.dark_mode - property int btn_size: 20 - property string border_color: dark_mode ? "white" : "black" - property double border_width: 1.4 - property string icon_color: "white" - property string icon_filled_bg_color: "#2143AB" - property string text_color: dark_mode ? "white" : "black" - property int text_size: 11 - property bool text_bold: false - property bool text_on_left: false - property bool show_tooltip: false - property string tip_text: text + property bool isDarkMode: RibbonTheme.isDarkMode + property int btnSize: 20 + property string borderColor: isDarkMode ? "white" : "black" + property real borderWidth: 1.4 + property string iconColor: "white" + property string iconFilledBgColor: "#2143AB" + property string textColor: isDarkMode ? "white" : "black" + property int textSize: 11 + property bool textBold: false + property bool textOnLeft: false + property bool showTooltip: false + property string tipText: text background: Item{} contentItem: Item{ @@ -33,15 +33,15 @@ Button { id: btn_layout property int margins: 4 anchors.centerIn: parent - layoutDirection: control.text_on_left ? Qt.RightToLeft : Qt.LeftToRight + layoutDirection: control.textOnLeft ? Qt.RightToLeft : Qt.LeftToRight Rectangle { id: bg - implicitHeight: control.btn_size + implicitHeight: control.btnSize implicitWidth: implicitHeight color: "transparent" border{ - color: control.border_color - width: control.border_width + color: control.borderColor + width: control.borderWidth } radius: 4.5 Rectangle{ @@ -49,7 +49,7 @@ Button { anchors.fill: parent scale: control.hovered || control.pressed ? 0.6 : 1.05 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 Behavior on scale{ NumberAnimation{ @@ -61,16 +61,16 @@ Button { RibbonIcon{ id: check_icon anchors.centerIn: bg - icon_source: RibbonIcons.Checkmark - icon_source_filled: RibbonIcons_Filled.Checkmark + iconSource: RibbonIcons.Checkmark + iconSourceFilled: RibbonIcons_Filled.Checkmark font.pixelSize: bg.height-4 filled: 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{ - text: tip_text - visible: hovered && show_tooltip && text + text: tipText + visible: hovered && showTooltip && text } } Text { @@ -79,11 +79,11 @@ Button { Layout.alignment: Qt.AlignVCenter font{ family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" - pixelSize: control.text_size - bold: control.text_bold + pixelSize: control.textSize + bold: control.textBold } renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering - color: text_color + color: textColor visible: text } } diff --git a/lib_source/qml/RibbonComboBox.qml b/lib_source/qml/RibbonComboBox.qml index fd0d20e..fb1f8e5 100644 --- a/lib_source/qml/RibbonComboBox.qml +++ b/lib_source/qml/RibbonComboBox.qml @@ -4,10 +4,10 @@ import RibbonUI ComboBox { id: control - property bool dark_mode: RibbonTheme.dark_mode - property int icon_source - property int component_width: 150 - property int component_height:20 + property bool isDarkMode: RibbonTheme.isDarkMode + property int iconSource + property int componentWidth: 150 + property int componentHeight:20 property string placeholderText: "Please Choose:" implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -32,16 +32,16 @@ ComboBox { hoverEnabled: control.hoverEnabled contentItem: RibbonText{ id:label - view_only: true + viewOnly: true text: item.text font.pixelSize: control.font.pixelSize font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal - color: dark_mode ? "white" : highlighted ? "white" : "black" + color: isDarkMode ? "white" : highlighted ? "white" : "black" } background: Rectangle{ implicitWidth: item.width - 10 implicitHeight: label.contentHeight + 14 - color: !dark_mode ? "#506BBD" : "#2A4299" + color: !isDarkMode ? "#506BBD" : "#2A4299" visible: down || highlighted || visualFocus radius: 4 } @@ -51,10 +51,10 @@ ComboBox { x: control.mirrored ? control.padding : control.width - width - control.padding y: control.topPadding + (control.availableHeight - height) / 2 padding: 5 - icon_size: 15 - icon_source: RibbonIcons.ChevronDown + iconSize: 15 + iconSource: RibbonIcons.ChevronDown rotation: control.down ? 180 : 0 - color: dark_mode ? "white" : "black" + color: isDarkMode ? "white" : "black" Behavior on rotation { NumberAnimation{ @@ -73,7 +73,7 @@ ComboBox { contentItem: RibbonLineEdit { id: edit 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 bottomPadding: 6 - control.padding @@ -90,12 +90,12 @@ ComboBox { opacity: 1 font: control.font - color: dark_mode ? "white" : "black" - selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" - selectedTextColor: dark_mode ? "white" : "black" + color: isDarkMode ? "white" : "black" + selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8" + selectedTextColor: isDarkMode ? "white" : "black" verticalAlignment: Text.AlignVCenter - icon_source: control.icon_source + iconSource: control.iconSource onCommit: { accepted() @@ -104,8 +104,8 @@ ComboBox { background: Rectangle{ visible: control.enabled && control.editable && !control.flat radius: 4 - implicitHeight: control.component_height - implicitWidth: control.component_width-10 + implicitHeight: control.componentHeight + implicitWidth: control.componentWidth-10 color: "transparent" Behavior on color { ColorAnimation { @@ -117,20 +117,20 @@ ComboBox { } background: Rectangle { - implicitWidth: control.component_width - implicitHeight: control.component_height + implicitWidth: control.componentWidth + implicitHeight: control.componentHeight radius: 4 color: { color: { if (control.down) - return dark_mode ? "#858585" : "#C9CACA" + return isDarkMode ? "#858585" : "#C9CACA" if (control.hovered) - return dark_mode ? "#5A5B5A" : "#E4E4E4" - return dark_mode ? "#383838" : "#FFFFFF" + return isDarkMode ? "#5A5B5A" : "#E4E4E4" + return isDarkMode ? "#383838" : "#FFFFFF" } } RibbonRectangle{ - color: dark_mode ? "#383838" : "#FFFFFF" + color: isDarkMode ? "#383838" : "#FFFFFF" anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: parent.border.width @@ -141,7 +141,7 @@ ComboBox { 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 visible: !control.flat || control.down } @@ -170,9 +170,9 @@ ComboBox { background: RibbonBlur{ radius: 5 - mask_opacity: 1 - mask_border.color: RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5" - mask_border.width: 1 + maskOpacity: 1 + maskBorder.color: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5" + maskBorder.width: 1 } enter: Transition { diff --git a/lib_source/qml/RibbonIcon.qml b/lib_source/qml/RibbonIcon.qml index 9a7e4aa..ca57a58 100644 --- a/lib_source/qml/RibbonIcon.qml +++ b/lib_source/qml/RibbonIcon.qml @@ -3,24 +3,24 @@ import QtQuick.Controls import RibbonUI Text { - property int icon_source - property int icon_size: 20 + property int iconSource + property int iconSize: 20 property bool filled: false - property int icon_source_filled + property int iconSourceFilled - onIcon_sourceChanged: { - if (typeof(icon_source_filled) === 'undefined' || icon_source_filled === icon_source) - icon_source_filled = icon_source - 1 + onIconSourceChanged: { + if (typeof(iconSourceFilled) === 'undefined' || iconSourceFilled === iconSource) + iconSourceFilled = iconSource - 1 } color: "black" id:text_icon font.family: loader.name - font.pixelSize: icon_size + font.pixelSize: iconSize horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter 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{ id: loader diff --git a/lib_source/qml/RibbonLineEdit.qml b/lib_source/qml/RibbonLineEdit.qml index 3e909f4..31a5fd2 100644 --- a/lib_source/qml/RibbonLineEdit.qml +++ b/lib_source/qml/RibbonLineEdit.qml @@ -6,21 +6,21 @@ import RibbonUI TextField{ id: control autoScroll:true - property bool dark_mode: RibbonTheme.dark_mode - property int icon_source - property bool show_clear_btn: true - property alias clear_btn: clear_btn + property bool isDarkMode: RibbonTheme.isDarkMode + property int iconSource + property bool showClearBtn: true + property alias clearBtn: clearBtn property alias icon: icon focus: true - color: dark_mode ? "white" : "black" + color: isDarkMode ? "white" : "black" padding: 5 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:") - 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 - selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" - selectedTextColor: dark_mode ? "white" : "black" + selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8" + selectedTextColor: isDarkMode ? "white" : "black" opacity: enabled ? 1.0 : 0.3 signal commit() width:150 @@ -31,8 +31,8 @@ TextField{ radius: 4 implicitHeight: 20 implicitWidth: 150 - color: dark_mode ? "#383838" : "#FFFFFF" - border.color: control.cursorVisible ? dark_mode ? "#869CCD" : "#486495" : dark_mode ? "#5E5F5E" : "#B9B9B8" + color: isDarkMode ? "#383838" : "#FFFFFF" + border.color: control.cursorVisible ? isDarkMode ? "#869CCD" : "#486495" : isDarkMode ? "#5E5F5E" : "#B9B9B8" border.width: 1 Behavior on color { ColorAnimation { @@ -52,7 +52,7 @@ TextField{ } RibbonTextBoxMenu{ id:menu - input_item: control + inputItem: control } RibbonIcon{ id: icon @@ -61,10 +61,10 @@ TextField{ leftMargin: parent.padding verticalCenter: parent.verticalCenter } - icon_source: parent.icon_source - icon_size: parent.height - parent.padding - visible: icon_source - color: dark_mode ? "white" : "black" + iconSource: parent.iconSource + iconSize: parent.height - parent.padding + visible: iconSource + color: isDarkMode ? "white" : "black" Behavior on color { ColorAnimation { duration: 60 @@ -73,19 +73,19 @@ TextField{ } } RibbonButton{ - id: clear_btn + id: clearBtn anchors{ right: parent.right rightMargin: parent.padding verticalCenter: parent.verticalCenter } - show_bg: false - show_hovered_bg: false - tip_text: qsTr("Clear") - icon_source: RibbonIcons.Dismiss + showBg: false + showHoveredBg: false + tipText: qsTr("Clear") + iconSource: RibbonIcons.Dismiss height: parent.height - parent.padding width: height - visible: parent.text&&show_clear_btn&&control.cursorVisible + visible: parent.text&&showClearBtn&&control.cursorVisible onClicked: parent.clear() } } diff --git a/lib_source/qml/RibbonMenu.qml b/lib_source/qml/RibbonMenu.qml index db58fbf..e87be39 100644 --- a/lib_source/qml/RibbonMenu.qml +++ b/lib_source/qml/RibbonMenu.qml @@ -10,8 +10,8 @@ Menu { contentHeight + topPadding + bottomPadding)) overlap: 1 padding: 5 - property bool dark_mode: RibbonTheme.dark_mode - property string bg_color: !dark_mode ? "#E8E9E9" : "#303131" + property bool isDarkMode: RibbonTheme.isDarkMode + property string bgColor: !isDarkMode ? "#E8E9E9" : "#303131" enter: Transition { NumberAnimation { property: "opacity" @@ -47,11 +47,11 @@ Menu { implicitHeight: 20 layer.enabled: true layer.effect: RibbonShadow{ - shadow_color: "black" + shadowColor: "black" } - border.color: dark_mode ? "#5C5D5D" : "#B5B4B5" + border.color: isDarkMode ? "#5C5D5D" : "#B5B4B5" border.width: 1 - color: bg_color + color: bgColor radius: 4 } } diff --git a/lib_source/qml/RibbonMenuItem.qml b/lib_source/qml/RibbonMenuItem.qml index bd3d53c..e05a95a 100644 --- a/lib_source/qml/RibbonMenuItem.qml +++ b/lib_source/qml/RibbonMenuItem.qml @@ -5,15 +5,15 @@ import RibbonUI MenuItem { id: control - property bool dark_mode: RibbonTheme.dark_mode - property var icon_source - property var icon_source_filled - property bool show_tooltip: label.contentWidth < label.implicitWidth - property alias image_icon: pic_icon - property alias ribbon_icon: rib_icon - property string bg_color: !dark_mode ? "#E8E9E9" : "#303131" - property string hover_color: !dark_mode ? "#506BBD" : "#2A4299" - property string text_color: dark_mode ? "white" : hovered ? "white" : "black" + property bool isDarkMode: RibbonTheme.isDarkMode + property var iconSource + property var iconSourceFilled + property bool showTooltip: label.contentWidth < label.implicitWidth + property alias imageIcon: pic_icon + property alias ribbonIcon: rib_icon + property string bgColor: !isDarkMode ? "#E8E9E9" : "#303131" + property string hoverColor: !isDarkMode ? "#506BBD" : "#2A4299" + property string textColor: isDarkMode ? "white" : hovered ? "white" : "black" implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: visible ? Math.max(implicitBackgroundHeight + topInset + bottomInset, @@ -32,20 +32,20 @@ MenuItem { y: control.topPadding + (control.availableHeight - height) / 2 visible: control.checkable || control.checked filled: control.hovered || control.pressed - icon_source: control.checked ? RibbonIcons.CheckmarkCircle : RibbonIcons.Circle - icon_source_filled: control.checked ? RibbonIcons_Filled.CheckmarkCircle : RibbonIcons_Filled.Circle - color: text_color - icon_size: label.contentHeight + iconSource: control.checked ? RibbonIcons.CheckmarkCircle : RibbonIcons.Circle + iconSourceFilled: control.checked ? RibbonIcons_Filled.CheckmarkCircle : RibbonIcons_Filled.Circle + color: textColor + iconSize: label.contentHeight } arrow: RibbonIcon { x: control.mirrored ? control.padding : control.width - width - control.padding y: control.topPadding + (control.availableHeight - height) / 2 - color: text_color + color: textColor visible: control.subMenu - icon_source: RibbonIcons.ChevronCircleRight - icon_source_filled: RibbonIcons_Filled.ChevronCircleRight - icon_size: label.contentHeight + iconSource: RibbonIcons.ChevronCircleRight + iconSourceFilled: RibbonIcons_Filled.ChevronCircleRight + iconSize: label.contentHeight } contentItem: Item{ @@ -66,18 +66,18 @@ MenuItem { RibbonIcon{ id :rib_icon - icon_source: typeof(control.icon_source) === "number" ? control.icon_source : 0 - icon_source_filled: typeof(control.icon_source_filled) === "number" ? control.icon_source_filled : icon_source - icon_size: label.contentHeight - visible: typeof(control.icon_source) === "number" && control.icon_source + iconSource: typeof(control.iconSource) === "number" ? control.iconSource : 0 + iconSourceFilled: typeof(control.iconSourceFilled) === "number" ? control.iconSourceFilled : iconSource + iconSize: label.contentHeight + visible: typeof(control.iconSource) === "number" && control.iconSource Layout.alignment: Qt.AlignVCenter filled: pressed || checked - color: text_color + color: textColor } Image { id: pic_icon - source: typeof(control.icon_source) === "string" ? control.icon_source : "" - visible: typeof(control.icon_source) === "string" + source: typeof(control.iconSource) === "string" ? control.iconSource : "" + visible: typeof(control.iconSource) === "string" fillMode:Image.PreserveAspectFit height: label.contentHeight width: height @@ -91,7 +91,7 @@ MenuItem { font.pixelSize: 13 elide: Text.ElideRight font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" - color: text_color + color: textColor renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering Layout.preferredWidth:{ let w = 0 @@ -103,7 +103,7 @@ MenuItem { } RibbonToolTip{ id: tooltip - visible: hovered && show_tooltip && control.text + visible: hovered && showTooltip && control.text text: control.text } } @@ -120,7 +120,7 @@ MenuItem { clip: visible radius: 4 - color: control.hovered ?hover_color : bg_color + color: control.hovered ?hoverColor : bgColor } } } diff --git a/lib_source/qml/RibbonMenuSeparator.qml b/lib_source/qml/RibbonMenuSeparator.qml index dafa88e..ebd4712 100644 --- a/lib_source/qml/RibbonMenuSeparator.qml +++ b/lib_source/qml/RibbonMenuSeparator.qml @@ -4,8 +4,8 @@ import RibbonUI MenuSeparator { id: control - property bool dark_mode: RibbonTheme.dark_mode - property string color: dark_mode ? "#4A4B4C" : "#D1D2D2" + property bool isDarkMode: RibbonTheme.isDarkMode + property string color: isDarkMode ? "#4A4B4C" : "#D1D2D2" implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, diff --git a/lib_source/qml/RibbonMessage.qml b/lib_source/qml/RibbonMessage.qml index 088c3b9..dab2366 100644 --- a/lib_source/qml/RibbonMessage.qml +++ b/lib_source/qml/RibbonMessage.qml @@ -6,11 +6,11 @@ import RibbonUI Rectangle{ id: bubble color: "transparent" - property double padding: 10 + property real padding: 10 default property alias content: message_layout.data - property var data_model: model - property int font_size: 13 - property string sender_text: "sender" + property var dataModel: model + property int fontSize: 13 + property string senderText: "sender" width: ListView.view.width height: bubble_layout.height + padding*2 @@ -20,9 +20,9 @@ Rectangle{ top: parent.top topMargin: parent.padding } - layoutDirection: data_model.recieved ? Qt.LeftToRight : Qt.RightToLeft + layoutDirection: dataModel.recieved ? Qt.LeftToRight : Qt.RightToLeft Component.onCompleted: { - if (data_model.recieved) + if (dataModel.recieved) { anchors.left = parent.left anchors.leftMargin = parent.padding @@ -33,19 +33,19 @@ Rectangle{ } } RibbonText{ - id: sender_text - text: bubble.sender_text + id: senderText + text: bubble.senderText padding: bubble.padding - color: RibbonTheme.dark_mode ? "white" : "black" + color: RibbonTheme.isDarkMode ? "white" : "black" } RibbonRectangle{ 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 width: message_layout.width + bubble.padding*2 radius: 10 - topLeftRadius: data_model.recieved ? 2 : bubble.padding - topRightRadius: !data_model.recieved ? 2 : bubble.padding + topLeftRadius: dataModel.recieved ? 2 : bubble.padding + topRightRadius: !dataModel.recieved ? 2 : bubble.padding ColumnLayout{ id: message_layout anchors.centerIn: parent diff --git a/lib_source/qml/RibbonMessageListView.qml b/lib_source/qml/RibbonMessageListView.qml index d44b3c8..85df1aa 100644 --- a/lib_source/qml/RibbonMessageListView.qml +++ b/lib_source/qml/RibbonMessageListView.qml @@ -7,25 +7,25 @@ RibbonView{ id: view spacing: 0 - property int max_msg_num: 10 - property bool auto_scroll_to_bottom: false - property int animation_time: 200 + property int maxMsgNum: 10 + property bool autoScrollToBottom: false + property int animationTime: 200 property alias delegate: message_list.delegate - property alias message_model: message_model + property alias messageModel: messageModel property alias view: message_list ListModel{ - id: message_model + id: messageModel onCountChanged: auto_scroll_btn_timer.restart() } Timer{ id: auto_scroll_btn_timer - interval: animation_time + interval: animationTime repeat: false onTriggered: { - if(view.auto_scroll_to_bottom) - view.scroll_to_bottom() + if(view.autoScrollToBottom) + view.scrollToBottom() } } @@ -35,12 +35,12 @@ RibbonView{ Layout.alignment: Qt.AlignHCenter Layout.preferredHeight: parent.height Layout.preferredWidth: parent.width - model: message_model + model: messageModel add: Transition { NumberAnimation { properties: "y" from: message_list.height - duration: animation_time + duration: animationTime } } ScrollBar.vertical: RibbonScrollBar { @@ -49,11 +49,11 @@ RibbonView{ } } - function scroll_to_up(){ + function scrollToUp(){ message_list.positionViewAtBeginning() } - function scroll_to_bottom(){ + function scrollToBottom(){ message_list.positionViewAtEnd() } diff --git a/lib_source/qml/RibbonPaperView.qml b/lib_source/qml/RibbonPaperView.qml index 47503cc..23ab0a7 100644 --- a/lib_source/qml/RibbonPaperView.qml +++ b/lib_source/qml/RibbonPaperView.qml @@ -5,9 +5,9 @@ import RibbonUI RibbonView { id: control - property int page_width: width * 0.7 - property int page_height: container.height + page_margin*2 - property int page_margin: 50 + property int pageWidth: width * 0.7 + property int pageHeight: container.height + pageMargin*2 + property int pageMargin: 50 default property alias content: container.data Flickable{ id:flickview @@ -24,18 +24,18 @@ RibbonView { id: container_bg anchors{ top: parent.top - topMargin: modern_style ? 20 : 30 - bottomMargin: modern_style ? 20 : 30 + topMargin: modernStyle ? 20 : 30 + bottomMargin: modernStyle ? 20 : 30 horizontalCenter: parent.horizontalCenter } - radius: modern_style ? 10 : 5 - color: dark_mode ? "#262626" : "white" - implicitWidth: control.page_width - implicitHeight: control.page_height + radius: modernStyle ? 10 : 5 + color: isDarkMode ? "#262626" : "white" + implicitWidth: control.pageWidth + implicitHeight: control.pageHeight layer.enabled: true layer.effect: RibbonShadow { id: effect - shadow_opacity:modern_style ? 0.2 : 0.5 + shadowOpacity:modernStyle ? 0.2 : 0.5 } ColumnLayout{ id:container diff --git a/lib_source/qml/RibbonPopup.qml b/lib_source/qml/RibbonPopup.qml index 5e9deab..46c9913 100644 --- a/lib_source/qml/RibbonPopup.qml +++ b/lib_source/qml/RibbonPopup.qml @@ -11,14 +11,14 @@ Popup { modal: true anchors.centerIn: Overlay.overlay closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside - property bool show_close_btn: true - property bool blur_enabled: false + property bool showCloseBtn: true + property bool blurEnabled: false property alias target: blur.target - property alias target_rect: blur.target_rect + property alias targetRect: blur.targetRect property alias radius: blur.radius - property string content_source: "" - property var content_items: undefined - property bool destroy_after_close: true + property string contentSource: "" + property var contentItems: undefined + property bool destroyAfterClose: true enter: Transition { NumberAnimation { @@ -56,10 +56,10 @@ Popup { RectangularGlow { id: effect anchors.fill: blur - anchors.margins: blur.mask_border.width + anchors.margins: blur.maskBorder.width glowRadius: 20 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 } RibbonBlur{ @@ -67,11 +67,11 @@ Popup { implicitWidth: parent.width id: blur radius: 20 - mask_opacity: blur_enabled ? 0.9 : 1 - mask_border.color: RibbonTheme.modern_style ? - RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" : - RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5" - mask_border.width: 1 + maskOpacity: blurEnabled ? 0.9 : 1 + maskBorder.color: RibbonTheme.modernStyle ? + RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" : + RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5" + maskBorder.width: 1 } } contentItem: Item{ @@ -86,18 +86,18 @@ Popup { right:parent.right rightMargin: anchors.topMargin } - show_bg: false - show_hovered_bg: false - icon_source: RibbonIcons.Dismiss - onClicked: popup.close_content() - visible: show_close_btn + showBg: false + showHoveredBg: false + iconSource: RibbonIcons.Dismiss + onClicked: popup.closeContent() + visible: showCloseBtn } Loader{ id: container width: item ? item.implicitWidth : 0 height: item ? item.implicitHeight : 0 - sourceComponent: content_source ? undefined : content_items - source: content_source + sourceComponent: contentSource ? undefined : contentItems + source: contentSource onLoaded: { if (!control.args) return @@ -118,28 +118,28 @@ Popup { Overlay.modeless:Rectangle{ color:"transparent" } - onClosed: free_content() - function show_content(content, args){ + onClosed: freeContent() + function showContent(content, args){ popup.contentItem.args = args if (content instanceof Component) { - content_items = content + contentItems = content content.parent = popup } else { - content_source = content + contentSource = content } open() } - function close_content(){ + function closeContent(){ close() } - function free_content(){ - if (destroy_after_close) + function freeContent(){ + if (destroyAfterClose) { - content_source = "" - content_items = undefined + contentSource = "" + contentItems = undefined } } } diff --git a/lib_source/qml/RibbonPopupDialog.qml b/lib_source/qml/RibbonPopupDialog.qml index a94b547..00d4d96 100644 --- a/lib_source/qml/RibbonPopupDialog.qml +++ b/lib_source/qml/RibbonPopupDialog.qml @@ -11,9 +11,9 @@ RibbonPopup { property string neutralText: "Neutral" property string negativeText: "Negative" property string positiveText: "Positive" - property bool dark_mode: RibbonTheme.dark_mode - property int content_margins: 20 - show_close_btn: false + property bool isDarkMode: RibbonTheme.isDarkMode + property int contentMargins: 20 + showCloseBtn: false radius: 5 signal neutralClicked signal negativeClicked @@ -31,14 +31,14 @@ RibbonPopup { id:text_title font.pixelSize: 24 text:title - view_only: true - topPadding: content_margins * 3 / 4 - leftPadding: content_margins - rightPadding: content_margins + viewOnly: true + topPadding: contentMargins * 3 / 4 + leftPadding: contentMargins + rightPadding: contentMargins wrapMode: Text.WrapAnywhere - color: RibbonTheme.modern_style ? - dark_mode ? '#8AAAEB' : '#2C59B7' : - dark_mode ? "white" : "black" + color: RibbonTheme.modernStyle ? + isDarkMode ? '#8AAAEB' : '#2C59B7' : + isDarkMode ? "white" : "black" verticalAlignment: Text.AlignVCenter anchors{ top:parent.top @@ -52,11 +52,11 @@ RibbonPopup { wrapMode: Text.WrapAnywhere verticalAlignment: Text.AlignVCenter text:message - view_only: true - topPadding: content_margins * 3 / 4 - leftPadding: content_margins - rightPadding: content_margins - bottomPadding: content_margins * 3 / 4 + viewOnly: true + topPadding: contentMargins * 3 / 4 + leftPadding: contentMargins + rightPadding: contentMargins + bottomPadding: contentMargins * 3 / 4 anchors{ top:text_title.bottom left: parent.left @@ -71,7 +71,7 @@ RibbonPopup { } height: 1 width: parent.width - 4 - color: control.dark_mode ? "#666666" : "#D1D1D1" + color: control.isDarkMode ? "#666666" : "#D1D1D1" Behavior on color { ColorAnimation { duration: 60 @@ -82,23 +82,23 @@ RibbonPopup { RowLayout{ id:layout_actions anchors{ - topMargin: content_margins * 3 / 4 + topMargin: contentMargins * 3 / 4 left: parent.left - leftMargin: content_margins + leftMargin: contentMargins right: parent.right - rightMargin: content_margins + rightMargin: contentMargins bottom: parent.bottom - bottomMargin: content_margins * 3 / 4 + bottomMargin: contentMargins * 3 / 4 } height: 30 - spacing: content_margins + spacing: contentMargins RibbonButton{ id:negative_btn Layout.fillWidth: true Layout.fillHeight: true visible: control.buttonFlags&RibbonPopupDialogType.NegativeButton text: negativeText - show_tooltip: false + showTooltip: false onClicked: { negativeClicked() control.close() @@ -110,7 +110,7 @@ RibbonPopup { Layout.fillHeight: true visible: control.buttonFlags&RibbonPopupDialogType.NeutralButton text: neutralText - show_tooltip: false + showTooltip: false onClicked: { neutralClicked() control.close() @@ -122,11 +122,11 @@ RibbonPopup { Layout.fillHeight: true visible: control.buttonFlags&RibbonPopupDialogType.PositiveButton text: positiveText - show_tooltip: false - bg_color: dark_mode ? "#8AAAEB" : "#2C59B7" - text_color: "white" - hover_color: dark_mode ? 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) + showTooltip: false + bgColor: isDarkMode ? "#8AAAEB" : "#2C59B7" + textColor: "white" + hoverColor: isDarkMode ? Qt.rgba(255, 255, 255, 0.3) : Qt.rgba(0, 0, 0, 0.3) + pressedColor: isDarkMode ? Qt.rgba(255, 255, 255, 0.5) : Qt.rgba(0,0,0, 0.5) onClicked: { positiveClicked() control.close() diff --git a/lib_source/qml/RibbonPushButton.qml b/lib_source/qml/RibbonPushButton.qml index 5ba9974..9344253 100644 --- a/lib_source/qml/RibbonPushButton.qml +++ b/lib_source/qml/RibbonPushButton.qml @@ -5,17 +5,17 @@ import RibbonUI Item { id: root - property bool dark_mode: RibbonTheme.dark_mode - property bool show_tooltip: true - property var icon_source - property string hover_color: dark_mode ? "#414140" : "#D8D9D9" - property string pressed_color: dark_mode ? "#5B5B5C" : "#BCBCBC" - property string buddy_hover_color: dark_mode ? "#383838" : "#E1E1E1" - property string text_color: dark_mode ? "white" : "black" - property string tip_text: text + property bool isDarkMode: RibbonTheme.isDarkMode + property bool showTooltip: true + property var iconSource + property string hoverColor: isDarkMode ? "#414140" : "#D8D9D9" + property string pressedColor: isDarkMode ? "#5B5B5C" : "#BCBCBC" + property string buddyHoverColor: isDarkMode ? "#383838" : "#E1E1E1" + property string textColor: isDarkMode ? "white" : "black" + property string tipText: text property string text 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() opacity: enabled ? 1.0 : 0.3 implicitHeight: 50 @@ -38,29 +38,29 @@ Item { implicitHeight: root.height - label.contentHeight color: { if (left_th.pressed) - return pressed_color + return pressedColor if (left_hh.hovered) - return hover_color + return hoverColor if (right_hh.hovered) - return buddy_hover_color + return buddyHoverColor return "transparent" } RibbonIcon{ id :rib_icon anchors.centerIn: parent - icon_source: typeof(root.icon_source) === "number" ? root.icon_source : 0 - icon_source_filled: typeof(root.icon_source) === "number" ? root.icon_source - 1 : 0 - icon_size: root.icon_size - visible: typeof(root.icon_source) === "number" + iconSource: typeof(root.iconSource) === "number" ? root.iconSource : 0 + iconSourceFilled: typeof(root.iconSource) === "number" ? root.iconSource - 1 : 0 + iconSize: root.iconSize + visible: typeof(root.iconSource) === "number" Layout.alignment: Qt.AlignVCenter filled: left_th.pressed - color: text_color + color: textColor } Image { id: pic_icon anchors.centerIn: parent - source: typeof(root.icon_source) === "string" ? root.icon_source : "" - visible: typeof(root.icon_source) === "string" + source: typeof(root.iconSource) === "string" ? root.iconSource : "" + visible: typeof(root.iconSource) === "string" fillMode:Image.PreserveAspectFit height: left.height width: height @@ -83,21 +83,21 @@ Item { visible: m.count color: { if (right_th.pressed||m.opened) - return pressed_color + return pressedColor if (right_hh.hovered) - return hover_color + return hoverColor if (left_hh.hovered) - return buddy_hover_color + return buddyHoverColor return "transparent" } RibbonIcon{ anchors.centerIn: parent - icon_source: RibbonIcons.ChevronDown - icon_source_filled: RibbonIcons.ChevronDown - 1 - icon_size: 15 + iconSource: RibbonIcons.ChevronDown + iconSourceFilled: RibbonIcons.ChevronDown - 1 + iconSize: 15 Layout.alignment: Qt.AlignVCenter filled: right_th.pressed - color: text_color + color: textColor } HoverHandler{ id: right_hh @@ -121,12 +121,12 @@ Item { font.pixelSize: 12 font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering - color: text_color + color: textColor } RibbonToolTip{ - text: tip_text - visible: (left_hh.hovered || right_hh.hovered)&& show_tooltip && text + text: tipText + visible: (left_hh.hovered || right_hh.hovered)&& showTooltip && text } RibbonMenu{ diff --git a/lib_source/qml/RibbonScrollBar.qml b/lib_source/qml/RibbonScrollBar.qml index 2ef6ba3..0a9c96f 100644 --- a/lib_source/qml/RibbonScrollBar.qml +++ b/lib_source/qml/RibbonScrollBar.qml @@ -20,7 +20,7 @@ ScrollBar { implicitHeight: control.hovered || control.pressed ? 8 : 4 visible: control.size < 1.0 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' opacity: 0.0 @@ -66,7 +66,7 @@ ScrollBar { background: Rectangle{ implicitWidth: 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 radius: implicitWidth / 2 visible: control.contentItem.visible @@ -95,14 +95,14 @@ ScrollBar { id: decrease_btn width: control.vertical ? control.contentItem.width : control.contentItem.height height: width - show_bg: false - show_hovered_bg: false - icon_source: control.vertical ? RibbonIcons.CaretUp : RibbonIcons.CaretLeft + showBg: false + showHoveredBg: false + iconSource: control.vertical ? RibbonIcons.CaretUp : RibbonIcons.CaretLeft onClicked: control.decrease() Component.onCompleted: setup() - ribbon_icon.filled: true - ribbon_icon.icon_size: 15 - ribbon_icon.color: RibbonTheme.dark_mode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999' + ribbonIcon.filled: true + ribbonIcon.iconSize: 15 + ribbonIcon.color: RibbonTheme.isDarkMode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999' : hovered ? '#424242' : pressed ? '#333333' : '#707070' Connections{ target: control @@ -135,14 +135,14 @@ ScrollBar { id: increase_btn width: control.vertical ? control.contentItem.width : control.contentItem.height height: width - show_bg: false - show_hovered_bg: false - icon_source: control.vertical ? RibbonIcons.CaretDown : RibbonIcons.CaretRight + showBg: false + showHoveredBg: false + iconSource: control.vertical ? RibbonIcons.CaretDown : RibbonIcons.CaretRight onClicked: control.increase() Component.onCompleted: setup() - ribbon_icon.filled: true - ribbon_icon.icon_size: 15 - ribbon_icon.color: RibbonTheme.dark_mode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999' + ribbonIcon.filled: true + ribbonIcon.iconSize: 15 + ribbonIcon.color: RibbonTheme.isDarkMode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999' : hovered ? '#424242' : pressed ? '#333333' : '#707070' Connections{ target: control diff --git a/lib_source/qml/RibbonScrollIndicator.qml b/lib_source/qml/RibbonScrollIndicator.qml index 03ae480..07594e7 100644 --- a/lib_source/qml/RibbonScrollIndicator.qml +++ b/lib_source/qml/RibbonScrollIndicator.qml @@ -16,7 +16,7 @@ ScrollIndicator { implicitWidth: 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 opacity: 0.0 radius: implicitWidth / 2 @@ -60,7 +60,7 @@ ScrollIndicator { background: Rectangle{ implicitWidth: control.hovered ? 18 : 0 implicitHeight: control.hovered ? 18 : 0 - color: RibbonTheme.dark_mode ? '#141414' : '#F5F5F5' + color: RibbonTheme.isDarkMode ? '#141414' : '#F5F5F5' opacity: 0.0 radius: implicitWidth / 2 visible: control.contentItem.visible diff --git a/lib_source/qml/RibbonShadow.qml b/lib_source/qml/RibbonShadow.qml index 776d269..cf998a2 100644 --- a/lib_source/qml/RibbonShadow.qml +++ b/lib_source/qml/RibbonShadow.qml @@ -3,10 +3,10 @@ import Qt5Compat.GraphicalEffects import RibbonUI DropShadow { - property double shadow_opacity: 0.2 - property color shadow_color: RibbonTheme.dark_mode ? "white" : "black" + property real shadowOpacity: 0.2 + property color shadowColor: RibbonTheme.isDarkMode ? "white" : "black" 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 horizontalOffset: 0 verticalOffset: 0 diff --git a/lib_source/qml/RibbonSlider.qml b/lib_source/qml/RibbonSlider.qml index f5ff680..cda192e 100644 --- a/lib_source/qml/RibbonSlider.qml +++ b/lib_source/qml/RibbonSlider.qml @@ -6,15 +6,15 @@ import RibbonUI Item { id: control height: horizontal ? container.implicitHeight : container.implicitWidth - width: horizontal ? container.implicitWidth : show_button ? Math.max(container.implicitHeight,subtract_button.width,add_button.width) : container.implicitHeight - property bool show_tooltip: true - property bool show_filled_color: true - property bool show_button: true + width: horizontal ? container.implicitWidth : showButton ? Math.max(container.implicitHeight,subtract_button.width,add_button.width) : container.implicitHeight + property bool showTooltip: true + property bool showFilledColor: true + property bool showButton: true property bool horizontal: true - property int slide_width: 150 - property int slide_height: 4 + property int slideWidth: 150 + property int slideHeight: 4 property alias value: slide.value - property bool dark_mode: RibbonTheme.dark_mode + property bool isDarkMode: RibbonTheme.isDarkMode Item{ id: container @@ -29,22 +29,22 @@ Item { verticalCenter: parent.verticalCenter } height: parent.height -3 - icon_source: RibbonIcons.Add - icon_source_filled: RibbonIcons_Filled.Add - show_bg: false - show_tooltip: false - show_hovered_bg: false + iconSource: RibbonIcons.Add + iconSourceFilled: RibbonIcons_Filled.Add + showBg: false + showTooltip: false + showHoveredBg: false rotation: horizontal ? 0 : 90 - visible: show_button + visible: showButton enabled: slide.value !== 100 - text_color: dark_mode ? "white" : "black" + textColor: isDarkMode ? "white" : "black" opacity: enabled ? 1 : 0.2 onClicked: { tooltip.show(slide.value,1000) slide.increase() } - Behavior on text_color { + Behavior on textColor { ColorAnimation { duration: 60 easing.type: Easing.OutSine @@ -59,14 +59,14 @@ Item { verticalCenter: parent.verticalCenter } height: parent.height -3 - show_bg: false - show_tooltip: false - show_hovered_bg: false - icon_source: RibbonIcons.Subtract - icon_source_filled: RibbonIcons_Filled.Subtract + showBg: false + showTooltip: false + showHoveredBg: false + iconSource: RibbonIcons.Subtract + iconSourceFilled: RibbonIcons_Filled.Subtract rotation: horizontal ? 0 : 90 - visible: show_button - text_color: dark_mode ? "white" : "black" + visible: showButton + textColor: isDarkMode ? "white" : "black" opacity: enabled ? 1 : 0.2 enabled: slide.value !== 0 onClicked: @@ -74,7 +74,7 @@ Item { tooltip.show(slide.value,1000) slide.decrease() } - Behavior on text_color { + Behavior on textColor { ColorAnimation { duration: 60 easing.type: Easing.OutSine @@ -88,26 +88,26 @@ Item { stepSize: 1 anchors{ leftMargin: -5 - left: show_button ? subtract_button.right : parent.left - right: show_button ? add_button.left : parent.right + left: showButton ? subtract_button.right : parent.left + right: showButton ? add_button.left : parent.right rightMargin: -5 verticalCenter: add_button.verticalCenter } implicitWidth: Math.max(implicitBackgroundWidth + leftPadding + rightPadding, implicitHandleWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topPadding + bottomPadding, implicitHandleHeight + topPadding + bottomPadding) property int slide_length: 150 - property int slide_width: 5 + property int slideWidth: 5 handle: Rectangle{ 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 implicitWidth: 12 implicitHeight: 12 - color: dark_mode ? "#A1A2A1" : "#EDEEEE" + color: isDarkMode ? "#A1A2A1" : "#EDEEEE" radius: 12 layer.enabled: true layer.effect: RibbonShadow { - shadow_opacity: 0.2 - shadow_color: "black" + shadowOpacity: 0.2 + shadowColor: "black" } scale: slide.pressed ? 1.1 : slide.hovered ? 1.2 : 1 Behavior on color { @@ -126,14 +126,14 @@ Item { background: Item { x: slide.leftPadding + (slide.horizontal ? 0 : (slide.availableWidth - width) / 2) y: slide.topPadding + (slide.horizontal ? (slide.availableHeight - height) / 2 : 0) - 1 - implicitWidth: slide.horizontal ? control.slide_width : control.slide_height - implicitHeight: slide.horizontal ? control.slide_height : control.slide_width + implicitWidth: slide.horizontal ? control.slideWidth : control.slideHeight + implicitHeight: slide.horizontal ? control.slideHeight : control.slideWidth width: slide.horizontal ? slide.availableWidth : implicitWidth height: slide.horizontal ? implicitHeight : slide.availableHeight Rectangle{ anchors.fill: parent radius: 2 - color: dark_mode ? "#7C7C7C" : "#8F8F8F" + color: isDarkMode ? "#7C7C7C" : "#8F8F8F" Behavior on color { ColorAnimation { duration: 60 @@ -144,10 +144,10 @@ Item { scale: slide.horizontal && slide.mirrored ? -1 : 1 Rectangle { y: slide.horizontal ? 0 : slide.visualPosition * parent.height - width: slide.horizontal ? slide.position * parent.width : control.slide_height - height: slide.horizontal ? control.slide_height : slide.position * parent.height + width: slide.horizontal ? slide.position * parent.width : control.slideHeight + height: slide.horizontal ? control.slideHeight : slide.position * parent.height 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 { ColorAnimation { duration: 60 @@ -161,7 +161,7 @@ Item { RibbonToolTip{ id: tooltip parent: slide.handle - visible: show_tooltip && slide.pressed + visible: showTooltip && slide.pressed text: slide.value } } diff --git a/lib_source/qml/RibbonSpinBox.qml b/lib_source/qml/RibbonSpinBox.qml index 9dbfd19..4ef14f7 100644 --- a/lib_source/qml/RibbonSpinBox.qml +++ b/lib_source/qml/RibbonSpinBox.qml @@ -4,8 +4,8 @@ import RibbonUI SpinBox { id: control - property bool dark_mode: RibbonTheme.dark_mode - property int icon_source + property bool isDarkMode: RibbonTheme.isDarkMode + property int iconSource font.pixelSize: 13 @@ -35,18 +35,18 @@ SpinBox { contentItem: RibbonLineEdit { text: control.displayText font: control.font - color: dark_mode ? "white" : "black" - selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" - selectedTextColor: dark_mode ? "white" : "black" + color: isDarkMode ? "white" : "black" + selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8" + selectedTextColor: isDarkMode ? "white" : "black" horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignVCenter - icon_source: control.icon_source - icon.icon_size: 16 + iconSource: control.iconSource + icon.iconSize: 16 topPadding: 2 bottomPadding: 2 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 validator: control.validator @@ -59,10 +59,10 @@ SpinBox { y: (parent.height / 2) - height + 2 implicitWidth: 20 - 2 implicitHeight: 12 - 2 - icon_source: RibbonIcons.ChevronUp - ribbon_icon.icon_size: 10 - show_bg: false - show_tooltip: false + iconSource: RibbonIcons.ChevronUp + ribbonIcon.iconSize: 10 + showBg: false + showTooltip: false onHoveredChanged: control.up.hovered = hovered onPressedChanged: control.up.pressed = pressed onClicked: increase() @@ -74,10 +74,10 @@ SpinBox { y: (parent.height / 2) - height - 1 + up.indicator.height implicitWidth: 20 - 2 implicitHeight: 12 - 2 - icon_source: RibbonIcons.ChevronDown - ribbon_icon.icon_size: 10 - show_bg: false - show_tooltip: false + iconSource: RibbonIcons.ChevronDown + ribbonIcon.iconSize: 10 + showBg: false + showTooltip: false onHoveredChanged: control.down.hovered = hovered onPressedChanged: control.down.pressed = pressed onClicked: decrease() @@ -90,10 +90,10 @@ SpinBox { color: { color: { if (control.down) - return dark_mode ? "#858585" : "#C9CACA" + return isDarkMode ? "#858585" : "#C9CACA" if (control.hovered) - return dark_mode ? "#5A5B5A" : "#E4E4E4" - return dark_mode ? "#383838" : "#FFFFFF" + return isDarkMode ? "#5A5B5A" : "#E4E4E4" + return isDarkMode ? "#383838" : "#FFFFFF" } } } diff --git a/lib_source/qml/RibbonSwitchButton.qml b/lib_source/qml/RibbonSwitchButton.qml index f0e2d78..6163739 100644 --- a/lib_source/qml/RibbonSwitchButton.qml +++ b/lib_source/qml/RibbonSwitchButton.qml @@ -11,22 +11,22 @@ Button { focusPolicy:Qt.TabFocus checkable: true - property bool dark_mode: RibbonTheme.dark_mode - property bool show_grabber_text: true - property string grabber_text: control.checked ? qsTr("Open") : qsTr("Close") - property string text_color: dark_mode ? "white" : "black" - property int text_size: 11 - property string grabber_checked_color: dark_mode ? "#8AAAEB" : "#2850A4" - property string grabber_unchecked_color: dark_mode ? "#292929" : "white" - property string grabber_text_checked_color: dark_mode ? "black" : "white" - property string grabber_text_unchecked_color: dark_mode ? "white" : "black" - property string grabber_color: dark_mode ? control.pressed ? "#F8F8F8" : "white" : control.pressed ? "#4D4D4D":"#616161" - property string border_color: dark_mode ? "white" : "#616161" - property double border_width: 1.4 - property bool text_bold: false - property bool text_on_left: false - property bool show_tooltip: false - property string tip_text: text + property bool isDarkMode: RibbonTheme.isDarkMode + property bool showGrabberText: true + property string grabberText: control.checked ? qsTr("Open") : qsTr("Close") + property string textColor: isDarkMode ? "white" : "black" + property int textSize: 11 + property string grabberCheckedColor: isDarkMode ? "#8AAAEB" : "#2850A4" + property string grabberUncheckedColor: isDarkMode ? "#292929" : "white" + property string grabberTextCheckedColor: isDarkMode ? "black" : "white" + property string grabberTextUncheckedColor: isDarkMode ? "white" : "black" + property string grabberColor: isDarkMode ? control.pressed ? "#F8F8F8" : "white" : control.pressed ? "#4D4D4D":"#616161" + property string borderColor: isDarkMode ? "white" : "#616161" + property real borderWidth: 1.4 + property bool textBold: false + property bool textOnLeft: false + property bool showTooltip: false + property string tipText: text background:Item{} contentItem:Item{ @@ -38,18 +38,18 @@ Button { property int margins: 4 spacing: 4 anchors.centerIn: parent - layoutDirection: control.text_on_left ? Qt.RightToLeft : Qt.LeftToRight + layoutDirection: control.textOnLeft ? Qt.RightToLeft : Qt.LeftToRight Item{ id: btn 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{ id:bg implicitWidth: btn.implicitWidth + border.width implicitHeight: btn.implicitHeight + border.width anchors.verticalCenter: parent.verticalCenter - border.color: border_color - border.width: border_width + border.color: borderColor + border.width: borderWidth radius: 12 states: [ State{ @@ -57,7 +57,7 @@ Button { when: control.checked PropertyChanges { target: bg - color: grabber_checked_color + color: grabberCheckedColor } }, State{ @@ -65,7 +65,7 @@ Button { when: !control.checked PropertyChanges { target: bg - color: grabber_unchecked_color + color: grabberUncheckedColor } } ] @@ -74,8 +74,8 @@ Button { from: "checked" to:"unchecked" ColorAnimation { - from: grabber_checked_color - to: grabber_unchecked_color + from: grabberCheckedColor + to: grabberUncheckedColor duration: 200 easing.type: Easing.OutSine } @@ -84,8 +84,8 @@ Button { from: "unchecked" to:"checked" ColorAnimation { - from: grabber_unchecked_color - to: grabber_checked_color + from: grabberUncheckedColor + to: grabberCheckedColor duration: 200 easing.type: Easing.OutSine } @@ -97,7 +97,7 @@ Button { implicitHeight: bg.implicitHeight - anchors.margins*2 implicitWidth:implicitHeight radius: width / 2 - color: grabber_color + color: grabberColor anchors{ verticalCenter: parent.verticalCenter margins: 4 @@ -119,17 +119,17 @@ Button { } layer.enabled: true layer.effect: RibbonShadow{ - shadow_opacity: 0.2 - shadow_color: "black" + shadowOpacity: 0.2 + shadowColor: "black" } } Text { - id: grabber_text - text: control.grabber_text + id: grabberText + text: control.grabberText anchors.verticalCenter: parent.verticalCenter anchors.margins: 4 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 z: 0 font{ @@ -148,16 +148,16 @@ Button { name:"checked" when: control.checked PropertyChanges { - target: grabber_text - color: grabber_text_checked_color + target: grabberText + color: grabberTextCheckedColor } }, State{ name:"unchecked" when: !control.checked PropertyChanges { - target: grabber_text - color: grabber_text_unchecked_color + target: grabberText + color: grabberTextUncheckedColor } } ] @@ -166,8 +166,8 @@ Button { from: "checked" to:"unchecked" ColorAnimation { - from: grabber_text_checked_color - to: grabber_text_unchecked_color + from: grabberTextCheckedColor + to: grabberTextUncheckedColor duration: 200 easing.type: Easing.OutSine } @@ -176,8 +176,8 @@ Button { from: "unchecked" to:"checked" ColorAnimation { - from: grabber_text_checked_color - to: grabber_text_unchecked_color + from: grabberTextCheckedColor + to: grabberTextUncheckedColor duration: 200 easing.type: Easing.OutSine } @@ -185,8 +185,8 @@ Button { ] } RibbonToolTip{ - text: tip_text - visible: hovered && show_tooltip && text + text: tipText + visible: hovered && showTooltip && text } } Text { @@ -196,10 +196,10 @@ Button { renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering font{ family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" - pixelSize: control.text_size - bold: control.text_bold + pixelSize: control.textSize + bold: control.textBold } - color: text_color + color: textColor visible: text } } diff --git a/lib_source/qml/RibbonTabBar.qml b/lib_source/qml/RibbonTabBar.qml index 988be9c..3463547 100644 --- a/lib_source/qml/RibbonTabBar.qml +++ b/lib_source/qml/RibbonTabBar.qml @@ -6,7 +6,7 @@ import RibbonUI Item{ 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{ top: parent.top left: parent.left @@ -14,14 +14,14 @@ Item{ } clip: true property bool folded: false - property int last_index + property int lastIndex default property alias content: stack.contentData - property alias right_tool_bar: tool_bar.data - property bool modern_style: RibbonTheme.modern_style - property bool dark_mode: RibbonTheme.dark_mode - property string bg_color: dark_mode ? "#2D2D2D" : "#F4F5F3" - property double bg_opacity: 0.8 - property string border_color: dark_mode ? "black" : "#CCCCCC" + property alias rightToolBar: tool_bar.data + property bool modernStyle: RibbonTheme.modernStyle + property bool isDarkMode: RibbonTheme.isDarkMode + property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3" + property real bgOpacity: 0.8 + property string borderColor: isDarkMode ? "black" : "#CCCCCC" property bool showSettingsBtn: true property alias count: bar.count @@ -39,8 +39,8 @@ Item{ anchors.top: parent.top width: parent.width height: 1 - color: modern_style ? "transparent" : bg_color - opacity:bg_opacity + color: modernStyle ? "transparent" : bgColor + opacity:bgOpacity Behavior on color { ColorAnimation { duration: 60 @@ -53,23 +53,23 @@ Item{ id:bg anchors { - top: modern_style ? bar_view.bottom : top_border.bottom + top: modernStyle ? bar_view.bottom : top_border.bottom left: parent.left right: parent.right bottom:bottom_border.top - topMargin: modern_style ? 10 :0 - leftMargin: modern_style ? 10 :0 - rightMargin: modern_style ? 10 :0 - bottomMargin: modern_style ? 10 :0 + topMargin: modernStyle ? 10 :0 + leftMargin: modernStyle ? 10 :0 + rightMargin: modernStyle ? 10 :0 + bottomMargin: modernStyle ? 10 :0 } clip: true - opacity:bg_opacity + opacity:bgOpacity Rectangle{ anchors.fill: parent - color: bg_color - opacity:bg_opacity - radius: modern_style ? 10 :0 + color: bgColor + opacity:bgOpacity + radius: modernStyle ? 10 :0 Behavior on color { ColorAnimation { duration: 60 @@ -81,8 +81,8 @@ Item{ RibbonShadow { id: effect - enabled: modern_style - visible: modern_style + enabled: modernStyle + visible: modernStyle source: bg anchors.fill: bg } @@ -151,19 +151,19 @@ Item{ background: Item{ anchors{ fill: parent - topMargin: modern_style ? 10 :0 - leftMargin: modern_style ? 10 :0 - rightMargin: modern_style ? 10 :0 - bottomMargin: modern_style ? 10 :0 + topMargin: modernStyle ? 10 :0 + leftMargin: modernStyle ? 10 :0 + rightMargin: modernStyle ? 10 :0 + bottomMargin: modernStyle ? 10 :0 } } contentItem: ListView { anchors{ fill: parent - topMargin: modern_style ? 10 :0 - leftMargin: modern_style ? 10 :0 - rightMargin: modern_style ? 10 :0 - bottomMargin: modern_style ? 10 :0 + topMargin: modernStyle ? 10 :0 + leftMargin: modernStyle ? 10 :0 + rightMargin: modernStyle ? 10 :0 + bottomMargin: modernStyle ? 10 :0 } clip: true model: stack.contentModel @@ -188,7 +188,7 @@ Item{ rightMargin: 5 bottomMargin: 5 } - icon_source: RibbonIcons.ChevronDown + iconSource: RibbonIcons.ChevronDown Behavior on rotation { NumberAnimation{ duration: 100 @@ -197,10 +197,10 @@ Item{ } rotation: folded ? 0 : 180 onClicked: folded = !folded - show_bg: false - show_hovered_bg: false - tip_text: folded ? qsTr("Show") : qsTr("Hide") - text_color: dark_mode ? "white" : "black" + showBg: false + showHoveredBg: false + tipText: folded ? qsTr("Show") : qsTr("Hide") + textColor: isDarkMode ? "white" : "black" } } @@ -223,7 +223,7 @@ Item{ btn.checked = true } sign++ - btn.need_fold.connect(hide_stack) + btn.need_fold.connect(hideStack) root.foldedChanged.connect(function(){btn.setFolded(folded)}) } } @@ -235,8 +235,8 @@ Item{ anchors.top: stack.bottom width: parent.width height: 1 - color: modern_style ? "transparent" : bg_color - opacity:bg_opacity + color: modernStyle ? "transparent" : bgColor + opacity:bgOpacity Rectangle{ anchors{ left: parent.left @@ -244,9 +244,9 @@ Item{ bottom: parent.bottom } z: 3 - color: border_color + color: borderColor height: 1 - visible: !modern_style + visible: !modernStyle Behavior on color { ColorAnimation { duration: 60 @@ -293,7 +293,7 @@ Item{ } if(item instanceof RibbonTabPage){ 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)}) } } @@ -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 } - last_index = index + lastIndex = index } function refresh() diff --git a/lib_source/qml/RibbonTabButton.qml b/lib_source/qml/RibbonTabButton.qml index cc8afdb..6b93853 100644 --- a/lib_source/qml/RibbonTabButton.qml +++ b/lib_source/qml/RibbonTabButton.qml @@ -8,10 +8,10 @@ TabButton { signal need_fold(bool needed, int index) property bool folded: false property int index - property bool dark_mode: RibbonTheme.dark_mode - property string underline_unchecked_color: dark_mode ? "#666666" : RibbonTheme.modern_style ? "#A2A2A2" : "#D1D1D1" - property string underline_checked_color: dark_mode ? "#8AAAEB" : "#2E4C93" - property string font_color: highlight ? dark_mode ? "white" : "#355795" : dark_mode ? "white" : "black" + property bool isDarkMode: RibbonTheme.isDarkMode + property string underlineUncheckedColor: isDarkMode ? "#666666" : RibbonTheme.modernStyle ? "#A2A2A2" : "#D1D1D1" + property string underlineCheckedColor: isDarkMode ? "#8AAAEB" : "#2E4C93" + property string fontColor: highlight ? isDarkMode ? "white" : "#355795" : isDarkMode ? "white" : "black" property bool highlight: false background: Item{} @@ -28,7 +28,7 @@ TabButton { bold: checked } renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering - color: font_color + color: fontColor height: contentHeight anchors{ centerIn: parent @@ -48,9 +48,9 @@ TabButton { color: { if (control.hovered && (!control.checked || folded)) - return underline_unchecked_color + return underlineUncheckedColor if (control.checked && !folded) - return underline_checked_color + return underlineCheckedColor return "transparent" } radius: 3 diff --git a/lib_source/qml/RibbonTabGroup.qml b/lib_source/qml/RibbonTabGroup.qml index 009bc3b..dc9dd5a 100644 --- a/lib_source/qml/RibbonTabGroup.qml +++ b/lib_source/qml/RibbonTabGroup.qml @@ -6,15 +6,15 @@ Item { id:control width: container.width property alias text: label.text - property alias show_border: line.visible + property alias showBorder: line.visible default property alias content: container.data property int contenHeight: container.height - property bool dark_mode: RibbonTheme.dark_mode + property bool isDarkMode: RibbonTheme.isDarkMode property bool showOpenExternal: false - property string font_color: dark_mode ? "white" : "black" - property string border_color: dark_mode ? "#525252" : "#D4D4D4" - property alias externalToolTipText: open_external_btn.tip_text - property alias showExternalToolTipText: open_external_btn.show_tooltip + property string fontColor: isDarkMode ? "white" : "black" + property string borderColor: isDarkMode ? "#525252" : "#D4D4D4" + property alias externalToolTipText: open_external_btn.tipText + property alias showExternalToolTipText: open_external_btn.showTooltip Layout.fillHeight: true clip: true signal openExternal() @@ -27,7 +27,7 @@ Item { pixelSize: 12 bold: true } - color: font_color + color: fontColor height: contentHeight renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering anchors{ @@ -47,7 +47,7 @@ Item { id: line width: 1 height: control.height - label.anchors.bottomMargin*3 - color: border_color + color: borderColor anchors{ verticalCenter: control.verticalCenter right:control.right @@ -78,14 +78,14 @@ Item { right: control.right bottom: control.bottom } - implicitWidth: ribbon_icon.width + 10 - implicitHeight: ribbon_icon.height + 10 + implicitWidth: ribbonIcon.width + 10 + implicitHeight: ribbonIcon.height + 10 checkable: false - ribbon_icon.icon_size: 14 - ribbon_icon.rotation: 90 - show_bg: false - tip_text: qsTr("Open ") + label.text + qsTr("'s external") - icon_source: RibbonIcons.Open + ribbonIcon.iconSize: 14 + ribbonIcon.rotation: 90 + showBg: false + tipText: qsTr("Open ") + label.text + qsTr("'s external") + iconSource: RibbonIcons.Open onClicked: openExternal() visible: control.showOpenExternal } diff --git a/lib_source/qml/RibbonText.qml b/lib_source/qml/RibbonText.qml index bab783f..54d5b75 100644 --- a/lib_source/qml/RibbonText.qml +++ b/lib_source/qml/RibbonText.qml @@ -5,19 +5,19 @@ import RibbonUI TextEdit { id: control readOnly: true - color: dark_mode ? "white" : "black" - property bool dark_mode: RibbonTheme.dark_mode - property bool view_only: false + color: isDarkMode ? "white" : "black" + property bool isDarkMode: RibbonTheme.isDarkMode + property bool viewOnly: false padding: 0 topPadding: 0 leftPadding: 0 rightPadding: 0 bottomPadding: 0 selectByMouse: true - selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" - selectedTextColor: dark_mode ? "white" : "black" + selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8" + selectedTextColor: isDarkMode ? "white" : "black" wrapMode: TextEdit.WrapAnywhere - enabled: !view_only + enabled: !viewOnly font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" renderType: RibbonTheme.nativeText ? TextEdit.NativeRendering : TextEdit.QtRendering onRenderTypeChanged: { @@ -33,6 +33,6 @@ TextEdit { } RibbonTextBoxMenu{ id:menu - input_item: control + inputItem: control } } diff --git a/lib_source/qml/RibbonTextBoxMenu.qml b/lib_source/qml/RibbonTextBoxMenu.qml index 82d58cd..5a22bd0 100644 --- a/lib_source/qml/RibbonTextBoxMenu.qml +++ b/lib_source/qml/RibbonTextBoxMenu.qml @@ -3,44 +3,44 @@ import QtQuick.Controls import RibbonUI RibbonMenu{ - property var input_item + property var inputItem id:menu width: 100 onVisibleChanged: { - input_item.forceActiveFocus() + inputItem.forceActiveFocus() } Connections{ - target: input_item + target: inputItem function onTextChanged() { menu.close() } } RibbonMenuItem{ text: qsTr("Cut") - visible: input_item.selectedText !== "" && !input_item.readOnly + visible: inputItem.selectedText !== "" && !inputItem.readOnly onClicked: { - input_item.cut() + inputItem.cut() } } RibbonMenuItem{ text: qsTr("Copy") - visible: input_item.selectedText !== "" + visible: inputItem.selectedText !== "" onClicked: { - input_item.copy() + inputItem.copy() } } RibbonMenuItem{ text: qsTr("Paste") - visible: input_item.canPaste + visible: inputItem.canPaste onClicked: { - input_item.paste() + inputItem.paste() } } RibbonMenuItem{ text: qsTr("Select All") - visible: input_item.text !== "" + visible: inputItem.text !== "" onClicked: { - input_item.selectAll() + inputItem.selectAll() } } } diff --git a/lib_source/qml/RibbonTextEdit.qml b/lib_source/qml/RibbonTextEdit.qml index 3fd08a4..6260fc5 100644 --- a/lib_source/qml/RibbonTextEdit.qml +++ b/lib_source/qml/RibbonTextEdit.qml @@ -6,16 +6,16 @@ import RibbonUI Item{ id: control property alias text: textedit.text - property alias icon_source: textedit.icon_source - property alias show_clear_btn: textedit.show_clear_btn + property alias iconSource: textedit.iconSource + property alias showClearBtn: textedit.showClearBtn property alias textedit: textedit property alias placeholderText: textedit.placeholderText property alias readOnly: textedit.readOnly - property int max_height: 80 - property bool dark_mode: RibbonTheme.dark_mode + property int maxHeight: 80 + property bool isDarkMode: RibbonTheme.isDarkMode signal commit() width: 150 - height: Math.min(flickview.contentHeight, max_height) + height: Math.min(flickview.contentHeight, maxHeight) Flickable{ id: flickview anchors.fill: parent @@ -29,18 +29,18 @@ Item{ clip: true TextArea.flickable:TextArea { id: textedit - property int icon_source - property bool show_clear_btn: true + property int iconSource + property bool showClearBtn: true focus: true - color: dark_mode ? "white" : "black" + color: isDarkMode ? "white" : "black" padding: 5 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:") - 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 - selectionColor: dark_mode ? "#4F5E7F" : "#BECDE8" - selectedTextColor: dark_mode ? "white" : "black" + selectionColor: isDarkMode ? "#4F5E7F" : "#BECDE8" + selectedTextColor: isDarkMode ? "white" : "black" wrapMode: Text.WrapAnywhere renderType: RibbonTheme.nativeText ? TextArea.NativeRendering : TextArea.QtRendering opacity: enabled ? 1.0 : 0.3 @@ -53,8 +53,8 @@ Item{ background: Rectangle{ id:bg radius: 4 - color: dark_mode ? "#383838" : "#FFFFFF" - border.color: textedit.cursorVisible ? dark_mode ? "#869CCD" : "#486495" : dark_mode ? "#5E5F5E" : "#B9B9B8" + color: isDarkMode ? "#383838" : "#FFFFFF" + border.color: textedit.cursorVisible ? isDarkMode ? "#869CCD" : "#486495" : isDarkMode ? "#5E5F5E" : "#B9B9B8" border.width: 1 Behavior on color { ColorAnimation { @@ -74,7 +74,7 @@ Item{ } RibbonTextBoxMenu{ id:menu - input_item: textedit + inputItem: textedit } } } @@ -85,10 +85,10 @@ Item{ leftMargin: textedit.padding verticalCenter: parent.verticalCenter } - icon_source: textedit.icon_source - icon_size: 26 - textedit.padding - visible: icon_source - color: dark_mode ? "white" : "black" + iconSource: textedit.iconSource + iconSize: 26 - textedit.padding + visible: iconSource + color: isDarkMode ? "white" : "black" Behavior on color { ColorAnimation { duration: 60 @@ -97,19 +97,19 @@ Item{ } } RibbonButton{ - id: clear_btn + id: clearBtn anchors{ right: parent.right rightMargin: textedit.padding verticalCenter: parent.verticalCenter } - show_bg: false - show_hovered_bg: false - tip_text: qsTr("Clear") - icon_source: RibbonIcons.Dismiss + showBg: false + showHoveredBg: false + tipText: qsTr("Clear") + iconSource: RibbonIcons.Dismiss height: 26 - textedit.padding width: height - visible: textedit.text&&show_clear_btn&&textedit.cursorVisible + visible: textedit.text&&showClearBtn&&textedit.cursorVisible onClicked: textedit.clear() } } diff --git a/lib_source/qml/RibbonTitleBar.qml b/lib_source/qml/RibbonTitleBar.qml index b031b21..22d97f0 100644 --- a/lib_source/qml/RibbonTitleBar.qml +++ b/lib_source/qml/RibbonTitleBar.qml @@ -6,20 +6,20 @@ import RibbonUI Item { id: control 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 bool show_style_switch: true - property bool show_darkmode_btn: true - property bool show_pin_btn: true - property bool dark_mode: RibbonTheme.dark_mode - property bool modern_style: RibbonTheme.modern_style - property string title_color: modern_style ? "transparent" : dark_mode ? "#282828" : "#2C59B7" - property string title_text_color: modern_style ? dark_mode ? "white" : "black" : "white" - default property alias content: left_container.data - property alias left_content: left_container.data - property alias right_content: right_container.data - property alias left_container: left_container - property alias right_container: right_container + property bool showStyleSwitch: true + property bool showDarkmodeBtn: true + property bool showPinBtn: true + property bool isDarkMode: RibbonTheme.isDarkMode + property bool modernStyle: RibbonTheme.modernStyle + property string titleColor: modernStyle ? "transparent" : isDarkMode ? "#282828" : "#2C59B7" + property string titleTextColor: modernStyle ? isDarkMode ? "white" : "black" : "white" + default property alias content: leftContainer.data + property alias leftContent: leftContainer.data + property alias rightContent: rightContainer.data + property alias leftContainer: leftContainer + property alias rightContainer: rightContainer property alias maximizeBtn: maximizeBtn property alias minimizeBtn: minimizeBtn property alias closeBtn: closeBtn @@ -33,7 +33,7 @@ Item { Rectangle{ id: bg anchors.fill: parent - color: title_color + color: titleColor Behavior on color { ColorAnimation { duration: 60 @@ -47,7 +47,7 @@ Item { anchors.centerIn: parent text: control.title font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI" - color: title_text_color + color: titleTextColor renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering Behavior on color { ColorAnimation { @@ -58,7 +58,7 @@ Item { } RowLayout{ - id: left_container + id: leftContainer spacing: 1 anchors{ top: parent.top @@ -70,7 +70,7 @@ Item { } RowLayout{ - id: right_container + id: rightContainer spacing: 1 anchors{ top: parent.top @@ -87,40 +87,40 @@ Item { Layout.rightMargin: Qt.platform.os === "osx" ? -5 : 0 RibbonButton{ id: closeBtn - show_bg:false - icon_source: RibbonIcons.Dismiss - icon_source_filled: RibbonIcons_Filled.Dismiss - text_color: titleBar.title_text_color - hover_color: "#ED6B5E" - pressed_color: "#B55149" - text_color_reverse: false - tip_text: qsTr("Close") + showBg:false + iconSource: RibbonIcons.Dismiss + iconSourceFilled: RibbonIcons_Filled.Dismiss + textColor: titleBar.titleTextColor + hoverColor: "#ED6B5E" + pressedColor: "#B55149" + textColorReverse: false + tipText: qsTr("Close") onClicked: Window.window.close() } RibbonButton{ id: minimizeBtn - show_bg:false - icon_source: RibbonIcons.Subtract - icon_source_filled: RibbonIcons_Filled.Subtract - text_color: titleBar.title_text_color - hover_color: "#F4BE4F" - pressed_color: "#B78F3B" - text_color_reverse: false - tip_text: qsTr("Minimize") + showBg:false + iconSource: RibbonIcons.Subtract + iconSourceFilled: RibbonIcons_Filled.Subtract + textColor: titleBar.titleTextColor + hoverColor: "#F4BE4F" + pressedColor: "#B78F3B" + textColorReverse: false + tipText: qsTr("Minimize") font.bold: pressed || checked onClicked: Window.window.visibility = Window.Minimized } RibbonButton{ id: maximizeBtn - show_bg:false - icon_source: Window.window.visibility === Window.Maximized ? RibbonIcons.ArrowMinimize : RibbonIcons.ArrowMaximize - text_color: titleBar.title_text_color - hover_color: "#61C554" - pressed_color: "#48953F" - text_color_reverse: false - tip_text: Window.window.visibility === Window.Maximized ? qsTr("Restore") : qsTr("Maximize") + showBg:false + iconSource: Window.window.visibility === Window.Maximized ? RibbonIcons.ArrowMinimize : RibbonIcons.ArrowMaximize + textColor: titleBar.titleTextColor + hoverColor: "#61C554" + pressedColor: "#48953F" + textColorReverse: false + tipText: Window.window.visibility === Window.Maximized ? qsTr("Restore") : qsTr("Maximize") onClicked: { if (Window.window.visibility === Window.Maximized) Window.window.visibility = Window.Windowed @@ -131,46 +131,46 @@ Item { } RibbonSwitchButton{ text: qsTr("Style") - grabber_text: checked ? qsTr("Modern") : qsTr("Classic") - text_color: titleBar.title_text_color - grabber_color: "#F9F9F9" - grabber_checked_color: "#BEC1C9" - grabber_unchecked_color: "#334668" - grabber_text_unchecked_color: "white" - grabber_text_checked_color: "black" - onClicked: RibbonTheme.modern_style = checked - checked: RibbonTheme.modern_style - visible: show_style_switch + grabberText: checked ? qsTr("Modern") : qsTr("Classic") + textColor: titleBar.titleTextColor + grabberColor: "#F9F9F9" + grabberCheckedColor: "#BEC1C9" + grabberUncheckedColor: "#334668" + grabberTextUncheckedColor: "white" + grabberTextCheckedColor: "black" + onClicked: RibbonTheme.modernStyle = checked + checked: RibbonTheme.modernStyle + visible: showStyleSwitch } RibbonButton{ - show_bg:false - icon_source: RibbonIcons.DarkTheme - icon_source_filled: RibbonIcons_Filled.DarkTheme + showBg:false + iconSource: RibbonIcons.DarkTheme + iconSourceFilled: RibbonIcons_Filled.DarkTheme checkable: true - tip_text: qsTr("Dark Mode") - hover_color: Qt.rgba(0,0,0, 0.3) - pressed_color: Qt.rgba(0,0,0, 0.4) - text_color: title_text_color - text_color_reverse: false + tipText: qsTr("Dark Mode") + hoverColor: Qt.rgba(0,0,0, 0.3) + pressedColor: Qt.rgba(0,0,0, 0.4) + textColor: titleTextColor + textColorReverse: false onClicked: { - RibbonTheme.theme_mode = checked ? RibbonThemeType.Dark : RibbonThemeType.Light + RibbonTheme.themeMode = checked ? RibbonThemeType.Dark : RibbonThemeType.Light } - checked: RibbonTheme.dark_mode - visible: show_darkmode_btn + checked: RibbonTheme.isDarkMode + visible: showDarkmodeBtn } RibbonButton{ id: pinBtn - show_bg:false - icon_source: checked ? RibbonIcons.Pin : RibbonIcons.PinOff - icon_source_filled: checked ? RibbonIcons_Filled.Pin : RibbonIcons_Filled.PinOff + showBg:false + iconSource: checked ? RibbonIcons.Pin : RibbonIcons.PinOff + iconSourceFilled: checked ? RibbonIcons_Filled.Pin : RibbonIcons_Filled.PinOff checkable: true - text_color: title_text_color - hover_color: Qt.rgba(0,0,0, 0.3) - pressed_color: Qt.rgba(0,0,0, 0.4) - text_color_reverse: false - tip_text: qsTr("Stay on Top") + textColor: titleTextColor + hoverColor: Qt.rgba(0,0,0, 0.3) + pressedColor: Qt.rgba(0,0,0, 0.4) + textColorReverse: false + tipText: qsTr("Stay on Top") onClicked: Window.window.flags ^= Qt.WindowStaysOnTopHint - visible: control.show_pin_btn + visible: control.showPinBtn } } } diff --git a/lib_source/qml/RibbonToolTip.qml b/lib_source/qml/RibbonToolTip.qml index 7502c5a..b8e020c 100644 --- a/lib_source/qml/RibbonToolTip.qml +++ b/lib_source/qml/RibbonToolTip.qml @@ -11,16 +11,16 @@ ToolTip { contentItem: Text { text: control.text font: control.font - color: RibbonTheme.dark_mode ? "white" : "black" + color: RibbonTheme.isDarkMode ? "white" : "black" renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering } background: Rectangle { radius: 3 - color: RibbonTheme.dark_mode ? "#2C2C29" : "#E0E0E2" + color: RibbonTheme.isDarkMode ? "#2C2C29" : "#E0E0E2" layer.enabled: true layer.effect: RibbonShadow{} - border.color: dark_mode ? "#5C5D5D" : "#B5B4B5" + border.color: isDarkMode ? "#5C5D5D" : "#B5B4B5" border.width: 1 } } diff --git a/lib_source/qml/RibbonTour.qml b/lib_source/qml/RibbonTour.qml index 32614f0..a5dbc14 100644 --- a/lib_source/qml/RibbonTour.qml +++ b/lib_source/qml/RibbonTour.qml @@ -9,19 +9,19 @@ Popup { id: popup parent: Overlay.overlay property var targetList: [] - property bool blur_enabled: false + property bool blurEnabled: false property alias target: blur.target - property alias target_rect: blur.target_rect + property alias targetRect: blur.targetRect property alias radius: blur.radius - property string content_source: "RibbonTourContent.qml" - property var content_items: undefined - property bool destroy_after_close: true + property string contentSource: "RibbonTourContent.qml" + property var contentItems: undefined + property bool destroyAfterClose: true property var currentTarget: targetList ? targetList[0].target : parent property int currentIndex: 0 property bool preferShowAbove: true property bool useHighlightOrRect: true property real contentEdgeMargin: 10 - property alias content_args: control.args + property alias contentArgs: control.args property alias alwaysNotAutoPopup: always_hide_ckbox.checked modal: true margins: 0 @@ -34,7 +34,7 @@ Popup { y: (Overlay.overlay.height - height) / 2 closePolicy: Popup.NoAutoClose 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{ color:"transparent" @@ -43,10 +43,10 @@ Popup { RectangularGlow { id: effect anchors.fill: blur - anchors.margins: blur.mask_border.width + anchors.margins: blur.maskBorder.width glowRadius: 10 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 } RibbonBlur{ @@ -54,11 +54,11 @@ Popup { implicitWidth: parent.width id: blur radius: 10 - mask_opacity: blur_enabled ? 0.9 : 1 - mask_border.color: RibbonTheme.modern_style ? - RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" : - RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5" - mask_border.width: 1 + maskOpacity: blurEnabled ? 0.9 : 1 + maskBorder.color: RibbonTheme.modernStyle ? + RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" : + RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5" + maskBorder.width: 1 } } contentItem: Item{ @@ -75,9 +75,9 @@ Popup { right:parent.right rightMargin: anchors.topMargin } - show_bg: false - show_hovered_bg: false - icon_source: RibbonIcons.Dismiss + showBg: false + showHoveredBg: false + iconSource: RibbonIcons.Dismiss onClicked: popup.close() } ColumnLayout{ @@ -87,8 +87,8 @@ Popup { id: loader width: item ? item.implicitWidth : 50 height: item ? item.implicitHeight : 50 - sourceComponent: content_source ? undefined : content_items - source: content_source + sourceComponent: contentSource ? undefined : contentItems + source: contentSource onLoaded: { if (!control.args) return @@ -109,13 +109,13 @@ Popup { spacing: 20 RibbonCheckBox{ id: always_hide_ckbox - show_tooltip: false + showTooltip: false text: qsTr("Don't auto pop up") } RibbonButton{ id: previous_btn text: qsTr("Previous") - show_tooltip: false + showTooltip: false enabled: popup.currentIndex onClicked: { if(popup.targetList[popup.currentIndex].exit_func) @@ -127,7 +127,7 @@ Popup { RibbonButton{ id: next_btn text: (popup.currentIndex + 1) === popup.targetList.length ? qsTr("Finish") : qsTr("Next") - show_tooltip: false + showTooltip: false onClicked: { if ((popup.currentIndex + 1) === popup.targetList.length) { @@ -167,7 +167,7 @@ Popup { contentItem:Rectangle{ color: 'transparent' border.width: rec.borderWidth - border.color: RibbonTheme.dark_mode ? "#3B69DA" : "#2C59B7" + border.color: RibbonTheme.isDarkMode ? "#3B69DA" : "#2C59B7" radius: 5 ShaderEffectSource { anchors.centerIn: parent @@ -240,8 +240,8 @@ Popup { } onAboutToShow: { - loader.sourceComponent = content_source ? undefined : content_items - loader.source = content_source + loader.sourceComponent = contentSource ? undefined : contentItems + loader.source = contentSource rec.open() currentTarget = targetList[0].target currentIndex = 0 diff --git a/lib_source/qml/RibbonTourContent.qml b/lib_source/qml/RibbonTourContent.qml index 1dc25a5..6162f77 100644 --- a/lib_source/qml/RibbonTourContent.qml +++ b/lib_source/qml/RibbonTourContent.qml @@ -8,7 +8,7 @@ Item { id:control implicitHeight: layout.implicitHeight implicitWidth: 300 - property real content_margins: 20 + property real contentMargins: 20 ColumnLayout{ id:layout @@ -18,14 +18,14 @@ Item { Layout.preferredWidth: parent.width - leftPadding - rightPadding font.pixelSize: 22 text: popup.targetList[popup.currentIndex].title - view_only: true - topPadding: content_margins * 3 / 4 - leftPadding: content_margins - rightPadding: content_margins + viewOnly: true + topPadding: contentMargins * 3 / 4 + leftPadding: contentMargins + rightPadding: contentMargins wrapMode: Text.WrapAtWordBoundaryOrAnywhere - color: RibbonTheme.modern_style ? - dark_mode ? '#8AAAEB' : '#2C59B7' : - dark_mode ? "white" : "black" + color: RibbonTheme.modernStyle ? + isDarkMode ? '#8AAAEB' : '#2C59B7' : + isDarkMode ? "white" : "black" verticalAlignment: Text.AlignVCenter } RibbonText{ @@ -34,11 +34,11 @@ Item { wrapMode: Text.WrapAtWordBoundaryOrAnywhere verticalAlignment: Text.AlignVCenter text: popup.targetList[popup.currentIndex].text - view_only: true - topPadding: content_margins * 3 / 4 - leftPadding: content_margins - rightPadding: content_margins - bottomPadding: content_margins * 3 / 4 + viewOnly: true + topPadding: contentMargins * 3 / 4 + leftPadding: contentMargins + rightPadding: contentMargins + bottomPadding: contentMargins * 3 / 4 } } } diff --git a/lib_source/qml/RibbonView.qml b/lib_source/qml/RibbonView.qml index 2b42932..c65fac0 100644 --- a/lib_source/qml/RibbonView.qml +++ b/lib_source/qml/RibbonView.qml @@ -7,13 +7,13 @@ import RibbonUI Item { id: root default property alias content: container.data - property bool modern_style: RibbonTheme.modern_style - property bool dark_mode: RibbonTheme.dark_mode + property bool modernStyle: RibbonTheme.modernStyle + property bool isDarkMode: RibbonTheme.isDarkMode property int spacing: 5 - property int top_padding: 0 - property int bottom_padding: 0 - property alias bg_color: bg.color - property alias bg_visible: bg.visible + property int topPadding: 0 + property int bottomPadding: 0 + property alias bgColor: bg.color + property alias bgVisible: bg.visible z:-2 clip: true width: parent.width @@ -21,8 +21,8 @@ Item { Rectangle{ id:bg anchors.fill: parent - color: dark_mode ? "#282828" : "#ECECEC" - visible: !modern_style + color: isDarkMode ? "#282828" : "#ECECEC" + visible: !modernStyle } RibbonBlur{ @@ -32,20 +32,20 @@ Item { right: parent.right top: parent.top } - height: Math.abs(top_padding) + height: Math.abs(topPadding) target: container - mask_opacity: 0 - visible: top_padding + maskOpacity: 0 + visible: topPadding clip: true - target_rect: Qt.rect(x,y-top_padding,width,height) - use_solid_bg: false + targetRect: Qt.rect(x,y-topPadding,width,height) + useSolidBg: false } Item{ id: clipper anchors.horizontalCenter: parent.horizontalCenter 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 clip: true ColumnLayout{ @@ -66,12 +66,12 @@ Item { right: parent.right bottom: parent.bottom } - height: Math.abs(bottom_padding) + height: Math.abs(bottomPadding) target: container - mask_opacity: 0 - visible: bottom_padding + maskOpacity: 0 + visible: bottomPadding clip: true - target_rect: Qt.rect(x,y-top_padding,width,height) - use_solid_bg: false + targetRect: Qt.rect(x,y-topPadding,width,height) + useSolidBg: false } } diff --git a/lib_source/qml/RibbonWindow.qml b/lib_source/qml/RibbonWindow.qml index aad5cfe..7840715 100644 --- a/lib_source/qml/RibbonWindow.qml +++ b/lib_source/qml/RibbonWindow.qml @@ -4,7 +4,7 @@ import QWindowKit Window { id:window - minimumWidth: title_bar.minimumWidth + minimumWidth: titleBar.minimumWidth enum Status { Stardard, SingleTask, @@ -12,12 +12,12 @@ Window { } default property alias content: container.data property int windowStatus: RibbonWindow.Status.Stardard - property alias window_items: window_items - property alias title_bar: titleBar + property alias windowItems: windowItems + property alias titleBar: titleBar property alias popup: pop - property bool comfirmed_quit: false + property bool comfirmedQuit: false 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 borderRadius: border_rect.radius visible: false @@ -25,7 +25,7 @@ Window { if (blurBehindWindow) { return "transparent" } - if (RibbonTheme.dark_mode) { + if (RibbonTheme.isDarkMode) { return '#2C2B29' } return '#FFFFFF' @@ -34,7 +34,7 @@ Window { if (Qt.platform.os === 'windows') windowAgent.setWindowAttribute("dwm-blur", blurBehindWindow) 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: { @@ -45,27 +45,27 @@ Window { windowAgent.setSystemButton(WindowAgent.Maximize, titleBar.maximizeBtn); windowAgent.setSystemButton(WindowAgent.Close, titleBar.closeBtn); } - windowAgent.setHitTestVisible(titleBar.left_container) - windowAgent.setHitTestVisible(titleBar.right_container) + windowAgent.setHitTestVisible(titleBar.leftContainer) + windowAgent.setHitTestVisible(titleBar.rightContainer) windowAgent.setTitleBar(titleBar) window.visible = true windowAgent.centralize() raise() - windowAgent.setWindowAttribute("dark-mode", RibbonTheme.dark_mode) + windowAgent.setWindowAttribute("dark-mode", RibbonTheme.isDarkMode) if (Qt.platform.os === 'windows') { windowAgent.setWindowAttribute("dwm-blur", blurBehindWindow) } 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{ - id: window_items + id: windowItems anchors{ fill: parent - topMargin: border_rect.border.width + windows_top_fix + topMargin: border_rect.border.width + windowsTopFix leftMargin: border_rect.border.width rightMargin: border_rect.border.width bottomMargin: border_rect.border.width @@ -86,50 +86,50 @@ Window { } Connections{ target: RibbonTheme - function onTheme_modeChanged() { - windowAgent.setWindowAttribute("dark-mode", RibbonTheme.dark_mode) + function onThemeModeChanged() { + windowAgent.setWindowAttribute("dark-mode", RibbonTheme.isDarkMode) 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{ z:99 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 } Rectangle{ id: border_rect z: -1 anchors.fill: parent - anchors.topMargin: windows_top_fix + anchors.topMargin: windowsTopFix color: { if (Qt.platform.os === 'windows') { - if (RibbonTheme.dark_mode) { + if (RibbonTheme.isDarkMode) { return Qt.alpha('#2C2B29', 0.8) } return Qt.alpha('#FFFFFF',0.8) } return 'transparent' } - border.color: RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" - border.width: RibbonTheme.modern_style ? 1 : 0 - radius: Qt.platform.os === 'windows' ? RibbonUI.is_win11 ? 7 : 0 : 10 - visible: RibbonTheme.modern_style || blurBehindWindow + border.color: RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" + border.width: RibbonTheme.modernStyle ? 1 : 0 + radius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10 + visible: RibbonTheme.modernStyle || blurBehindWindow } RibbonPopup{ id: pop - target: window_items - target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) - blur_enabled: true + target: windowItems + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) + blurEnabled: true } RibbonPopupDialog{ id: close_dialog - target: window_items - blur_enabled: true - target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height) + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) positiveText: qsTr("Quit") neutralText: qsTr("Minimize") negativeText: qsTr("Cancel") @@ -138,7 +138,7 @@ Window { buttonFlags: RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton onNeutralClicked: window.visibility = Window.Minimized onPositiveClicked: { - comfirmed_quit = false + comfirmedQuit = false Qt.quit() } } @@ -149,12 +149,12 @@ Window { onClosing:function(event){ window.raise() - event.accepted = !comfirmed_quit - if (comfirmed_quit) + event.accepted = !comfirmedQuit + if (comfirmedQuit) close_dialog.open() } - function show_window(window_url, args){ + function showWindow(window_url, args){ let sub_windows = RibbonUI.windowsSet 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()) } } - - 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() - } } diff --git a/lib_source/ribbontheme.cpp b/lib_source/ribbontheme.cpp index 39cf0a0..b6d5c4b 100644 --- a/lib_source/ribbontheme.cpp +++ b/lib_source/ribbontheme.cpp @@ -13,12 +13,12 @@ RibbonTheme::RibbonTheme() { - connect(this, &RibbonTheme::theme_modeChanged, this, [=](){ - emit dark_modeChanged(); + connect(this, &RibbonTheme::themeModeChanged, this, [=](){ + emit isDarkModeChanged(); }); - _theme_mode = RibbonThemeType::ThemeMode::System; - _system_theme_mode = current_theme(); - modern_style(false); + _themeMode = RibbonThemeType::ThemeMode::System; + _system_themeMode = currentTheme(); + modernStyle(false); nativeText(true); qApp->installEventFilter(this); } @@ -39,16 +39,16 @@ bool RibbonTheme::eventFilter(QObject *obj, QEvent *event) Q_UNUSED(obj); if (event->type() == QEvent::ApplicationPaletteChange || event->type() == QEvent::ThemeChange) { - _system_theme_mode = current_theme(); - if (_theme_mode == RibbonThemeType::ThemeMode::System) - Q_EMIT theme_modeChanged(); + _system_themeMode = currentTheme(); + if (_themeMode == RibbonThemeType::ThemeMode::System) + Q_EMIT themeModeChanged(); event->accept(); return true; } return false; } -RibbonThemeType::ThemeMode RibbonTheme::current_theme() +RibbonThemeType::ThemeMode RibbonTheme::currentTheme() { #if (QT_VERSION >= QT_VERSION_CHECK(6, 5, 0)) return (QGuiApplication::styleHints()->colorScheme() == Qt::ColorScheme::Light) ? @@ -66,8 +66,8 @@ RibbonThemeType::ThemeMode RibbonTheme::current_theme() #endif } -bool RibbonTheme::dark_mode() +bool RibbonTheme::isDarkMode() { - return _theme_mode == RibbonThemeType::ThemeMode::System ? _system_theme_mode == RibbonThemeType::ThemeMode::Dark - : _theme_mode == RibbonThemeType::ThemeMode::Dark; + return _themeMode == RibbonThemeType::ThemeMode::System ? _system_themeMode == RibbonThemeType::ThemeMode::Dark + : _themeMode == RibbonThemeType::ThemeMode::Dark; } diff --git a/lib_source/ribbontheme.h b/lib_source/ribbontheme.h index cf7cee1..fb16955 100644 --- a/lib_source/ribbontheme.h +++ b/lib_source/ribbontheme.h @@ -11,21 +11,21 @@ class RibbonTheme : public QQuickItem QML_SINGLETON QML_NAMED_ELEMENT(RibbonTheme) - Q_PROPERTY(bool dark_mode READ dark_mode() NOTIFY dark_modeChanged FINAL) - Q_PROPERTY_RW(RibbonThemeType::ThemeMode,theme_mode) - Q_PROPERTY_RW(bool,modern_style) + Q_PROPERTY(bool isDarkMode READ isDarkMode() NOTIFY isDarkModeChanged FINAL) + Q_PROPERTY_RW(RibbonThemeType::ThemeMode,themeMode) + Q_PROPERTY_RW(bool,modernStyle) Q_PROPERTY_RW(bool,nativeText) public: static RibbonTheme* create(QQmlEngine *qmlEngine, QJSEngine *jsEngine){return instance();} static RibbonTheme* instance(); - Q_SIGNAL void dark_modeChanged(); - bool dark_mode(); + Q_SIGNAL void isDarkModeChanged(); + bool isDarkMode(); private: RibbonTheme(); Q_DISABLE_COPY_MOVE(RibbonTheme) bool eventFilter(QObject *obj, QEvent *event); - RibbonThemeType::ThemeMode current_theme(); - RibbonThemeType::ThemeMode _system_theme_mode; + RibbonThemeType::ThemeMode currentTheme(); + RibbonThemeType::ThemeMode _system_themeMode; }; #endif // RIBBONTHEME_H diff --git a/lib_source/ribbonui.cpp b/lib_source/ribbonui.cpp index 532422e..02c8e9e 100644 --- a/lib_source/ribbonui.cpp +++ b/lib_source/ribbonui.cpp @@ -9,8 +9,8 @@ RibbonUI::RibbonUI(QQuickItem *parent) : QQuickItem(parent) { _version = VER_JOIN(RIBBONUI_VERSION); - _qt_version = QString(qVersion()).replace('.',"").toInt(); - _is_win11 = QOperatingSystemVersion::current() >= QOperatingSystemVersion(QOperatingSystemVersion::Windows, 10, 0, 22000); + _qtVersion = QString(qVersion()).replace('.',"").toInt(); + _isWin11 = QOperatingSystemVersion::current() >= QOperatingSystemVersion(QOperatingSystemVersion::Windows, 10, 0, 22000); } RibbonUI* RibbonUI::instance(){ diff --git a/lib_source/ribbonui.h b/lib_source/ribbonui.h index 732f104..751ec44 100644 --- a/lib_source/ribbonui.h +++ b/lib_source/ribbonui.h @@ -11,8 +11,8 @@ class RibbonUI : public QQuickItem QML_SINGLETON QML_NAMED_ELEMENT(RibbonUI) Q_PROPERTY_R(QString, version) - Q_PROPERTY_R(int, qt_version) - Q_PROPERTY_R(int, is_win11) + Q_PROPERTY_R(int, qtVersion) + Q_PROPERTY_R(int, isWin11) Q_PROPERTY_RW(QVariantMap, windowsSet) public: static RibbonUI* instance();