diff --git a/example/qml/Qt5/example.qml b/example/qml/Qt5/example.qml index d04a8a3..041d4d2 100644 --- a/example/qml/Qt5/example.qml +++ b/example/qml/Qt5/example.qml @@ -652,8 +652,6 @@ RibbonWindow { RibbonPaperView{ id: view anchors.fill: parent - topPadding: tab_bar.height - bottomPadding: bottom_bar.height pageWidth: (page_slider.value / 100.0) * width spacing: 0 ColumnLayout{ diff --git a/example/qml/Qt6/example.qml b/example/qml/Qt6/example.qml index 4ed523e..df9374b 100644 --- a/example/qml/Qt6/example.qml +++ b/example/qml/Qt6/example.qml @@ -1,7 +1,7 @@ import QtQuick -import QtQuick.Window -import QtQuick.Layouts import QtQuick.Controls +import QtQuick.Layouts +import QtQuick.Window import RibbonUI RibbonWindow { @@ -652,8 +652,6 @@ RibbonWindow { RibbonPaperView{ id: view anchors.fill: parent - topPadding: tab_bar.height - bottomPadding: bottom_bar.height pageWidth: (page_slider.value / 100.0) * width spacing: 0 ColumnLayout{ diff --git a/lib_source/qml/Qt5/RibbonBlur.qml b/lib_source/qml/Qt5/RibbonBlur.qml index c93946e..b21f7fb 100644 --- a/lib_source/qml/Qt5/RibbonBlur.qml +++ b/lib_source/qml/Qt5/RibbonBlur.qml @@ -5,6 +5,10 @@ import RibbonUI 1.0 Item { id: control property int radius: 0 + property int topLeftRadius: radius + property int bottomLeftRadius: radius + property int topRightRadius: radius + property int bottomRightRadius: radius property int blurRadius: 32 property alias target: effect.sourceItem property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height) @@ -17,7 +21,6 @@ Item { id: effect anchors.fill: parent sourceRect: control.targetRect - sourceItem: control.target visible: false } @@ -31,10 +34,14 @@ Item { visible: false } - Rectangle{ + RibbonRectangle{ anchors.fill: parent color: control.useSolidBg ? control.maskColor : 'transparent' radius: control.radius + topLeftRadius: control.topLeftRadius + bottomLeftRadius: control.bottomLeftRadius + topRightRadius: control.topRightRadius + bottomRightRadius: control.bottomRightRadius OpacityMask { anchors.fill: parent source: blur diff --git a/lib_source/qml/Qt5/RibbonBottomBar.qml b/lib_source/qml/Qt5/RibbonBottomBar.qml index 9e5ef53..9281b66 100644 --- a/lib_source/qml/Qt5/RibbonBottomBar.qml +++ b/lib_source/qml/Qt5/RibbonBottomBar.qml @@ -1,5 +1,6 @@ import QtQuick 2.15 import QtQuick.Layouts 1.11 +import QtQuick.Window 2.15 import RibbonUI 1.0 Item { @@ -13,7 +14,8 @@ Item { property bool modernStyle: RibbonTheme.modernStyle property bool isDarkMode: RibbonTheme.isDarkMode property bool showVersion: true - property real bgOpacity: 0.8 + property real bgOpacity: blurEnabled ? 0.8 : 1 + property bool blurEnabled: typeof Window.window.viewItems !== "undefined" anchors{ left: parent.left @@ -21,6 +23,25 @@ Item { bottom: parent.bottom } + RibbonBlur{ + id: blur + anchors.fill: parent + maskColor: modernStyle ? isDarkMode ? "#141414" : "#F5F5F5" : isDarkMode ? "#3D3D3D" : "#D9D9D9" + maskOpacity: bgOpacity + useSolidBg: true + clip: true + target: Window.window.viewItems + targetRect: Qt.rect(x, Window.window.viewItems.y + Window.window.viewItems.height, width, height) + bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10 + bottomRightRadius: bottomLeftRadius + Behavior on maskColor { + ColorAnimation { + duration: 60 + easing.type: Easing.OutSine + } + } + } + Rectangle{ visible: !modernStyle color: "#3D3D3D" @@ -84,4 +105,6 @@ Item { onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI") } } + + Component.onCompleted: Window.window.bottomBar = root } diff --git a/lib_source/qml/Qt5/RibbonPopup.qml b/lib_source/qml/Qt5/RibbonPopup.qml index d108898..9ad8644 100644 --- a/lib_source/qml/Qt5/RibbonPopup.qml +++ b/lib_source/qml/Qt5/RibbonPopup.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 -import QtQuick.Controls 2.15 import QtQuick.Layouts 1.11 +import QtQuick.Controls 2.15 +import QtQuick.Window 2.15 import RibbonUI 1.0 import QtGraphicalEffects 1.0 diff --git a/lib_source/qml/Qt5/RibbonTabBar.qml b/lib_source/qml/Qt5/RibbonTabBar.qml index 0eadc08..f6aafba 100644 --- a/lib_source/qml/Qt5/RibbonTabBar.qml +++ b/lib_source/qml/Qt5/RibbonTabBar.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.11 +import QtQuick.Window 2.15 import QtGraphicalEffects 1.0 import RibbonUI 1.0 @@ -20,10 +21,12 @@ Item{ property bool modernStyle: RibbonTheme.modernStyle property bool isDarkMode: RibbonTheme.isDarkMode property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3" - property real bgOpacity: 0.8 + property real bgOpacity: blurEnabled ? 0.8 : 1 property string borderColor: isDarkMode ? "black" : "#CCCCCC" property bool showSettingsBtn: true property alias count: bar.count + property bool blurEnabled: typeof Window.window.viewItems !== "undefined" + property real modernMargin: modernStyle ? 10 : 0 signal settingsBtnClicked() @@ -56,21 +59,25 @@ Item{ top: modernStyle ? bar_view.bottom : top_border.bottom left: parent.left right: parent.right - bottom:bottom_border.top - topMargin: modernStyle ? 10 :0 - leftMargin: modernStyle ? 10 :0 - rightMargin: modernStyle ? 10 :0 - bottomMargin: modernStyle ? 10 :0 + bottom: bottom_border.top + topMargin: modernMargin + leftMargin: anchors.topMargin + rightMargin: anchors.topMargin + bottomMargin: anchors.topMargin } clip: true - opacity:bgOpacity - Rectangle{ + RibbonBlur{ + id: blur anchors.fill: parent - color: bgColor - opacity:bgOpacity + maskColor: bgColor + maskOpacity: bgOpacity + useSolidBg: true radius: modernStyle ? 10 :0 - Behavior on color { + clip: true + target: Window.window.viewItems + targetRect: mapToItem(Window.window.viewItems, blur.x, blur.y, width, height) + Behavior on maskColor { ColorAnimation { duration: 60 easing.type: Easing.OutSine @@ -278,6 +285,7 @@ Item{ onTriggered: folded = false } + Component.onCompleted: Window.window.tabBar = root //onModern_styleChanged: refresh() function addPage(content, is_highlight) diff --git a/lib_source/qml/Qt5/RibbonView.qml b/lib_source/qml/Qt5/RibbonView.qml index efbfa1e..c2d8da0 100644 --- a/lib_source/qml/Qt5/RibbonView.qml +++ b/lib_source/qml/Qt5/RibbonView.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.11 +import QtQuick.Window 2.15 import QtGraphicalEffects 1.0 import RibbonUI 1.0 @@ -10,8 +11,6 @@ Item { property bool modernStyle: RibbonTheme.modernStyle property bool isDarkMode: RibbonTheme.isDarkMode property int spacing: 5 - property int topPadding: 0 - property int bottomPadding: 0 property alias bgColor: bg.color property alias bgVisible: bg.visible z:-2 @@ -25,27 +24,21 @@ Item { visible: !modernStyle } - RibbonBlur{ - id: top_mask + Item{ + id: top_border anchors{ left: parent.left right: parent.right top: parent.top } - height: Math.abs(topPadding) - target: container - maskOpacity: 0 - visible: topPadding - clip: true - targetRect: Qt.rect(x,y-topPadding,width,height) - useSolidBg: false + height: Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0 } Item{ id: clipper anchors.horizontalCenter: parent.horizontalCenter - anchors.top:top_mask.bottom - implicitHeight: parent.height - Math.abs(topPadding) - Math.abs(bottomPadding) + anchors.top: top_border.bottom + implicitHeight: parent.height - Math.abs(top_border.height) - Math.abs(bottom_border.height) implicitWidth: parent.width clip: true ColumnLayout{ @@ -59,19 +52,15 @@ Item { } } - RibbonBlur{ - id: bottom_mask + Item{ + id: bottom_border anchors{ left: parent.left right: parent.right bottom: parent.bottom } - height: Math.abs(bottomPadding) - target: container - maskOpacity: 0 - visible: bottomPadding - clip: true - targetRect: Qt.rect(x,y-topPadding,width,height) - useSolidBg: false + height: Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0 } + + Component.onCompleted: Window.window.viewItems = container } diff --git a/lib_source/qml/Qt5/RibbonWindow.qml b/lib_source/qml/Qt5/RibbonWindow.qml index 832a3fc..f60cc92 100644 --- a/lib_source/qml/Qt5/RibbonWindow.qml +++ b/lib_source/qml/Qt5/RibbonWindow.qml @@ -19,6 +19,9 @@ Window { property bool comfirmedQuit: false property bool blurBehindWindow: true property int windowsTopFix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug + property var viewItems + property var tabBar + property var bottomBar readonly property int borderWidth: border_rect.border.width readonly property int borderRadius: border_rect.radius visible: false diff --git a/lib_source/qml/Qt6/RibbonBlur.qml b/lib_source/qml/Qt6/RibbonBlur.qml index 8425422..b5614b6 100644 --- a/lib_source/qml/Qt6/RibbonBlur.qml +++ b/lib_source/qml/Qt6/RibbonBlur.qml @@ -5,6 +5,10 @@ import RibbonUI Item { id: control property int radius: 0 + property int topLeftRadius: radius + property int bottomLeftRadius: radius + property int topRightRadius: radius + property int bottomRightRadius: radius property int blurRadius: 32 property alias target: effect.sourceItem property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height) @@ -17,7 +21,6 @@ Item { id: effect anchors.fill: parent sourceRect: control.targetRect - sourceItem: control.target visible: false } @@ -31,10 +34,14 @@ Item { visible: false } - Rectangle{ + RibbonRectangle{ anchors.fill: parent color: control.useSolidBg ? control.maskColor : 'transparent' radius: control.radius + topLeftRadius: control.topLeftRadius + bottomLeftRadius: control.bottomLeftRadius + topRightRadius: control.topRightRadius + bottomRightRadius: control.bottomRightRadius OpacityMask { anchors.fill: parent source: blur diff --git a/lib_source/qml/Qt6/RibbonBottomBar.qml b/lib_source/qml/Qt6/RibbonBottomBar.qml index 5be7768..a55b31f 100644 --- a/lib_source/qml/Qt6/RibbonBottomBar.qml +++ b/lib_source/qml/Qt6/RibbonBottomBar.qml @@ -1,5 +1,6 @@ import QtQuick import QtQuick.Layouts +import QtQuick.Window import RibbonUI Item { @@ -13,7 +14,8 @@ Item { property bool modernStyle: RibbonTheme.modernStyle property bool isDarkMode: RibbonTheme.isDarkMode property bool showVersion: true - property real bgOpacity: 0.8 + property real bgOpacity: blurEnabled ? 0.8 : 1 + property bool blurEnabled: typeof Window.window.viewItems !== "undefined" anchors{ left: parent.left @@ -21,6 +23,25 @@ Item { bottom: parent.bottom } + RibbonBlur{ + id: blur + anchors.fill: parent + maskColor: modernStyle ? isDarkMode ? "#141414" : "#F5F5F5" : isDarkMode ? "#3D3D3D" : "#D9D9D9" + maskOpacity: bgOpacity + useSolidBg: true + clip: true + target: Window.window.viewItems + targetRect: Qt.rect(x, Window.window.viewItems.y + Window.window.viewItems.height, width, height) + bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10 + bottomRightRadius: bottomLeftRadius + Behavior on maskColor { + ColorAnimation { + duration: 60 + easing.type: Easing.OutSine + } + } + } + Rectangle{ visible: !modernStyle color: "#3D3D3D" @@ -84,4 +105,6 @@ Item { onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI") } } + + Component.onCompleted: Window.window.bottomBar = root } diff --git a/lib_source/qml/Qt6/RibbonScrollIndicator.qml b/lib_source/qml/Qt6/RibbonScrollIndicator.qml index 985a562..805a965 100644 --- a/lib_source/qml/Qt6/RibbonScrollIndicator.qml +++ b/lib_source/qml/Qt6/RibbonScrollIndicator.qml @@ -1,5 +1,6 @@ import QtQuick import QtQuick.Controls +import QtQuick.Layouts import RibbonUI ScrollIndicator { diff --git a/lib_source/qml/Qt6/RibbonTabBar.qml b/lib_source/qml/Qt6/RibbonTabBar.qml index 072fca9..910b72c 100644 --- a/lib_source/qml/Qt6/RibbonTabBar.qml +++ b/lib_source/qml/Qt6/RibbonTabBar.qml @@ -1,6 +1,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Window import Qt5Compat.GraphicalEffects import RibbonUI @@ -20,10 +21,12 @@ Item{ property bool modernStyle: RibbonTheme.modernStyle property bool isDarkMode: RibbonTheme.isDarkMode property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3" - property real bgOpacity: 0.8 + property real bgOpacity: blurEnabled ? 0.8 : 1 property string borderColor: isDarkMode ? "black" : "#CCCCCC" property bool showSettingsBtn: true property alias count: bar.count + property bool blurEnabled: typeof Window.window.viewItems !== "undefined" + property real modernMargin: modernStyle ? 10 : 0 signal settingsBtnClicked() @@ -56,21 +59,25 @@ Item{ top: modernStyle ? bar_view.bottom : top_border.bottom left: parent.left right: parent.right - bottom:bottom_border.top - topMargin: modernStyle ? 10 :0 - leftMargin: modernStyle ? 10 :0 - rightMargin: modernStyle ? 10 :0 - bottomMargin: modernStyle ? 10 :0 + bottom: bottom_border.top + topMargin: modernMargin + leftMargin: anchors.topMargin + rightMargin: anchors.topMargin + bottomMargin: anchors.topMargin } clip: true - opacity:bgOpacity - Rectangle{ + RibbonBlur{ + id: blur anchors.fill: parent - color: bgColor - opacity:bgOpacity + maskColor: bgColor + maskOpacity: bgOpacity + useSolidBg: true radius: modernStyle ? 10 :0 - Behavior on color { + clip: true + target: Window.window.viewItems + targetRect: mapToItem(Window.window.viewItems, blur.x, blur.y, width, height) + Behavior on maskColor { ColorAnimation { duration: 60 easing.type: Easing.OutSine @@ -278,6 +285,8 @@ Item{ onTriggered: folded = false } + Component.onCompleted: Window.window.tabBar = root + //onModern_styleChanged: refresh() function addPage(content, is_highlight) diff --git a/lib_source/qml/Qt6/RibbonView.qml b/lib_source/qml/Qt6/RibbonView.qml index c65fac0..0a28452 100644 --- a/lib_source/qml/Qt6/RibbonView.qml +++ b/lib_source/qml/Qt6/RibbonView.qml @@ -1,6 +1,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Window import Qt5Compat.GraphicalEffects import RibbonUI @@ -10,8 +11,6 @@ Item { property bool modernStyle: RibbonTheme.modernStyle property bool isDarkMode: RibbonTheme.isDarkMode property int spacing: 5 - property int topPadding: 0 - property int bottomPadding: 0 property alias bgColor: bg.color property alias bgVisible: bg.visible z:-2 @@ -25,27 +24,21 @@ Item { visible: !modernStyle } - RibbonBlur{ - id: top_mask + Item{ + id: top_border anchors{ left: parent.left right: parent.right top: parent.top } - height: Math.abs(topPadding) - target: container - maskOpacity: 0 - visible: topPadding - clip: true - targetRect: Qt.rect(x,y-topPadding,width,height) - useSolidBg: false + height: Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0 } Item{ id: clipper anchors.horizontalCenter: parent.horizontalCenter - anchors.top:top_mask.bottom - implicitHeight: parent.height - Math.abs(topPadding) - Math.abs(bottomPadding) + anchors.top: top_border.bottom + implicitHeight: parent.height - Math.abs(top_border.height) - Math.abs(bottom_border.height) implicitWidth: parent.width clip: true ColumnLayout{ @@ -59,19 +52,15 @@ Item { } } - RibbonBlur{ - id: bottom_mask + Item{ + id: bottom_border anchors{ left: parent.left right: parent.right bottom: parent.bottom } - height: Math.abs(bottomPadding) - target: container - maskOpacity: 0 - visible: bottomPadding - clip: true - targetRect: Qt.rect(x,y-topPadding,width,height) - useSolidBg: false + height: Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0 } + + Component.onCompleted: Window.window.viewItems = container } diff --git a/lib_source/qml/Qt6/RibbonWindow.qml b/lib_source/qml/Qt6/RibbonWindow.qml index 1121d85..f0e5728 100644 --- a/lib_source/qml/Qt6/RibbonWindow.qml +++ b/lib_source/qml/Qt6/RibbonWindow.qml @@ -1,5 +1,6 @@ import QtQuick import RibbonUI +import QtQuick.Window import QWindowKit Window { @@ -18,6 +19,9 @@ Window { property bool comfirmedQuit: false property bool blurBehindWindow: true property int windowsTopFix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug + property var viewItems + property var tabBar + property var bottomBar readonly property int borderWidth: border_rect.border.width readonly property int borderRadius: border_rect.radius visible: false