diff --git a/example/CMakeLists.txt b/example/CMakeLists.txt index 79eb8d5..c92c0b9 100644 --- a/example/CMakeLists.txt +++ b/example/CMakeLists.txt @@ -28,7 +28,8 @@ find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core) find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Quick REQUIRED) set(sources_files example.cpp) -set(qml_files example.qml about.qml components/RibbonMessageListViewExample.qml pages/SettingsMenuPage.qml) +set(qml_files example.qml about.qml components/RibbonMessageListViewExample.qml + pages/SettingsMenuPage.qml components/TabBar.qml) set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/") list(TRANSFORM qml_files PREPEND ${qml_prefix}) foreach(qmlfile ${qml_files}) diff --git a/example/qml/Qt5/components/TabBar.qml b/example/qml/Qt5/components/TabBar.qml new file mode 100644 index 0000000..034a6c8 --- /dev/null +++ b/example/qml/Qt5/components/TabBar.qml @@ -0,0 +1,725 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.11 +import QtQuick.Controls 2.15 +import RibbonUI 1.0 + +RibbonTabBar { + id: tab_bar + property alias tab_bar_tool: tab_bar_tool + property alias slider_layout: slider_layout + property alias slider_with_btn: slider_with_btn + property alias slider_without_btn: slider_without_btn + property alias switch_layout: switch_layout + property alias btn_with_color_and_grabberText: btn_with_color_and_grabberText + property alias checkbox_layout: checkbox_layout + property alias button_layout: button_layout + property alias btn_without_bg_and_label: btn_without_bg_and_label + property alias pushbutton_layout: pushbutton_layout + property alias lineedit_layout: lineedit_layout + property alias lineedit_with_icon: lineedit_with_icon + + modernStyle: root.modernStyle + rightToolBar: RowLayout{ + id: tab_bar_tool + spacing: 10 + RibbonButton{ + text:"Test Button 1" + iconSource: RibbonIcons.Alert + checkable: true + } + RibbonButton{ + text:"Test Button 2" + } + } + + RibbonTabPage{ + id: basic_page + title: qsTr("Basic") + RibbonTabGroup{ + showOpenExternal: true + width: slider_layout.width + 20 + text: qsTr("Slider") + RowLayout{ + id: slider_layout + anchors.centerIn: parent + height: parent.height + spacing: 0 + RibbonSlider{ + id: slider_with_btn + Layout.alignment: Qt.AlignVCenter + slideWidth: 40 + horizontal: false + value: 20 + } + RibbonSlider{ + id: slider_without_btn + Layout.alignment: Qt.AlignVCenter + slideWidth: 40 + horizontal: false + showButton: false + value: 40 + } + ColumnLayout{ + spacing: 0 + Layout.alignment: Qt.AlignVCenter + RibbonSlider{ + Layout.alignment: Qt.AlignHCenter + slideWidth: 40 + value: 60 + } + RibbonSlider{ + Layout.alignment: Qt.AlignHCenter + slideWidth: 40 + showButton: false + value: 80 + } + } + } + } + RibbonTabGroup{ + width: switch_layout.width + 30 + text: qsTr("Switch Button") + showOpenExternal: true + RowLayout{ + id: switch_layout + anchors.centerIn: parent + height: parent.height + spacing: 0 + ColumnLayout{ + spacing: 5 + RibbonSwitchButton{ + id: btn_with_color_and_grabberText + text: "Button" + grabberCheckedColor: "red" + checked: true + } + RibbonSwitchButton{ + text: "Button" + textOnLeft: true + grabberCheckedColor: "orange" + checked: true + } + RibbonSwitchButton{ + grabberCheckedColor: "blue" + } + } + ColumnLayout{ + spacing: 5 + RibbonSwitchButton{ + text: "Button" + showGrabberText: false + grabberCheckedColor: "green" + } + RibbonSwitchButton{ + text: "Button" + showGrabberText: false + textOnLeft: true + grabberCheckedColor: "indigo" + checked: true + } + RibbonSwitchButton{ + showGrabberText: false + grabberCheckedColor: "yellow" + checked: true + } + } + } + } + RibbonTabGroup{ + width: checkbox_layout.width + 30 + text: qsTr("CheckBox") + showOpenExternal: true + RowLayout{ + id: checkbox_layout + anchors.centerIn: parent + height: parent.height + spacing: 0 + ColumnLayout{ + spacing: 10 + RibbonCheckBox{ + text: "CheckBox" + iconFilledBgColor: "blue" + checked: true + } + RibbonCheckBox{ + text: "CheckBox" + textOnLeft: true + iconFilledBgColor: "red" + } + RowLayout{ + spacing: 30 + RibbonCheckBox{ + iconFilledBgColor:"orange" + tipText: "CheckBox" + showTooltip: true + checked: true + } + RibbonCheckBox{ + iconFilledBgColor:"purple" + } + } + } + } + } + RibbonTabGroup{ + width: button_layout.width + 30 + text: qsTr("Button") + showOpenExternal: true + RowLayout{ + id: button_layout + anchors.centerIn: parent + height: parent.height + spacing: 1 + ColumnLayout{ + spacing: 10 + RibbonButton{ + text:"Button" + iconSource: RibbonIcons.Accessibility + checkable: true + } + RibbonButton{ + text:"Button" + } + RibbonButton{ + text:"Button" + showTooltip: false + } + } + ColumnLayout{ + spacing: 10 + RibbonButton{ + text:"Button" + showBg:false + iconSource: RibbonIcons.Beaker + checkable: true + } + RibbonButton{ + text:"Button" + showBg:false + } + RibbonButton{ + text:"Button" + showBg:false + showTooltip: false + } + } + ColumnLayout{ + spacing: 10 + RibbonButton{ + id: btn_without_bg_and_label + showBg:false + iconSource: RibbonIcons.Badge + iconSourceFilled: RibbonIcons_Filled.Badge + checkable: true + tipText: "Button" + } + RibbonButton{ + showBg:false + iconSource: RibbonIcons.Clock + iconSourceFilled: RibbonIcons_Filled.Clock + tipText: "Button" + } + RibbonButton{ + showBg:false + iconSource: RibbonIcons.Board + iconSourceFilled: RibbonIcons_Filled.Board + checkable: true + tipText: "Button" + showTooltip: false + } + } + } + } + RibbonTabGroup{ + width: pushbutton_layout.width + 30 + text: qsTr("Push Button") + RowLayout{ + id: pushbutton_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RibbonPushButton{ + text: qsTr("No Menu") + iconSource: RibbonIcons.AttachText + } + RibbonPushButton{ + id: push_btn_with_menu + text: qsTr("Menu") + iconSource: RibbonIcons.MeetNow + Action{ + text: "Test Item 1" + } + RibbonMenuSeparator{} + Action{ + text: "Test Item 2" + enabled: false + } + } + RibbonPushButton{ + text: qsTr("No Menu") + iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png" + iconSize: height-5 + } + RibbonPushButton{ + text: qsTr("Menu") + iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png" + Action{ + text: "Test Item 3" + } + RibbonMenuSeparator{} + Action{ + text: "Test Item 4" + enabled: false + } + } + } + } + RibbonTabGroup{ + width: radiobtn_layout.width + 30 + text: qsTr("Radio Button") + ColumnLayout{ + id: radiobtn_layout + anchors.centerIn: parent + height: parent.height + RibbonRadioButton{ + text: "Item A" + } + RibbonRadioButton{ + text: "Item B" + } + RibbonRadioButton{ + text: "Item C" + } + } + } + } + RibbonTabPage{ + title: qsTr("Input") + RibbonTabGroup{ + width: lineedit_layout.width + 30 + text: qsTr("Line Edit") + RowLayout{ + id: lineedit_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonLineEdit{ + } + RibbonLineEdit{ + showClearBtn:false + } + } + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonLineEdit{ + id: lineedit_with_icon + iconSource:RibbonIcons.Search + } + RibbonLineEdit{ + iconSource:RibbonIcons.Keyboard + showClearBtn:false + } + } + } + } + RibbonTabGroup{ + width: lineedit_layout.width + 30 + text: qsTr("Text Edit") + RowLayout{ + id: textedit_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 30 + Layout.fillHeight: true + RibbonTextEdit{ + maxHeight: 50 + } + RibbonTextEdit{ + maxHeight: 30 + showClearBtn:false + } + } + ColumnLayout{ + spacing: 30 + Layout.fillHeight: true + RibbonTextEdit{ + maxHeight: 50 + iconSource:RibbonIcons.Search + } + RibbonTextEdit{ + maxHeight: 30 + iconSource:RibbonIcons.Keyboard + showClearBtn:false + } + } + } + } + RibbonTabGroup{ + width: combobox_layout.width + 30 + text: qsTr("Combo Box") + RowLayout{ + id: combobox_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonComboBox{ + model: ListModel { + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + } + RibbonComboBox{ + editable: true + model: ListModel { + id: model + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + onAccepted: { + if (find(editText) === -1 && editText) + model.append({text: editText}) + } + } + } + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonComboBox{ + model: ListModel { + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + iconSource: RibbonIcons.Beaker + } + RibbonComboBox{ + editable: true + model: ListModel { + id: model_1 + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + iconSource: RibbonIcons.Calendar + onAccepted: { + if (find(editText) === -1 && editText) + model_1.append({text: editText}) + } + } + } + } + } + RibbonTabGroup{ + width: spinbox_layout.width + 30 + text: qsTr("Spin Box") + showBorder: false + RowLayout{ + id: spinbox_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonSpinBox{ + width: 100 + } + RibbonSpinBox{ + id: spinbox + width: 80 + iconSource: RibbonIcons.DataPie + validator: DoubleValidator { + bottom: Math.min(spinbox.from, spinbox.to) + top: Math.max(spinbox.from, spinbox.to) + decimals: 2 + notation: DoubleValidator.StandardNotation + } + textFromValue: function(value, locale) { + return Number(value / 100).toLocaleString(locale, 'f', 2) + } + valueFromText: function(text, locale) { + return Math.round(Number.fromLocaleString(locale, text) * 100) + } + } + } + } + } + } + RibbonTabPage{ + title: qsTr("Progress") + RibbonTabGroup{ + width: progressbar_slider.width + 30 + RibbonSlider{ + id: progressbar_slider + anchors.centerIn: parent + slideWidth: 40 + horizontal: false + showButton: false + value: 40 + } + } + RibbonTabGroup{ + width: progressbar_layout.width + 30 + text: qsTr("ProgressBar") + RowLayout{ + id: progressbar_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + showText: false + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: false + showText: false + value: progressbar_slider.value / 100 + } + } + } + } + RibbonTabGroup{ + width: progressring_layout.width + 30 + text: qsTr("ProgressRing") + RowLayout{ + id: progressring_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RowLayout{ + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + RibbonProgressRing{ + value: progressbar_slider.value / 100 + centerInTextLabel: true + } + } + RowLayout{ + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + RibbonProgressRing{ + indeterminate: true + centerInTextLabel: true + } + } + ColumnLayout{ + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + showText: false + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: false + showText: false + value: progressbar_slider.value / 100 + } + } + } + } + } + RibbonTabPage{ + title: qsTr("Views") + RibbonTabGroup{ + width: message_list_view_layout.width + 30 + text: qsTr("MessageListView") + RowLayout{ + id: message_list_view_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RibbonButton{ + text: qsTr('Open Message List View') + iconSource: RibbonIcons.Open + onClicked: { + Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml") + } + } + } + } + } + RibbonTabPage{ + title: qsTr("Others") + RibbonTabGroup{ + width: text_layout.width + 30 + text: qsTr("Text") + RowLayout{ + id: text_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonText{ + font.pixelSize: 13 + text: "Test Text" + } + RibbonText{ + font.pixelSize: 13 + text: "Test Text (Read Only)" + viewOnly: true + } + } + } + } + RibbonTabGroup{ + width: menu_layout.width + 30 + text: qsTr("Menu") + RowLayout{ + id: menu_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RibbonButton{ + text: qsTr("Open Menu") + iconSource: RibbonIcons.Open + onClicked: menu.popup() + } + } + } + RibbonTabGroup{ + width: popup_layout.width + 30 + text: qsTr("Popup") + RowLayout{ + id: popup_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonButton{ + text: qsTr("Open Popup") + iconSource: RibbonIcons.Open + onClicked: popup.open() + } + RibbonButton{ + text: qsTr("Open Popup Dialog (Double Choices)") + iconSource: RibbonIcons.Open + onClicked: { + dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton + dialog.open() + } + } + RibbonButton{ + text: qsTr("Open Popup Dialog (Triple Choices)") + iconSource: RibbonIcons.Open + onClicked: { + dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton + dialog.open() + } + } + } + RibbonPopup{ + id: popup + height: 200 + width: height + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) + } + RibbonPopupDialog{ + id: dialog + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) + } + } + } + } +} diff --git a/example/qml/Qt5/example.qml b/example/qml/Qt5/example.qml index e1acfbe..138e1b2 100644 --- a/example/qml/Qt5/example.qml +++ b/example/qml/Qt5/example.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.11 import QtQuick.Window 2.15 import RibbonUI 1.0 +import "components" RibbonWindow { id:root @@ -25,59 +26,59 @@ RibbonWindow { RibbonTourItem{ title: qsTr("Tab Bar Buttons") text: qsTr("Tool buttons at the top of tab bar.") - target: tab_bar_tool + target: tab_bar.tab_bar_tool } RibbonTourItem{ title: qsTr("Sliders") text: qsTr("Vertical/Horizental sliders with/without buttons.") - target: slider_layout + target: tab_bar.slider_layout enterFunc: ()=>{ tab_bar.setPage(0) - slider_with_btn.value = 70 - slider_without_btn.value = 70 + tab_bar.slider_with_btn.value = 70 + tab_bar.slider_without_btn.value = 70 tour.refresh(500) } exitFunc: ()=>{ - slider_with_btn.value = 50 - slider_without_btn.value = 50 + tab_bar.slider_with_btn.value = 50 + tab_bar.slider_without_btn.value = 50 } } RibbonTourItem{ title: qsTr("Switch Buttons") text: qsTr("Switch buttons with/without background color or grabber text.") - target: switch_layout - enterFunc: ()=>btn_with_color_and_grabberText.checked = true - exitFunc: ()=>btn_with_color_and_grabberText.checked = false + target: tab_bar.switch_layout + enterFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = true + exitFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = false } RibbonTourItem{ title: qsTr("CheckBoxs") text: qsTr("CheckBoxs with colorful background or with/without label text.") - target: checkbox_layout + target: tab_bar.checkbox_layout } RibbonTourItem{ title: qsTr("Buttons") text: qsTr("Buttons with/without background or label text.") - target: button_layout - enterFunc: ()=>btn_without_bg_and_label.checked = true - exitFunc: ()=>btn_without_bg_and_label.checked = false + target: tab_bar.button_layout + enterFunc: ()=>tab_bar.btn_without_bg_and_label.checked = true + exitFunc: ()=>tab_bar.btn_without_bg_and_label.checked = false } RibbonTourItem{ title: qsTr("Push Buttons") text: qsTr("Push buttons with/without sub menu.") - target: pushbutton_layout + target: tab_bar.pushbutton_layout } RibbonTourItem{ title: qsTr("Line Edits") text: qsTr("Line edits with/without icon.") - target: lineedit_layout + target: tab_bar.lineedit_layout enterFunc: ()=>{ tab_bar.setPage(1) - lineedit_with_icon.text = "Line Edit with icon." + tab_bar.lineedit_with_icon.text = "Line Edit with icon." tour.refresh(300) } exitFunc: ()=>{ tab_bar.setPage(0) - lineedit_with_icon.clear() + tab_bar.lineedit_with_icon.clear() tour.refresh(400) } } @@ -91,638 +92,12 @@ RibbonWindow { targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) } Component.onCompleted: tour.open() - RibbonTabBar { - id: tab_bar - modernStyle: root.modernStyle - rightToolBar: RowLayout{ - id: tab_bar_tool - spacing: 10 - RibbonButton{ - text:"Test Button 1" - iconSource: RibbonIcons.Alert - checkable: true - } - RibbonButton{ - text:"Test Button 2" - } - } + TabBar{ + id: tab_bar onSettingsBtnClicked:{ backstagepopup.open() } - - RibbonTabPage{ - id: basic_page - title: qsTr("Basic") - RibbonTabGroup{ - showOpenExternal: true - width: slider_layout.width + 20 - text: qsTr("Slider") - RowLayout{ - id: slider_layout - anchors.centerIn: parent - height: parent.height - spacing: 0 - RibbonSlider{ - id: slider_with_btn - Layout.alignment: Qt.AlignVCenter - slideWidth: 40 - horizontal: false - value: 20 - } - RibbonSlider{ - id: slider_without_btn - Layout.alignment: Qt.AlignVCenter - slideWidth: 40 - horizontal: false - showButton: false - value: 40 - } - ColumnLayout{ - spacing: 0 - Layout.alignment: Qt.AlignVCenter - RibbonSlider{ - Layout.alignment: Qt.AlignHCenter - slideWidth: 40 - value: 60 - } - RibbonSlider{ - Layout.alignment: Qt.AlignHCenter - slideWidth: 40 - showButton: false - value: 80 - } - } - } - } - RibbonTabGroup{ - width: switch_layout.width + 30 - text: qsTr("Switch Button") - showOpenExternal: true - RowLayout{ - id: switch_layout - anchors.centerIn: parent - height: parent.height - spacing: 0 - ColumnLayout{ - spacing: 5 - RibbonSwitchButton{ - id: btn_with_color_and_grabberText - text: "Button" - grabberCheckedColor: "red" - checked: true - } - RibbonSwitchButton{ - text: "Button" - textOnLeft: true - grabberCheckedColor: "orange" - checked: true - } - RibbonSwitchButton{ - grabberCheckedColor: "blue" - } - } - ColumnLayout{ - spacing: 5 - RibbonSwitchButton{ - text: "Button" - showGrabberText: false - grabberCheckedColor: "green" - } - RibbonSwitchButton{ - text: "Button" - showGrabberText: false - textOnLeft: true - grabberCheckedColor: "indigo" - checked: true - } - RibbonSwitchButton{ - showGrabberText: false - grabberCheckedColor: "yellow" - checked: true - } - } - } - } - RibbonTabGroup{ - width: checkbox_layout.width + 30 - text: qsTr("CheckBox") - showOpenExternal: true - RowLayout{ - id: checkbox_layout - anchors.centerIn: parent - height: parent.height - spacing: 0 - ColumnLayout{ - spacing: 10 - RibbonCheckBox{ - text: "CheckBox" - iconFilledBgColor: "blue" - checked: true - } - RibbonCheckBox{ - text: "CheckBox" - textOnLeft: true - iconFilledBgColor: "red" - } - RowLayout{ - spacing: 30 - RibbonCheckBox{ - iconFilledBgColor:"orange" - tipText: "CheckBox" - showTooltip: true - checked: true - } - RibbonCheckBox{ - iconFilledBgColor:"purple" - } - } - } - } - } - RibbonTabGroup{ - width: button_layout.width + 30 - text: qsTr("Button") - showOpenExternal: true - RowLayout{ - id: button_layout - anchors.centerIn: parent - height: parent.height - spacing: 1 - ColumnLayout{ - spacing: 10 - RibbonButton{ - text:"Button" - iconSource: RibbonIcons.Accessibility - checkable: true - } - RibbonButton{ - text:"Button" - } - RibbonButton{ - text:"Button" - showTooltip: false - } - } - ColumnLayout{ - spacing: 10 - RibbonButton{ - text:"Button" - showBg:false - iconSource: RibbonIcons.Beaker - checkable: true - } - RibbonButton{ - text:"Button" - showBg:false - } - RibbonButton{ - text:"Button" - showBg:false - showTooltip: false - } - } - ColumnLayout{ - spacing: 10 - RibbonButton{ - id: btn_without_bg_and_label - showBg:false - iconSource: RibbonIcons.Badge - iconSourceFilled: RibbonIcons_Filled.Badge - checkable: true - tipText: "Button" - } - RibbonButton{ - showBg:false - iconSource: RibbonIcons.Clock - iconSourceFilled: RibbonIcons_Filled.Clock - tipText: "Button" - } - RibbonButton{ - showBg:false - iconSource: RibbonIcons.Board - iconSourceFilled: RibbonIcons_Filled.Board - checkable: true - tipText: "Button" - showTooltip: false - } - } - } - } - RibbonTabGroup{ - width: pushbutton_layout.width + 30 - text: qsTr("Push Button") - RowLayout{ - id: pushbutton_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - RibbonPushButton{ - text: qsTr("No Menu") - iconSource: RibbonIcons.AttachText - } - RibbonPushButton{ - id: push_btn_with_menu - text: qsTr("Menu") - iconSource: RibbonIcons.MeetNow - Action{ - text: "Test Item 1" - } - RibbonMenuSeparator{} - Action{ - text: "Test Item 2" - enabled: false - } - } - RibbonPushButton{ - text: qsTr("No Menu") - iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png" - iconSize: height-5 - } - RibbonPushButton{ - text: qsTr("Menu") - iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png" - Action{ - text: "Test Item 3" - } - RibbonMenuSeparator{} - Action{ - text: "Test Item 4" - enabled: false - } - } - } - } - RibbonTabGroup{ - width: radiobtn_layout.width + 30 - text: qsTr("Radio Button") - ColumnLayout{ - id: radiobtn_layout - anchors.centerIn: parent - height: parent.height - RibbonRadioButton{ - text: "Item A" - } - RibbonRadioButton{ - text: "Item B" - } - RibbonRadioButton{ - text: "Item C" - } - } - } - } - RibbonTabPage{ - title: qsTr("Input") - RibbonTabGroup{ - width: lineedit_layout.width + 30 - text: qsTr("Line Edit") - RowLayout{ - id: lineedit_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonLineEdit{ - } - RibbonLineEdit{ - showClearBtn:false - } - } - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonLineEdit{ - id: lineedit_with_icon - iconSource:RibbonIcons.Search - } - RibbonLineEdit{ - iconSource:RibbonIcons.Keyboard - showClearBtn:false - } - } - } - } - RibbonTabGroup{ - width: lineedit_layout.width + 30 - text: qsTr("Text Edit") - RowLayout{ - id: textedit_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 30 - Layout.fillHeight: true - RibbonTextEdit{ - maxHeight: 50 - } - RibbonTextEdit{ - maxHeight: 30 - showClearBtn:false - } - } - ColumnLayout{ - spacing: 30 - Layout.fillHeight: true - RibbonTextEdit{ - maxHeight: 50 - iconSource:RibbonIcons.Search - } - RibbonTextEdit{ - maxHeight: 30 - iconSource:RibbonIcons.Keyboard - showClearBtn:false - } - } - } - } - RibbonTabGroup{ - width: combobox_layout.width + 30 - text: qsTr("Combo Box") - RowLayout{ - id: combobox_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonComboBox{ - model: ListModel { - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - } - RibbonComboBox{ - editable: true - model: ListModel { - id: model - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - onAccepted: { - if (find(editText) === -1 && editText) - model.append({text: editText}) - } - } - } - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonComboBox{ - model: ListModel { - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - iconSource: RibbonIcons.Beaker - } - RibbonComboBox{ - editable: true - model: ListModel { - id: model_1 - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - iconSource: RibbonIcons.Calendar - onAccepted: { - if (find(editText) === -1 && editText) - model_1.append({text: editText}) - } - } - } - } - } - RibbonTabGroup{ - width: spinbox_layout.width + 30 - text: qsTr("Spin Box") - showBorder: false - RowLayout{ - id: spinbox_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonSpinBox{ - width: 100 - } - RibbonSpinBox{ - id: spinbox - width: 80 - iconSource: RibbonIcons.DataPie - validator: DoubleValidator { - bottom: Math.min(spinbox.from, spinbox.to) - top: Math.max(spinbox.from, spinbox.to) - decimals: 2 - notation: DoubleValidator.StandardNotation - } - textFromValue: function(value, locale) { - return Number(value / 100).toLocaleString(locale, 'f', 2) - } - valueFromText: function(text, locale) { - return Math.round(Number.fromLocaleString(locale, text) * 100) - } - } - } - } - } - } - RibbonTabPage{ - title: qsTr("Progress") - RibbonTabGroup{ - width: progressbar_layout.width + 30 - text: qsTr("ProgressBar") - RowLayout{ - id: progressbar_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Top - } - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Left - } - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Right - } - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Bottom - } - } - RibbonSlider{ - id: progressbar_slider - Layout.alignment: Qt.AlignHCenter - slideWidth: 40 - horizontal: false - showButton: false - value: 40 - } - ColumnLayout{ - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Top - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Left - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Right - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Bottom - } - } - ColumnLayout{ - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - showText: false - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: false - showText: false - value: progressbar_slider.value / 100 - } - } - } - } - } - RibbonTabPage{ - title: qsTr("Views") - RibbonTabGroup{ - width: message_list_view_layout.width + 30 - text: qsTr("MessageListView") - RowLayout{ - id: message_list_view_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - RibbonButton{ - text: qsTr('Open Message List View') - iconSource: RibbonIcons.Open - onClicked: { - Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml") - } - } - } - } - } - RibbonTabPage{ - title: qsTr("Others") - RibbonTabGroup{ - width: text_layout.width + 30 - text: qsTr("Text") - RowLayout{ - id: text_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonText{ - font.pixelSize: 13 - text: "Test Text" - } - RibbonText{ - font.pixelSize: 13 - text: "Test Text (Read Only)" - viewOnly: true - } - } - } - } - RibbonTabGroup{ - width: menu_layout.width + 30 - text: qsTr("Menu") - RowLayout{ - id: menu_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - RibbonButton{ - text: qsTr("Open Menu") - iconSource: RibbonIcons.Open - onClicked: menu.popup() - } - } - } - RibbonTabGroup{ - width: popup_layout.width + 30 - text: qsTr("Popup") - RowLayout{ - id: popup_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonButton{ - text: qsTr("Open Popup") - iconSource: RibbonIcons.Open - onClicked: popup.open() - } - RibbonButton{ - text: qsTr("Open Popup Dialog (Double Choices)") - iconSource: RibbonIcons.Open - onClicked: { - dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton - dialog.open() - } - } - RibbonButton{ - text: qsTr("Open Popup Dialog (Triple Choices)") - iconSource: RibbonIcons.Open - onClicked: { - dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton - dialog.open() - } - } - } - RibbonPopup{ - id: popup - height: 200 - width: height - target: windowItems - blurEnabled: true - targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) - } - RibbonPopupDialog{ - id: dialog - target: windowItems - blurEnabled: true - targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) - } - } - } - } } RibbonPaperView{ diff --git a/example/qml/Qt6/components/TabBar.qml b/example/qml/Qt6/components/TabBar.qml new file mode 100644 index 0000000..e7da321 --- /dev/null +++ b/example/qml/Qt6/components/TabBar.qml @@ -0,0 +1,725 @@ +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import RibbonUI + +RibbonTabBar { + id: tab_bar + property alias tab_bar_tool: tab_bar_tool + property alias slider_layout: slider_layout + property alias slider_with_btn: slider_with_btn + property alias slider_without_btn: slider_without_btn + property alias switch_layout: switch_layout + property alias btn_with_color_and_grabberText: btn_with_color_and_grabberText + property alias checkbox_layout: checkbox_layout + property alias button_layout: button_layout + property alias btn_without_bg_and_label: btn_without_bg_and_label + property alias pushbutton_layout: pushbutton_layout + property alias lineedit_layout: lineedit_layout + property alias lineedit_with_icon: lineedit_with_icon + + modernStyle: root.modernStyle + rightToolBar: RowLayout{ + id: tab_bar_tool + spacing: 10 + RibbonButton{ + text:"Test Button 1" + iconSource: RibbonIcons.Alert + checkable: true + } + RibbonButton{ + text:"Test Button 2" + } + } + + RibbonTabPage{ + id: basic_page + title: qsTr("Basic") + RibbonTabGroup{ + showOpenExternal: true + width: slider_layout.width + 20 + text: qsTr("Slider") + RowLayout{ + id: slider_layout + anchors.centerIn: parent + height: parent.height + spacing: 0 + RibbonSlider{ + id: slider_with_btn + Layout.alignment: Qt.AlignVCenter + slideWidth: 40 + horizontal: false + value: 20 + } + RibbonSlider{ + id: slider_without_btn + Layout.alignment: Qt.AlignVCenter + slideWidth: 40 + horizontal: false + showButton: false + value: 40 + } + ColumnLayout{ + spacing: 0 + Layout.alignment: Qt.AlignVCenter + RibbonSlider{ + Layout.alignment: Qt.AlignHCenter + slideWidth: 40 + value: 60 + } + RibbonSlider{ + Layout.alignment: Qt.AlignHCenter + slideWidth: 40 + showButton: false + value: 80 + } + } + } + } + RibbonTabGroup{ + width: switch_layout.width + 30 + text: qsTr("Switch Button") + showOpenExternal: true + RowLayout{ + id: switch_layout + anchors.centerIn: parent + height: parent.height + spacing: 0 + ColumnLayout{ + spacing: 5 + RibbonSwitchButton{ + id: btn_with_color_and_grabberText + text: "Button" + grabberCheckedColor: "red" + checked: true + } + RibbonSwitchButton{ + text: "Button" + textOnLeft: true + grabberCheckedColor: "orange" + checked: true + } + RibbonSwitchButton{ + grabberCheckedColor: "blue" + } + } + ColumnLayout{ + spacing: 5 + RibbonSwitchButton{ + text: "Button" + showGrabberText: false + grabberCheckedColor: "green" + } + RibbonSwitchButton{ + text: "Button" + showGrabberText: false + textOnLeft: true + grabberCheckedColor: "indigo" + checked: true + } + RibbonSwitchButton{ + showGrabberText: false + grabberCheckedColor: "yellow" + checked: true + } + } + } + } + RibbonTabGroup{ + width: checkbox_layout.width + 30 + text: qsTr("CheckBox") + showOpenExternal: true + RowLayout{ + id: checkbox_layout + anchors.centerIn: parent + height: parent.height + spacing: 0 + ColumnLayout{ + spacing: 10 + RibbonCheckBox{ + text: "CheckBox" + iconFilledBgColor: "blue" + checked: true + } + RibbonCheckBox{ + text: "CheckBox" + textOnLeft: true + iconFilledBgColor: "red" + } + RowLayout{ + spacing: 30 + RibbonCheckBox{ + iconFilledBgColor:"orange" + tipText: "CheckBox" + showTooltip: true + checked: true + } + RibbonCheckBox{ + iconFilledBgColor:"purple" + } + } + } + } + } + RibbonTabGroup{ + width: button_layout.width + 30 + text: qsTr("Button") + showOpenExternal: true + RowLayout{ + id: button_layout + anchors.centerIn: parent + height: parent.height + spacing: 1 + ColumnLayout{ + spacing: 10 + RibbonButton{ + text:"Button" + iconSource: RibbonIcons.Accessibility + checkable: true + } + RibbonButton{ + text:"Button" + } + RibbonButton{ + text:"Button" + showTooltip: false + } + } + ColumnLayout{ + spacing: 10 + RibbonButton{ + text:"Button" + showBg:false + iconSource: RibbonIcons.Beaker + checkable: true + } + RibbonButton{ + text:"Button" + showBg:false + } + RibbonButton{ + text:"Button" + showBg:false + showTooltip: false + } + } + ColumnLayout{ + spacing: 10 + RibbonButton{ + id: btn_without_bg_and_label + showBg:false + iconSource: RibbonIcons.Badge + iconSourceFilled: RibbonIcons_Filled.Badge + checkable: true + tipText: "Button" + } + RibbonButton{ + showBg:false + iconSource: RibbonIcons.Clock + iconSourceFilled: RibbonIcons_Filled.Clock + tipText: "Button" + } + RibbonButton{ + showBg:false + iconSource: RibbonIcons.Board + iconSourceFilled: RibbonIcons_Filled.Board + checkable: true + tipText: "Button" + showTooltip: false + } + } + } + } + RibbonTabGroup{ + width: pushbutton_layout.width + 30 + text: qsTr("Push Button") + RowLayout{ + id: pushbutton_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RibbonPushButton{ + text: qsTr("No Menu") + iconSource: RibbonIcons.AttachText + } + RibbonPushButton{ + id: push_btn_with_menu + text: qsTr("Menu") + iconSource: RibbonIcons.MeetNow + Action{ + text: "Test Item 1" + } + RibbonMenuSeparator{} + Action{ + text: "Test Item 2" + enabled: false + } + } + RibbonPushButton{ + text: qsTr("No Menu") + iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png" + iconSize: height-5 + } + RibbonPushButton{ + text: qsTr("Menu") + iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png" + Action{ + text: "Test Item 3" + } + RibbonMenuSeparator{} + Action{ + text: "Test Item 4" + enabled: false + } + } + } + } + RibbonTabGroup{ + width: radiobtn_layout.width + 30 + text: qsTr("Radio Button") + ColumnLayout{ + id: radiobtn_layout + anchors.centerIn: parent + height: parent.height + RibbonRadioButton{ + text: "Item A" + } + RibbonRadioButton{ + text: "Item B" + } + RibbonRadioButton{ + text: "Item C" + } + } + } + } + RibbonTabPage{ + title: qsTr("Input") + RibbonTabGroup{ + width: lineedit_layout.width + 30 + text: qsTr("Line Edit") + RowLayout{ + id: lineedit_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonLineEdit{ + } + RibbonLineEdit{ + showClearBtn:false + } + } + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonLineEdit{ + id: lineedit_with_icon + iconSource:RibbonIcons.Search + } + RibbonLineEdit{ + iconSource:RibbonIcons.Keyboard + showClearBtn:false + } + } + } + } + RibbonTabGroup{ + width: lineedit_layout.width + 30 + text: qsTr("Text Edit") + RowLayout{ + id: textedit_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 30 + Layout.fillHeight: true + RibbonTextEdit{ + maxHeight: 50 + } + RibbonTextEdit{ + maxHeight: 30 + showClearBtn:false + } + } + ColumnLayout{ + spacing: 30 + Layout.fillHeight: true + RibbonTextEdit{ + maxHeight: 50 + iconSource:RibbonIcons.Search + } + RibbonTextEdit{ + maxHeight: 30 + iconSource:RibbonIcons.Keyboard + showClearBtn:false + } + } + } + } + RibbonTabGroup{ + width: combobox_layout.width + 30 + text: qsTr("Combo Box") + RowLayout{ + id: combobox_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonComboBox{ + model: ListModel { + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + } + RibbonComboBox{ + editable: true + model: ListModel { + id: model + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + onAccepted: { + if (find(editText) === -1 && editText) + model.append({text: editText}) + } + } + } + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonComboBox{ + model: ListModel { + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + iconSource: RibbonIcons.Beaker + } + RibbonComboBox{ + editable: true + model: ListModel { + id: model_1 + ListElement { text: "Test Item 1" } + ListElement { text: "Test Item 2" } + ListElement { text: "Test Item 3" } + } + iconSource: RibbonIcons.Calendar + onAccepted: { + if (find(editText) === -1 && editText) + model_1.append({text: editText}) + } + } + } + } + } + RibbonTabGroup{ + width: spinbox_layout.width + 30 + text: qsTr("Spin Box") + showBorder: false + RowLayout{ + id: spinbox_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonSpinBox{ + width: 100 + } + RibbonSpinBox{ + id: spinbox + width: 80 + iconSource: RibbonIcons.DataPie + validator: DoubleValidator { + bottom: Math.min(spinbox.from, spinbox.to) + top: Math.max(spinbox.from, spinbox.to) + decimals: 2 + notation: DoubleValidator.StandardNotation + } + textFromValue: function(value, locale) { + return Number(value / 100).toLocaleString(locale, 'f', 2) + } + valueFromText: function(text, locale) { + return Math.round(Number.fromLocaleString(locale, text) * 100) + } + } + } + } + } + } + RibbonTabPage{ + title: qsTr("Progress") + RibbonTabGroup{ + width: progressbar_slider.width + 30 + RibbonSlider{ + id: progressbar_slider + anchors.centerIn: parent + slideWidth: 40 + horizontal: false + showButton: false + value: 40 + } + } + RibbonTabGroup{ + width: progressbar_layout.width + 30 + text: qsTr("ProgressBar") + RowLayout{ + id: progressbar_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + showText: false + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: false + showText: false + value: progressbar_slider.value / 100 + } + } + } + } + RibbonTabGroup{ + width: progressring_layout.width + 30 + text: qsTr("ProgressRing") + RowLayout{ + id: progressring_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RowLayout{ + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressRing{ + barWidth: 30 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + RibbonProgressRing{ + value: progressbar_slider.value / 100 + centerInTextLabel: true + } + } + RowLayout{ + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + RibbonProgressRing{ + indeterminate: true + centerInTextLabel: true + } + } + ColumnLayout{ + RibbonProgressRing{ + barWidth: 30 + indeterminate: true + showText: false + } + RibbonProgressRing{ + barWidth: 30 + indeterminate: false + showText: false + value: progressbar_slider.value / 100 + } + } + } + } + } + RibbonTabPage{ + title: qsTr("Views") + RibbonTabGroup{ + width: message_list_view_layout.width + 30 + text: qsTr("MessageListView") + RowLayout{ + id: message_list_view_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RibbonButton{ + text: qsTr('Open Message List View') + iconSource: RibbonIcons.Open + onClicked: { + Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml") + } + } + } + } + } + RibbonTabPage{ + title: qsTr("Others") + RibbonTabGroup{ + width: text_layout.width + 30 + text: qsTr("Text") + RowLayout{ + id: text_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonText{ + font.pixelSize: 13 + text: "Test Text" + } + RibbonText{ + font.pixelSize: 13 + text: "Test Text (Read Only)" + viewOnly: true + } + } + } + } + RibbonTabGroup{ + width: menu_layout.width + 30 + text: qsTr("Menu") + RowLayout{ + id: menu_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + RibbonButton{ + text: qsTr("Open Menu") + iconSource: RibbonIcons.Open + onClicked: menu.popup() + } + } + } + RibbonTabGroup{ + width: popup_layout.width + 30 + text: qsTr("Popup") + RowLayout{ + id: popup_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + spacing: 10 + Layout.fillHeight: true + RibbonButton{ + text: qsTr("Open Popup") + iconSource: RibbonIcons.Open + onClicked: popup.open() + } + RibbonButton{ + text: qsTr("Open Popup Dialog (Double Choices)") + iconSource: RibbonIcons.Open + onClicked: { + dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton + dialog.open() + } + } + RibbonButton{ + text: qsTr("Open Popup Dialog (Triple Choices)") + iconSource: RibbonIcons.Open + onClicked: { + dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton + dialog.open() + } + } + } + RibbonPopup{ + id: popup + height: 200 + width: height + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) + } + RibbonPopupDialog{ + id: dialog + target: windowItems + blurEnabled: true + targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) + } + } + } + } +} diff --git a/example/qml/Qt6/example.qml b/example/qml/Qt6/example.qml index 3619e98..c7455c3 100644 --- a/example/qml/Qt6/example.qml +++ b/example/qml/Qt6/example.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import RibbonUI +import "components" RibbonWindow { id:root @@ -25,59 +26,59 @@ RibbonWindow { RibbonTourItem{ title: qsTr("Tab Bar Buttons") text: qsTr("Tool buttons at the top of tab bar.") - target: tab_bar_tool + target: tab_bar.tab_bar_tool } RibbonTourItem{ title: qsTr("Sliders") text: qsTr("Vertical/Horizental sliders with/without buttons.") - target: slider_layout + target: tab_bar.slider_layout enterFunc: ()=>{ tab_bar.setPage(0) - slider_with_btn.value = 70 - slider_without_btn.value = 70 + tab_bar.slider_with_btn.value = 70 + tab_bar.slider_without_btn.value = 70 tour.refresh(500) } exitFunc: ()=>{ - slider_with_btn.value = 50 - slider_without_btn.value = 50 + tab_bar.slider_with_btn.value = 50 + tab_bar.slider_without_btn.value = 50 } } RibbonTourItem{ title: qsTr("Switch Buttons") text: qsTr("Switch buttons with/without background color or grabber text.") - target: switch_layout - enterFunc: ()=>btn_with_color_and_grabberText.checked = true - exitFunc: ()=>btn_with_color_and_grabberText.checked = false + target: tab_bar.switch_layout + enterFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = true + exitFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = false } RibbonTourItem{ title: qsTr("CheckBoxs") text: qsTr("CheckBoxs with colorful background or with/without label text.") - target: checkbox_layout + target: tab_bar.checkbox_layout } RibbonTourItem{ title: qsTr("Buttons") text: qsTr("Buttons with/without background or label text.") - target: button_layout - enterFunc: ()=>btn_without_bg_and_label.checked = true - exitFunc: ()=>btn_without_bg_and_label.checked = false + target: tab_bar.button_layout + enterFunc: ()=>tab_bar.btn_without_bg_and_label.checked = true + exitFunc: ()=>tab_bar.btn_without_bg_and_label.checked = false } RibbonTourItem{ title: qsTr("Push Buttons") text: qsTr("Push buttons with/without sub menu.") - target: pushbutton_layout + target: tab_bar.pushbutton_layout } RibbonTourItem{ title: qsTr("Line Edits") text: qsTr("Line edits with/without icon.") - target: lineedit_layout + target: tab_bar.lineedit_layout enterFunc: ()=>{ tab_bar.setPage(1) - lineedit_with_icon.text = "Line Edit with icon." + tab_bar.lineedit_with_icon.text = "Line Edit with icon." tour.refresh(300) } exitFunc: ()=>{ tab_bar.setPage(0) - lineedit_with_icon.clear() + tab_bar.lineedit_with_icon.clear() tour.refresh(400) } } @@ -91,638 +92,12 @@ RibbonWindow { targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) } Component.onCompleted: tour.open() - RibbonTabBar { - id: tab_bar - modernStyle: root.modernStyle - rightToolBar: RowLayout{ - id: tab_bar_tool - spacing: 10 - RibbonButton{ - text:"Test Button 1" - iconSource: RibbonIcons.Alert - checkable: true - } - RibbonButton{ - text:"Test Button 2" - } - } + TabBar{ + id: tab_bar onSettingsBtnClicked:{ backstagepopup.open() } - - RibbonTabPage{ - id: basic_page - title: qsTr("Basic") - RibbonTabGroup{ - showOpenExternal: true - width: slider_layout.width + 20 - text: qsTr("Slider") - RowLayout{ - id: slider_layout - anchors.centerIn: parent - height: parent.height - spacing: 0 - RibbonSlider{ - id: slider_with_btn - Layout.alignment: Qt.AlignVCenter - slideWidth: 40 - horizontal: false - value: 20 - } - RibbonSlider{ - id: slider_without_btn - Layout.alignment: Qt.AlignVCenter - slideWidth: 40 - horizontal: false - showButton: false - value: 40 - } - ColumnLayout{ - spacing: 0 - Layout.alignment: Qt.AlignVCenter - RibbonSlider{ - Layout.alignment: Qt.AlignHCenter - slideWidth: 40 - value: 60 - } - RibbonSlider{ - Layout.alignment: Qt.AlignHCenter - slideWidth: 40 - showButton: false - value: 80 - } - } - } - } - RibbonTabGroup{ - width: switch_layout.width + 30 - text: qsTr("Switch Button") - showOpenExternal: true - RowLayout{ - id: switch_layout - anchors.centerIn: parent - height: parent.height - spacing: 0 - ColumnLayout{ - spacing: 5 - RibbonSwitchButton{ - id: btn_with_color_and_grabberText - text: "Button" - grabberCheckedColor: "red" - checked: true - } - RibbonSwitchButton{ - text: "Button" - textOnLeft: true - grabberCheckedColor: "orange" - checked: true - } - RibbonSwitchButton{ - grabberCheckedColor: "blue" - } - } - ColumnLayout{ - spacing: 5 - RibbonSwitchButton{ - text: "Button" - showGrabberText: false - grabberCheckedColor: "green" - } - RibbonSwitchButton{ - text: "Button" - showGrabberText: false - textOnLeft: true - grabberCheckedColor: "indigo" - checked: true - } - RibbonSwitchButton{ - showGrabberText: false - grabberCheckedColor: "yellow" - checked: true - } - } - } - } - RibbonTabGroup{ - width: checkbox_layout.width + 30 - text: qsTr("CheckBox") - showOpenExternal: true - RowLayout{ - id: checkbox_layout - anchors.centerIn: parent - height: parent.height - spacing: 0 - ColumnLayout{ - spacing: 10 - RibbonCheckBox{ - text: "CheckBox" - iconFilledBgColor: "blue" - checked: true - } - RibbonCheckBox{ - text: "CheckBox" - textOnLeft: true - iconFilledBgColor: "red" - } - RowLayout{ - spacing: 30 - RibbonCheckBox{ - iconFilledBgColor:"orange" - tipText: "CheckBox" - showTooltip: true - checked: true - } - RibbonCheckBox{ - iconFilledBgColor:"purple" - } - } - } - } - } - RibbonTabGroup{ - width: button_layout.width + 30 - text: qsTr("Button") - showOpenExternal: true - RowLayout{ - id: button_layout - anchors.centerIn: parent - height: parent.height - spacing: 1 - ColumnLayout{ - spacing: 10 - RibbonButton{ - text:"Button" - iconSource: RibbonIcons.Accessibility - checkable: true - } - RibbonButton{ - text:"Button" - } - RibbonButton{ - text:"Button" - showTooltip: false - } - } - ColumnLayout{ - spacing: 10 - RibbonButton{ - text:"Button" - showBg:false - iconSource: RibbonIcons.Beaker - checkable: true - } - RibbonButton{ - text:"Button" - showBg:false - } - RibbonButton{ - text:"Button" - showBg:false - showTooltip: false - } - } - ColumnLayout{ - spacing: 10 - RibbonButton{ - id: btn_without_bg_and_label - showBg:false - iconSource: RibbonIcons.Badge - iconSourceFilled: RibbonIcons_Filled.Badge - checkable: true - tipText: "Button" - } - RibbonButton{ - showBg:false - iconSource: RibbonIcons.Clock - iconSourceFilled: RibbonIcons_Filled.Clock - tipText: "Button" - } - RibbonButton{ - showBg:false - iconSource: RibbonIcons.Board - iconSourceFilled: RibbonIcons_Filled.Board - checkable: true - tipText: "Button" - showTooltip: false - } - } - } - } - RibbonTabGroup{ - width: pushbutton_layout.width + 30 - text: qsTr("Push Button") - RowLayout{ - id: pushbutton_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - RibbonPushButton{ - text: qsTr("No Menu") - iconSource: RibbonIcons.AttachText - } - RibbonPushButton{ - id: push_btn_with_menu - text: qsTr("Menu") - iconSource: RibbonIcons.MeetNow - Action{ - text: "Test Item 1" - } - RibbonMenuSeparator{} - Action{ - text: "Test Item 2" - enabled: false - } - } - RibbonPushButton{ - text: qsTr("No Menu") - iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png" - iconSize: height-5 - } - RibbonPushButton{ - text: qsTr("Menu") - iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png" - Action{ - text: "Test Item 3" - } - RibbonMenuSeparator{} - Action{ - text: "Test Item 4" - enabled: false - } - } - } - } - RibbonTabGroup{ - width: radiobtn_layout.width + 30 - text: qsTr("Radio Button") - ColumnLayout{ - id: radiobtn_layout - anchors.centerIn: parent - height: parent.height - RibbonRadioButton{ - text: "Item A" - } - RibbonRadioButton{ - text: "Item B" - } - RibbonRadioButton{ - text: "Item C" - } - } - } - } - RibbonTabPage{ - title: qsTr("Input") - RibbonTabGroup{ - width: lineedit_layout.width + 30 - text: qsTr("Line Edit") - RowLayout{ - id: lineedit_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonLineEdit{ - } - RibbonLineEdit{ - showClearBtn:false - } - } - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonLineEdit{ - id: lineedit_with_icon - iconSource:RibbonIcons.Search - } - RibbonLineEdit{ - iconSource:RibbonIcons.Keyboard - showClearBtn:false - } - } - } - } - RibbonTabGroup{ - width: lineedit_layout.width + 30 - text: qsTr("Text Edit") - RowLayout{ - id: textedit_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 30 - Layout.fillHeight: true - RibbonTextEdit{ - maxHeight: 50 - } - RibbonTextEdit{ - maxHeight: 30 - showClearBtn:false - } - } - ColumnLayout{ - spacing: 30 - Layout.fillHeight: true - RibbonTextEdit{ - maxHeight: 50 - iconSource:RibbonIcons.Search - } - RibbonTextEdit{ - maxHeight: 30 - iconSource:RibbonIcons.Keyboard - showClearBtn:false - } - } - } - } - RibbonTabGroup{ - width: combobox_layout.width + 30 - text: qsTr("Combo Box") - RowLayout{ - id: combobox_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonComboBox{ - model: ListModel { - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - } - RibbonComboBox{ - editable: true - model: ListModel { - id: model - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - onAccepted: { - if (find(editText) === -1 && editText) - model.append({text: editText}) - } - } - } - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonComboBox{ - model: ListModel { - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - iconSource: RibbonIcons.Beaker - } - RibbonComboBox{ - editable: true - model: ListModel { - id: model_1 - ListElement { text: "Test Item 1" } - ListElement { text: "Test Item 2" } - ListElement { text: "Test Item 3" } - } - iconSource: RibbonIcons.Calendar - onAccepted: { - if (find(editText) === -1 && editText) - model_1.append({text: editText}) - } - } - } - } - } - RibbonTabGroup{ - width: spinbox_layout.width + 30 - text: qsTr("Spin Box") - showBorder: false - RowLayout{ - id: spinbox_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonSpinBox{ - width: 100 - } - RibbonSpinBox{ - id: spinbox - width: 80 - iconSource: RibbonIcons.DataPie - validator: DoubleValidator { - bottom: Math.min(spinbox.from, spinbox.to) - top: Math.max(spinbox.from, spinbox.to) - decimals: 2 - notation: DoubleValidator.StandardNotation - } - textFromValue: function(value, locale) { - return Number(value / 100).toLocaleString(locale, 'f', 2) - } - valueFromText: function(text, locale) { - return Math.round(Number.fromLocaleString(locale, text) * 100) - } - } - } - } - } - } - RibbonTabPage{ - title: qsTr("Progress") - RibbonTabGroup{ - width: progressbar_layout.width + 30 - text: qsTr("ProgressBar") - RowLayout{ - id: progressbar_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Top - } - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Left - } - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Right - } - RibbonProgressBar{ - barWidth: 100 - value: progressbar_slider.value / 100 - textLabelPosition: RibbonProgressBar.LabelPosition.Bottom - } - } - RibbonSlider{ - id: progressbar_slider - Layout.alignment: Qt.AlignHCenter - slideWidth: 40 - horizontal: false - showButton: false - value: 40 - } - ColumnLayout{ - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Top - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Left - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Right - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - textLabelPosition: RibbonProgressBar.LabelPosition.Bottom - } - } - ColumnLayout{ - RibbonProgressBar{ - barWidth: 100 - indeterminate: true - showText: false - } - RibbonProgressBar{ - barWidth: 100 - indeterminate: false - showText: false - value: progressbar_slider.value / 100 - } - } - } - } - } - RibbonTabPage{ - title: qsTr("Views") - RibbonTabGroup{ - width: message_list_view_layout.width + 30 - text: qsTr("MessageListView") - RowLayout{ - id: message_list_view_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - RibbonButton{ - text: qsTr('Open Message List View') - iconSource: RibbonIcons.Open - onClicked: { - Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml") - } - } - } - } - } - RibbonTabPage{ - title: qsTr("Others") - RibbonTabGroup{ - width: text_layout.width + 30 - text: qsTr("Text") - RowLayout{ - id: text_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonText{ - font.pixelSize: 13 - text: "Test Text" - } - RibbonText{ - font.pixelSize: 13 - text: "Test Text (Read Only)" - viewOnly: true - } - } - } - } - RibbonTabGroup{ - width: menu_layout.width + 30 - text: qsTr("Menu") - RowLayout{ - id: menu_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - RibbonButton{ - text: qsTr("Open Menu") - iconSource: RibbonIcons.Open - onClicked: menu.popup() - } - } - } - RibbonTabGroup{ - width: popup_layout.width + 30 - text: qsTr("Popup") - RowLayout{ - id: popup_layout - anchors.centerIn: parent - height: parent.height - spacing: 10 - ColumnLayout{ - spacing: 10 - Layout.fillHeight: true - RibbonButton{ - text: qsTr("Open Popup") - iconSource: RibbonIcons.Open - onClicked: popup.open() - } - RibbonButton{ - text: qsTr("Open Popup Dialog (Double Choices)") - iconSource: RibbonIcons.Open - onClicked: { - dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton - dialog.open() - } - } - RibbonButton{ - text: qsTr("Open Popup Dialog (Triple Choices)") - iconSource: RibbonIcons.Open - onClicked: { - dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton - dialog.open() - } - } - } - RibbonPopup{ - id: popup - height: 200 - width: height - target: windowItems - blurEnabled: true - targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) - } - RibbonPopupDialog{ - id: dialog - target: windowItems - blurEnabled: true - targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) - } - } - } - } } RibbonPaperView{ diff --git a/lib_source/CMakeLists.txt b/lib_source/CMakeLists.txt index 991020a..702723b 100644 --- a/lib_source/CMakeLists.txt +++ b/lib_source/CMakeLists.txt @@ -40,7 +40,7 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml - RibbonObject.qml RibbonProgressBar.qml) + RibbonObject.qml RibbonProgressBar.qml RibbonProgressRing.qml) set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/") diff --git a/lib_source/qml/Qt5/RibbonProgressRing.qml b/lib_source/qml/Qt5/RibbonProgressRing.qml new file mode 100644 index 0000000..e832a6c --- /dev/null +++ b/lib_source/qml/Qt5/RibbonProgressRing.qml @@ -0,0 +1,100 @@ +import QtQuick 2.15 +import RibbonUI 1.0 + +RibbonProgressBar { + id: control + barWidth: centerInTextLabel && showText ? Math.max(textLabel.contentWidth + ringWidth * 2 + textLabelMargin * 2, 50) : 50 + barHeight: barWidth + animationDurarion: 2000 + property real ringWidth: 6 + property bool centerInTextLabel: false + + QtObject{ + id: private_property + property var backup_anchors + property var backup_position + property real radius: control.barWidth/2-control.ringWidth/2 + } + + Connections{ + target: RibbonTheme + function onIsDarkModeChanged(){ + canvas.requestPaint() + } + } + + bar.background: Rectangle { + implicitWidth: barWidth + implicitHeight: barHeight + radius: control.width/2 + color:"transparent" + border.color: control.bgColor + border.width: control.ringWidth + } + + onIndeterminateChanged:{ + canvas.requestPaint() + } + + onVisualPositionChanged: canvas.requestPaint() + + bar.contentItem: Canvas { + id:canvas + implicitHeight: barHeight + implicitWidth: barWidth + antialiasing: true + renderTarget: Canvas.Image + property real startAngle: 0 + property real sweepAngle: 0 + SequentialAnimation on startAngle { + loops: Animation.Infinite + running: control.visible && control.indeterminate + PropertyAnimation { from: 0; to: 450; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + PropertyAnimation { from: 450; to: 1080; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + } + SequentialAnimation on sweepAngle { + loops: Animation.Infinite + running: control.visible && control.indeterminate + PropertyAnimation { from: 0; to: 180; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + PropertyAnimation { from: 180; to: 0; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + } + onStartAngleChanged: { + requestPaint() + } + onPaint: { + var ctx = canvas.getContext("2d") + ctx.clearRect(0, 0, canvas.width, canvas.height) + ctx.save() + ctx.lineWidth = control.ringWidth + ctx.strokeStyle = control.indicatorColor + ctx.lineCap = "round" + ctx.beginPath() + if(control.indeterminate){ + ctx.arc(width/2, height/2, private_property.radius , Math.PI * (startAngle - 90) / 180, Math.PI * (startAngle - 90 + sweepAngle) / 180) + }else{ + ctx.arc(width/2, height/2, private_property.radius , -0.5 * Math.PI , -0.5 * Math.PI + (control.indeterminate ? 0.0 : control.visualPosition) * 2 * Math.PI) + } + ctx.stroke() + ctx.closePath() + } + } + + onCenterInTextLabelChanged: { + if(centerInTextLabel){ + private_property.backup_anchors = textLabel.anchors + private_property.backup_position = textLabelPosition + textLabel.anchors.top = undefined + textLabel.anchors.left = undefined + textLabel.anchors.right = undefined + textLabel.anchors.bottom = undefined + textLabel.anchors.horizontalCenter = undefined + textLabel.anchors.verticalCenter = undefined + textLabel.anchors.centerIn = control + textLabelPosition = RibbonProgressBar.LabelPosition.None + } + else{ + textLabel.anchors = private_property.backup_anchors + textLabelPosition = private_property.backup_position + } + } +} diff --git a/lib_source/qml/Qt6/RibbonProgressRing.qml b/lib_source/qml/Qt6/RibbonProgressRing.qml new file mode 100644 index 0000000..e3c207c --- /dev/null +++ b/lib_source/qml/Qt6/RibbonProgressRing.qml @@ -0,0 +1,100 @@ +import QtQuick +import RibbonUI + +RibbonProgressBar { + id: control + barWidth: centerInTextLabel && showText ? Math.max(textLabel.contentWidth + ringWidth * 2 + textLabelMargin * 2, 50) : 50 + barHeight: barWidth + animationDurarion: 2000 + property real ringWidth: 6 + property bool centerInTextLabel: false + + QtObject{ + id: private_property + property var backup_anchors + property var backup_position + property real radius: control.barWidth/2-control.ringWidth/2 + } + + Connections{ + target: RibbonTheme + function onIsDarkModeChanged(){ + canvas.requestPaint() + } + } + + bar.background: Rectangle { + implicitWidth: barWidth + implicitHeight: barHeight + radius: control.width/2 + color:"transparent" + border.color: control.bgColor + border.width: control.ringWidth + } + + onIndeterminateChanged:{ + canvas.requestPaint() + } + + onVisualPositionChanged: canvas.requestPaint() + + bar.contentItem: Canvas { + id:canvas + implicitHeight: barHeight + implicitWidth: barWidth + antialiasing: true + renderTarget: Canvas.Image + property real startAngle: 0 + property real sweepAngle: 0 + SequentialAnimation on startAngle { + loops: Animation.Infinite + running: control.visible && control.indeterminate + PropertyAnimation { from: 0; to: 450; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + PropertyAnimation { from: 450; to: 1080; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + } + SequentialAnimation on sweepAngle { + loops: Animation.Infinite + running: control.visible && control.indeterminate + PropertyAnimation { from: 0; to: 180; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + PropertyAnimation { from: 180; to: 0; duration: control.animationDurarion/2; easing.type: Easing.OutSine } + } + onStartAngleChanged: { + requestPaint() + } + onPaint: { + var ctx = canvas.getContext("2d") + ctx.clearRect(0, 0, canvas.width, canvas.height) + ctx.save() + ctx.lineWidth = control.ringWidth + ctx.strokeStyle = control.indicatorColor + ctx.lineCap = "round" + ctx.beginPath() + if(control.indeterminate){ + ctx.arc(width/2, height/2, private_property.radius , Math.PI * (startAngle - 90) / 180, Math.PI * (startAngle - 90 + sweepAngle) / 180) + }else{ + ctx.arc(width/2, height/2, private_property.radius , -0.5 * Math.PI , -0.5 * Math.PI + (control.indeterminate ? 0.0 : control.visualPosition) * 2 * Math.PI) + } + ctx.stroke() + ctx.closePath() + } + } + + onCenterInTextLabelChanged: { + if(centerInTextLabel){ + private_property.backup_anchors = textLabel.anchors + private_property.backup_position = textLabelPosition + textLabel.anchors.top = undefined + textLabel.anchors.left = undefined + textLabel.anchors.right = undefined + textLabel.anchors.bottom = undefined + textLabel.anchors.horizontalCenter = undefined + textLabel.anchors.verticalCenter = undefined + textLabel.anchors.centerIn = control + textLabelPosition = RibbonProgressBar.LabelPosition.None + } + else{ + textLabel.anchors = private_property.backup_anchors + textLabelPosition = private_property.backup_position + } + } +}