Compare commits

...

3 Commits

7 changed files with 205 additions and 165 deletions

View File

@ -1,6 +1,6 @@
cmake_minimum_required(VERSION 3.21)
project(RibbonUI_Project VERSION 1.1.0 LANGUAGES CXX)
project(RibbonUI_Project VERSION 1.1.1 LANGUAGES CXX)
# Find Qt Package
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)

View File

@ -9,17 +9,19 @@ RibbonBlur {
parent: Overlay.overlay
implicitWidth: parent.width
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
bottomLeftRadius: folded ? 0 : 5
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
property int animationTime: 400
property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
property real barHeight: folded ? currentMessageHeight + handler.height : 0
readonly property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
readonly property real barHeight: folded ? currentMessageHeight + handler.height : 0
property alias messageModel: messageModel
property real topMargin: RibbonTheme.modernStyle ? 5 : 0
property real topMargin: RibbonTheme.modernStyle && !folded ? 10 : 0
Behavior on implicitHeight {
NumberAnimation {
@ -46,98 +48,104 @@ RibbonBlur {
}
}
ListView{
id: message_list
cacheBuffer: Math.abs(message_list.height * 2)
interactive: !folded
clip: true
RibbonRectangle{
id: message_list_rect
anchors{
top: parent.top
left: parent.left
right: parent.right
}
color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
height: control.implicitHeight - (folded ? handler.height : 0)
model: messageModel
delegate: Item{
id: item
implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
implicitWidth: control.width
RibbonMessageBar{
id: bar
anchors.centerIn: parent
property bool isCurrentItem: item === message_list.currentItem
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
delegate: Item{
id: item
implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
implicitWidth: message_list.width
RibbonMessageBar{
id: bar
anchors.centerIn: parent
property bool isCurrentItem: item === message_list.currentItem
text: model.text
externalURL: model.externalURL ? model.externalURL : ""
dismissAction: ()=>messageModel.remove(index)
Component.onCompleted: {
if(model.disableMultiline)
isMultiline = !model.disableMultiline
if(model.type)
type = model.type
if(model.rounded)
rounded = model.rounded
if(model.externalURLLabel)
externalURLLabel = model.externalURLLabel
if(model.dismissLabel)
dismissLabel = model.dismissLabel
if(model.overflowLabel)
overflowLabel = model.overflowLabel
if(model.actionALabel){
actionALabel = model.actionALabel
showActionA = true
if(model.actionA){
actionA = model.actionA
}else{
actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
text: model.text
externalURL: model.externalURL ? model.externalURL : ""
dismissAction: ()=>messageModel.remove(index)
Component.onCompleted: {
if(model.disableMultiline)
isMultiline = !model.disableMultiline
if(model.type)
type = model.type
if(model.rounded)
rounded = model.rounded
if(model.externalURLLabel)
externalURLLabel = model.externalURLLabel
if(model.dismissLabel)
dismissLabel = model.dismissLabel
if(model.overflowLabel)
overflowLabel = model.overflowLabel
if(model.actionALabel){
actionALabel = model.actionALabel
showActionA = true
if(model.actionA){
actionA = model.actionA
}else{
actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
}
}
}
if(model.actionBLabel){
actionBLabel = model.actionBLabel
showActionB = true
if(model.actionB){
actionB = model.actionB
}else{
actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
if(model.actionBLabel){
actionBLabel = model.actionBLabel
showActionB = true
if(model.actionB){
actionB = model.actionB
}else{
actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
}
}
}
}
}
}
verticalLayoutDirection: ListView.BottomToTop
verticalLayoutDirection: ListView.BottomToTop
add: Transition {
NumberAnimation {
properties: "y"
from: -message_list.height
duration: control.animationTime
add: Transition {
NumberAnimation {
properties: "y"
from: -message_list.height
duration: control.animationTime
}
}
}
remove: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: control.animationTime
remove: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: control.animationTime
}
}
}
ScrollBar.vertical: RibbonScrollBar {
anchors.right: message_list.right
anchors.rightMargin: 2
interactive: !folded
}
onCurrentItemChanged: {
auto_scroll_btn_timer.restart()
}
Behavior on height {
NumberAnimation {
duration: control.animationTime
easing.type: Easing.OutSine
ScrollBar.vertical: RibbonScrollBar {
anchors.right: message_list.right
anchors.rightMargin: 2
interactive: !folded
}
onCurrentItemChanged: {
auto_scroll_btn_timer.restart()
}
Behavior on height {
NumberAnimation {
duration: control.animationTime
easing.type: Easing.OutSine
}
}
}
}
HoverHandler{
id: hover
}
@ -147,9 +155,11 @@ RibbonBlur {
x: message_list.x + (message_list.width - width) / 2
y: message_list.y + message_list.height * (folded ? 1 : 0)
implicitHeight: folded ? 10 : 20
implicitWidth: parent.width
implicitWidth: folded ? 100 : control.width
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 {
ColorAnimation {
duration: control.animationTime

View File

@ -11,6 +11,10 @@ Item {
property int topRightRadius: radius
property int bottomLeftRadius: radius
property int bottomRightRadius: radius
property int topPadding: 0
property int leftPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
property real borderWidth: 0
property string borderColor: "transparent"
default property alias contentItem: container.data
@ -65,7 +69,13 @@ Item {
Item{
id: container
anchors.fill: parent
anchors{
fill: parent
topMargin: control.topPadding
bottomMargin: control.bottomPadding
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
clip: true
layer.enabled: true
layer.effect: OpacityMask {

View File

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

View File

@ -9,17 +9,19 @@ RibbonBlur {
parent: Overlay.overlay
implicitWidth: parent.width
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
bottomLeftRadius: folded ? 0 : 5
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
property int animationTime: 400
property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
property real barHeight: folded ? currentMessageHeight + handler.height : 0
readonly property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
readonly property real barHeight: folded ? currentMessageHeight + handler.height : 0
property alias messageModel: messageModel
property real topMargin: RibbonTheme.modernStyle ? 5 : 0
property real topMargin: RibbonTheme.modernStyle && !folded ? 10 : 0
Behavior on implicitHeight {
NumberAnimation {
@ -46,98 +48,104 @@ RibbonBlur {
}
}
ListView{
id: message_list
cacheBuffer: Math.abs(message_list.height * 2)
interactive: !folded
clip: true
RibbonRectangle{
id: message_list_rect
anchors{
top: parent.top
left: parent.left
right: parent.right
}
color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
height: control.implicitHeight - (folded ? handler.height : 0)
model: messageModel
delegate: Item{
id: item
implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
implicitWidth: control.width
RibbonMessageBar{
id: bar
anchors.centerIn: parent
property bool isCurrentItem: item === message_list.currentItem
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
delegate: Item{
id: item
implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
implicitWidth: message_list.width
RibbonMessageBar{
id: bar
anchors.centerIn: parent
property bool isCurrentItem: item === message_list.currentItem
text: model.text
externalURL: model.externalURL ? model.externalURL : ""
dismissAction: ()=>messageModel.remove(index)
Component.onCompleted: {
if(model.disableMultiline)
isMultiline = !model.disableMultiline
if(model.type)
type = model.type
if(model.rounded)
rounded = model.rounded
if(model.externalURLLabel)
externalURLLabel = model.externalURLLabel
if(model.dismissLabel)
dismissLabel = model.dismissLabel
if(model.overflowLabel)
overflowLabel = model.overflowLabel
if(model.actionALabel){
actionALabel = model.actionALabel
showActionA = true
if(model.actionA){
actionA = model.actionA
}else{
actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
text: model.text
externalURL: model.externalURL ? model.externalURL : ""
dismissAction: ()=>messageModel.remove(index)
Component.onCompleted: {
if(model.disableMultiline)
isMultiline = !model.disableMultiline
if(model.type)
type = model.type
if(model.rounded)
rounded = model.rounded
if(model.externalURLLabel)
externalURLLabel = model.externalURLLabel
if(model.dismissLabel)
dismissLabel = model.dismissLabel
if(model.overflowLabel)
overflowLabel = model.overflowLabel
if(model.actionALabel){
actionALabel = model.actionALabel
showActionA = true
if(model.actionA){
actionA = model.actionA
}else{
actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
}
}
}
if(model.actionBLabel){
actionBLabel = model.actionBLabel
showActionB = true
if(model.actionB){
actionB = model.actionB
}else{
actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
if(model.actionBLabel){
actionBLabel = model.actionBLabel
showActionB = true
if(model.actionB){
actionB = model.actionB
}else{
actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
}
}
}
}
}
}
verticalLayoutDirection: ListView.BottomToTop
verticalLayoutDirection: ListView.BottomToTop
add: Transition {
NumberAnimation {
properties: "y"
from: -message_list.height
duration: control.animationTime
add: Transition {
NumberAnimation {
properties: "y"
from: -message_list.height
duration: control.animationTime
}
}
}
remove: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: control.animationTime
remove: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: control.animationTime
}
}
}
ScrollBar.vertical: RibbonScrollBar {
anchors.right: message_list.right
anchors.rightMargin: 2
interactive: !folded
}
onCurrentItemChanged: {
auto_scroll_btn_timer.restart()
}
Behavior on height {
NumberAnimation {
duration: control.animationTime
easing.type: Easing.OutSine
ScrollBar.vertical: RibbonScrollBar {
anchors.right: message_list.right
anchors.rightMargin: 2
interactive: !folded
}
onCurrentItemChanged: {
auto_scroll_btn_timer.restart()
}
Behavior on height {
NumberAnimation {
duration: control.animationTime
easing.type: Easing.OutSine
}
}
}
}
HoverHandler{
id: hover
}
@ -147,9 +155,11 @@ RibbonBlur {
x: message_list.x + (message_list.width - width) / 2
y: message_list.y + message_list.height * (folded ? 1 : 0)
implicitHeight: folded ? 10 : 20
implicitWidth: parent.width
implicitWidth: folded ? 100 : control.width
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 {
ColorAnimation {
duration: control.animationTime

View File

@ -11,6 +11,10 @@ Item {
property int topRightRadius: radius
property int bottomLeftRadius: radius
property int bottomRightRadius: radius
property int topPadding: 0
property int leftPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
property real borderWidth: 0
property string borderColor: "transparent"
default property alias contentItem: container.data
@ -65,7 +69,13 @@ Item {
Item{
id: container
anchors.fill: parent
anchors{
fill: parent
topMargin: control.topPadding
bottomMargin: control.bottomPadding
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
clip: true
layer.enabled: true
layer.effect: OpacityMask {

View File

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