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

RibbonView,RibbonTabBar,RibbonBottomBar: blur effect migrated.

This commit is contained in:
Mentalflow 2024-06-23 02:04:27 +08:00
parent 6cc04fbcb5
commit c94208e8e6
Signed by: Mentalflow
GPG Key ID: 5AE68D4401A2EE71
14 changed files with 139 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/qml/Qt5/example.qml
View File

@ -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{

6
example/qml/Qt6/example.qml
View File

@ -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{

11
lib_source/qml/Qt5/RibbonBlur.qml
View File

@ -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

25
lib_source/qml/Qt5/RibbonBottomBar.qml
View File

@ -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
}

3
lib_source/qml/Qt5/RibbonPopup.qml
View File

@ -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

30
lib_source/qml/Qt5/RibbonTabBar.qml
View File

@ -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)

33
lib_source/qml/Qt5/RibbonView.qml
View File

@ -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
}

3
lib_source/qml/Qt5/RibbonWindow.qml
View File

@ -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

11
lib_source/qml/Qt6/RibbonBlur.qml
View File

@ -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

25
lib_source/qml/Qt6/RibbonBottomBar.qml
View File

@ -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
}

1
lib_source/qml/Qt6/RibbonScrollIndicator.qml
View File

@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import RibbonUI
ScrollIndicator {

31
lib_source/qml/Qt6/RibbonTabBar.qml
View File

@ -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)

33
lib_source/qml/Qt6/RibbonView.qml
View File

@ -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
}

4
lib_source/qml/Qt6/RibbonWindow.qml
View File

@ -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