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

RibbonMessageBarGroup,RibbonTabBar: Improve UI in the modernStyle.

This commit is contained in:
Mentalflow 2024-09-08 18:00:58 +08:00
parent 2a8a1816dd
commit 1bae138a81
Signed by: Mentalflow
GPG Key ID: 5AE68D4401A2EE71
4 changed files with 182 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
lib_source/qml/Qt5/RibbonMessageBarGroup.qml
View File

@ -9,17 +9,19 @@ RibbonBlur {
parent: Overlay.overlay parent: Overlay.overlay
implicitWidth: parent.width implicitWidth: parent.width
implicitHeight: folded ? barHeight : Window.window.viewItems.height implicitHeight: folded ? barHeight : Window.window.viewItems.height
maskColor: folded && !handler.visible ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) maskColor: folded ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
maskOpacity: 0 maskOpacity: 0
bottomLeftRadius: folded ? 0 : 5 bottomLeftRadius: folded ? 0 : 5
bottomRightRadius: bottomLeftRadius bottomRightRadius: bottomLeftRadius
enableEffect: handler.visible || !folded leftPadding: Window.window.tabBar && folded ? Window.window.tabBar.modernMargin : 0
rightPadding: leftPadding
enableEffect: !folded
readonly property alias folded: folded_btn.checked readonly property alias folded: folded_btn.checked
property int animationTime: 400 property int animationTime: 400
property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0 readonly property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
property real barHeight: folded ? currentMessageHeight + handler.height : 0 readonly property real barHeight: folded ? currentMessageHeight + handler.height : 0
property alias messageModel: messageModel property alias messageModel: messageModel
property real topMargin: RibbonTheme.modernStyle ? 5 : 0 property real topMargin: RibbonTheme.modernStyle && !folded ? 10 : 0
Behavior on implicitHeight { Behavior on implicitHeight {
NumberAnimation { NumberAnimation {
@ -46,22 +48,28 @@ RibbonBlur {
} }
} }
ListView{ RibbonRectangle{
id: message_list id: message_list_rect
cacheBuffer: Math.abs(message_list.height * 2)
interactive: !folded
clip: true
anchors{ anchors{
top: parent.top top: parent.top
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
height: control.implicitHeight - (folded ? handler.height : 0) height: control.implicitHeight - (folded ? handler.height : 0)
bottomLeftRadius: RibbonTheme.modernStyle && folded ? 10 : 0
bottomRightRadius: bottomLeftRadius
ListView{
id: message_list
cacheBuffer: Math.abs(message_list.height * 2)
interactive: !folded
clip: true
anchors.fill: parent
model: messageModel model: messageModel
delegate: Item{ delegate: Item{
id: item id: item
implicitHeight: bar.contentHeight + (control.folded ? 0 : 10) implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
implicitWidth: control.width implicitWidth: message_list.width
RibbonMessageBar{ RibbonMessageBar{
id: bar id: bar
anchors.centerIn: parent anchors.centerIn: parent
@ -137,7 +145,7 @@ RibbonBlur {
} }
} }
} }
}
HoverHandler{ HoverHandler{
id: hover id: hover
} }
@ -147,9 +155,11 @@ RibbonBlur {
x: message_list.x + (message_list.width - width) / 2 x: message_list.x + (message_list.width - width) / 2
y: message_list.y + message_list.height * (folded ? 1 : 0) y: message_list.y + message_list.height * (folded ? 1 : 0)
implicitHeight: folded ? 10 : 20 implicitHeight: folded ? 10 : 20
implicitWidth: parent.width implicitWidth: folded ? 100 : control.width
visible: hover.hovered && messageModel.count > 1 visible: hover.hovered && messageModel.count > 1
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.5) : Qt.rgba(1,1,1,0.5) bottomLeftRadius: folded ? 10 : 0
bottomRightRadius: bottomLeftRadius
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: control.animationTime duration: control.animationTime

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

@ -13,7 +13,6 @@ Item{
left: parent.left left: parent.left
right:parent.right right:parent.right
} }
clip: true
property bool folded: false property bool folded: false
property int lastIndex property int lastIndex
default property alias content: stack.contentData default property alias content: stack.contentData
@ -242,6 +241,7 @@ Item{
Rectangle { Rectangle {
id: bottom_border id: bottom_border
anchors.top: stack.bottom anchors.top: stack.bottom
anchors.topMargin: modernStyle && Window.window.messageBar && Window.window.messageBar.folded ? Window.window.messageBar.currentMessageHeight : 0
width: parent.width width: parent.width
height: 1 height: 1
color: modernStyle ? "transparent" : bgColor color: modernStyle ? "transparent" : bgColor

38
lib_source/qml/Qt6/RibbonMessageBarGroup.qml
View File

@ -9,17 +9,19 @@ RibbonBlur {
parent: Overlay.overlay parent: Overlay.overlay
implicitWidth: parent.width implicitWidth: parent.width
implicitHeight: folded ? barHeight : Window.window.viewItems.height implicitHeight: folded ? barHeight : Window.window.viewItems.height
maskColor: folded && !handler.visible ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) maskColor: folded ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
maskOpacity: 0 maskOpacity: 0
bottomLeftRadius: folded ? 0 : 5 bottomLeftRadius: folded ? 0 : 5
bottomRightRadius: bottomLeftRadius bottomRightRadius: bottomLeftRadius
enableEffect: handler.visible || !folded leftPadding: Window.window.tabBar && folded ? Window.window.tabBar.modernMargin : 0
rightPadding: leftPadding
enableEffect: !folded
readonly property alias folded: folded_btn.checked readonly property alias folded: folded_btn.checked
property int animationTime: 400 property int animationTime: 400
property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0 readonly property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
property real barHeight: folded ? currentMessageHeight + handler.height : 0 readonly property real barHeight: folded ? currentMessageHeight + handler.height : 0
property alias messageModel: messageModel property alias messageModel: messageModel
property real topMargin: RibbonTheme.modernStyle ? 5 : 0 property real topMargin: RibbonTheme.modernStyle && !folded ? 10 : 0
Behavior on implicitHeight { Behavior on implicitHeight {
NumberAnimation { NumberAnimation {
@ -46,22 +48,28 @@ RibbonBlur {
} }
} }
ListView{ RibbonRectangle{
id: message_list id: message_list_rect
cacheBuffer: Math.abs(message_list.height * 2)
interactive: !folded
clip: true
anchors{ anchors{
top: parent.top top: parent.top
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
height: control.implicitHeight - (folded ? handler.height : 0) height: control.implicitHeight - (folded ? handler.height : 0)
bottomLeftRadius: RibbonTheme.modernStyle && folded ? 10 : 0
bottomRightRadius: bottomLeftRadius
ListView{
id: message_list
cacheBuffer: Math.abs(message_list.height * 2)
interactive: !folded
clip: true
anchors.fill: parent
model: messageModel model: messageModel
delegate: Item{ delegate: Item{
id: item id: item
implicitHeight: bar.contentHeight + (control.folded ? 0 : 10) implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
implicitWidth: control.width implicitWidth: message_list.width
RibbonMessageBar{ RibbonMessageBar{
id: bar id: bar
anchors.centerIn: parent anchors.centerIn: parent
@ -137,7 +145,7 @@ RibbonBlur {
} }
} }
} }
}
HoverHandler{ HoverHandler{
id: hover id: hover
} }
@ -147,9 +155,11 @@ RibbonBlur {
x: message_list.x + (message_list.width - width) / 2 x: message_list.x + (message_list.width - width) / 2
y: message_list.y + message_list.height * (folded ? 1 : 0) y: message_list.y + message_list.height * (folded ? 1 : 0)
implicitHeight: folded ? 10 : 20 implicitHeight: folded ? 10 : 20
implicitWidth: parent.width implicitWidth: folded ? 100 : control.width
visible: hover.hovered && messageModel.count > 1 visible: hover.hovered && messageModel.count > 1
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.5) : Qt.rgba(1,1,1,0.5) bottomLeftRadius: folded ? 10 : 0
bottomRightRadius: bottomLeftRadius
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: control.animationTime duration: control.animationTime

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

@ -13,7 +13,6 @@ Item{
left: parent.left left: parent.left
right:parent.right right:parent.right
} }
clip: true
property bool folded: false property bool folded: false
property int lastIndex property int lastIndex
default property alias content: stack.contentData default property alias content: stack.contentData
@ -242,6 +241,7 @@ Item{
Rectangle { Rectangle {
id: bottom_border id: bottom_border
anchors.top: stack.bottom anchors.top: stack.bottom
anchors.topMargin: modernStyle && Window.window.messageBar && Window.window.messageBar.folded ? Window.window.messageBar.currentMessageHeight : 0
width: parent.width width: parent.width
height: 1 height: 1
color: modernStyle ? "transparent" : bgColor color: modernStyle ? "transparent" : bgColor